@charset "UTF-8";

@font-face {
    font-family: web-icon;
    font-display: swap;
    src: url(web-icon.CrwMb9Z3.eot);
    src: url(web-icon.CrwMb9Z3.eot#iefix) format("embedded-opentype"), url(web-icon.Dng1ppRj.woff2) format("woff2"), url(web-icon.DSFrCBZ8.woff) format("woff"), url(web-icon.DzTW7Q3K.ttf) format("truetype"), url(web-icon.D_ahvROU.svg#web-icon) format("svg")
}

[class^=web-icon-],
[class*=" web-icon-"] {
    font-family: web-icon !important;
    font-size: 20px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.web-icon-apple:before {
    content: ""
}

.web-icon-appwrite:before {
    content: ""
}

.web-icon-arrow-down:before {
    content: ""
}

.web-icon-arrow-ext-link:before {
    content: ""
}

.web-icon-arrow-left:before {
    content: ""
}

.web-icon-arrow-right:before {
    content: ""
}

.web-icon-arrow-up:before {
    content: ""
}

.web-icon-calendar:before {
    content: ""
}

.web-icon-check:before {
    content: ""
}

.web-icon-chevron-down:before {
    content: ""
}

.web-icon-chevron-left:before {
    content: ""
}

.web-icon-chevron-right:before {
    content: ""
}

.web-icon-chevron-up:before {
    content: ""
}

.web-icon-close:before {
    content: ""
}

.web-icon-command:before {
    content: ""
}

.web-icon-copy:before {
    content: ""
}

.web-icon-dark:before {
    content: ""
}

.web-icon-discord:before {
    content: ""
}

.web-icon-divider-vertical:before {
    content: ""
}

.web-icon-download:before {
    content: ""
}

.web-icon-ext-link:before {
    content: ""
}

.web-icon-firebase:before {
    content: ""
}

.web-icon-github:before {
    content: ""
}

.web-icon-google:before {
    content: ""
}

.web-icon-hamburger-menu:before {
    content: ""
}

.web-icon-light:before {
    content: ""
}

.web-icon-linkedin:before {
    content: ""
}

.web-icon-location:before {
    content: ""
}

.web-icon-logout-left:before {
    content: ""
}

.web-icon-logout-right:before {
    content: ""
}

.web-icon-mailgun:before {
    content: ""
}

.web-icon-message:before {
    content: ""
}

.web-icon-microsoft:before {
    content: ""
}

.web-icon-minus:before {
    content: ""
}

.web-icon-nuxt:before {
    content: ""
}

.web-icon-platform:before {
    content: ""
}

.web-icon-play:before {
    content: ""
}

.web-icon-plus:before {
    content: ""
}

.web-icon-product-hunt:before {
    content: ""
}

.web-icon-refine:before {
    content: ""
}

.web-icon-rest:before {
    content: ""
}

.web-icon-search:before {
    content: ""
}

.web-icon-sendgrid:before {
    content: ""
}

.web-icon-star:before {
    content: ""
}

.web-icon-system:before {
    content: ""
}

.web-icon-textmagic:before {
    content: ""
}

.web-icon-twitter:before {
    content: ""
}

.web-icon-vue:before {
    content: ""
}

.web-icon-x:before {
    content: ""
}

.web-icon-youtube:before {
    content: ""
}

@layer pink, css-variables, resets, fonts, icons, animations, elements, components, sequences, grids, pages, utilities;

@layer pink {
    @layer css-variables, resets, icons, animations, elements, components, grids, utilities;

    @layer css-variables {
        :root {
            --transform-direction: 1;
            --start-direction: left;
            --end-direction: right
        }

        :root[dir=rtl] {
            --transform-direction: -1;
            --start-direction: right;
            --end-direction: left
        }

        :root {
            --transition: .2s
        }

        :root {
            --heading-font: "Poppins", arial, sans-serif;
            --content-font: "Inter", arial, sans-serif;
            --code-font: "Source Code Pro", monospace;
            --font-size-00: .75rem;
            --font-size-0: .875rem;
            --font-size-1: 1rem;
            --font-size-2: 1.125rem;
            --font-size-3: 1.25rem;
            --font-size-4: 1.5rem;
            --font-size-5: 1.75rem;
            --font-size-6: 2rem;
            --font-size-7: 2.25rem;
            --font-size-8: 2.5rem
        }

        :root {
            --color-primary-hue: 343;
            --color-primary-100: var(--color-primary-hue) 87% 56%;
            --color-primary-200: calc(var(--color-primary-hue) - 3) 79% 48%;
            --color-primary-300: calc(var(--color-primary-hue) - 6) 87% 40%;
            --color-neutral-0: 0 0% 100%;
            --color-neutral-5: 240 11% 98%;
            --color-neutral-10: 240 9% 94%;
            --color-neutral-15: 240 4% 85%;
            --color-neutral-20: 240 3% 77%;
            --color-neutral-50: 240 2% 52%;
            --color-neutral-60: 240 2% 43%;
            --color-neutral-70: 240 3% 35%;
            --color-neutral-80: 240 4% 27%;
            --color-neutral-85: 240 4% 18%;
            --color-neutral-90: 240 7% 12%;
            --color-neutral-100: 240 6% 10%;
            --color-neutral-105: 240 5% 8%;
            --color-neutral-1000: 0 0% 0%;
            --color-information-hue: 189;
            --color-information-10: var(--color-information-hue) 87% 97%;
            --color-information-50: calc(var(--color-information-hue) + 13) 90% 89%;
            --color-information-100: var(--color-information-hue) 100% 38%;
            --color-information-120: calc(var(--color-information-hue) + 1) 100% 26%;
            --color-information-200: calc(var(--color-information-hue) - 1) 87% 12%;
            --color-success-hue: 150;
            --color-success-10: calc(var(--color-success-hue) + 2) 88% 97%;
            --color-success-50: var(--color-success-hue) 91% 87%;
            --color-success-100: var(--color-success-hue) 100% 37%;
            --color-success-120: calc(var(--color-success-hue) + 8) 100% 23%;
            --color-success-200: calc(var(--color-success-hue) - 1) 79% 11%;
            --color-warning-hue: 33;
            --color-warning-10: calc(var(--color-warning-hue) - 1) 100% 97%;
            --color-warning-50: calc(var(--color-warning-hue) - 2) 100% 88%;
            --color-warning-100: var(--color-warning-hue) 100% 48%;
            --color-warning-120: calc(var(--color-warning-hue) - 9) 100% 35%;
            --color-warning-200: var(--color-warning-hue) 97% 14%;
            --color-danger-hue: 3;
            --color-danger-10: calc(var(--color-danger-hue) - 3) 100% 98%;
            --color-danger-50: calc(var(--color-danger-hue) - 2) 100% 92%;
            --color-danger-100: var(--color-danger-hue) 100% 61%;
            --color-danger-120: calc(var(--color-danger-hue) - 3) 82% 39%;
            --color-danger-200: calc(var(--color-danger-hue) - 1) 91% 13%;
            --color-blue-hue: 218;
            --color-blue-100: var(--color-blue-hue) 100% 82%;
            --color-green-hue: 172;
            --color-green-100: var(--color-green-hue) 50% 72%;
            --color-orange-hue: 32;
            --color-orange-100: var(--color-orange-hue) 97% 75%;
            --color-red-hue: 0;
            --color-red-100: var(--color-red-hue) 100% 82%;
            --color-purple-hue: 261;
            --color-purple-100: var(--color-purple-hue) 93% 84%;
            --color-pink-hue: 331;
            --color-pink-100: var(--color-pink-hue) 100% 82%;
            --transparent: 0 0% 0% / 0
        }

        :root {
            --color-pink-text: var(--color-primary-100);
            --color-text-disabled: var(--color-neutral-20);
            --color-text-offline: var(--color-neutral-50);
            --color-text-info: var(--color-information-100);
            --color-text-danger: var(--color-danger-100);
            --color-text-warning: var(--color-warning-100);
            --color-text-success: var(--color-success-100);
            --color-text-gray: var(--color-neutral-50);
            --color-border: var(--color-neutral-10);
            --scroll-color: var(--color-neutral-20)
        }

        :root .theme-dark {
            --color-pink-text: var(--color-primary-200);
            --color-text-disabled: var(--color-neutral-60);
            --color-text-offline: var(--color-neutral-50);
            --color-text-info: var(--color-information-100);
            --color-text-danger: var(--color-danger-100);
            --color-text-warning: var(--color-warning-100);
            --color-text-success: var(--color-success-100);
            --color-text-gray: var(--color-neutral-20);
            --color-border: var(--color-neutral-85);
            --scroll-color: var(--color-neutral-80)
        }

        :root {
            --container-size-small: 20rem;
            --container-size-medium: 31rem;
            --container-size-large: 43.75rem;
            --container-size-xl: 58rem;
            --container-size-xxl: 78.75rem;
            --container-size-xxxl: 87.125rem;
            --icon-size-small: 1rem;
            --icon-size-medium: 1.25rem;
            --icon-size-large: 1.5rem;
            --icon-size-extra-large: 2rem
        }

        :root {
            --border-radius-xsmall: .25rem;
            --border-radius-small: .5rem;
            --border-radius-medium: 1rem;
            --border-radius-large: 1.5rem;
            --border-radius-circular: 50%
        }

        :root {
            --shadow-color: var(--color-neutral-80);
            --shadow-small: 0rem 1rem 2rem hsl(var(--shadow-color)/.02);
            --shadow-large: 0rem 1rem 2rem hsl(var(--shadow-color)/.04);
            --focus-box-shadow: 0 0 0 .0625rem hsl(var(--color-information-100)), 0 0 0 .25rem hsl(var(--color-information-100)/.25)
        }

        :root .theme-dark {
            --shadow-color: var(--color-neutral-105);
            --shadow-small: 0rem 1rem 2rem hsl(var(--shadow-color)/.5);
            --shadow-large: 0rem 1rem 2rem hsl(var(--shadow-color)/1)
        }
    }

    @layer resets {
        @layer normalize, the-new-css-reset, custom-css-reset, typography;

        @layer normalize {

            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
            html {
                line-height: 1.15;
                -webkit-text-size-adjust: 100%
            }

            body {
                margin: 0
            }

            main {
                display: block
            }

            h1 {
                font-size: 2em;
                margin: .67em 0
            }

            hr {
                box-sizing: content-box;
                height: 0;
                overflow: visible
            }

            pre {
                font-family: monospace, monospace;
                font-size: 1em
            }

            a {
                background-color: transparent
            }

            abbr[title] {
                border-bottom: none;
                text-decoration: underline;
                text-decoration: underline dotted
            }

            b,
            strong {
                font-weight: bolder
            }

            code,
            kbd,
            samp {
                font-family: monospace, monospace;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,
            sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            img {
                border-style: none
            }

            button,
            input,
            optgroup,
            select,
            textarea {
                font-family: inherit;
                font-size: 100%;
                line-height: 1.15;
                margin: 0
            }

            button,
            input {
                overflow: visible
            }

            button,
            select {
                text-transform: none
            }

            button,
            [type=button],
            [type=reset],
            [type=submit] {
                -webkit-appearance: button
            }

            button::-moz-focus-inner,
            [type=button]::-moz-focus-inner,
            [type=reset]::-moz-focus-inner,
            [type=submit]::-moz-focus-inner {
                border-style: none;
                padding: 0
            }

            button:-moz-focusring,
            [type=button]:-moz-focusring,
            [type=reset]:-moz-focusring,
            [type=submit]:-moz-focusring {
                outline: 1px dotted ButtonText
            }

            fieldset {
                padding: .35em .75em .625em
            }

            legend {
                box-sizing: border-box;
                color: inherit;
                display: table;
                max-width: 100%;
                padding: 0;
                white-space: normal
            }

            progress {
                vertical-align: baseline
            }

            textarea {
                overflow: auto
            }

            [type=checkbox],
            [type=radio] {
                box-sizing: border-box;
                padding: 0
            }

            [type=number]::-webkit-inner-spin-button,
            [type=number]::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            [type=search]::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            details {
                display: block
            }

            summary {
                display: list-item
            }

            template {
                display: none
            }

            [hidden] {
                display: none
            }
        }

        @layer the-new-css-reset {
            *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
                all: unset;
                display: revert
            }

            *,
            *:before,
            *:after {
                box-sizing: border-box
            }

            html {
                -moz-text-size-adjust: none;
                -webkit-text-size-adjust: none;
                text-size-adjust: none
            }

            a,
            button {
                cursor: revert
            }

            ol,
            ul,
            menu,
            summary {
                list-style: none
            }

            img {
                max-inline-size: 100%;
                max-block-size: 100%
            }

            table {
                border-collapse: collapse
            }

            input,
            textarea {
                -webkit-user-select: auto
            }

            textarea {
                white-space: revert
            }

            meter {
                -webkit-appearance: revert;
                -moz-appearance: revert;
                appearance: revert
            }

            :where(pre) {
                all: revert;
                box-sizing: border-box
            }

            ::placeholder {
                color: unset
            }

            :where([hidden]) {
                display: none
            }

            :where([contenteditable]:not([contenteditable=false])) {
                -moz-user-modify: read-write;
                -webkit-user-modify: read-write;
                overflow-wrap: break-word;
                -webkit-line-break: after-white-space;
                -webkit-user-select: auto
            }

            :where([draggable=true]) {
                -webkit-user-drag: element
            }

            :where(dialog:modal) {
                all: revert;
                box-sizing: border-box
            }

            ::-webkit-details-marker {
                display: none
            }
        }

        @layer custom-css-reset {
            :where(dialog:modal) {
                all: revert
            }

            img[src=""] {
                visibility: hidden
            }

            button {
                cursor: pointer
            }

            pre {
                margin-block: 0
            }

            details summary::-webkit-details-marker {
                display: none
            }

            summary::-webkit-details-marker {
                display: none !important
            }

            input::-webkit-datetime-edit {
                line-height: 1;
                padding: 0;
                margin-bottom: -2px
            }

            .theme-dark input[type=date]::-webkit-calendar-picker-indicator {
                filter: invert(.8)
            }

            .theme-dark input[type=time]::-webkit-calendar-picker-indicator {
                filter: invert(.8)
            }
        }

        @layer typography {

            html,
            body {
                overscroll-behavior-y: none
            }

            html {
                scrollbar-gutter: stable;
                overflow: overlay;
                overflow-x: hidden
            }

            body {
                --p-body-text-color: var(--color-neutral-60);
                --p-body-bg-color: var(--color-neutral-5);
                font-family: var(--content-font);
                -webkit-font-smoothing: antialiased;
                font-weight: 400;
                font-size: 87.5%;
                line-height: 1.5;
                color: hsl(var(--p-body-text-color));
                background-color: hsl(var(--p-body-bg-color))
            }

            body.theme-dark {
                --p-body-text-color: var(--color-neutral-20);
                --p-body-bg-color: var(--color-neutral-105)
            }

            small {
                font-size: .875rem
            }

            b {
                font-weight: 600
            }

            code {
                font-family: var(--code-font);
                font-size: .875rem;
                line-height: 1.5;
                letter-spacing: .08em;
                white-space: pre-wrap
            }

            [class*=heading-] {
                --p-heading-text-color: var(--heading-text-color, var(--color-neutral-80));
                color: hsl(var(--p-heading-text-color))
            }

            .theme-dark [class*=heading-] {
                --p-heading-text-color: var(--heading-text-color, var(--color-neutral-10))
            }

            [class*=heading-level] {
                font-family: var(--heading-font, arial);
                line-height: 1.5
            }

            @media (max-width: 767.99px),
            (min-width: 768px) and (max-width: 1198.99px) {
                .heading-level-1 {
                    font-size: var(--font-size-7);
                    font-weight: 700
                }

                .heading-level-2 {
                    font-size: var(--font-size-6);
                    font-weight: 700
                }

                .heading-level-3 {
                    font-size: var(--font-size-5);
                    font-weight: 600
                }

                .heading-level-4 {
                    font-size: var(--font-size-4);
                    font-weight: 500
                }

                .heading-level-5 {
                    font-size: var(--font-size-3);
                    font-weight: 500
                }

                .heading-level-6 {
                    font-size: var(--font-size-2);
                    font-weight: 500
                }

                .heading-level-7 {
                    font-size: var(--font-size-1);
                    font-weight: 500
                }
            }

            @media (min-width: 1199px) {
                .heading-level-1 {
                    font-size: var(--font-size-8);
                    font-weight: 700
                }

                .heading-level-2 {
                    font-size: var(--font-size-7);
                    font-weight: 700
                }

                .heading-level-3 {
                    font-size: var(--font-size-6);
                    font-weight: 700
                }

                .heading-level-4 {
                    font-size: var(--font-size-5);
                    font-weight: 600
                }

                .heading-level-5 {
                    font-size: var(--font-size-4);
                    font-weight: 500
                }

                .heading-level-6 {
                    font-size: var(--font-size-3);
                    font-weight: 500
                }

                .heading-level-7 {
                    font-size: var(--font-size-2);
                    font-weight: 500
                }
            }

            [class*=eyebrow-heading] {
                text-transform: uppercase;
                font-weight: 600;
                line-height: 1.5
            }

            .eyebrow-heading-1 {
                font-size: var(--font-size-1);
                letter-spacing: .08em
            }

            .eyebrow-heading-2 {
                font-size: var(--font-size-0);
                letter-spacing: .08em
            }

            .eyebrow-heading-3 {
                font-size: var(--font-size-00);
                letter-spacing: .12em
            }

            .body-text-1 {
                font-size: var(--font-size-1)
            }

            .body-text-2 {
                font-size: var(--font-size-0)
            }

            :where(body) :focus-visible {
                box-shadow: var(--focus-box-shadow)
            }
        }
    }

    @layer icons {

        html [class^=icon-],
        html [class*=" icon-"] {
            font-size: var(--icon-size-medium)
        }

        html [class^=icon-]:before,
        html [class*=" icon-"]:before {
            vertical-align: middle
        }
    }

    @layer animations {
        .animation-bounce {
            animation: bounce infinite 2s
        }

        @media (prefers-reduced-motion) {
            .animation-bounce {
                animation: none
            }
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            to {
                transform: translateY(0)
            }

            40% {
                transform: translateY(-.9375rem)
            }

            60% {
                transform: translateY(-.4375rem)
            }
        }

        .animation-rotate {
            animation: rotate 1s infinite linear
        }

        @media (prefers-reduced-motion) {
            .animation-rotate {
                animation-duration: 0s
            }
        }

        @keyframes rotate {
            to {
                transform: rotate(360deg)
            }
        }
    }

    @layer elements {
        .link {
            cursor: pointer;
            text-decoration: underline
        }

        .link>* {
            vertical-align: middle
        }

        .link.is-5px-offset {
            text-underline-offset: .3125rem
        }

        .link.is-add-sep>*:nth-child(n+2):before {
            content: "|";
            margin-inline: .25rem;
            font-size: .625rem
        }

        .button {
            --p-button-size: var(--button-size, 2.5rem);
            --padding-horizontal: 1rem;
            --p-font-size: .875rem;
            --p-text-color: var(--p-text-color-default);
            --p-button-color: var(--p-button-color-default);
            --p-border-color: var(--p-border-color-default);
            --p-text-color-default: var(--color-neutral-5);
            --p-button-color-default: var(--color-primary-200);
            --p-border-color-default: var(--color-primary-300);
            --p-text-color-hover: var(--p-text-color-default);
            --p-button-color-hover: var(--color-primary-100);
            --p-border-color-hover: var(--p-border-color-default);
            --p-text-color-focus: var(--p-text-color-default);
            --p-button-color-focus: var(--color-primary-200);
            --p-border-color-focus: var(--color-primary-200);
            --p-text-color-active: var(--p-text-color-default);
            --p-button-color-active: var(--color-primary-300);
            --p-border-color-active: var(--color-primary-300);
            --p-text-color-disabled: var(--color-neutral-20);
            --p-button-color-disabled: var(--color-neutral-10);
            --p-border-color-disabled: var(--color-neutral-10);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            display: flex;
            gap: .5rem;
            align-items: center;
            inline-size: fit-content;
            block-size: var(--p-button-size);
            padding-inline: var(--padding-horizontal);
            cursor: pointer;
            font-size: var(--p-font-size);
            font-weight: 600;
            color: hsl(var(--p-text-color));
            background-color: hsl(var(--p-button-color));
            text-align: center;
            border: solid .0625rem hsl(var(--p-border-color));
            border-radius: var(--border-radius-xsmall);
            flex-shrink: 0;
            -webkit-user-select: none;
            user-select: none
        }

        .button [class*=icon] {
            line-height: 1
        }

        .button [class*=icon]:before {
            vertical-align: middle
        }

        .button.is-small {
            --p-button-size: var(--button-size, 2rem)
        }

        .button.is-big {
            --p-font-size: 1rem;
            --p-button-size: 3rem;
            --padding-horizontal: 1.25rem
        }

        .button.is-only-icon {
            aspect-ratio: 1/1;
            padding: 0;
            justify-content: center;
            align-items: center;
            border-radius: var(--border-radius-circular)
        }

        .button.is-full-width {
            inline-size: 100%;
            justify-content: center
        }

        @media (max-width: 767.99px) {
            .button.is-full-width-mobile {
                inline-size: 100%;
                justify-content: center
            }
        }

        @media (max-width: 767.99px) {
            .button.is-full-width-in-stack-mobile {
                flex-grow: 1;
                justify-content: center
            }
        }

        .button:is(:hover):where(:not(:disabled, .is-disabled)) {
            --p-text-color: var(--p-text-color-hover);
            --p-button-color: var(--p-button-color-hover);
            --p-border-color: var(--p-border-color-hover)
        }

        .button:is(:focus-visible):where(:not(:disabled, .is-disabled)) {
            --p-text-color: var(--p-text-color-focus);
            --p-button-color: var(--p-button-color-focus);
            --p-border-color: var(--p-border-color-focus)
        }

        .button:is(:active):where(:not(:disabled, .is-disabled)) {
            --p-text-color: var(--p-text-color-active);
            --p-button-color: var(--p-button-color-active);
            --p-border-color: var(--p-border-color-active)
        }

        .button:where(:disabled, .is-disabled) {
            --p-text-color: var(--p-text-color-disabled);
            --p-button-color: var(--p-button-color-disabled);
            --p-border-color: var(--p-border-color-disabled);
            cursor: unset
        }

        .theme-dark .button {
            --p-button-color-default: var(--color-primary-200);
            --p-border-color-default: var(--color-primary-200);
            --p-button-color-hover: var(--color-primary-100);
            --p-border-color-hover: var(--color-primary-100);
            --p-border-color-focus: var(--color-primary-300);
            --p-border-color-active: var(--color-primary-300);
            --p-text-color-disabled: var(--color-neutral-60);
            --p-button-color-disabled: var(--color-neutral-80);
            --p-border-color-disabled: var(--color-neutral-80)
        }

        .button.is-github {
            --p-text-color-default: var(--color-neutral-0);
            --p-button-color-default: var(--color-neutral-80);
            --p-border-color-default: var(--color-neutral-80);
            --p-text-color-hover: var(--p-text-color-default);
            --p-button-color-hover: var(--p-button-color-default);
            --p-border-color-hover: var(--p-border-color-default);
            --p-text-color-focus: var(--p-text-color-default);
            --p-button-color-focus: var(--p-button-color-default);
            --p-border-color-focus: var(--p-border-color-default);
            --p-text-color-active: var(--p-text-color-default);
            --p-button-color-active: var(--p-button-color-default);
            --p-border-color-active: var(--p-border-color-default)
        }

        .button.is-secondary {
            --p-text-color-default: var(--color-neutral-60);
            --p-button-color-default: var(--color-neutral-5);
            --p-border-color-default: var(--color-neutral-15);
            --p-text-color-hover: var(--p-text-color-default);
            --p-button-color-hover: var(--color-neutral-10);
            --p-border-color-hover: var(--p-border-color-default);
            --p-text-color-focus: var(--p-text-color-default);
            --p-button-color-focus: var(--p-button-color-default);
            --p-border-color-focus: var(--transparent);
            --p-text-color-active: var(--color-neutral-90);
            --p-button-color-active: var(--color-neutral-15);
            --p-border-color-active: var(--color-neutral-15);
            --p-text-color-disabled: var(--color-neutral-20);
            --p-button-color-disabled: var(--p-button-color-default);
            --p-border-color-disabled: var(--color-neutral-15)
        }

        .theme-dark .button.is-secondary {
            --p-text-color-default: var(--color-neutral-5);
            --p-button-color-default: var(--color-neutral-90);
            --p-border-color-default: var(--color-neutral-80);
            --p-text-color-hover: var(--p-text-color-default);
            --p-button-color-hover: var(--transparent);
            --p-border-color-hover: var(--color-neutral-70);
            --p-text-color-focus: var(--p-text-color-default);
            --p-button-color-focus: var(--p-button-color-default);
            --p-border-color-focus: var(--transparent);
            --p-text-color-active: var(--p-text-color-default);
            --p-button-color-active: var(--p-button-color-default);
            --p-border-color-active: var(--color-neutral-60);
            --p-text-color-disabled: var(--color-neutral-60);
            --p-button-color-disabled: var(--p-button-color-default);
            --p-border-color-disabled: var(--color-neutral-80)
        }

        .button.is-text {
            --p-text-color-default: var(--color-neutral-60);
            --p-button-color-default: var(--transparent);
            --p-border-color-default: var(--transparent);
            --p-text-color-hover: var(--color-neutral-70);
            --p-button-color-hover: var(--p-button-color-default);
            --p-border-color-hover: var(--p-border-color-default);
            --p-text-color-focus: var(--p-text-color-default);
            --p-button-color-focus: var(--color-neutral-5);
            --p-border-color-focus: var(--p-border-color-default);
            --p-text-color-active: var(--color-neutral-90);
            --p-button-color-active: var(--p-button-color-default);
            --p-border-color-active: var(--p-border-color-default);
            --p-text-color-disabled: var(--color-neutral-20);
            --p-button-color-disabled: var(--p-button-color-default);
            --p-border-color-disabled: var(--p-border-color-default)
        }

        .theme-dark .button.is-text {
            --p-text-color-default: var(--color-neutral-5);
            --p-button-color-default: var(--transparent);
            --p-border-color-default: var(--transparent);
            --p-text-color-hover: var(--color-neutral-20);
            --p-button-color-hover: var(--p-button-color-default);
            --p-border-color-hover: var(--p-border-color-default);
            --p-text-color-focus: var(--color-neutral-5);
            --p-button-color-focus: var(--p-button-color-default);
            --p-border-color-focus: var(--p-border-color-default);
            --p-text-color-active: var(--p-text-color-default);
            --p-button-color-active: var(--p-button-color-default);
            --p-border-color-active: var(--p-border-color-default);
            --p-text-color-disabled: var(--color-neutral-60);
            --p-button-color-disabled: var(--p-button-color-default);
            --p-border-color-disabled: var(--p-border-color-default)
        }

        .kbd {
            --p-kbd-text-color: var(--color-neutral-60);
            --p-kbd-bg-color: var(--color-neutral-5);
            --p-kbd-border-color: var(--color-neutral-15);
            color: hsl(var(--p-kbd-text-color));
            background-color: hsl(var(--p-kbd-bg-color));
            border: solid .0625rem hsl(var(--p-kbd-border-color));
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-inline-size: 1.5rem;
            block-size: 1.5rem;
            border-radius: var(--border-radius-xsmall);
            flex-shrink: 0;
            -webkit-user-select: none;
            user-select: none
        }

        .theme-dark .kbd {
            --p-kbd-text-color: var(--color-neutral-5);
            --p-kbd-bg-color: var(--color-neutral-90);
            --p-kbd-border-color: var(--color-neutral-80)
        }

        .image-item {
            --p-image-item-bg-color: var(--color-neutral-5);
            --p-image-item-border-color: var(--color-neutral-10);
            --p-image-item-full-size: 2.5rem;
            --p-image-item-size: 1.25rem;
            display: grid;
            place-content: center;
            flex-shrink: 0;
            inline-size: var(--p-image-item-full-size);
            block-size: var(--p-image-item-full-size);
            background-color: hsl(var(--p-image-item-bg-color));
            border: solid .0625rem hsl(var(--p-image-item-border-color));
            border-radius: var(--border-radius-circular)
        }

        .image-item img {
            inline-size: var(--p-image-item-size);
            block-size: var(--p-image-item-size)
        }

        .image-item.is-smaller {
            --p-image-item-full-size: 2rem;
            --p-image-item-size: .9375rem
        }

        .theme-dark .image-item {
            --p-image-item-bg-color: var(--color-neutral-85);
            --p-image-item-border-color: var(--color-neutral-80)
        }

        .label {
            --p-label-text-color: var(--color-neutral-80);
            color: hsl(var(--p-label-text-color));
            display: inline-block;
            cursor: pointer;
            line-height: 1.5;
            margin-bottom: .25rem;
            font-size: var(--font-size-0)
        }

        .label:where(.is-required):after {
            content: "*";
            color: hsl(var(--color-danger-100))
        }

        .theme-dark .label {
            --p-label-text-color: var(--color-neutral-5)
        }

        .optional {
            color: hsl(var(--color-neutral-50));
            font-size: .875rem
        }

        .helper {
            --p-text-color: var(--color-neutral-50);
            display: flex;
            font-size: var(--font-size-0);
            line-height: 2;
            color: hsl(var(--p-text-color));
            font-weight: 400
        }

        .helper [class*=icon] {
            line-height: 1.3
        }

        .helper [class*=icon]:before {
            vertical-align: -.1875rem
        }

        .helper [class*=icon]:first-child {
            margin-inline-end: .25rem
        }

        .theme-dark .helper {
            --p-text-color: var(--color-neutral-20)
        }

        ::placeholder,
        [contentEditable=true] {
            --p-placeholder-color: var(--color-neutral-20);
            --p-placeholder-color-disabled: var(--color-neutral-20)
        }

        .theme-dark ::placeholder,
        .theme-dark [contentEditable=true] {
            --p-placeholder-color: var(--color-neutral-60)
        }

        ::placeholder {
            color: hsl(var(--p-placeholder-color))
        }

        :disabled::placeholder {
            color: hsl(var(--p-placeholder-color-disabled))
        }

        .theme-dark :disabled::placeholder {
            --p-placeholder-color: var(--color-neutral-70);
            --p-placeholder-color-disabled: var(--color-neutral-70)
        }

        [contentEditable=true]:before {
            color: hsl(var(--p-placeholder-color))
        }

        [contentEditable].input-text,
        [contentEditable].tags-input {
            min-block-size: 5rem
        }

        [contentEditable]:empty:not(:focus):before {
            content: attr(data-text)
        }

        .input-text-wrapper {
            position: relative;
            --button-size: 3rem;
            --amount-of-buttons: 0
        }

        .input-text-wrapper .input-text,
        .input-text-wrapper .tags-input,
        .input-text-wrapper input:where(:not([type=datetime-local])) {
            padding-inline-end: calc(var(--button-size) * var(--amount-of-buttons))
        }

        .input-text-wrapper [type=text] {
            min-block-size: 1.375rem
        }

        .input-text-wrapper:where(.is-with-end-button) .button {
            position: absolute;
            inset-block: .5rem;
            inset-inline-end: .5rem
        }

        .input-text-wrapper .icon-search {
            position: absolute;
            inset-inline-start: 1rem;
            inset-block-start: .5rem;
            font-size: 1.1875rem;
            pointer-events: none
        }

        .input-text-wrapper :where(.options-list) {
            position: absolute;
            inset-block-start: .5rem;
            inset-inline-end: .75rem
        }

        .input-text-wrapper .buttons-list {
            --p-bg-input-color: var(--color-neutral-0);
            background-color: hsl(var(--p-bg-input-color))
        }

        .theme-dark .input-text-wrapper .buttons-list {
            --p-bg-input-color: var(--color-neutral-100)
        }

        .options-list {
            --p-sep-color: var(--color-neutral-15);
            --p-button-text-color: var(--p-button-text-color-default);
            --p-button-text-color-default: var(--color-neutral-50);
            --p-button-text-color-disabled: var(--color-neutral-15);
            --p-button-bg-color: var(--p-button-bg-color-default);
            --p-button-bg-color-default: var(--transparent);
            --p-button-bg-color-focus: var(--color-neutral-10);
            display: flex
        }

        .options-list:before {
            content: "";
            align-self: center;
            inline-size: .0625rem;
            block-size: 1.25rem;
            background-color: hsl(var(--p-sep-color));
            margin-inline-end: .75rem
        }

        .options-list-button {
            inline-size: 1.5rem;
            block-size: 1.5rem;
            background-color: hsl(var(--p-button-bg-color));
            border-radius: var(--border-radius-xsmall);
            color: hsl(var(--p-button-text-color));
            font-size: var(--fon);
            line-height: 1.5rem;
            text-align: center
        }

        .options-list-button:disabled {
            --p-button-text-color: var(--p-button-text-color-disabled);
            cursor: not-allowed
        }

        .options-list-button:where(:hover, :focus):not(:disabled) {
            --p-button-bg-color: var(--p-button-bg-color-focus);
            box-shadow: none
        }

        .options-list-button:where(:not(:last-child)) {
            margin-inline-end: .5rem
        }

        .options-list.is-no-separator:before {
            display: none
        }

        .theme-dark .options-list {
            --p-sep-color: var(--color-neutral-80);
            --p-button-text-color: var(--p-button-text-color-default);
            --p-button-text-color-default: var(--color-neutral-50);
            --p-button-text-color-disabled: var(--color-neutral-80);
            --p-button-bg-color: var(--p-button-bg-color-default);
            --p-button-bg-color-default: var(--transparent);
            --p-button-bg-color-focus: var(--color-neutral-85)
        }

        .input-text,
        .tags-input,
        [type=text],
        [type=number],
        [type=password],
        [type=email],
        [type=url],
        [type=search],
        [type=tel],
        [type=file],
        [type=date],
        [type=time],
        select,
        textarea {
            --p-text-color: var(--p-text-color-default);
            --p-bg-color: var(--p-bg-color-default);
            --p-border-color: var(--p-border-color-default);
            --p-text-color-default: var(--color-neutral-60);
            --p-bg-color-default: var(--color-neutral-0);
            --p-border-color-default: var(--color-neutral-15);
            --p-text-color-hover: var(--p-text-color-default);
            --p-bg-color-hover: var(--p-bg-color-default);
            --p-border-color-hover: var(--color-neutral-20);
            --p-text-color-focus: var(--p-text-color-default);
            --p-bg-color-focus: var(--p-bg-color-default);
            --p-border-color-focus: var(--color-neutral-20);
            --p-text-color-readonly: var(--color-neutral-20);
            --p-bg-color-readonly: var(--color-neutral-5);
            --p-border-color-readonly: var(--p-border-color-default);
            --p-text-color-disabled: var(--color-neutral-20);
            --p-bg-color-disabled: var(--color-neutral-0);
            --p-border-color-disabled: var(--p-border-color-default);
            display: block;
            inline-size: 100%;
            block-size: 2.5rem;
            outline: none;
            padding-block: .59375rem;
            padding-inline: .75rem;
            color: hsl(var(--p-text-color));
            line-height: 1.3572;
            font-weight: 400;
            background-color: hsl(var(--p-bg-color));
            border: solid .0625rem hsl(var(--p-border-color));
            border-radius: var(--border-radius-xsmall)
        }

        .input-text:hover:where(:not(:disabled, .is-disabled)),
        .tags-input:hover:where(:not(:disabled, .is-disabled)),
        [type=text]:hover:where(:not(:disabled, .is-disabled)),
        [type=number]:hover:where(:not(:disabled, .is-disabled)),
        [type=password]:hover:where(:not(:disabled, .is-disabled)),
        [type=email]:hover:where(:not(:disabled, .is-disabled)),
        [type=url]:hover:where(:not(:disabled, .is-disabled)),
        [type=search]:hover:where(:not(:disabled, .is-disabled)),
        [type=tel]:hover:where(:not(:disabled, .is-disabled)),
        [type=file]:hover:where(:not(:disabled, .is-disabled)),
        [type=date]:hover:where(:not(:disabled, .is-disabled)),
        [type=time]:hover:where(:not(:disabled, .is-disabled)),
        select:hover:where(:not(:disabled, .is-disabled)),
        textarea:hover:where(:not(:disabled, .is-disabled)) {
            --p-border-color: var(--p-border-color-hover)
        }

        .input-text.is-resizable,
        .is-resizable.tags-input,
        [type=text].is-resizable,
        [type=number].is-resizable,
        [type=password].is-resizable,
        [type=email].is-resizable,
        [type=url].is-resizable,
        [type=search].is-resizable,
        [type=tel].is-resizable,
        [type=file].is-resizable,
        [type=date].is-resizable,
        [type=time].is-resizable,
        select.is-resizable,
        textarea.is-resizable {
            word-break: break-all;
            min-block-size: auto;
            max-block-size: 12.5rem;
            overflow: auto
        }

        .input-text.is-resizable::-webkit-scrollbar,
        .is-resizable.tags-input::-webkit-scrollbar,
        [type=text].is-resizable::-webkit-scrollbar,
        [type=number].is-resizable::-webkit-scrollbar,
        [type=password].is-resizable::-webkit-scrollbar,
        [type=email].is-resizable::-webkit-scrollbar,
        [type=url].is-resizable::-webkit-scrollbar,
        [type=search].is-resizable::-webkit-scrollbar,
        [type=tel].is-resizable::-webkit-scrollbar,
        [type=file].is-resizable::-webkit-scrollbar,
        [type=date].is-resizable::-webkit-scrollbar,
        [type=time].is-resizable::-webkit-scrollbar,
        select.is-resizable::-webkit-scrollbar,
        textarea.is-resizable::-webkit-scrollbar {
            opacity: .7;
            width: .5rem;
            height: .5rem
        }

        .input-text.is-resizable::-webkit-scrollbar-track,
        .is-resizable.tags-input::-webkit-scrollbar-track,
        [type=text].is-resizable::-webkit-scrollbar-track,
        [type=number].is-resizable::-webkit-scrollbar-track,
        [type=password].is-resizable::-webkit-scrollbar-track,
        [type=email].is-resizable::-webkit-scrollbar-track,
        [type=url].is-resizable::-webkit-scrollbar-track,
        [type=search].is-resizable::-webkit-scrollbar-track,
        [type=tel].is-resizable::-webkit-scrollbar-track,
        [type=file].is-resizable::-webkit-scrollbar-track,
        [type=date].is-resizable::-webkit-scrollbar-track,
        [type=time].is-resizable::-webkit-scrollbar-track,
        select.is-resizable::-webkit-scrollbar-track,
        textarea.is-resizable::-webkit-scrollbar-track {
            border-radius: .25rem;
            margin-right: .5rem
        }

        .input-text.is-resizable::-webkit-scrollbar-thumb,
        .is-resizable.tags-input::-webkit-scrollbar-thumb,
        [type=text].is-resizable::-webkit-scrollbar-thumb,
        [type=number].is-resizable::-webkit-scrollbar-thumb,
        [type=password].is-resizable::-webkit-scrollbar-thumb,
        [type=email].is-resizable::-webkit-scrollbar-thumb,
        [type=url].is-resizable::-webkit-scrollbar-thumb,
        [type=search].is-resizable::-webkit-scrollbar-thumb,
        [type=tel].is-resizable::-webkit-scrollbar-thumb,
        [type=file].is-resizable::-webkit-scrollbar-thumb,
        [type=date].is-resizable::-webkit-scrollbar-thumb,
        [type=time].is-resizable::-webkit-scrollbar-thumb,
        select.is-resizable::-webkit-scrollbar-thumb,
        textarea.is-resizable::-webkit-scrollbar-thumb {
            border-radius: .25rem;
            background: hsl(var(--scroll-color))
        }

        .input-text.is-resizable::-webkit-scrollbar-corner,
        .is-resizable.tags-input::-webkit-scrollbar-corner,
        [type=text].is-resizable::-webkit-scrollbar-corner,
        [type=number].is-resizable::-webkit-scrollbar-corner,
        [type=password].is-resizable::-webkit-scrollbar-corner,
        [type=email].is-resizable::-webkit-scrollbar-corner,
        [type=url].is-resizable::-webkit-scrollbar-corner,
        [type=search].is-resizable::-webkit-scrollbar-corner,
        [type=tel].is-resizable::-webkit-scrollbar-corner,
        [type=file].is-resizable::-webkit-scrollbar-corner,
        [type=date].is-resizable::-webkit-scrollbar-corner,
        [type=time].is-resizable::-webkit-scrollbar-corner,
        select.is-resizable::-webkit-scrollbar-corner,
        textarea.is-resizable::-webkit-scrollbar-corner {
            background: hsl(var(--scroll-color));
            border-radius: .375rem
        }

        .input-text.is-resizable:empty,
        .is-resizable.tags-input:empty,
        [type=text].is-resizable:empty,
        [type=number].is-resizable:empty,
        [type=password].is-resizable:empty,
        [type=email].is-resizable:empty,
        [type=url].is-resizable:empty,
        [type=search].is-resizable:empty,
        [type=tel].is-resizable:empty,
        [type=file].is-resizable:empty,
        [type=date].is-resizable:empty,
        [type=time].is-resizable:empty,
        select.is-resizable:empty,
        textarea.is-resizable:empty {
            color: hsl(var(--p-placeholder-color))
        }

        .input-text.is-resizable:empty:before,
        .is-resizable.tags-input:empty:before,
        [type=text].is-resizable:empty:before,
        [type=number].is-resizable:empty:before,
        [type=password].is-resizable:empty:before,
        [type=email].is-resizable:empty:before,
        [type=url].is-resizable:empty:before,
        [type=search].is-resizable:empty:before,
        [type=tel].is-resizable:empty:before,
        [type=file].is-resizable:empty:before,
        [type=date].is-resizable:empty:before,
        [type=time].is-resizable:empty:before,
        select.is-resizable:empty:before,
        textarea.is-resizable:empty:before {
            content: attr(aria-placeholder)
        }

        .input-text.is-error,
        .is-error.tags-input,
        [type=text].is-error,
        [type=number].is-error,
        [type=password].is-error,
        [type=email].is-error,
        [type=url].is-error,
        [type=search].is-error,
        [type=tel].is-error,
        [type=file].is-error,
        [type=date].is-error,
        [type=time].is-error,
        select.is-error,
        textarea.is-error {
            box-shadow: 0 0 0 .0625rem hsl(var(--color-danger-100)), 0 0 0 .25rem hsl(var(--color-danger-100)/.25)
        }

        .input-text.is-warning,
        .is-warning.tags-input,
        [type=text].is-warning,
        [type=number].is-warning,
        [type=password].is-warning,
        [type=email].is-warning,
        [type=url].is-warning,
        [type=search].is-warning,
        [type=tel].is-warning,
        [type=file].is-warning,
        [type=date].is-warning,
        [type=time].is-warning,
        select.is-warning,
        textarea.is-warning {
            box-shadow: 0 0 0 .0625rem hsl(var(--color-warning-100)), 0 0 0 .25rem hsl(var(--color-warning-100)/.25)
        }

        .input-text.is-success,
        .is-success.tags-input,
        [type=text].is-success,
        [type=number].is-success,
        [type=password].is-success,
        [type=email].is-success,
        [type=url].is-success,
        [type=search].is-success,
        [type=tel].is-success,
        [type=file].is-success,
        [type=date].is-success,
        [type=time].is-success,
        select.is-success,
        textarea.is-success {
            box-shadow: 0 0 0 .0625rem hsl(var(--color-success-100)), 0 0 0 .25rem hsl(var(--color-success-100)/.25)
        }

        .input-text:where(:focus),
        .tags-input:where(:focus),
        [type=text]:where(:focus),
        [type=number]:where(:focus),
        [type=password]:where(:focus),
        [type=email]:where(:focus),
        [type=url]:where(:focus),
        [type=search]:where(:focus),
        [type=tel]:where(:focus),
        [type=file]:where(:focus),
        [type=date]:where(:focus),
        [type=time]:where(:focus),
        select:where(:focus),
        textarea:where(:focus) {
            --p-text-color: var(--p-text-color-focus);
            --p-bg-color: var(--p-bg-color-focus);
            --p-border-color: var(--p-border-color-focus);
            box-shadow: none
        }

        .input-text:where([readonly], .is-read-only),
        .tags-input:where([readonly], .is-read-only),
        [type=text]:where([readonly], .is-read-only),
        [type=number]:where([readonly], .is-read-only),
        [type=password]:where([readonly], .is-read-only),
        [type=email]:where([readonly], .is-read-only),
        [type=url]:where([readonly], .is-read-only),
        [type=search]:where([readonly], .is-read-only),
        [type=tel]:where([readonly], .is-read-only),
        [type=file]:where([readonly], .is-read-only),
        [type=date]:where([readonly], .is-read-only),
        [type=time]:where([readonly], .is-read-only),
        select:where([readonly], .is-read-only),
        textarea:where([readonly], .is-read-only) {
            --p-bg-color: var(--p-bg-color-readonly)
        }

        .input-text:where(:disabled, .is-disabled),
        .tags-input:where(:disabled, .is-disabled),
        [type=text]:where(:disabled, .is-disabled),
        [type=number]:where(:disabled, .is-disabled),
        [type=password]:where(:disabled, .is-disabled),
        [type=email]:where(:disabled, .is-disabled),
        [type=url]:where(:disabled, .is-disabled),
        [type=search]:where(:disabled, .is-disabled),
        [type=tel]:where(:disabled, .is-disabled),
        [type=file]:where(:disabled, .is-disabled),
        [type=date]:where(:disabled, .is-disabled),
        [type=time]:where(:disabled, .is-disabled),
        select:where(:disabled, .is-disabled),
        textarea:where(:disabled, .is-disabled) {
            --p-text-color: var(--p-text-color-disabled);
            --p-bg-color: var(--p-bg-color-disabled);
            --p-border-color: var(--p-border-color-disabled);
            --p-border-color-hover: var(--color-neutral-60)
        }

        .theme-dark .input-text,
        .theme-dark .tags-input,
        .theme-dark [type=text],
        .theme-dark [type=number],
        .theme-dark [type=password],
        .theme-dark [type=email],
        .theme-dark [type=url],
        .theme-dark [type=search],
        .theme-dark [type=tel],
        .theme-dark [type=file],
        .theme-dark [type=date],
        .theme-dark [type=time],
        .theme-dark select,
        .theme-dark textarea {
            --p-text-color-default: var(--color-neutral-20);
            --p-bg-color-default: var(--color-neutral-100);
            --p-border-color-default: var(--color-neutral-80);
            --p-text-color-hover: var(--p-text-color-default);
            --p-bg-color-hover: var(--p-bg-color-default);
            --p-border-color-hover: var(--color-neutral-70);
            --p-text-color-focus: var(--p-text-color-default);
            --p-bg-color-focus: var(--p-bg-color-default);
            --p-border-color-focus: var(--color-neutral-70);
            --p-text-color-readonly: var(--color-neutral-60);
            --p-bg-color-readonly: var(--color-neutral-85);
            --p-border-color-readonly: var(--color-neutral-80);
            --p-text-color-disabled: var(--color-neutral-70);
            --p-bg-color-disabled: var(--p-bg-color-default);
            --p-border-color-disabled: var(--color-neutral-85)
        }

        .theme-dark .input-text:where([readonly], .is-read-only)+.input-button,
        .theme-dark .tags-input:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=text]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=number]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=password]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=email]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=url]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=search]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=tel]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=file]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=date]:where([readonly], .is-read-only)+.input-button,
        .theme-dark [type=time]:where([readonly], .is-read-only)+.input-button,
        .theme-dark select:where([readonly], .is-read-only)+.input-button,
        .theme-dark textarea:where([readonly], .is-read-only)+.input-button {
            --p-border-color: var(--color-neutral-60)
        }

        .theme-dark .input-text:where(:disabled, .is-disabled)+.input-button,
        .theme-dark .tags-input:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=text]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=number]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=password]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=email]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=url]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=search]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=tel]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=file]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=date]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark [type=time]:where(:disabled, .is-disabled)+.input-button,
        .theme-dark select:where(:disabled, .is-disabled)+.input-button,
        .theme-dark textarea:where(:disabled, .is-disabled)+.input-button {
            --p-border-color: var(--color-neutral-80)
        }

        textarea.input-text,
        textarea.tags-input {
            block-size: 12.5rem
        }

        [type=search] {
            padding-inline-start: 3rem
        }

        [type=search]:disabled+.icon-search {
            color: hsl(var(--color-neutral-20))
        }

        .theme-dark [type=search]:disabled+.icon-search {
            color: hsl(var(--color-neutral-70))
        }

        [type=search]::-webkit-search-cancel-button {
            display: none
        }

        [type=password] {
            padding-inline-end: 3rem
        }

        [type=password]:where(:not(:placeholder-shown)) {
            font-weight: 700
        }

        [type=password]:where(:placeholder-shown)~.show-password-button {
            opacity: .5
        }

        .theme-dark input[type=datetime-local i]::-webkit-calendar-picker-indicator {
            filter: contrast(0) brightness(1.5)
        }

        .show-password-button {
            display: grid;
            place-content: center;
            position: absolute;
            inset-block: .25rem;
            inset-inline-end: 0rem;
            padding-inline: 1rem;
            border-radius: var(--border-radius-small);
            font-size: 1.125rem;
            transition: var(--transition)
        }

        .transparent-password-input {
            display: flex;
            gap: 1rem;
            align-items: center
        }

        .transparent-password-input button {
            display: grid;
            place-content: center;
            inline-size: 2rem;
            block-size: 2rem;
            border-radius: var(--border-radius-circular);
            flex-shrink: 0
        }

        .transparent-password-input input {
            padding: 0;
            border-width: 0;
            font-size: 1.5rem
        }

        .select {
            position: relative
        }

        .select select {
            white-space: pre;
            cursor: pointer;
            padding-inline-end: 3rem
        }

        .select select:focus {
            outline: unset
        }

        .select :where([class*=icon]) {
            position: absolute;
            inset-block-start: .625rem;
            inset-inline-end: .75rem;
            pointer-events: none;
            color: hsl(var(--p-text-color));
            line-height: 1
        }

        .custom-select {
            position: relative
        }

        .custom-select .drop {
            --drop-border-color: var(--color-neutral-15);
            --drop-border-radius: var(--border-radius-xsmall);
            inset-inline: 0;
            max-inline-size: none
        }

        .theme-dark .custom-select .drop {
            --drop-border-color: var(--color-neutral-80)
        }

        .custom-select .input-text-wrapper .icon-cheveron-down {
            display: block;
            transition: var(--transition)
        }

        .custom-select.is-open .input-text-wrapper .icon-cheveron-down {
            transform: rotate(-180deg)
        }

        [type=file] {
            cursor: pointer
        }

        [type=file]::-webkit-file-upload-button {
            line-height: 1
        }

        .text-counter {
            --p-text-counter-color: var(--color-neutral-50);
            display: flex;
            -webkit-user-select: none;
            user-select: none;
            font-size: var(--font-size-00);
            color: hsl(var(--p-text-counter-color))
        }

        .text-counter-separator:before {
            content: "/"
        }

        input:placeholder-shown+.text-counter {
            --p-text-counter-color: var(--color-neutral-20)
        }

        .theme-dark input:placeholder-shown+.text-counter {
            --p-text-counter-color: var(--color-neutral-50)
        }

        .input-text-wrapper>.text-counter {
            position: absolute;
            inset-block-start: .75rem;
            inset-inline-end: 1rem
        }

        .wysiwyg {
            --p-options-bg-color: var(--color-neutral-5);
            display: flex;
            flex-direction: column;
            min-block-size: 11rem
        }

        .wysiwyg-options {
            block-size: 2.5rem;
            padding: .25rem;
            margin-block-end: 1rem;
            background-color: hsl(var(--p-options-bg-color));
            border-radius: var(--border-radius-xsmall)
        }

        .wysiwyg [contenteditable] {
            flex: 1
        }

        .wysiwyg [contenteditable]:empty:before {
            content: attr(data-placeholder)
        }

        .tags-input {
            min-block-size: 2.5rem;
            padding-block: .3125rem;
            padding-inline: .9375rem;
            block-size: auto;
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap
        }

        .tags-input-text {
            all: unset;
            flex: 1;
            font-size: .875rem
        }

        .tags-input.is-focus {
            box-shadow: var(--focus-box-shadow)
        }

        .tags-input .tags-input-text:not(input):before {
            content: attr(placeholder);
            opacity: .5
        }

        .theme-dark .tags-input.is-read-only {
            --p-bg-color: var(--color-neutral-80);
            --p-border-color: var(--color-neutral-60)
        }

        .theme-dark .tags-input.is-read-only .tag {
            --tag-bg-color: var(--color-neutral-60);
            --tag-text-color: var(--color-neutral-15)
        }

        .tags {
            display: contents
        }

        .tags-list {
            display: contents;
            gap: 10px;
            flex-wrap: wrap
        }

        .input-tag {
            --p-bg-color: var(--tag-bg-color, var(--color-neutral-15));
            --p-text-color: var(--tag-text-color, var(--color-neutral-60));
            display: flex;
            height: 1.75rem;
            gap: 6px;
            align-items: center;
            background-color: hsl(var(--p-bg-color));
            padding-inline: .5rem;
            padding-block: .375rem;
            border-radius: var(--border-radius-xsmall);
            color: hsl(var(--p-text-color))
        }

        .input-tag-delete-button {
            aspect-ratio: 1/1;
            line-height: 1;
            border-radius: var(--border-radius-xsmall);
            text-align: center
        }

        .input-tag-delete-button [class*=icon]:before {
            vertical-align: middle
        }

        .input-tag.is-disabled {
            --p-text-color: var(--color-neutral-20)
        }

        .theme-dark .input-tag {
            --tag-bg-color: var(--color-neutral-80);
            --tag-text-color: var(--color-neutral-20)
        }

        .verification-code-input {
            --p-input-size: var(--input-size, 2.5rem);
            inline-size: var(--p-input-size);
            block-size: var(--p-input-size);
            font-size: 1.25rem;
            text-align: center
        }

        .verification-code-input.is-large {
            --input-size: 3.75rem;
            font-size: 1.875rem
        }

        .password-meter {
            position: absolute;
            z-index: 2;
            bottom: .25rem;
            inset-inline: .5rem;
            width: 0%;
            height: .125rem;
            max-width: calc(100% - 1rem);
            background: none;
            transition: var(--transition)
        }

        .password-meter::-webkit-meter-optimum-value {
            background-image: none
        }

        .password-meter::-webkit-meter-bar {
            background: none
        }

        .password-meter::-moz-meter-bar {
            background: none
        }

        .password-meter.is-weak {
            background: hsl(var(--color-danger-100));
            width: 33.33%
        }

        .password-meter.is-weak::-webkit-meter-optimum-value {
            background-color: hsl(var(--color-danger-100))
        }

        .password-meter.is-medium {
            background: hsl(var(--color-warning-100));
            width: 66.66%
        }

        .password-meter.is-medium::-webkit-meter-optimum-value {
            background-color: hsl(var(--color-warning-100))
        }

        .password-meter.is-strong {
            background: hsl(var(--color-success-100));
            width: 100%
        }

        .password-meter.is-strong::-webkit-meter-optimum-value {
            background-color: hsl(var(--color-success-100))
        }

        [type=checkbox],
        [type=radio] {
            --p-size: 1.25rem;
            --p-icon-size: calc(var(--p-size) * .85);
            --p-icon-color: var(--p-icon-color-default);
            --p-bg-color: var(--p-bg-color-default);
            --p-border-color: var(--p-border-color-default);
            --p-icon-color-default: var(--color-neutral-0);
            --p-bg-color-default: var(--color-neutral-0);
            --p-border-color-default: var(--color-neutral-20);
            --p-bg-color-checked: var(--color-information-100);
            --p-border-color-checked: var(--color-information-100);
            --p-bg-color-hover: var(--color-neutral-5);
            --p-border-color-hover: var(--color-neutral-20);
            --p-bg-color-hover-checked: var(--color-information-100);
            --p-border-color-hover-checked: var(--color-information-100);
            --p-bg-color-indeterminate: var(--color-information-100);
            --p-border-color-indeterminate: var(--color-information-100);
            --p-bg-color-active: var(--color-neutral-0);
            --p-border-color-active: var(--color-information-120);
            --p-bg-color-active-checked: var(--color-information-120);
            --p-border-color-active-checked: var(--color-information-120);
            --p-bg-color-disabled: var(--color-neutral-10);
            --p-border-color-ddisabled: var(--color-neutral-15);
            --p-icon-color-disabled-checked: var(--color-neutral-0);
            --p-bg-color-disabled-checked: var(--color-neutral-15);
            --p-border-color-disabled-checked: var(--color-neutral-15);
            display: inline-grid;
            place-content: center;
            flex-shrink: 0;
            inline-size: var(--p-size);
            block-size: var(--p-size);
            background: hsl(var(--p-bg-color));
            border: solid .0625rem hsl(var(--p-border-color));
            color: hsl(var(--p-icon-color));
            vertical-align: middle;
            cursor: pointer
        }

        [type=checkbox].is-small,
        [type=radio].is-small {
            --p-size: 1rem
        }

        [type=checkbox].is-large,
        [type=radio].is-large {
            --p-size: 1.5rem
        }

        [type=checkbox]:where(:focus),
        [type=radio]:where(:focus) {
            --focus-box-shadow: 0 0 0 .0625rem hsl(var(--color-information-100)), 0 0 0 .125rem hsl(var(--color-information-100)/.25)
        }

        [type=checkbox]:where(:checked),
        [type=radio]:where(:checked) {
            --p-bg-color: var(--p-bg-color-checked);
            --p-border-color: var(--p-border-color-checked)
        }

        [type=checkbox]:where(:hover),
        [type=radio]:where(:hover) {
            --p-bg-color: var(--p-bg-color-hover);
            --p-border-color: var(--p-border-color-hover)
        }

        [type=checkbox]:where(:hover):where(:checked),
        [type=radio]:where(:hover):where(:checked) {
            --p-bg-color: var(--p-bg-color-hover-checked);
            --p-border-color: var(--p-border-color-hover-checked)
        }

        [type=checkbox]:where(:indeterminate),
        [type=radio]:where(:indeterminate) {
            --p-bg-color: var(--p-bg-color-indeterminate);
            --p-border-color: var(--p-border-color-indeterminate)
        }

        [type=checkbox]:where(:active),
        [type=radio]:where(:active) {
            --p-bg-color: var(--p-bg-color-active);
            --p-border-color: var(--p-border-color-active)
        }

        [type=checkbox]:where(:active):where(:checked),
        [type=radio]:where(:active):where(:checked) {
            --p-bg-color: var(--p-bg-color-active-checked);
            --p-border-color: var(--p-border-color-active-checked)
        }

        [type=checkbox]:where(:disabled),
        [type=radio]:where(:disabled) {
            --p-bg-color: var(--p-bg-color-disabled);
            --p-border-color: var(--p-border-color-ddisabled);
            cursor: initial
        }

        [type=checkbox]:where(:disabled):where(:checked),
        [type=radio]:where(:disabled):where(:checked) {
            --p-icon-color: var(--p-icon-color-disabled-checked);
            --p-bg-color: var(--p-bg-color-disabled-checked);
            --p-border-color: var(--p-border-color-disabled-checked)
        }

        .theme-dark [type=checkbox],
        .theme-dark [type=radio] {
            --p-bg-color-disabled: var(--color-neutral-80);
            --p-border-color-ddisabled: var(--color-neutral-70);
            --p-icon-color-disabled-checked: var(--color-neutral-60);
            --p-bg-color-disabled-checked: var(--color-neutral-80);
            --p-border-color-disabled-checked: var(--color-neutral-80)
        }

        [type=radio] {
            position: relative;
            border-radius: var(--border-radius-circular)
        }

        [type=radio]:where(:checked) {
            padding: calc(var(--p-size) * .2)
        }

        [type=radio]:where(:checked):before {
            content: "";
            display: block;
            position: absolute;
            top: 30%;
            right: 30%;
            bottom: 30%;
            left: 30%;
            background-color: hsl(var(--p-icon-color));
            border-radius: var(--border-radius-circular)
        }

        [type=checkbox] {
            border-radius: var(--border-radius-xsmall)
        }

        [type=checkbox]:where(:indeterminate):after {
            content: "";
            display: block;
            inline-size: .625rem;
            block-size: .125rem;
            border-radius: .0625rem;
            background-color: hsl(var(--color-neutral-0))
        }

        [type=checkbox]:where(:checked):before {
            font-family: icon !important;
            content: var(--icon-check);
            vertical-align: middle;
            margin-bottom: calc(var(--p-size) / 8 * -1);
            font-size: var(--p-icon-size)
        }

        [type=checkbox]:where(:not(:checked)):before {
            display: none
        }

        .checkboxes-header {
            display: flex;
            justify-content: space-between
        }

        .checkboxes-options {
            display: flex;
            gap: .625rem;
            font-size: .8125rem
        }

        .checkboxes-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.875rem
        }

        .checkboxes-item :where([type=checkbox], [type=radio]) {
            margin-inline-end: .625rem
        }

        .radio-button {
            all: unset;
            --p-radio-bitton-text-color: var(--p-radio-bitton-text-color-default);
            --p-radio-bitton-bg-color: var(--p-radio-bitton-bg-color-default);
            --p-radio-bitton-border-color: var(--p-radio-bitton-border-color-default);
            --p-radio-bitton-text-color-default: var(--color-neutral-60);
            --p-radio-bitton-bg-color-default: var(--color-neutral-5);
            --p-radio-bitton-border-color-default: var(--color-neutral-15);
            --p-radio-bitton-text-color-checked: var(--p-radio-bitton-text-color-default);
            --p-radio-bitton-bg-color-checked: var(--color-neutral-15);
            --p-radio-bitton-border-color-checked: var(--p-radio-bitton-border-color-default);
            color: hsl(var(--p-radio-bitton-text-color));
            background-color: hsl(var(--p-radio-bitton-bg-color));
            border: solid .0625rem hsl(var(--p-radio-bitton-border-color));
            display: grid;
            place-content: center;
            box-sizing: border-box;
            padding: 0;
            inline-size: 2.0625rem;
            block-size: 2.25rem;
            border-radius: var(--border-radius-small);
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition)
        }

        .radio-button:before {
            content: attr(data-text)
        }

        .radio-button:where(:hover) {
            scale: 1.1
        }

        .radio-button:where(:focus-visible) {
            box-shadow: var(--focus-box-shadow);
            scale: 1.1
        }

        .radio-button:where(:checked) {
            --p-radio-bitton-text-color: var(--p-radio-bitton-text-color-checked);
            --p-radio-bitton-bg-color: var(--p-radio-bitton-bg-color-checked);
            --p-radio-bitton-border-color: var(--p-radio-bitton-border-color-checked)
        }

        .radio-button:where(:checked):before {
            position: initial;
            background: initial
        }

        .theme-dark .radio-button {
            --p-radio-bitton-text-color-default: var(--color-neutral-20);
            --p-radio-bitton-bg-color-default: var(--color-neutral-85);
            --p-radio-bitton-border-color-default: var(--color-neutral-80);
            --p-radio-bitton-text-color-checked: var(--p-radio-bitton-text-color-default);
            --p-radio-bitton-bg-color-checked: var(--color-neutral-80);
            --p-radio-bitton-border-color-checked: var(--color-neutral-60)
        }

        .image-radio {
            display: flex;
            flex-direction: column;
            gap: .75rem;
            cursor: pointer
        }

        .image-radio [type=radio] {
            display: block;
            margin-inline: auto
        }

        .choice-item {
            --p-choice-item-title-color: var(--color-neutral-70);
            --p-choice-item-text-color: var(--color-neutral-60);
            display: flex;
            gap: .5rem
        }

        .choice-item-content {
            display: flex;
            flex-direction: column;
            gap: .25rem;
            line-height: 1.5
        }

        .choice-item-title {
            color: hsl(var(--p-choice-item-title-color));
            font-weight: 600
        }

        .choice-item-paragraph {
            color: hsl(var(--p-choice-item-text-color))
        }

        .theme-dark .choice-item {
            --p-choice-item-title-color: var(--color-neutral-10);
            --p-choice-item-text-color: var(--color-neutral-20)
        }

        .switch {
            --p-switch-bg-color: var(--p-switch-bg-color-default);
            --p-switch-bg-color-default: var(--color-neutral-0);
            --p-switch-bg-color-disabled: var(--p-switch-bg-color-default);
            --p-bg-color: var(--p-bg-color-default);
            --p-bg-color-default: var(--color-neutral-20);
            --p-bg-color-checked: var(--color-information-100);
            --p-bg-color-hover: var(--color-neutral-20);
            --p-bg-color-checked-hover: var(--color-information-100);
            --p-bg-color-active: var(--color-neutral-60);
            --p-bg-color-checked-active: var(--color-information-120);
            --p-bg-color-disabled: var(--color-neutral-15);
            --p-bg-color-checked-disabled: var(--color-information-50);
            all: unset;
            position: relative;
            display: inline-flex;
            box-sizing: border-box;
            flex-shrink: 0;
            inline-size: 2.25rem;
            block-size: 1.25rem;
            border-radius: var(--border-radius-medium);
            padding: .125rem;
            background-color: hsl(var(--p-bg-color));
            cursor: pointer;
            transition: var(--transition)
        }

        .switch:before {
            content: "";
            position: absolute;
            inset-inline-start: .125rem;
            display: block;
            inline-size: 1rem;
            block-size: 1rem;
            background-color: hsl(var(--p-switch-bg-color));
            border-radius: var(--border-radius-circular);
            box-shadow: var(--shadow-small);
            transition: var(--transition)
        }

        .switch:where(:focus-visible) {
            box-shadow: var(--focus-box-shadow)
        }

        .switch.is-small {
            inline-size: 1.875rem;
            block-size: 1rem
        }

        .switch.is-small:before {
            inline-size: .75rem;
            block-size: .75rem
        }

        .switch.is-small:where(:checked):before {
            transform: translate(calc(.875rem * var(--transform-direction)))
        }

        .switch.is-large {
            inline-size: 2.5rem;
            block-size: 1.5rem
        }

        .switch.is-large:before {
            inline-size: 1.25rem;
            block-size: 1.25rem
        }

        .switch.is-large:where(:checked):before {
            transform: translate(calc(1rem * var(--transform-direction)))
        }

        .switch:where(:focus) {
            --focus-box-shadow: 0 0 0 .0625rem hsl(var(--color-information-100)), 0 0 0 .125rem hsl(var(--color-information-100)/.25)
        }

        .switch:where(:checked) {
            --p-bg-color: var(--p-bg-color-checked)
        }

        .switch:where(:checked):before {
            transform: translate(calc(1rem * var(--transform-direction)))
        }

        .switch:where(:hover) {
            --p-bg-color: var(--p-bg-color-hover)
        }

        .switch:where(:hover):where(:checked) {
            --p-bg-color: var(--p-bg-color-checked-hover)
        }

        .switch:where(:active) {
            --p-bg-color: var(--p-bg-color-active)
        }

        .switch:where(:active):where(:checked) {
            --p-bg-color: var(--p-bg-color-checked-active)
        }

        .switch:where(:disabled) {
            --p-bg-color: var(--p-bg-color-disabled);
            --p-switch-bg-color: var(--p-switch-bg-color-disabled);
            cursor: default
        }

        .switch:where(:disabled):where(:checked) {
            --p-bg-color: var(--p-bg-color-checked-disabled)
        }

        .theme-dark .switch {
            --p-switch-bg-color-disabled: var(--color-neutral-70);
            --p-bg-color-disabled: var(--color-neutral-85);
            --p-bg-color-checked-disabled: var(--color-information-200)
        }

        .notification {
            inline-size: .375rem;
            block-size: .375rem;
            box-sizing: content-box;
            background-color: hsl(var(--color-primary-100));
            border: solid .125rem hsl(var(--p-body-bg-color));
            border-radius: var(--border-radius-circular)
        }

        .pulse-notification {
            --p-pulse-color: var(--color-primary-200);
            box-sizing: content-box;
            inline-size: .5rem;
            block-size: .5rem;
            background-color: hsl(var(--p-pulse-color));
            border-radius: 50%;
            position: relative
        }

        .pulse-notification:before {
            content: "";
            display: block;
            position: absolute;
            top: -.0625rem;
            right: -.0625rem;
            bottom: -.0625rem;
            left: -.0625rem;
            border-radius: 50%;
            border: .015625rem double hsl(var(--p-pulse-color));
            animation: pulse 1s ease infinite
        }

        @media (prefers-reduced-motion) {
            .pulse-notification:before {
                animation: none
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1
            }

            60% {
                transform: scale(1.2);
                opacity: .6
            }

            to {
                transform: scale(1.3);
                opacity: .3
            }
        }

        .interactive-text-output {
            --p-text-color: var(--color-neutral-60);
            --p-background-color: var(--color-neutral-10);
            position: relative;
            display: flex;
            gap: .75rem;
            max-inline-size: 100%;
            min-block-size: 1.75rem;
            padding-inline: .5rem;
            padding-block: .25rem;
            inline-size: fit-content;
            min-inline-size: 9.125rem;
            border-radius: var(--border-radius-xsmall);
            color: hsl(var(--p-text-color));
            line-height: 1
        }

        .interactive-text-output .text {
            overflow-wrap: break-word;
            word-wrap: break-word;
            -ms-word-break: break-all;
            word-break: break-all;
            word-break: break-word;
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto;
            flex: 1;
            align-self: center;
            font-family: var(--code-font)
        }

        .interactive-text-output:is(:hover, :has(:focus)) {
            background-color: hsl(var(--p-background-color))
        }

        .interactive-text-output:is(:hover, :has(:focus)) .interactive-text-output-button {
            opacity: 1
        }

        .interactive-text-output-buttons {
            display: flex;
            gap: .5rem;
            align-self: start
        }

        .interactive-text-output-button {
            border-radius: var(--border-radius-circular)
        }

        .interactive-text-output-button.is-hidden {
            opacity: 0
        }

        .interactive-text-output.is-buttons-on-top {
            background-color: hsl(var(--p-background-color))
        }

        .interactive-text-output.is-buttons-on-top .interactive-text-output-buttons {
            position: absolute;
            inset-inline-end: .5rem;
            inset-block-start: .25rem;
            filter: drop-shadow(0px 0px .25rem hsl(var(--p-background-color))) drop-shadow(0px 0px .375rem hsl(var(--p-background-color))) drop-shadow(0px 0px .5rem hsl(var(--p-background-color)))
        }

        .theme-dark .interactive-text-output {
            --p-text-color: var(--color-neutral-20);
            --p-background-color: var(--color-neutral-80)
        }

        .form {
            display: flex;
            flex-direction: column
        }

        .form-header {
            display: grid;
            gap: 1rem;
            padding-block-end: 2rem;
            border-block-end: solid .0625rem hsl(var(--color-border));
            margin-block-end: 2rem
        }

        .form-header :where([class*=heading-]) {
            margin-block: 0
        }

        .form-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-block-end: 2rem
        }

        .form-footer {
            padding-block: 2rem;
            margin-block-start: 2rem;
            border-block-start: solid .0625rem hsl(var(--color-border))
        }

        .form-list {
            --p-form-list-gap: var(--form-list-gap, 1.5rem);
            display: grid;
            gap: var(--p-form-list-gap)
        }

        .form-list.is-multiple {
            grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr))
        }

        .form-item.is-multiple {
            display: flex;
            gap: .5rem
        }

        .form-item.is-span-2 {
            grid-column: span 2
        }

        .tooltip {
            --p-tooltip-text-color: var(--color-neutral-10);
            --p-tooltip--bg-color: var(--color-neutral-60);
            position: relative;
            line-height: 1
        }

        .tooltip [class*=icon]:before {
            vertical-align: middle
        }

        .tooltip-popup {
            display: none;
            position: absolute;
            inset-inline-start: 0;
            inset-block-end: calc(100% + 6px);
            padding-block: .25rem;
            padding-inline: .5rem;
            max-inline-size: 11.25rem;
            inline-size: max-content;
            background-color: hsl(var(--p-tooltip--bg-color));
            font-size: var(--font-size-0);
            line-height: 1.5;
            color: hsl(var(--p-tooltip-text-color));
            border-radius: var(--border-radius-small)
        }

        .tooltip-popup.is-bottom {
            inset-block-start: calc(100% + 10px);
            inset-block-end: auto
        }

        .tooltip-popup.is-center {
            inset-inline-start: 50%;
            transform: translate(-50%)
        }

        .tooltip-popup.is-end {
            inset-inline-start: auto;
            inset-inline-end: 0
        }

        .tooltip:hover .tooltip-popup,
        .tooltip:focus-visible .tooltip-popup {
            display: block;
            white-space: initial
        }

        .tag {
            --p-tag-height: 2rem;
            --p-tag-content-height: 1.875rem;
            --p-tag-padding-inline: .75rem;
            --p-tag-text-color: var(--tag-text-color, var(--p-tag-text-color-default));
            --p-tag-bg-color: var(--tag-bg-color, var(--p-tag-bg-color-default));
            --p-tag-border-color: var(--tag-border-color, var(--p-tag-border-color-default));
            --p-tag-text-color-default: var(--color-neutral-70);
            --p-tag-bg-color-default: var(--color-neutral-10);
            --p-tag-border-color-default: var(--p-tag-bg-color-default);
            --p-tag-text-color-success: var(--color-success-120);
            --p-tag-bg-color-success: var(--color-success-10);
            --p-tag-border-color-success: var(--p-tag-bg-color-success);
            --p-tag-text-color-warning: var(--color-warning-120);
            --p-tag-bg-color-warning: var(--color-warning-10);
            --p-tag-border-color-warning: var(--p-tag-bg-color-warning);
            --p-tag-text-color-danger: var(--color-danger-120);
            --p-tag-bg-color-danger: var(--color-danger-10);
            --p-tag-border-color-danger: var(--p-tag-bg-color-danger);
            --p-tag-text-color-info: var(--color-information-120);
            --p-tag-bg-color-info: var(--color-information-10);
            --p-tag-border-color-info: var(--p-tag-bg-color-info);
            --p-tag-text-color-clickable: var(--color-neutral-60);
            --p-tag-bg-color-clickable: var(--color-neutral-5);
            --p-tag-border-color-clickable: var(--color-neutral-10);
            --p-tag-text-color-hover: var(--color-neutral-70);
            --p-tag-bg-color-hover: var(--color-neutral-10);
            --p-tag-border-color-hover: var(--p-tag-bg-color-hover);
            --p-tag-text-color-active: var(--color-neutral-70);
            --p-tag-bg-color-active: var(--color-neutral-15);
            --p-tag-border-color-active: var(--p-tag-bg-color-active);
            --p-tag-text-color-selected: var(--p-tag-text-color-clickable);
            --p-tag-bg-color-selected: var(--p-tag-bg-color-clickable);
            --p-tag-border-color-selected: var(--color-neutral-50);
            --p-tag-text-color-disabled: var(--color-neutral-20);
            --p-tag-bg-color-disabled: var(--color-neutral-5);
            --p-tag-border-color-disabled: var(--color-neutral-10);
            color: hsl(var(--p-tag-text-color));
            background-color: hsl(var(--p-tag-bg-color));
            border: solid .0625rem hsl(var(--p-tag-border-color));
            display: inline-flex;
            gap: .25rem;
            justify-self: start;
            padding-inline: var(--p-tag-padding-inline);
            block-size: var(--p-tag-height);
            line-height: var(--p-tag-content-height);
            border-radius: calc(var(--p-tag-height) / 2);
            font-size: var(--font-size-0);
            font-weight: 400;
            white-space: nowrap;
            -webkit-user-select: none;
            user-select: none
        }

        .tag [class*=icon] {
            align-self: center;
            font-size: inherit
        }

        .tag:where(button, a) {
            --p-tag-text-color: var(--p-tag-text-color-clickable);
            --p-tag-bg-color: var(--p-tag-bg-color-clickable);
            --p-tag-border-color: var(--p-tag-border-color-clickable)
        }

        .tag:where(button, a):where(.is-selected) {
            --p-tag-text-color: var(--p-tag-text-color-selected);
            --p-tag-bg-color: var(--p-tag-bg-color-selected)
        }

        .tag:where(button, a):where(:hover) {
            --p-tag-text-color: var(--p-tag-text-color-hover);
            --p-tag-bg-color: var(--p-tag-bg-color-hover);
            --p-tag-border-color: var(--p-tag-border-color-hover)
        }

        .tag:where(button, a):where(:active) {
            --p-tag-text-color: var(--p-tag-text-color-active);
            --p-tag-bg-color: var(--p-tag-bg-color-active);
            --p-tag-border-color: var(--p-tag-border-color-active)
        }

        .tag:where(button, a):where(.is-selected) {
            --p-tag-border-color: var(--p-tag-border-color-selected)
        }

        .tag:where(button, a):where(:disabled, .is-disabled) {
            --p-tag-text-color: var(--p-tag-text-color-disabled);
            --p-tag-bg-color: var(--p-tag-bg-color-disabled);
            --p-tag-border-color: var(--p-tag-border-color-disabled)
        }

        @media (hover: none) and (pointer: coarse) {
            .tag:where(button, a) {
                --p-tag-height: 2.625rem;
                --p-tag-content-height: 2.5rem
            }
        }

        .tag.is-success {
            --p-tag-text-color: var(--p-tag-text-color-success);
            --p-tag-bg-color: var(--p-tag-bg-color-success);
            --p-tag-border-color: var(--p-tag-border-color-success)
        }

        .tag.is-warning {
            --p-tag-text-color: var(--p-tag-text-color-warning);
            --p-tag-bg-color: var(--p-tag-bg-color-warning);
            --p-tag-border-color: var(--p-tag-border-color-warning)
        }

        .tag.is-danger {
            --p-tag-text-color: var(--p-tag-text-color-danger);
            --p-tag-bg-color: var(--p-tag-bg-color-danger);
            --p-tag-border-color: var(--p-tag-border-color-danger)
        }

        .tag.is-info {
            --p-tag-text-color: var(--p-tag-text-color-info);
            --p-tag-bg-color: var(--p-tag-bg-color-info);
            --p-tag-border-color: var(--p-tag-border-color-info)
        }

        .theme-dark .tag {
            --p-tag-text-color-default: var(--color-neutral-20);
            --p-tag-bg-color-default: var(--color-neutral-80);
            --p-tag-text-color-success: var(--color-success-100);
            --p-tag-bg-color-success: var(--color-success-200);
            --p-tag-text-color-warning: var(--color-warning-100);
            --p-tag-bg-color-warning: var(--color-warning-200);
            --p-tag-text-color-danger: var(--color-danger-100);
            --p-tag-bg-color-danger: var(--color-danger-200);
            --p-tag-text-color-info: var(--color-information-100);
            --p-tag-bg-color-info: var(--color-information-200);
            --p-tag-text-color-clickable: var(--color-neutral-20);
            --p-tag-bg-color-clickable: var(--color-neutral-85);
            --p-tag-border-color-clickable: var(--color-neutral-80);
            --p-tag-text-color-hover: var(--color-neutral-20);
            --p-tag-bg-color-hover: var(--color-neutral-80);
            --p-tag-border-color-hover: var(--color-neutral-80);
            --p-tag-text-color-active: var(--color-neutral-20);
            --p-tag-bg-color-active: var(--color-neutral-100);
            --p-tag-border-color-active: var(--color-neutral-100);
            --p-tag-text-color-disabled: var(--color-neutral-70);
            --p-tag-bg-color-disabled: var(--color-neutral-85);
            --p-tag-border-color-disabled: var(--color-neutral-85)
        }

        .inline-tag {
            --p-inline-tag-height: 1.375rem;
            --p-inline-tag-padding-inline: .375rem;
            --p-inline-tag-text-color: var(--inline-tag-text-color, var(--p-inline-tag-text-color-default));
            --p-inline-tag-bg-color: var(--inline-tag-bg-color, var(--p-inline-tag-bg-color-default));
            --p-inline-tag-text-color-default: var(--p-text-color, var(--color-neutral-60));
            --p-inline-tag-bg-color-default: var(--color-neutral-10);
            --p-inline-tag-text-color-disabled: var(--color-neutral-15);
            --p-inline-tag-text-color-info: var(--color-neutral-0);
            --p-inline-tag-bg-color-info: var(--color-information-100);
            display: inline-grid;
            place-content: center;
            padding-inline: var(--p-inline-tag-padding-inline);
            background-color: hsl(var(--p-inline-tag-bg-color));
            color: hsl(var(--p-inline-tag-text-color));
            border-radius: var(--border-radius-xsmall);
            flex-shrink: 0;
            font-weight: 600
        }

        .inline-tag.is-info {
            --p-inline-tag-text-color: var(--p-inline-tag-text-color-info);
            --p-inline-tag-bg-color: var(--p-inline-tag-bg-color-info)
        }

        .inline-tag:where(:disabled, .is-disabled) {
            --p-inline-tag-text-color: var(--p-inline-tag-text-color-disabled)
        }

        .theme-dark .inline-tag {
            --p-inline-tag-text-color-default: var(--p-text-color, var(--color-neutral-20));
            --p-inline-tag-bg-color-default: var(--color-neutral-80);
            --p-inline-tag-text-color-disabled: var(--color-neutral-60)
        }

        .logo {
            flex-shrink: 0;
            display: block
        }

        .logo img {
            display: block
        }

        .avatar {
            --p-text-size: var(--text-size, var(--font-size-0));
            --p-size: var(--size, 2.5rem);
            --p-avatar-text-color: var(--p-avatar-text-color-default);
            --p-avatar-bg-color: var(--p-avatar-bg-color-default);
            --p-avatar-border-color: var(--p-avatar-border-color-default);
            --p-avatar-text-color-default: var(--color-neutral-60);
            --p-avatar-bg-color-default: var(--color-neutral-5);
            --p-avatar-border-color-default: var(--color-neutral-10);
            --p-avatar-text-color-empty: var(--color-neutral-20);
            --p-avatar-bg-color-empty: var(--transparent);
            --p-avatar-border-color-empty: var(--color-neutral-20);
            --p-avatar-text-color-orange: var(--color-neutral-0);
            --p-avatar-bg-color-orange: var(--color-orange-100);
            --p-avatar-border-color-orange: var(--p-avatar-bg-color-orange);
            --p-avatar-text-color-green: var(--color-neutral-0);
            --p-avatar-bg-color-green: var(--color-green-100);
            --p-avatar-border-color-green: var(--p-avatar-bg-color-green);
            --p-avatar-text-color-blue: var(--color-neutral-0);
            --p-avatar-bg-color-blue: var(--color-blue-100);
            --p-avatar-border-color-blue: var(--p-avatar-bg-color-blue);
            --p-avatar-text-color-pink: var(--color-neutral-0);
            --p-avatar-bg-color-pink: var(--color-pink-100);
            --p-avatar-border-color-pink: var(--p-avatar-bg-color-pink);
            --p-avatar-text-color-red: var(--color-neutral-0);
            --p-avatar-bg-color-red: var(--color-red-100);
            --p-avatar-border-color-red: var(--p-avatar-bg-color-red);
            --color-text-info: var(--color-information-100);
            --color-text-danger: var(--color-danger-100);
            --color-text-warning: var(--color-warning-100);
            --color-text-success: var(--color-success-100);
            --p-avatar-text-info: var(--color-neutral-0);
            --p-avatar-bg-info: var(--color-text-info);
            --p-avatar-border-info: var(--p-avatar-bg-info);
            --p-avatar-text-danger: var(--color-neutral-0);
            --p-avatar-bg-danger: var(--color-text-danger);
            --p-avatar-border-danger: var(--p-avatar-bg-danger);
            --p-avatar-text-warning: var(--color-neutral-0);
            --p-avatar-bg-warning: var(--color-text-warning);
            --p-avatar-border-warning: var(--p-avatar-bg-warning);
            --p-avatar-text-success: var(--color-neutral-0);
            --p-avatar-bg-success: var(--color-text-success);
            --p-avatar-border-success: var(--p-avatar-bg-success);
            color: hsl(var(--p-avatar-text-color));
            background-color: hsl(var(--p-avatar-bg-color));
            border: solid .0625rem hsl(var(--p-avatar-border-color));
            font-size: var(--p-text-size);
            inline-size: var(--p-size);
            block-size: var(--p-size);
            min-inline-size: var(--p-size);
            min-block-size: var(--p-size);
            max-inline-size: var(--p-size);
            max-block-size: var(--p-size);
            border-radius: var(--border-radius-circular);
            display: grid;
            place-content: center;
            flex-shrink: 0;
            box-sizing: content-box;
            overflow: hidden;
            text-transform: uppercase;
            -webkit-user-select: none;
            user-select: none;
            line-height: 1
        }

        .avatar [class*=icon] {
            font-size: var(--p-text-size) !important
        }

        .avatar img,
        .avatar svg {
            inline-size: var(--p-text-size);
            aspect-ratio: 1/1
        }

        .avatar-link {
            display: block;
            border-radius: var(--border-radius-circular)
        }

        .avatar-link:focus-visible {
            box-shadow: var(--focus-box-shadow)
        }

        .avatar.is-size-x-small {
            --p-text-size: .625rem;
            --p-size: 1.5rem
        }

        .avatar.is-size-x-small.is-with-3-char {
            --p-text-size: .5rem
        }

        .avatar.is-size-x-small [class*=icon] {
            --p-text-size: var(--font-size-00)
        }

        .avatar.is-size-small {
            --p-text-size: var(--font-size-00);
            --p-size: 2rem
        }

        .avatar.is-size-small.is-with-3-char {
            --p-text-size: .625rem
        }

        .avatar.is-size-small [class*=icon],
        .avatar.is-size-medium.is-with-3-char,
        .avatar.is-size-medium [class*=icon] {
            --p-text-size: var(--font-size-0)
        }

        .avatar.is-size-large {
            --p-text-size: var(--font-size-1);
            --p-size: 3rem
        }

        .avatar.is-size-large.is-with-3-char {
            --p-text-size: var(--font-size-0)
        }

        .avatar.is-size-large [class*=icon] {
            --p-text-size: var(--font-size-4)
        }

        .avatar.is-size-x-large {
            --p-text-size: var(--font-size-4);
            --p-size: 4rem
        }

        .avatar.is-size-x-large.is-with-3-char {
            --p-text-size: var(--font-size-2)
        }

        .avatar.is-size-x-large [class*=icon] {
            --p-text-size: var(--font-size-4)
        }

        .avatar.is-color-empty {
            border-style: dashed;
            --p-avatar-text-color: var(--p-avatar-text-color-empty);
            --p-avatar-bg-color: var(--p-avatar-bg-color-empty);
            --p-avatar-border-color: var(--p-avatar-border-color-empty)
        }

        .avatar.is-color-orange {
            --p-avatar-text-color: var(--p-avatar-text-color-orange);
            --p-avatar-bg-color: var(--p-avatar-bg-color-orange);
            --p-avatar-border-color: var(--p-avatar-border-color-orange)
        }

        .avatar.is-color-green {
            --p-avatar-text-color: var(--p-avatar-text-color-green);
            --p-avatar-bg-color: var(--p-avatar-bg-color-green);
            --p-avatar-border-color: var(--p-avatar-border-color-green)
        }

        .avatar.is-color-blue {
            --p-avatar-text-color: var(--p-avatar-text-color-blue);
            --p-avatar-bg-color: var(--p-avatar-bg-color-blue);
            --p-avatar-border-color: var(--p-avatar-border-color-blue)
        }

        .avatar.is-color-pink {
            --p-avatar-text-color: var(--p-avatar-text-color-pink);
            --p-avatar-bg-color: var(--p-avatar-bg-color-pink);
            --p-avatar-border-color: var(--p-avatar-border-color-pink)
        }

        .avatar.is-color-red {
            --p-avatar-text-color: var(--p-avatar-text-color-red);
            --p-avatar-bg-color: var(--p-avatar-bg-color-red);
            --p-avatar-border-color: var(--p-avatar-border-color-red)
        }

        .avatar.is-info {
            --p-avatar-text-color: var(--p-avatar-text-info);
            --p-avatar-bg-color: var(--p-avatar-bg-info);
            --p-avatar-border-color: var(--p-avatar-border-info)
        }

        .avatar.is-warning {
            --p-avatar-text-color: var(--p-avatar-text-warning);
            --p-avatar-bg-color: var(--p-avatar-bg-warning);
            --p-avatar-border-color: var(--p-avatar-border-warning)
        }

        .avatar.is-danger {
            --p-avatar-text-color: var(--p-avatar-text-danger);
            --p-avatar-bg-color: var(--p-avatar-bg-danger);
            --p-avatar-border-color: var(--p-avatar-border-danger)
        }

        .avatar.is-success {
            --p-avatar-text-color: var(--p-avatar-text-success);
            --p-avatar-bg-color: var(--p-avatar-bg-success);
            --p-avatar-border-color: var(--p-avatar-border-success)
        }

        .theme-dark .avatar {
            --p-avatar-text-color-default: var(--color-neutral-20);
            --p-avatar-bg-color-default: var(--color-neutral-85);
            --p-avatar-border-color-default: var(--color-neutral-80);
            --p-avatar-text-color-orange: var(--color-neutral-80);
            --p-avatar-text-color-green: var(--color-neutral-80);
            --p-avatar-text-color-blue: var(--color-neutral-80);
            --p-avatar-text-color-pink: var(--color-neutral-80);
            --p-avatar-text-color-red: var(--color-neutral-80)
        }

        .avatars-group {
            --p-avatar-group-border-color: var(--avatar-group-border-color, var(--color-neutral-10));
            position: relative;
            z-index: 0;
            display: flex
        }

        .avatars-group-item {
            position: relative;
            display: inline-flex
        }

        .avatars-group-item:nth-child(1) {
            z-index: 9
        }

        .avatars-group-item:nth-child(2) {
            z-index: 8
        }

        .avatars-group-item:nth-child(3) {
            z-index: 7
        }

        .avatars-group-item:nth-child(4) {
            z-index: 6
        }

        .avatars-group-item:nth-child(5) {
            z-index: 5
        }

        .avatars-group-item:nth-child(6) {
            z-index: 4
        }

        .avatars-group-item:nth-child(7) {
            z-index: 3
        }

        .avatars-group-item:nth-child(8) {
            z-index: 2
        }

        .avatars-group-item:nth-child(9) {
            z-index: 1
        }

        .avatars-group-item:nth-child(10) {
            z-index: 0
        }

        .avatars-group-item .avatar {
            border: solid .0625rem hsl(var(--p-avatar-group-border-color));
            border-radius: var(--border-radius-circular);
            margin-inline-start: -.6rem
        }

        .avatars-group-item .image-item {
            margin-inline-start: -.6rem
        }

        .avatars-group-item .is-size-x-small,
        .avatars-group-item .is-size-small {
            margin-inline-start: -.5rem
        }

        .avatars-group-item .is-size-large {
            margin-inline-start: -.8rem
        }

        .avatars-group.is-with-border .avatar {
            --p-avatar-group-border-color: var(--p-avatar-border-color-default) !important;
            border-width: .0625rem
        }

        .theme-dark .avatars-group {
            --p-avatar-group-border-color: var(--color-neutral-80)
        }

        .card {
            --p-card-bg-color: var(--p-card-bg-color-default);
            --p-card-bg-color-default: var(--card-bg-color, var(--color-neutral-0));
            --p-card-bg-color-hover: var(--color-neutral-5);
            --p-card-border-color: var(--p-card-border-color-default);
            --p-card-border-color-default: var(--color-border);
            --p-card-border-color-hover: var(--color-neutral-15);
            --p-card-border-radius: var(--card-border-radius, var(--border-radius-medium));
            --p-card-padding: var(--card-padding, 2rem);
            position: relative;
            display: block;
            transition: var(--transition) background-color;
            background: hsl(var(--p-card-bg-color));
            border-radius: var(--p-card-border-radius);
            box-shadow: var(--shadow-small);
            padding: var(--p-card-padding);
            border: solid .0625rem hsl(var(--p-card-border-color))
        }

        .card-header {
            min-block-size: 13.125rem;
            padding: var(--p-card-padding);
            margin: calc(var(--p-card-padding) * -1);
            border-start-start-radius: inherit;
            border-start-end-radius: inherit;
            overflow: hidden;
            background: linear-gradient(271.77deg, #fcfcff, #fdfdff 82.19%, #fff 99.87%)
        }

        .theme-dark .card-header {
            background: linear-gradient(96.46deg, #1b1b28 8.56%, #282a3b 115.77%)
        }

        .card-header-image {
            margin: calc(var(--p-card-padding) * -1);
            max-block-size: 11.125rem;
            margin-inline-end: 0
        }

        .card:focus-visible {
            box-shadow: var(--focus-box-shadow)
        }

        .card-separator {
            padding-block-start: var(--p-card-padding);
            padding-inline: var(--p-card-padding);
            margin-block-start: var(--p-card-padding);
            margin-inline: calc(var(--p-card-padding) * -1);
            border-block-start: solid .0625rem hsl(var(--p-card-border-color))
        }

        .card:where(a, button):hover {
            --p-card-bg-color: var(--p-card-bg-color-hover);
            --p-card-border-color: var(--p-card-border-color-hover)
        }

        .card.is-border-dashed {
            border: dashed .0625rem hsl(var(--p-card-border-color))
        }

        .card.is-no-shadow {
            box-shadow: none
        }

        .card.is-allow-focus {
            cursor: pointer
        }

        .card.is-allow-focus:hover {
            --p-card-bg-color: var(--p-card-bg-color-hover);
            --p-card-border-color: var(--p-card-border-color-hover)
        }

        .card.is-allow-focus:has(:focus-visible) {
            box-shadow: var(--focus-box-shadow)
        }

        .card.is-danger:before {
            position: absolute;
            inset-inline-start: .75rem;
            inset-block: 1.125rem;
            content: "";
            display: block;
            inline-size: .125rem;
            border-radius: .0625rem;
            background-color: hsl(var(--color-text-danger))
        }

        .card.is-danger [class*=heading-level] {
            color: hsl(var(--color-text-danger))
        }

        .card.is-danger .card-separator {
            padding-inline: 0;
            margin-inline: 0
        }

        .theme-dark .card {
            --p-card-bg-color-default: var(--color-neutral-90);
            --p-card-bg-color-hover: var(--color-neutral-85);
            --p-card-border-color-hover: var(--color-neutral-80)
        }

        @media (max-width: 767.99px) {
            .card {
                --p-card-padding: var(--card-padding-mobile, 1rem)
            }
        }

        .separator-with-text {
            --p-text-color: var(--color-neutral-20);
            display: flex;
            gap: 1rem;
            align-items: center;
            margin-block: 3rem;
            color: hsl(var(--p-text-color));
            font-size: var(--font-size-00);
            line-height: 1
        }

        .separator-with-text:before,
        .separator-with-text:after {
            content: "";
            display: block;
            flex: 1;
            block-size: 0;
            border-block-start: solid .0625rem hsl(var(--color-border))
        }

        .theme-dark .separator-with-text {
            --p-text-color: var(--color-neutral-50)
        }

        .table {
            --heading-text-color: var(--color-neutral-60);
            --p-table-bg-color: var(--color-neutral-0);
            --p-table-bg-color-focus: var(--color-neutral-5);
            --p-table-border-color: var(--color-neutral-10);
            --p-tbody-color-text: var(--color-neutral-60);
            --p-border-radius: var(--border-radius-medium);
            display: table;
            table-layout: fixed;
            border-collapse: collapse;
            background-color: hsl(var(--p-table-bg-color));
            border-radius: var(--p-border-radius);
            box-shadow: 0 0 0 .0625rem hsl(var(--color-border)), var(--shadow-small);
            inline-size: 100%;
            line-height: 1.2
        }

        .table-with-scroll {
            --p-track-bg-color: var(--track-bg-color, var(--color-neutral-5));
            --p-track-border-color: var(--track-border-color, var(--color-neutral-10));
            --p-scroll-bg-color: var(--scroll-bg-color, var(--color-neutral-15));
            overflow: hidden;
            border-radius: var(--border-radius-medium)
        }

        .table-with-scroll ::-webkit-scrollbar {
            width: 12px
        }

        .table-with-scroll ::-webkit-scrollbar-track {
            border-block: solid .0625rem hsl(var(--p-track-border-color));
            background-color: hsl(var(--p-track-bg-color));
            border-radius: 0
        }

        .table-with-scroll ::-webkit-scrollbar-thumb {
            border-radius: 100px;
            border: .1875rem solid rgba(0, 0, 0, 0);
            background-clip: content-box;
            background-color: hsl(var(--p-scroll-bg-color))
        }

        .theme-dark .table-with-scroll {
            --track-bg-color: var(--color-neutral-105);
            --track-border-color: var(--color-neutral-85);
            --scroll-bg-color: var(--color-neutral-80)
        }

        .table-with-scroll .table {
            border-end-start-radius: 0;
            border-end-end-radius: 0
        }

        .table-with-scroll .table-row:where(:last-child) .table-col {
            border-radius: unset
        }

        .table-wrapper {
            overflow: auto
        }

        .table :where(.table-thead-col, .table-col) {
            display: table-cell;
            box-sizing: content-box;
            padding-block: 1.5rem;
            padding-inline: 1rem;
            vertical-align: middle
        }

        @media (max-width: 767.99px) {
            .table :where(.table-thead-col, .table-col) {
                padding-inline: .75rem
            }
        }

        .table :where(.table-thead-col, .table-col):not(:first-child) {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            display: table-cell
        }

        .table :where(.table-thead-col, .table-col) :where(.image) {
            --size: 1.875rem;
            flex-shrink: 0
        }

        .table :where(.table-thead-col, .table-col) :where(.image) img {
            vertical-align: bottom
        }

        .table :where(.table-thead-col) {
            padding-block: 1rem
        }

        .table :where(.table-col) {
            --p-col-width: auto;
            inline-size: calc(var(--p-col-width) / 16 * 1rem);
            padding-block: 1rem;
            block-size: 2.5rem
        }

        .table-thead {
            display: table-header-group;
            border-block-end: solid .0625rem hsl(var(--p-table-border-color))
        }

        .table-thead .table-row {
            min-block-size: 3.375rem
        }

        .table-thead-col {
            --p-col-width: auto;
            inline-size: calc(var(--p-col-width) / 16 * 1rem);
            min-inline-size: calc(var(--p-col-width) / 16 * 1rem);
            text-align: unset
        }

        .table-tbody {
            display: table-row-group;
            color: hsl(var(--p-tbody-color-text))
        }

        .table-tfoot {
            display: table-footer-group
        }

        .table-row {
            display: table-row;
            min-block-size: 5.5rem
        }

        .table-row:where(a, [role*=button]) {
            cursor: pointer
        }

        .table-row:where(a, [role*=button]):where(:hover, :focus) {
            background-color: hsl(var(--p-table-bg-color-focus))
        }

        .table-row:where(a, [role*=button]):where(:hover, :focus) :is(.table-col):first-child {
            background-color: hsl(var(--p-table-bg-color-focus)) !important
        }

        .table-row:where(:not(:first-child)) {
            border-block-start: solid .0625rem hsl(var(--p-table-border-color))
        }

        .table-row:where(:last-child) :where(.table-col:first-child) {
            border-end-start-radius: var(--p-border-radius)
        }

        .table-row:where(:last-child) :where(.table-col:last-child) {
            border-end-end-radius: var(--p-border-radius)
        }

        .table .button.is-text {
            --p-text-color-default: var(--color-neutral-20)
        }

        .table.is-table-layout-auto {
            table-layout: auto
        }

        .table.is-remove-outer-styles {
            border-width: 0;
            box-shadow: none;
            outline: none;
            border-radius: initial;
            background-color: #0000
        }

        .table.is-remove-outer-styles :where(.table-thead-col) {
            padding-inline: 0
        }

        .table.is-remove-outer-styles :where(.table-thead-col):where(:not(:last-child)) {
            padding-inline-end: .5rem
        }

        .table.is-remove-outer-styles :where(.table-col) {
            padding-inline: 0;
            padding-block: .25rem
        }

        .table.is-remove-outer-styles :where(.table-col):where(:not(:last-child)) {
            padding-inline-end: .5rem
        }

        .table.is-remove-outer-styles :where(.table-row:last-child) {
            border-block-end: solid .0625rem hsl(var(--p-table-border-color))
        }

        .table.is-sticky-scroll {
            table-layout: revert
        }

        @media (min-width: 1199px) {
            .table.is-sticky-scroll :where(.table-thead-col, .table-col):first-child {
                position: sticky;
                inset-inline-start: 0;
                background-color: hsl(var(--p-table-bg-color));
                box-shadow: var(--shadow-large)
            }

            .table.is-sticky-scroll :where(.table-thead-col, .table-col):first-child>.text {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                display: block;
                box-sizing: border-box;
                max-inline-size: 9.375rem
            }

            .table.is-sticky-scroll :where(.table-thead-col, .table-col):first-child {
                z-index: 2
            }

            .table.is-sticky-scroll :where(.table-thead-col, .table-col):first-child:before {
                content: "";
                position: absolute;
                inset-block: 0;
                inset-inline-start: 100%;
                display: block;
                inline-size: 1.25rem;
                background: linear-gradient(to right, #0000000d, #0000)
            }
        }

        .table.is-table-row-medium-size :where(.table-col) {
            padding-block: .5rem
        }

        .theme-dark .table {
            --heading-text-color: var(--color-neutral-20);
            --p-table-bg-color: var(--color-neutral-90);
            --p-table-bg-color-focus: var(--color-neutral-100);
            --p-table-border-color: var(--color-neutral-85);
            --p-tbody-color-text: var(--color-neutral-15)
        }

        @media (max-width: 767.99px),
        (min-width: 768px) and (max-width: 1198.99px) {
            .table.is-vertical {
                display: block
            }

            .table.is-vertical .table-thead {
                display: none
            }

            .table.is-vertical .table-tbody {
                display: block
            }

            .table.is-vertical .table-row {
                display: flex;
                flex-direction: column
            }

            .table.is-vertical .table-col:where([data-title]):before {
                content: attr(data-title) ": ";
                font-size: 1rem;
                font-weight: 400
            }
        }

        .container {
            --p-container-max-size: var(--container-max-size, var(--container-size-xxl));
            --p-container-padding-block: var(--container-padding-block, 1.25rem);
            inline-size: 100%;
            padding-inline: var(--p-container-padding-inline);
            padding-block: var(--p-container-padding-block);
            margin-inline: auto;
            max-inline-size: var(--p-container-max-size)
        }

        .container.is-size-xl {
            --p-container-max-size: var(--container-size-xl)
        }

        @media (max-width: 767.99px) {
            .container {
                --p-container-padding-inline: 1rem
            }
        }

        @media (min-width: 768px) and (max-width: 1198.99px) {
            .container {
                --p-container-padding-inline: 1.875rem
            }
        }

        @media (min-width: 1199px) {
            .container {
                --p-container-padding-inline: 3.125rem
            }
        }

        :where(.common-section):where(:nth-child(n+2)) {
            margin-block-start: 1.5rem
        }

        .box {
            --p-box-text-color: var(--color-neutral-60);
            --p-box-background-color: var(--p-box-background-color-default);
            --p-box-background-color-default: var(--color-neutral-5);
            --p-box-background-color-hover: var(--color-neutral-10);
            --p-box-border-color: var(--color-neutral-15);
            --p-box-padding: var(--box-padding, 1.5rem);
            --p-box-border-radius: var(--box-border-radius, var(--border-radius-xsmall));
            position: relative;
            background-color: hsl(var(--p-box-background-color));
            border: solid .0625rem hsl(var(--p-box-border-color));
            border-radius: var(--p-box-border-radius);
            padding: var(--p-box-padding);
            color: hsl(var(--p-box-text-color));
            max-inline-size: 100%
        }

        .box-footer-button {
            position: absolute;
            inset-inline: 0;
            inset-block-end: 0;
            text-align: center;
            inline-size: 100%;
            padding-block-start: 3.75rem;
            padding-block-end: .5rem;
            background: linear-gradient(to bottom, hsl(var(--p-box-background-color)/0), hsl(var(--p-box-background-color)/1))
        }

        .box.is-border-dashed {
            border-style: dashed
        }

        .box.is-hover-with-file {
            --p-box-background-color: var(--p-box-background-color-hover)
        }

        .theme-dark .box {
            --p-box-text-color: var(--color-neutral-5);
            --p-box-background-color-default: var(--color-neutral-85);
            --p-box-background-color-hover: var(--color-neutral-80);
            --p-box-border-color: var(--color-neutral-80)
        }

        .boxes-wrapper {
            display: grid
        }

        .boxes-wrapper .box {
            border-radius: 0
        }

        .boxes-wrapper .box:first-child {
            border-start-start-radius: var(--border-radius-xsmall);
            border-start-end-radius: var(--border-radius-xsmall)
        }

        .boxes-wrapper .box:last-child {
            border-top: 0;
            border-end-start-radius: var(--border-radius-xsmall);
            border-end-end-radius: var(--border-radius-xsmall)
        }

        .boxes-wrapper .box:not(:first-child):not(:last-child) {
            border-block-start: 0
        }

        .loader {
            --loading: 0%;
            --p-loader-border-base-color: var(--color-neutral-10);
            --p-loader-base-full-color: var(--color-neutral-20);
            --p-loader-size: var(--loader-size, 1.5rem);
            --p-loader-border-size: var(--loader-border-size, .15625rem);
            --p-loader-bg-color: var(--loader-bg-color-default, var(--p-loader-bg-color-default));
            --p-loader-bg-color-default: var(--loader-bg-color-light, var(--p-loader-bg-color-light));
            --p-loader-bg-color-light: var(--color-neutral-5);
            --p-loader-bg-color-dark: var(--color-neutral-200);
            animation: rotate 1s infinite linear;
            position: relative;
            inline-size: var(--p-loader-size);
            block-size: var(--p-loader-size);
            border: solid var(--p-loader-border-size) hsl(var(--p-loader-border-base-color));
            border-radius: var(--border-radius-circular);
            border-block-start-color: hsl(var(--p-loader-base-full-color));
            border-inline-start-color: hsl(var(--p-loader-base-full-color))
        }

        .loader svg {
            inline-size: 100%;
            block-size: 100%
        }

        .loader.is-loading {
            animation: none;
            border-block-start-color: hsl(var(--p-loader-border-base-color));
            border-inline-start-color: hsl(var(--p-loader-border-base-color))
        }

        .loader.is-loading:before {
            content: "";
            display: flex;
            position: absolute;
            inset: calc(var(--p-loader-border-size) * -1);
            inline-size: calc(100% + var(--p-loader-border-size) * 2);
            block-size: calc(100% + var(--p-loader-border-size) * 2);
            border-radius: var(--border-radius-circular);
            background: conic-gradient(hsl(var(--p-loader-base-full-color)) 0deg, hsl(var(--p-loader-base-full-color)) var(--loading), transparent var(--loading), transparent 360deg)
        }

        .loader.is-loading:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            inline-size: 100%;
            block-size: 100%;
            border-radius: var(--border-radius-circular);
            background: hsl(var(--p-loader-bg-color))
        }

        .loader.is-transparent {
            --p-loader-base-full-color: var(--transparent) !important
        }

        .loader.is-small {
            --p-loader-size: var(--loader-size, 1rem);
            --p-loader-border-size: var(--loader-border-size, .09375rem)
        }

        .theme-dark .loader {
            --p-loader-border-base-color: var(--color-neutral-20);
            --p-loader-base-full-color: var(--color-neutral-100);
            --p-loader-bg-color-default: var(--p-loader-bg-color-dark)
        }

        .inline-code {
            --p-bg-color-inline-code: var(--color-neutral-10);
            --p-text-color-inline-code: var(--color-neutral-60);
            background-color: hsl(var(--p-bg-color-inline-code));
            color: hsl(var(--p-text-color-inline-code));
            border-radius: var(--border-radius-xsmall);
            padding: .25rem
        }

        .theme-dark .inline-code {
            --p-bg-color-inline-code: var(--color-neutral-100);
            --p-text-color-inline-code: var(--color-neutral-15)
        }

        .divider {
            height: 1px;
            width: calc(100% + 2rem);
            background-color: hsl(var(--color-border))
        }
    }

    @layer components {
        .alert {
            --p-alert-text-color: var(--color-neutral-70);
            --p-alert-bg-color: var(--color-neutral-5);
            --p-alert-border-color: var(--color-neutral-15);
            --p-alert-color: var(--p-alert-color-default);
            --p-alert-color-default: var(--color-neutral-20);
            --p-alert-color-info: var(--color-information-100);
            --p-alert-color-success: var(--color-success-100);
            --p-alert-border-warning: var(--color-warning-100);
            --p-alert-border-danger: var(--color-danger-100);
            color: hsl(var(--p-alert-text-color));
            background-color: hsl(var(--p-alert-bg-color));
            border: solid .0625rem hsl(var(--p-alert-border-color));
            padding: .75rem;
            padding-inline-start: .5rem;
            border-radius: var(--border-radius-xsmall)
        }

        .alert-grid {
            display: flex;
            gap: 1rem
        }

        .alert-grid:before {
            content: "";
            display: block;
            inline-size: .125rem;
            background-color: hsl(var(--p-alert-color));
            border-radius: .0625rem
        }

        .alert-grid>[class*=icon-]:where(:not(.icon-x)) {
            color: hsl(var(--p-alert-color));
            font-size: var(--icon-size-large);
            line-height: .9
        }

        .alert-grid>.button {
            order: 1
        }

        .alert-content {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            flex: 1;
            line-height: 1.5
        }

        .alert-title {
            font-weight: 700
        }

        .alert-buttons {
            margin-block-start: .75rem;
            margin-inline-start: -1rem
        }

        .alert .button {
            --button-size: 1.25rem;
            font-size: var(--font-size-0)
        }

        .alert.is-action {
            position: relative;
            padding: 1rem;
            padding-block-start: 1.125rem;
            border-width: 0;
            border-radius: 0
        }

        .alert.is-action .alert-buttons {
            display: flex;
            flex-wrap: wrap;
            margin-block-start: 0;
            margin-inline-start: 0
        }

        .alert.is-action .button {
            --button-size: 2.5rem
        }

        .alert.is-action .alert-grid {
            flex-wrap: wrap
        }

        .alert.is-action .alert-grid:before {
            position: absolute;
            inset-inline: 0;
            inset-block-start: 0;
            border-radius: 0;
            block-size: .25rem;
            inline-size: 100%
        }

        .alert.is-action-and-top-sticky {
            --p-alert-bg-color: var(--color-neutral-0)
        }

        @media (max-width: 767.99px) {
            .alert.is-action .alert-buttons {
                flex-direction: column;
                inline-size: 100%
            }
        }

        .alert.is-standalone {
            --p-alert-bg-color: var(--color-neutral-0);
            --p-alert-border-color: var(--color-neutral-10);
            box-shadow: var(--shadow-small)
        }

        .theme-dark .alert.is-standalone {
            --p-alert-bg-color: var(--color-neutral-90);
            --p-alert-border-color: var(--color-neutral-85)
        }

        .alert.is-info {
            --p-alert-color: var(--p-alert-color-info)
        }

        .alert.is-success {
            --p-alert-color: var(--p-alert-color-success)
        }

        .alert.is-warning {
            --p-alert-color: var(--p-alert-border-warning)
        }

        .alert.is-danger {
            --p-alert-color: var(--p-alert-border-danger)
        }

        .alert.is-no-bg {
            border-width: 0;
            background-color: hsl(var(--transparent))
        }

        .theme-dark .alert {
            --p-alert-text-color: var(--color-neutral-5);
            --p-alert-bg-color: var(--color-neutral-85);
            --p-alert-border-color: var(--color-neutral-80)
        }

        .alert-sticky {
            --p-alert-sticky-width-size: 27.5rem;
            --p-alert-content-text-color: var(--color-neutral-70);
            --p-alert-content-bg-color: var(--color-neutral-0);
            --p-alert-content-border-color: var(--color-neutral-10);
            --p-alert-bg-color: var(--p-alert-bg-color-default);
            --p-alert-bg-color-default: var(--color-neutral-20);
            --p-alert-bg-color-info: var(--color-information-100);
            --p-alert-bg-color-success: var(--color-success-100);
            --p-alert-bg-color-warning: var(--color-warning-100);
            --p-alert-bg-color-danger: var(--color-danger-100);
            position: relative;
            display: grid;
            grid-template-columns: 4.5rem 1fr;
            grid-template-areas: "image content" "image buttons";
            inline-size: var(--p-alert-sticky-width-size);
            font-size: var(--font-size-0);
            color: hsl(var(--p-alert-content-text-color));
            border: solid .0625rem hsl(var(--p-alert-content-border-color));
            border-radius: var(--border-radius-xsmall);
            box-shadow: var(--shadow-large);
            -webkit-user-select: none;
            user-select: none
        }

        .alert-sticky>.button {
            position: absolute;
            inset-inline-end: 1rem;
            inset-block-start: 1rem
        }

        .alert-sticky-image {
            grid-area: image;
            display: grid;
            place-content: center;
            margin: -.0625rem;
            margin-inline-end: 0;
            background-color: hsl(var(--p-alert-bg-color));
            border-start-start-radius: inherit;
            border-end-start-radius: inherit;
            color: hsl(var(--color-neutral-0));
            font-size: 1.5rem
        }

        .alert-sticky-image [class^=icon-],
        .alert-sticky-image [class*=" icon-"] {
            font-size: var(--icon-size-large)
        }

        .alert-sticky-content {
            grid-area: content;
            flex: 1;
            background-color: hsl(var(--p-alert-content-bg-color));
            padding: 1rem;
            padding-block-end: 0;
            padding-inline-end: 3rem;
            border-start-end-radius: inherit
        }

        .alert-sticky-content:last-child {
            padding-block-end: 1rem
        }

        .alert-sticky-buttons {
            grid-area: buttons;
            background-color: hsl(var(--p-alert-content-bg-color));
            padding-block-end: .5rem;
            border-end-end-radius: inherit
        }

        .alert-sticky-title {
            font-size: var(--font-size-0);
            font-weight: 600;
            margin-bottom: .25rem
        }

        .alert-sticky.is-info {
            --p-alert-bg-color: var(--p-alert-bg-color-info)
        }

        .alert-sticky.is-success {
            --p-alert-bg-color: var(--p-alert-bg-color-success)
        }

        .alert-sticky.is-warning {
            --p-alert-bg-color: var(--p-alert-bg-color-warning)
        }

        .alert-sticky.is-danger {
            --p-alert-bg-color: var(--p-alert-bg-color-danger)
        }

        .theme-dark .alert-sticky {
            --p-alert-content-text-color: var(--color-neutral-10);
            --p-alert-content-bg-color: var(--color-neutral-85);
            --p-alert-content-border-color: var(--color-neutral-80)
        }

        @media (max-width: 767.99px) {
            .alert-sticky {
                --p-alert-sticky-width-size: auto
            }
        }

        .action-bar {
            --p-action-bar-bg-color: var(--color-neutral-0);
            --p-action-bar-border-color: var(--color-neutral-0);
            --p-action-bar-box-shadow: 0 .375rem 1rem hsl(var(--color-neutral-80) / .14);
            display: flex;
            gap: .5rem;
            justify-content: space-between;
            align-items: baseline;
            inline-size: 19.5rem;
            padding-inline: .75rem;
            padding-block: .5rem;
            background-color: hsl(var(--p-action-bar-bg-color));
            border: solid .0625rem hsl(var(--p-action-bar-border-color));
            border-radius: var(--border-radius-small);
            box-shadow: var(--p-action-bar-box-shadow);
            transition: var(--transition)
        }

        @media (min-width: 768px) {
            .action-bar {
                inline-size: 31.25rem;
                padding-inline: 1rem;
                padding-block: .75rem
            }
        }

        .theme-dark .action-bar {
            --p-action-bar-bg-color: var(--color-neutral-90);
            --p-action-bar-border-color: var(--color-neutral-85);
            --p-action-bar-box-shadow: 0 .375rem 1rem .5rem hsl(var(--color-neutral-105))
        }

        .list {
            --p-list-text-color: var(--color-neutral-60);
            color: hsl(var(--p-list-text-color));
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            font-size: 1rem
        }

        .list-item {
            display: flex;
            align-items: baseline;
            gap: 1.25rem
        }

        .list-item>* {
            vertical-align: middle
        }

        .list-item [class*=icon] {
            line-height: 1
        }

        .list-item .text {
            align-self: center;
            line-height: 1.5
        }

        .list .icon-check {
            flex-shrink: 0;
            display: inline-grid;
            place-content: center;
            inline-size: 1.5rem;
            block-size: 1.5rem;
            color: hsl(var(--color-neutral-0));
            font-size: .875rem;
            background-color: hsl(var(--color-primary-100));
            border-radius: 50%
        }

        .theme-dark .list {
            --p-list-text-color: var(--color-neutral-20)
        }

        .numeric-list {
            --p-numeric-border-color: var(--color-neutral-10);
            --p-numeric-bg-color: var(--color-neutral-5);
            --p-numeric-text-color: var(--color-neutral-60);
            counter-reset: number;
            display: grid;
            row-gap: 1.5rem
        }

        .numeric-list-item {
            counter-increment: number;
            display: flex;
            align-items: baseline;
            column-gap: 1.5rem
        }

        .numeric-list-item:before {
            content: counter(number);
            flex-shrink: 0;
            display: grid;
            place-content: center;
            inline-size: 2rem;
            block-size: 2rem;
            background-color: hsl(var(--p-numeric-bg-color));
            color: hsl(var(--p-numeric-text-color));
            border: solid .0625rem hsl(var(--p-numeric-border-color));
            border-radius: var(--border-radius-circular)
        }

        .theme-dark .numeric-list {
            --p-numeric-border-color: var(--color-neutral-80);
            --p-numeric-bg-color: var(--color-neutral-85);
            --p-numeric-text-color: var(--color-neutral-20)
        }

        .order-list {
            counter-reset: number;
            display: flex;
            flex-direction: column;
            gap: 2rem
        }

        .order-list-item {
            counter-increment: number;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            gap: 1rem
        }

        .order-list-content {
            display: flex;
            gap: 1rem
        }

        .order-list-content:before {
            content: counter(number)
        }

        .order-list-content.is-hide-number:before {
            opacity: 0
        }

        .collapsible {
            --p-toggle-border-color: var(--color-neutral-10);
            --p-toggle-optional-color: var(--color-neutral-50)
        }

        .collapsible ::-webkit-details-marker {
            display: none
        }

        .collapsible-item:where(:not(:last-child)) {
            border-block-end: solid .0625rem hsl(var(--p-toggle-border-color))
        }

        .collapsible-wrapper:where([open]):not(:disabled, .is-disabled) .icon-cheveron-right {
            rotate: 90deg
        }

        .collapsible-wrapper:where([open]):not(:disabled, .is-disabled) .icon-cheveron-down {
            rotate: 180deg
        }

        .collapsible-wrapper:is(:disabled, .is-disabled) {
            cursor: not-allowed
        }

        .collapsible-wrapper:is(:disabled, .is-disabled) * {
            cursor: not-allowed
        }

        .collapsible-wrapper:is(:disabled, .is-disabled) .collapsible-content {
            display: none !important
        }

        .collapsible-button {
            position: relative;
            padding-block: .625rem;
            cursor: pointer;
            display: flex;
            gap: .625rem;
            align-items: center;
            font-size: 1rem;
            line-height: 1.5
        }

        .collapsible-button .text {
            align-self: center;
            font-weight: 600
        }

        .collapsible-button .icon {
            align-self: center
        }

        .collapsible-button [class*=icon-] {
            display: block;
            transition: var(--transition)
        }

        .collapsible-button .icon:first-child {
            margin-inline-end: .5rem
        }

        .collapsible-button .icon:last-child {
            margin-inline-start: auto
        }

        .collapsible-button-optional {
            font-size: .8125rem;
            color: hsl(var(--p-toggle-optional-color))
        }

        .collapsible-content {
            padding-block-start: 0;
            padding-block-end: 1.5rem
        }

        .theme-dark .collapsible {
            --p-toggle-border-color: var(--color-neutral-80)
        }

        .tabs {
            --p-tabs-text-color: var(--p-tabs-text-color-default);
            --p-tabs-text-color-default: var(--color-neutral-50);
            --p-tabs-text-color-hover: var(--color-neutral-80);
            --p-tabs-text-color-active: var(--color-neutral-80);
            --p-tabs-text-color-selected: var(--color-neutral-80);
            --p-tabs-bg-color: var(--p-tabs-bg-defalut);
            --p-tabs-bg-defalut: var(--transparent);
            --p-tabs-bg-color-hover: var(--color-neutral-10);
            --p-tabs-outline-color: var(--p-tabs-outline-color-default);
            --p-tabs-outline-color-default: var(--transparent);
            --p-tabs-outline-color-focus: var(--color-neutral-1000) / .16;
            --p-tabs-border-color: var(--p-tabs-border-color-default);
            --p-tabs-border-color-default: var(--transparent);
            --p-tabs-border-color-selected: var(--color-neutral-80);
            --tabs-shadow-color: var(--color-neutral-0);
            --tabs-button-arrow-color: var(--color-neutral-80);
            position: relative
        }

        .tabs-button {
            position: relative;
            display: flex;
            align-items: center;
            padding-inline: .25rem;
            padding-block: .4375rem;
            -webkit-user-select: none;
            user-select: none;
            border-radius: .625rem;
            color: hsl(var(--p-tabs-text-color));
            background-color: hsl(var(--p-tabs-bg-color));
            background-clip: padding-box;
            border: solid .25rem hsl(var(--p-tabs-outline-color))
        }

        .tabs-button .text {
            display: flex;
            align-items: center;
            padding-inline: .75rem;
            inline-size: 100%
        }

        .tabs-button:before {
            content: "";
            display: block;
            block-size: .0625rem;
            background-color: #0000;
            position: absolute;
            inset-inline: 0;
            inset-block-end: -.25rem;
            border-radius: var(--border-radius-xsmall)
        }

        .tabs-button:after {
            content: "";
            display: block;
            border-radius: var(--border-radius-small)
        }

        .tabs-button:where(:hover, .tabs-button:focus) {
            box-shadow: none
        }

        .tabs-button:where(:hover):not(:disabled, .is-disabled) {
            --p-tabs-text-color: var(--p-tabs-text-color-hover);
            --p-tabs-bg-color: var(--p-tabs-bg-color-hover)
        }

        .tabs-button:where(:focus-visible):not(:disabled, .is-disabled) {
            --p-tabs-outline-color: var(--p-tabs-outline-color-focus)
        }

        .tabs-button:where(:active):not(:disabled, .is-disabled) {
            --p-tabs-text-color: var(--p-tabs-text-color-active)
        }

        .tabs-button:where(:disabled, .is-disabled) {
            opacity: .4
        }

        .tabs-button:is(.is-selected) {
            --p-tabs-text-color: var(--p-tabs-text-color-selected)
        }

        .tabs-button:is(.is-selected):before {
            background-color: hsl(var(--p-tabs-border-color-selected))
        }

        .tabs-list {
            display: flex;
            gap: 1rem;
            overflow: auto;
            margin-block-end: -.0625rem;
            -ms-overflow-style: none;
            scrollbar-width: none
        }

        .tabs-list::-webkit-scrollbar {
            display: none
        }

        .tabs-button-scroll {
            position: absolute;
            z-index: 3;
            inset-block: 0;
            display: flex;
            align-items: center;
            inline-size: 5rem;
            block-size: 100%;
            padding-block-end: .3125rem;
            opacity: .4;
            transition: var(--transition);
            color: hsl(var(--tabs-button-arrow-color));
            font-size: var(--font-size-3)
        }

        .tabs-button-scroll>* {
            margin-inline: -3px;
            transform: scaleX(var(--transform-direction))
        }

        .tabs-button-scroll:where(:hover, :focus) {
            opacity: 1
        }

        .tabs-button-scroll.is-start {
            inset-inline-start: 0;
            background: linear-gradient(to right, hsl(var(--tabs-shadow-color)), hsl(var(--tabs-shadow-color)/0))
        }

        .tabs-button-scroll.is-end {
            inset-inline-end: 0;
            justify-content: end;
            background: linear-gradient(to left, hsl(var(--tabs-shadow-color)), hsl(var(--tabs-shadow-color)/0))
        }

        .theme-dark .tabs {
            --p-tabs-text-color-hover: var(--color-neutral-10);
            --p-tabs-text-color-active: var(--color-neutral-10);
            --p-tabs-text-color-selected: var(--color-neutral-10);
            --p-tabs-bg-color-hover: var(--color-neutral-0) / .04;
            --p-tabs-outline-color-focus: var(--color-neutral-0) / .16;
            --p-tabs-border-color-selected: var(--color-neutral-10);
            --tabs-button-arrow-color: var(--color-neutral-20);
            --tabs-shadow-color: var(--color-neutral-100)
        }

        .secondary-tabs {
            --p-drop-tab-text-color: var(--color-neutral-60);
            --p-drop-tab-bg-color: var(--transparent);
            --p-drop-tab-height: 2rem;
            --p-drop-tab-padding-horizontal: .75rem;
            display: flex;
            gap: 1rem
        }

        .secondary-tabs-button {
            display: block;
            padding-inline: var(--p-drop-tab-padding-horizontal);
            -webkit-user-select: none;
            user-select: none;
            line-height: var(--p-drop-tab-height);
            border-radius: var(--border-radius-small);
            color: hsl(var(--p-drop-tab-text-color));
            background-color: hsl(var(--p-drop-tab-bg-color))
        }

        .secondary-tabs-button:where(:disabled, .is-disabled) {
            --p-drop-tab-bg-color: var(--color-neutral-10);
            cursor: default
        }

        .secondary-tabs-button:where(:not(:disabled, .is-disabled)) {
            cursor: pointer
        }

        .secondary-tabs:where(.is-large) {
            --p-drop-tab-height: 2.375rem;
            --p-drop-tab-padding-horizontal: 1.25rem
        }

        .secondary-tabs:where(.is-stretch) {
            inline-size: 100%
        }

        .secondary-tabs:where(.is-stretch) .secondary-tabs-item {
            flex: 1
        }

        .secondary-tabs:where(.is-stretch) .secondary-tabs-button {
            inline-size: 100%;
            text-align: center
        }

        .theme-dark .secondary-tabs {
            --p-drop-tab-text-color: var(--color-neutral-20)
        }

        .theme-dark .secondary-tabs-button:where(:disabled, .is-disabled) {
            --p-drop-tab-bg-color: var(--color-neutral-85)
        }

        .modal {
            --p-modal-title-color: var(--color-neutral-80);
            --p-modal-text-color: var(--color-neutral-60);
            --p-modal-bg-color: var(--color-neutral-0);
            --p-modal-border-color: var(--color-neutral-10);
            --p-modal-border-radius: var(--border-radius-medium);
            --p-modal-content-bg-color: var(--color-neutral-5);
            --p-modal-padding: 2rem;
            --padding-header-bottom: 1rem;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 0;
            inline-size: fit-content;
            min-inline-size: min(25.625rem, 95%);
            max-inline-size: min(40rem, 95%);
            max-block-size: 90vh;
            box-shadow: var(--shadow-large);
            background-color: hsl(var(--p-modal-bg-color));
            border-radius: var(--p-modal-border-radius);
            border: solid .0625rem hsl(var(--p-modal-border-color));
            color: hsl(var(--p-modal-text-color))
        }

        .modal:where([open]) {
            display: flex
        }

        .modal-form {
            min-block-size: 0;
            display: flex;
            flex-direction: column;
            inline-size: 100%;
            padding: var(--p-modal-padding)
        }

        @media (min-width: 768px) {
            .modal.is-small {
                inline-size: 25.625rem
            }
        }

        @media (min-width: 1199px) {
            .modal.is-big {
                inline-size: 40rem
            }
        }

        @media (min-width: 768px) {
            .modal.is-huge {
                inline-size: 75rem;
                max-inline-size: 90vw
            }
        }

        .modal.is-secondary {
            --p-modal-padding: 1.5rem;
            --padding-header-bottom: 1rem
        }

        .modal.is-inner-modal {
            --p-modal-title-color: var(--color-neutral-105);
            --p-modal-text-color: var(--color-neutral-60);
            --p-modal-bg-color: var(--color-neutral-5);
            --p-modal-border-color: var(--color-neutral-10);
            --p-modal-padding: 1.5rem;
            --p-modal-border-radius: var(--border-radius-small);
            max-inline-size: none;
            box-shadow: none
        }

        .modal.is-inner-modal .modal-header {
            margin-block-end: 0
        }

        .modal.is-inner-modal .modal-content {
            padding-block-start: var(--p-modal-padding);
            margin-block-start: var(--p-modal-padding);
            margin-inline: calc(var(--p-modal-padding) * -1);
            padding-inline: calc(var(--p-modal-padding));
            border-block-start: solid .0625rem hsl(var(--p-modal-border-color))
        }

        .theme-dark .modal.is-inner-modal {
            --p-modal-bg-color: var(--color-neutral-85);
            --p-modal-border-color: var(--color-neutral-80)
        }

        .modal.is-separate-header>.modal-form>.modal-header {
            padding: var(--p-modal-padding);
            padding-block-start: 0;
            border-block-end: solid .0625rem hsl(var(--color-border));
            margin-inline: calc(var(--p-modal-padding) * -1);
            margin-block-end: 0
        }

        .modal.is-separate-header>.modal-form>.modal-content {
            padding-block: var(--p-modal-padding);
            margin-block: 0
        }

        .modal.is-separate-header>.modal-form>.modal-footer {
            margin-block-start: 0
        }

        @media (max-width: 767.99px) {
            .modal.is-page-in-mobile {
                all: unset;
                block-size: unset !important;
                inline-size: 100%
            }

            .modal.is-page-in-mobile .modal-form {
                min-block-size: 100dvh;
                padding: 0
            }

            .modal.is-page-in-mobile .modal-header,
            .modal.is-page-in-mobile .modal-footer {
                position: relative;
                z-index: 1;
                background-color: hsl(var(--p-modal-bg-color));
                padding-inline: 1rem !important;
                margin-inline: 0 !important
            }

            .modal.is-page-in-mobile .modal-header {
                position: sticky;
                inset-block-start: 0;
                padding-block-start: 1rem !important
            }

            .modal.is-page-in-mobile .modal-footer {
                position: sticky;
                inset-block-end: 0;
                padding-block-end: 1rem
            }

            .modal.is-page-in-mobile::backdrop {
                background-color: #0000
            }
        }

        .modal-header {
            display: flex;
            flex-direction: column;
            gap: .25rem;
            flex-shrink: 0;
            margin-block-end: var(--padding-header-bottom)
        }

        .modal-header p {
            font-size: var(--font-size-1)
        }

        .modal-title {
            color: hsl(var(--p-modal-title-color));
            line-height: 1
        }

        .modal-content {
            overflow: auto;
            min-block-size: 0;
            padding-block: .25rem;
            margin-block: -.25rem;
            margin-inline: calc(var(--p-modal-padding) * -1);
            padding-inline: calc(var(--p-modal-padding))
        }

        .modal-content::-webkit-scrollbar {
            opacity: .7;
            width: .5rem;
            height: .5rem
        }

        .modal-content::-webkit-scrollbar-track {
            border-radius: .25rem;
            margin-right: .5rem
        }

        .modal-content::-webkit-scrollbar-thumb {
            border-radius: .25rem;
            background: hsl(var(--scroll-color))
        }

        .modal-content::-webkit-scrollbar-corner {
            background: hsl(var(--scroll-color));
            border-radius: .375rem
        }

        .modal-content-main {
            background-color: hsl(var(--p-modal-content-bg-color))
        }

        .modal-content-spacer {
            display: grid;
            gap: 1.5rem
        }

        .modal-footer {
            display: grid;
            gap: 1rem;
            flex-shrink: 0;
            padding: var(--p-modal-padding);
            padding-block-end: 0rem;
            margin-inline: calc(var(--p-modal-padding) * -1);
            margin-block-start: var(--p-modal-padding);
            border-block-start: solid .0625rem hsl(var(--color-border))
        }

        .modal::backdrop {
            background-color: #1313154d;
            -webkit-backdrop-filter: blur(.1875rem);
            backdrop-filter: blur(.1875rem)
        }

        @media (max-width: 767.99px) {
            .modal {
                --p-modal-padding: 1rem;
                --padding-header-bottom: .75rem
            }
        }

        .theme-dark .modal {
            --p-modal-title-color: var(--color-neutral-10);
            --p-modal-text-color: var(--color-neutral-20);
            --p-modal-bg-color: var(--color-neutral-90);
            --p-modal-border-color: var(--color-neutral-85);
            --p-modal-content-bg-color: var(--color-neutral-90);
            --color-border: var(--color-neutral-80)
        }

        .theme-dark .modal::backdrop {
            background-color: #13131599
        }

        .theme-dark .modal-curtain {
            --p-modal-curtain-opacity: .6
        }

        @media (max-width: 767.99px) {

            .modal-open-full-screen-mobile main,
            .modal-open-full-screen-mobile .wizard,
            .modal-open-full-screen-mobile .grid-with-side {
                display: none !important
            }
        }

        .drop {
            --p-drop-bg-color: var(--color-neutral-0);
            --p-drop-border-color: var(--drop-border-color, var(--color-neutral-10));
            --p-drop-width-size-desltop: var(--drop-width-size-desktop);
            --p-drop-border-radius: var(--drop-border-radius, var(--border-radius-small));
            position: absolute;
            inset-inline-start: 0;
            inset-block-end: calc(100% + .625rem);
            background-color: hsl(var(--p-drop-bg-color));
            color: hsl(var(--p-drop-text-color));
            padding: 0;
            border: solid .0625rem hsl(var(--p-drop-border-color));
            border-radius: var(--p-drop-border-radius);
            box-shadow: var(--shadow-small);
            min-inline-size: 13rem;
            max-inline-size: 17.5rem
        }

        @media (min-width: 1199px) {
            .drop {
                inline-size: var(--p-drop-width-size-desltop);
                max-inline-size: none
            }
        }

        .drop-header-mobile {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            padding-block: 1rem;
            padding-inline: 1rem;
            border-block-end: solid .0625rem hsl(var(--color-border));
            background-color: hsl(var(--p-drop-bg-color))
        }

        @media (min-width: 1199px) {
            .drop-header-mobile {
                display: none
            }
        }

        @media (max-width: 767.99px) {
            .drop-footer {
                position: sticky;
                inset-block-end: 0;
                background-color: hsl(var(--p-drop-bg-color))
            }
        }

        .drop:before {
            content: "";
            position: absolute;
            z-index: 3;
            inset-inline-start: 1.875rem;
            inset-block-end: -.5rem;
            inline-size: .5rem;
            block-size: .5rem;
            clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
            background-color: hsl(var(--p-drop-bg-color))
        }

        .drop:after {
            content: "";
            position: absolute;
            z-index: 2;
            inset-inline-start: 1.84375rem;
            inset-block-end: -.5rem;
            transform: translateY(.125rem);
            inline-size: .5625rem;
            block-size: .5625rem;
            clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
            background-color: hsl(var(--p-drop-border-color))
        }

        .drop-wrapper {
            position: relative;
            inline-size: fit-content
        }

        .drop-wrapper.is-open {
            z-index: 1
        }

        .drop-section {
            --p-section-padding-horizontal: var(--section-padding-horizontal, .75rem);
            --p-section-padding-vertical: var(--section-padding-vertical, 1rem);
            --p-section-border-color: var(--color-neutral-10);
            padding-inline: var(--p-section-padding-horizontal);
            padding-block: var(--p-section-padding-vertical);
            max-inline-size: 32.5rem;
            margin-inline: auto
        }

        .drop-section::-webkit-scrollbar {
            opacity: .7;
            width: .5rem;
            height: .5rem
        }

        .drop-section::-webkit-scrollbar-track {
            border-radius: .25rem;
            margin-right: .5rem
        }

        .drop-section::-webkit-scrollbar-thumb {
            border-radius: .25rem;
            background: hsl(var(--scroll-color))
        }

        .drop-section::-webkit-scrollbar-corner {
            background: hsl(var(--scroll-color));
            border-radius: .375rem
        }

        .drop-section:where(:nth-child(n+2)) {
            border-block-start: solid .0625rem hsl(var(--p-section-border-color))
        }

        .theme-dark .drop-section {
            --p-section-border-color: var(--color-neutral-85)
        }

        .drop:where(.is-inline-end) {
            inset-inline-end: -.625rem;
            inset-inline-start: auto
        }

        .drop:where(.is-block-end) {
            inset-block-start: calc(100% + .625rem);
            inset-block-end: auto
        }

        .drop:where(.is-block-end):before,
        .drop:where(.is-block-end):after {
            inset-block-start: -.5rem;
            inset-block-end: auto;
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%)
        }

        .drop:where(.is-block-end):after {
            transform: translateY(-.125rem)
        }

        .drop.is-arrow-end:before,
        .drop.is-arrow-end:after {
            inset-inline-end: 1.875rem;
            inset-inline-start: auto
        }

        .drop.is-arrow-end:after {
            inset-inline-end: 1.84375rem
        }

        .drop.is-arrow-center:before,
        .drop.is-arrow-center:after {
            inset-inline-start: 50%;
            transform: translate(-50%)
        }

        .drop.is-arrow-center:after {
            transform: translate(-50%) translateY(.125rem)
        }

        .drop.is-no-arrow:before,
        .drop.is-no-arrow:after {
            display: none
        }

        @media (max-width: 767.99px),
        (min-width: 768px) and (max-width: 1198.99px) {
            .drop.is-full-screen-mobile {
                max-inline-size: none;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0
            }
        }

        @media (max-width: 767.99px) {
            .drop.is-modal-screen-mobile {
                position: fixed;
                inset-block: 0;
                inset-inline: .5rem;
                padding: 0;
                inline-size: auto;
                max-inline-size: none
            }

            .drop.is-modal-screen-mobile::backdrop {
                background-color: #14141f99
            }
        }

        .drop-list {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            font-size: var(--font-size-0)
        }

        .drop-list-item {
            flex-shrink: 0
        }

        .drop-button {
            --p-drop-icon-color: var(--color-neutral-20);
            --p-drop-text-color: var(--color-neutral-60);
            --p-drop-item-bg-color-hover: var(--color-neutral-10);
            --p-drop-item-bg-color-selected: var(--color-neutral-10);
            --p-button-padding-horizontal: var(--button-padding-horizontal, .75rem);
            --p-button-padding-vertical: var(--button-padding-vertical, .625rem);
            display: flex;
            gap: .75rem;
            inline-size: 100%;
            padding-inline: var(--p-button-padding-horizontal);
            padding-block: var(--p-button-padding-vertical);
            background-color: hsl(var(--p-drop-bg-color));
            border-radius: var(--border-radius-small);
            -webkit-user-select: none;
            user-select: none;
            line-height: 1.5
        }

        .drop-button .text {
            color: hsl(var(--p-drop-text-color))
        }

        .drop-button [class*=icon] {
            align-self: center;
            font-size: 1rem;
            line-height: 1;
            color: hsl(var(--p-drop-icon-color))
        }

        .drop-button [class*=icon]:before {
            vertical-align: middle
        }

        .drop-button:where(:hover, :focus) {
            --p-drop-bg-color: var(--p-drop-item-bg-color-hover);
            outline: none
        }

        .drop-button:where(.is-selected) {
            --p-drop-bg-color: var(--p-drop-item-bg-color-selected)
        }

        .drop-button .text+[class*=icon] {
            margin-inline-start: auto
        }

        .theme-dark .drop {
            --p-drop-bg-color: var(--color-neutral-105);
            --p-drop-border-color: var(--drop-border-color, var(--color-neutral-85))
        }

        .theme-dark .drop-button {
            --p-drop-text-color: var(--color-neutral-15);
            --p-drop-item-bg-color-hover: var(--color-neutral-85);
            --p-drop-item-bg-color-selected: var(--color-neutral-85)
        }

        .inline-links {
            display: flex;
            align-items: baseline;
            font-size: .875rem
        }

        .inline-links-item {
            padding-inline: 1.25rem
        }

        .inline-links-item:where(:not(:last-child)) {
            border-inline-end: solid .0625rem hsl(var(--color-border))
        }

        .inline-links:where(.is-center) {
            justify-content: center
        }

        .inline-links:where(.is-no-padding-first-and-last) :where(.inline-links-item):first-child {
            padding-inline-start: 0
        }

        .inline-links:where(.is-no-padding-first-and-last) :where(.inline-links-item):last-child {
            padding-inline-end: 0
        }

        .upload-image {
            --p-upload-image-size: var(--upload-image-size, 2.5rem);
            --p-upload-bg-color: var(--color-neutral-10);
            --p-upload-border-color: var(--color-neutral-10);
            --p-upload-icon-color: var(--color-neutral-20);
            --p-upload-text-color: var(--color-neutral-50);
            position: relative;
            display: grid;
            place-content: center;
            inline-size: var(--p-upload-image-size);
            block-size: var(--p-upload-image-size);
            background-color: hsl(var(--p-upload-bg-color));
            border: solid .0625rem hsl(var(--p-upload-border-color));
            border-radius: 50%;
            flex-shrink: 0
        }

        .upload-image [class*=icon] {
            position: relative;
            z-index: 2;
            color: hsl(var(--p-upload-icon-color))
        }

        .upload-image .text {
            position: relative;
            z-index: 2;
            color: hsl(var(--p-upload-text-color))
        }

        .upload-image .progress {
            --progress: var(--progress-value, 0);
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: var(--border-radius-circular);
            background: radial-gradient(hsl(var(--p-upload-bg-color)) 0%, hsl(var(--p-upload-bg-color)) 64%, transparent 64.01%, transparent 100%), conic-gradient(#2bacd4, #6cd42b calc(var(--progress) * 1%), #0000 calc(var(--progress) * 1%), #0000)
        }

        .upload-image.is-finished {
            --p-upload-border-color: var(--p-upload-border-color)
        }

        .upload-image.is-finished .progress {
            display: none
        }

        .theme-dark .upload-image.is-finished {
            --p-upload-border-color: var(--color-neutral-80)
        }

        .theme-dark .upload-image {
            --p-upload-bg-color: var(--color-neutral-85);
            --p-upload-border-color: var(--color-neutral-85);
            --p-upload-icon-color: var(--color-neutral-20);
            --p-upload-text-color: var(--color-neutral-20)
        }

        .status {
            --p-status-color: var(--color-neutral-50);
            display: flex;
            align-items: baseline;
            gap: .5rem;
            -webkit-user-select: none;
            user-select: none
        }

        .status-icon {
            inline-size: .75rem;
            block-size: .75rem;
            border-radius: var(--border-radius-circular);
            background-color: hsl(var(--p-status-color))
        }

        .status.is-offline {
            --p-status-color: var(--color-neutral-50)
        }

        .status.is-waiting {
            --p-status-color: var(--color-warning-50)
        }

        .status.is-pending {
            --p-status-color: var(--color-warning-100)
        }

        .status.is-failed {
            --p-status-color: var(--color-danger-100)
        }

        .status.is-complete {
            --p-status-color: var(--color-success-100)
        }

        .status.is-processing {
            --p-status-color: var(--color-information-100)
        }

        .upload-box {
            --p-header-text-color: var(--color-neutral-70);
            --p-header-bg-color: var(--color-neutral-10);
            --p-content-text-color: var(--color-neutral-60);
            --p-content-bg-color: var(--color-neutral-0);
            --p-border-color: var(--color-neutral-10);
            overflow: hidden;
            min-inline-size: 17.8125rem;
            box-shadow: var(--shadow-small);
            border-radius: var(--border-radius-small);
            font-size: .875rem;
            line-height: 1
        }

        .upload-box-button {
            --p-icon-button-size: var(--icon-button-size, 1.25rem);
            inline-size: var(--p-icon-button-size);
            block-size: var(--p-icon-button-size);
            font-size: var(--p-icon-button-size);
            transition: var(--transition);
            line-height: 1;
            text-align: center;
            flex-shrink: 0;
            cursor: pointer
        }

        .upload-box-button.is-open {
            transform: rotate(180deg)
        }

        .upload-box-button.is-success {
            color: var(--config-color-success)
        }

        .upload-box-header {
            display: flex;
            padding: 1rem;
            color: hsl(var(--p-header-text-color));
            background-color: hsl(var(--p-header-bg-color))
        }

        .upload-box-header .upload-box-button {
            margin-inline-start: 1rem
        }

        .upload-box-title {
            align-self: center;
            margin-inline-end: auto
        }

        .upload-box-title .text {
            text-transform: uppercase;
            letter-spacing: .12em
        }

        .upload-box-title .amount:before {
            content: "("
        }

        .upload-box-title .amount:after {
            content: ")"
        }

        .upload-box-content {
            background-color: hsl(var(--p-content-bg-color));
            color: hsl(var(--p-content-text-color));
            block-size: 0;
            overflow: auto;
            transition: var(--transition)
        }

        .upload-box-content::-webkit-scrollbar {
            opacity: .7;
            width: .5rem;
            height: .5rem
        }

        .upload-box-content::-webkit-scrollbar-track {
            border-radius: .25rem;
            margin-right: .5rem
        }

        .upload-box-content::-webkit-scrollbar-thumb {
            border-radius: .25rem;
            background: hsl(var(--scroll-color))
        }

        .upload-box-content::-webkit-scrollbar-corner {
            background: hsl(var(--scroll-color));
            border-radius: .375rem
        }

        .upload-box-content.is-open {
            block-size: auto;
            max-block-size: 13.625rem
        }

        .upload-box-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem
        }

        .upload-box-item .file-name {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            line-height: 1.2;
            align-self: center;
            margin-inline-end: auto
        }

        .upload-box-item-button {
            align-self: center;
            margin-inline-start: 1rem
        }

        .upload-box-item .icon-check {
            color: hsl(var(--color-text-success))
        }

        .upload-box-item:not(:last-child) {
            border-bottom: solid .0625rem hsl(var(--p-border-color))
        }

        .upload-box.is-float {
            position: fixed
        }

        @media (max-width: 767.99px) {
            .upload-box.is-float {
                inset-inline: 1rem;
                inset-block-end: 1.25rem
            }
        }

        @media (min-width: 768px) {
            .upload-box.is-float {
                inset-inline-end: 1.5rem;
                inset-block-end: 1.5rem
            }
        }

        .theme-dark .upload-box {
            --p-header-text-color: var(--color-neutral-20);
            --p-header-bg-color: var(--color-neutral-100);
            --p-content-text-color: var(--color-neutral-20);
            --p-content-bg-color: var(--color-neutral-90);
            --p-border-color: var(--color-neutral-85)
        }

        .upload-file-box {
            --p-icon-file: var(--color-neutral-20);
            --p-title-color: var(--color-neutral-70);
            --p-info-text: var(--color-neutral-60);
            --p-file-size: var(--color-neutral-50);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1rem
        }

        @media (min-width: 768px) {
            .upload-file-box-list {
                border-block-start: solid .0625rem hsl(var(--color-border));
                padding-block-start: 1rem;
                margin-block-start: .5rem
            }
        }

        .upload-file-box-title {
            color: hsl(var(--p-title-color));
            vertical-align: baseline
        }

        .upload-file-box-title+*,
        .upload-file-box-title+* *,
        .upload-file-box-title+* [class*=icon]:before {
            vertical-align: baseline
        }

        .upload-file-box-info,
        .upload-file-box-name {
            color: hsl(var(--p-info-text))
        }

        .upload-file-box-size {
            color: hsl(var(--p-file-size))
        }

        .upload-file-box-size:before {
            content: "("
        }

        .upload-file-box-size:after {
            content: ")"
        }

        .upload-file-box-image {
            --p-size: 3rem;
            --p-image-color: var(--color-neutral-60);
            --p-bg-color: var(--color-neutral-5);
            --p-border-color: var(--color-neutral-15);
            color: hsl(var(--p-image-color));
            background-color: hsl(var(--p-bg-color));
            border: solid .0625rem hsl(var(--p-border-color));
            display: grid;
            place-content: center;
            align-self: center;
            flex-shrink: 0;
            inline-size: var(--p-size);
            block-size: var(--p-size);
            min-inline-size: 0;
            border-radius: var(--border-radius-circular)
        }

        @media (max-width: 767.99px) {
            .upload-file-box-image {
                --p-size: 2.5rem
            }
        }

        .theme-dark .upload-file-box-image {
            --p-image-color: var(--color-neutral-60);
            --p-bg-color: var(--color-neutral-90);
            --p-border-color: var(--color-neutral-80)
        }

        .upload-file-box .icon-document {
            color: hsl(var(--p-icon-file));
            margin-inline-end: .5rem
        }

        @media (max-width: 767.99px) {
            .upload-file-box {
                gap: .5rem
            }

            .upload-file-box-list {
                grid-column: span 2
            }
        }

        @media (min-width: 768px) {
            .upload-file-box-list {
                grid-column: 2
            }
        }

        .theme-dark .upload-file-box {
            --p-title-color: var(--color-neutral-5);
            --p-info-text: var(--color-neutral-20)
        }

        .file-preview {
            --p-file-preview-text-color: var(--color-neutral-20);
            --p-file-preview-bg-color: var(--color-neutral-0);
            --p-file-preview-border-color: var(--color-neutral-5);
            position: relative;
            display: grid;
            place-content: center;
            inline-size: 12.8125rem;
            aspect-ratio: 16/10;
            gap: .5rem;
            color: hsl(var(--p-file-preview-text-color));
            background-color: hsl(var(--p-file-preview-bg-color));
            border: solid .0625rem hsl(var(--p-file-preview-border-color));
            border-radius: var(--border-radius-small);
            overflow: hidden
        }

        .file-preview:where(:focus, :hover) .file-preview-image {
            opacity: 1
        }

        .file-preview-image {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            inline-size: 100%;
            block-size: 100%;
            opacity: .65;
            transition: opacity var(--transition)
        }

        .file-preview-image img {
            display: block;
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover
        }

        .file-preview-content {
            position: relative;
            display: grid;
            gap: .5rem;
            justify-items: center
        }

        .file-preview.is-with-image {
            border-width: 0
        }

        .theme-dark .file-preview {
            --p-file-preview-text-color: var(--color-neutral-20);
            --p-file-preview-bg-color: var(--color-neutral-90);
            --p-file-preview-border-color: var(--color-neutral-85)
        }

        .grid-item-1 {
            --small-title-color: var(--color-neutral-20);
            display: grid;
            grid-template-areas: "start-start start-end" "end-start   end-end";
            grid-template-columns: 1fr auto;
            grid-template-rows: auto 1fr;
            column-gap: 1rem;
            row-gap: 3rem;
            block-size: 100%
        }

        .grid-item-1-start-start {
            grid-area: start-start
        }

        .grid-item-1-start-end {
            grid-area: start-end
        }

        .grid-item-1-end-start {
            grid-area: end-start;
            justify-content: end;
            align-self: end
        }

        .grid-item-1-end-end {
            grid-area: end-end;
            display: flex;
            justify-content: end;
            align-items: end
        }

        .grid-item-1 .eyebrow-heading-3 {
            color: hsl(var(--small-title-color))
        }

        .grid-item-1 .icons {
            line-height: 1
        }

        .grid-item-1 .icons [class*=icon]:before {
            vertical-align: sub
        }

        .pagination {
            --button-size: 2rem;
            display: flex;
            gap: 1.25rem
        }

        .pagination-list {
            display: flex;
            gap: .5rem
        }

        .pagination .button {
            flex-shrink: 0;
            padding-inline: .75rem
        }

        .pagination .button [class*=icon] {
            transform: scaleX(var(--transform-direction))
        }

        .pagination .button [class*=icon]:before {
            vertical-align: middle
        }

        .pagination .button:where(:not(.is-text)) {
            --p-text-color-disabled: var(--color-neutral-90)
        }

        .theme-dark .pagination .button:where(:not(.is-text)) {
            --p-text-color-disabled: var(--color-neutral-20)
        }

        .pagination.is-center {
            justify-content: center
        }

        .pagination.is-end {
            justify-content: flex-end
        }

        .steps {
            --p-step-bullet-icon-color: var(--color-neutral-0);
            --p-step-bullet-content-color: var(--color-neutral-0);
            --p-step-bullet-padding-color: var(--color-neutral-0);
            --p-step-bullet-border-color: var(--color-neutral-20);
            --p-step-bullet-sep-color: var(--color-neutral-20);
            --p-step-bullet-icon-color-done: var(--color-neutral-0);
            --p-step-bullet-content-color-done: var(--color-neutral-20);
            --p-step-bullet-padding-color-done: var(--color-neutral-20);
            --p-step-bullet-content-color-current: var(--color-primary-100);
            --p-step-bullet-border-color-current: var(--color-primary-100);
            --p-step-text-color: var(--color-neutral-60);
            --p-step-text-color-done: var(--color-neutral-50);
            --p-step-text-color-current: var(--color-primary-100);
            --p-substep-text-color: var(--color-neutral-50);
            --p-substep-text-color-done: var(--color-neutral-50);
            --p-substep-text-color-current: var(--color-neutral-80);
            display: grid
        }

        .steps-item {
            position: relative;
            font-size: var(--font-size-1);
            color: hsl(var(--p-step-text-color))
        }

        .steps-item [class*=heading] {
            margin-block-start: .75rem;
            margin-block-end: 1.5rem
        }

        .steps-item .bullet {
            position: relative;
            inline-size: 1.5rem;
            block-size: 1.5rem
        }

        .steps-item .bullet .icon-check {
            text-align: center;
            line-height: 1.5rem;
            color: hsl(var(--p-step-bullet-icon-color))
        }

        .steps-item .bullet:before {
            content: "";
            display: block;
            inline-size: 1.5rem;
            block-size: 1.5rem;
            flex-shrink: 0;
            background-color: hsl(var(--p-step-bullet-content-color));
            border: solid .375rem hsl(var(--p-step-bullet-padding-color));
            box-shadow: 0 0 0 .0625rem hsl(var(--p-step-bullet-border-color));
            border-radius: var(--border-radius-circular)
        }

        .steps-item .bullet.is-done {
            --p-step-bullet-icon-color: var(--p-step-bullet-icon-color-done);
            --p-step-bullet-content-color: var(--p-step-bullet-content-color-done);
            --p-step-bullet-padding-color: var(--p-step-bullet-padding-color-done);
            --p-step-text-color: var(--p-step-text-color-done)
        }

        .steps-item .bullet.is-done:before {
            line-height: .9;
            text-indent: -.0625rem
        }

        .steps-item .bullet.is-done .icon-check {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0
        }

        .steps-item .bullet.is-current {
            --p-step-bullet-content-color: var(--p-step-bullet-content-color-current);
            --p-step-bullet-border-color: var(--p-step-bullet-border-color-current);
            --p-step-text-color: var(--p-step-text-color-current)
        }

        .steps-item-content {
            line-height: 1.5
        }

        .steps-item-wrapper {
            position: relative;
            display: flex;
            gap: 1.5rem;
            min-block-size: 4.5rem
        }

        .steps-item-wrapper:after {
            content: "";
            display: block;
            inline-size: .0625rem;
            position: absolute;
            inset-block-start: 35px;
            inset-block-end: 8px;
            inset-inline-start: .71875rem;
            background-color: hsl(var(--p-step-bullet-sep-color))
        }

        .steps-item:last-child {
            min-block-size: 0
        }

        .steps-item:last-child .steps-item-wrapper:after {
            display: none
        }

        .steps-item.is-disabled {
            opacity: .38
        }

        .steps-sub {
            display: grid;
            gap: 1rem;
            padding-block: 1rem;
            font-size: var(--font-size-0)
        }

        .steps-sub-item {
            color: hsl(var(--p-substep-text-color))
        }

        .steps-sub-item.is-done {
            --p-substep-text-color: var(--p-substep-text-color-done)
        }

        .steps-sub-item.is-current {
            --p-substep-text-color: var(--p-substep-text-color-current)
        }

        .theme-dark .steps {
            --p-step-bullet-content-color: var(--color-neutral-100);
            --p-step-bullet-padding-color: var(--color-neutral-100);
            --p-step-bullet-border-color: var(--color-neutral-60);
            --p-step-bullet-sep-color: var(--color-neutral-60);
            --p-step-bullet-content-color-done: var(--color-neutral-50);
            --p-step-bullet-padding-color-done: var(--color-neutral-50);
            --p-step-text-color: var(--color-neutral-15);
            --p-step-text-color-done: var(--color-neutral-50);
            --p-step-text-color-current: var(--color-primary-100);
            --p-substep-text-color: var(--color-neutral-60);
            --p-substep-text-color-done: var(--color-neutral-60);
            --p-substep-text-color-current: var(--color-neutral-20)
        }

        .buttons-list {
            display: flex;
            --p-button-list-border-color: var(--color-neutral-15)
        }

        .buttons-list-item {
            position: relative
        }

        .buttons-list-item:nth-child(n+2) {
            border-inline-start: solid .0625rem rgba(0, 0, 0, 0)
        }

        .buttons-list-item:nth-child(n+2):before {
            content: "";
            display: block;
            position: absolute;
            inset-inline-start: 0;
            inset-block: 0;
            margin-block: auto;
            inline-size: .0625rem;
            block-size: 75%;
            background-color: hsl(var(--p-button-list-border-color))
        }

        .buttons-list.is-with-padding .buttons-list-item {
            padding-inline: .75rem
        }

        .buttons-list.is-with-padding .buttons-list-item:first-child {
            padding-inline-start: 0
        }

        .buttons-list.is-with-padding .buttons-list-item:last-child {
            padding-inline-end: 0
        }

        .theme-dark .buttons-list {
            --p-button-list-border-color: var(--color-neutral-80)
        }

        .toggle-button {
            --p-icon-toggle-bg-color: var(--color-neutral-0);
            --p-icon-toggle-border-color: var(--color-neutral-15);
            --p-icon-text-color: var(--p-icon-text-color-default);
            --p-icon-text-color-default: var(--color-neutral-60);
            --p-icon-text-color-didabled: var(--color-neutral-20);
            --p-button-color: var(--p-button-color-default);
            --p-button-color-default: var(--transparent);
            --p-button-color-selected: var(--color-neutral-10);
            background-color: hsl(var(--p-icon-toggle-bg-color))
        }

        .toggle-button-list {
            display: flex;
            gap: .5rem;
            padding: .125rem;
            border: solid .0625rem hsl(var(--p-icon-toggle-border-color));
            border-radius: var(--border-radius-xsmall)
        }

        .toggle-button-element {
            display: grid;
            place-content: center;
            inline-size: 2.25rem;
            block-size: 2.25rem;
            background-color: hsl(var(--p-button-color));
            color: hsl(var(--p-icon-text-color));
            border-radius: var(--border-radius-xsmall)
        }

        .toggle-button-element.is-selected {
            --p-button-color: var(--p-button-color-selected)
        }

        .toggle-button-element:disabled,
        .toggle-button-element .is-disabled {
            --p-icon-text-color: var(--p-icon-text-color-didabled);
            cursor: initial
        }

        .theme-dark .toggle-button {
            --p-icon-toggle-bg-color: var(--color-neutral-90);
            --p-icon-toggle-border-color: var(--color-neutral-80);
            --p-icon-text-color-default: var(--color-neutral-20);
            --p-icon-text-color-didabled: var(--color-neutral-70);
            --p-button-color-selected: var(--color-neutral-80)
        }

        .clickable-list {
            --p-clickable-button-bg-color-hover: var(--color-neutral-10);
            --p-clickable-title-text-color: var(--color-neutral-60);
            --p-clickable-desc-text-color: var(--color-neutral-50);
            --p-clickable-sep-color: var(--color-neutral-20);
            --color-border: var(--color-neutral-15)
        }

        .clickable-list-item {
            padding-block: .25rem;
            -webkit-user-select: none;
            user-select: none
        }

        .clickable-list-item:not(:last-child) {
            border-block-end: solid .0625rem hsl(var(--color-border))
        }

        .clickable-list-button {
            display: block;
            padding-block: .5rem;
            padding-inline: 1rem;
            border-radius: var(--border-radius-small)
        }

        .clickable-list-button:hover,
        .clickable-list-button:focus {
            background-color: hsl(var(--p-clickable-button-bg-color-hover))
        }

        .clickable-list-title {
            color: hsl(var(--p-clickable-title-text-color))
        }

        .clickable-list-title-sep {
            color: hsl(var(--p-clickable-sep-color));
            margin-inline: .25rem
        }

        .clickable-list-desc {
            color: hsl(var(--p-clickable-desc-text-color));
            font-size: var(--font-size-00)
        }

        .theme-dark .clickable-list {
            --p-clickable-button-bg-color-hover: var(--color-neutral-85);
            --p-clickable-title-text-color: var(--color-neutral-10);
            --p-clickable-desc-text-color: var(--color-neutral-20);
            --p-clickable-sep-color: var(--color-neutral-80);
            --color-border: var(--color-neutral-80)
        }

        .progress-bar {
            --p-graph-bg-color: var(--color-neutral-15);
            --p-graph-color-fill: var(--color-information-100);
            --p-graph-color-warning: var(--color-warning-100);
            --p-graph-color-danger: var(--color-danger-100);
            --p-graph-icon-color: var(--color-neutral-50);
            --p-graph-text-color: var(--color-neutral-60);
            --p-graph-used-text-color: var(--color-neutral-70);
            --p-graph-max-text-color: var(--color-neutral-50);
            display: flex;
            flex-direction: column;
            gap: .5rem;
            -webkit-user-select: none;
            user-select: none
        }

        .progress-bar-container {
            display: flex;
            block-size: .5rem;
            border-radius: var(--border-radius-xsmall);
            background-color: hsl(var(--p-graph-bg-color))
        }

        .progress-bar-container:before {
            content: "";
            display: block;
            block-size: 100%;
            flex-basis: var(--graph-size, 0);
            border-radius: inherit;
            inline-size: var(--graph-size);
            background-color: hsl(var(--p-graph-color-fill))
        }

        .progress-bar-container.is-warning {
            --p-graph-color-fill: var(--p-graph-color-warning)
        }

        .progress-bar-container.is-danger {
            --p-graph-color-fill: var(--p-graph-color-danger)
        }

        .progress-bar-top-line {
            color: hsl(var(--p-graph-text-color))
        }

        .progress-bar-top-line [class*=icon] {
            color: hsl(var(--p-graph-icon-color))
        }

        .progress-bar-text-used {
            color: hsl(var(--p-graph-used-text-color))
        }

        .progress-bar-text-max {
            color: hsl(var(--p-graph-max-text-color))
        }

        .theme-dark .progress-bar {
            --p-graph-bg-color: var(--color-neutral-85);
            --p-graph-icon-color: var(--color-neutral-20);
            --p-graph-text-color: var(--color-neutral-20);
            --p-graph-used-text-color: var(--color-neutral-20)
        }

        .top-cover {
            --p-cover-bg-color: var(--color-neutral-0);
            --p-cover-border-color: var(--color-border);
            background-color: hsl(var(--p-cover-bg-color));
            display: flex;
            flex-direction: column;
            min-block-size: 11.625rem;
            border-block-end: solid .0625rem hsl(var(--p-cover-border-color))
        }

        .top-cover :where(.container) {
            flex: 1;
            display: flex;
            flex-direction: column
        }

        .top-cover :where(.container) .tabs {
            margin-block-start: auto;
            margin-block-end: calc(var(--p-container-padding-block) * -1)
        }

        @media (min-width: 1199px) {
            .top-cover [class*=heading-level-] {
                position: relative
            }

            .top-cover [class*=heading-level-] .button {
                position: absolute;
                inset-inline-start: 0;
                transform: translate(calc(-100% * var(--transform-direction))) scaleX(var(--transform-direction))
            }
        }

        .theme-dark .top-cover {
            --p-cover-bg-color: var(--color-neutral-100)
        }

        .code-panel {
            --p-code-panel-header: var(--color-neutral-5);
            --p-code-panel-border-color: var(--color-neutral-15);
            --p-code-panel-content: var(--color-neutral-0);
            display: flex;
            flex-direction: column;
            block-size: 100%;
            flex-shrink: 0;
            overflow: hidden;
            border: solid .0625rem hsl(var(--p-code-panel-border-color));
            border-radius: var(--border-radius-xsmall)
        }

        .code-panel-header {
            display: flex;
            padding: 1rem;
            background-color: hsl(var(--p-code-panel-header));
            border-block-end: solid .0625rem hsl(var(--p-code-panel-border-color))
        }

        .code-panel-content {
            flex: 1;
            padding: 1.5rem;
            overflow: auto;
            background-color: hsl(var(--p-code-panel-content))
        }

        .theme-dark .code-panel {
            --p-code-panel-header: var(--color-neutral-100);
            --p-code-panel-border-color: var(--color-neutral-85);
            --p-code-panel-content: var(--color-neutral-200);
            --p-code-panel-text-color: var(--color-neutral-5)
        }

        .top-banner {
            --top-banner-mobile-bg-1-url: url(../../../images/top-banner/bg-pink-mobile.html);
            --top-banner-mobile-bg-2-url: url(../../../images/top-banner/bg-mint-mobile.html);
            --top-banner-desktop-bg-1-url: url(../../../images/top-banner/bg-pink-desktop.html);
            --top-banner-desktop-bg-2-url: url(../../../images/top-banner/bg-mint-desktop.html);
            position: relative;
            display: flex;
            justify-content: center;
            padding-block: .3125rem;
            padding-inline: .75rem;
            background: var(--top-banner-desktop-bg-1-url) no-repeat left center, var(--top-banner-desktop-bg-2-url) no-repeat right -330px
        }

        .top-banner-content {
            line-height: 3.125rem;
            transition: var(--transition)
        }

        .top-banner-button {
            position: absolute;
            inset-block: 0;
            inset-inline-end: .75rem
        }

        [data-banner-hidden] .top-banner {
            display: none
        }

        @media (max-width: 767.99px) {
            .top-banner {
                inline-size: 100%;
                padding: 1rem;
                background: var(--top-banner-mobile-bg-1-url) no-repeat left bottom, var(--top-banner-mobile-bg-2-url) no-repeat right top
            }

            .top-banner-content {
                display: flex;
                flex-direction: column;
                inline-size: 100%;
                line-height: 1.5;
                transition: var(--transition)
            }

            .top-banner-button {
                position: static;
                line-height: 1;
                align-self: end;
                order: -1;
                margin-block-start: -4px;
                margin-inline-end: -5px;
                margin-block-end: .5rem
            }
        }

        :root {
            --main-header-height: 4rem
        }

        .main-header {
            --p-main-header-bg-color: var(--color-neutral-0);
            --p-main-header-border-color: var(--color-border);
            display: flex;
            align-items: center;
            gap: 1.5rem;
            block-size: var(--main-header-height);
            padding-inline: 1.5rem;
            background-color: hsl(var(--p-main-header-bg-color));
            border-block-end: solid .0625rem hsl(var(--p-main-header-border-color));
            -webkit-user-select: none;
            user-select: none
        }

        .main-header>* {
            min-inline-size: 0
        }

        .main-header-end {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            block-size: 100%;
            gap: 1.5rem
        }

        @media (max-width: 767.99px),
        (min-width: 768px) and (max-width: 1198.99px) {
            .main-header .drop {
                position: fixed;
                z-index: 5;
                inset-block-start: var(--main-header-height);
                inset-inline: 0;
                inline-size: 100%;
                max-inline-size: none
            }
        }

        .theme-dark .main-header {
            --p-main-header-bg-color: var(--color-neutral-105)
        }

        @media (max-width: 767.99px),
        (min-width: 768px) and (max-width: 1198.99px) {
            .main-header {
                gap: .5rem;
                padding-inline-start: .5rem
            }

            .main-header .logo {
                margin-inline-end: auto
            }

            .main-header .user-profile .drop {
                max-inline-size: initial
            }

            .main-header .user-profile .drop-wrapper {
                position: static
            }

            .main-header #Support {
                inset-block-end: 0;
                overflow: auto;
                border-start-start-radius: 0;
                border-start-end-radius: 0
            }
        }

        @media (min-width: 1199px) {
            .main-header-end {
                margin-inline-start: auto
            }

            .main-header .user-profile-button+.drop {
                border-start-start-radius: 0;
                border-start-end-radius: 0;
                inset-inline: -.0625rem 0;
                inset-block-start: 100%
            }

            .main-header #Support {
                margin-block-start: .125rem
            }

            .main-header #Support.drop:before,
            .main-header #Support.drop:after {
                inset-block-start: -.4375rem
            }

            .main-header #Support.drop:before {
                inline-size: 1rem
            }

            .main-header #Support.drop:after {
                inline-size: 1.0625rem
            }
        }

        .breadcrumbs {
            --p-text-color: var(--color-neutral-50);
            --p-text-color-current: var(--color-neutral-80);
            color: hsl(var(--p-text-color));
            -webkit-user-select: none;
            user-select: none
        }

        .breadcrumbs-list {
            display: flex
        }

        .breadcrumbs-item {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            flex-shrink: 0;
            text-transform: capitalize
        }

        .breadcrumbs-item>* {
            padding-inline: 1rem
        }

        .breadcrumbs-item:before {
            content: "/";
            color: hsl(var(--p-text-color))
        }

        .breadcrumbs-item:last-child {
            color: hsl(var(--p-text-color-current));
            flex-shrink: 1
        }

        .theme-dark .breadcrumbs {
            --p-text-color: var(--color-neutral-20);
            --p-text-color-current: var(--color-neutral-5)
        }

        .user-profile {
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: 1rem;
            row-gap: .75rem
        }

        .user-profile-sep {
            grid-column: span 2;
            border-block-start: solid .0625rem hsl(var(--color-border))
        }

        .user-profile-button {
            --p-name-color-text: var(--color-neutral-60);
            --p-title-color-text: var(--color-neutral-50);
            --p-icon-color: var(--color-neutral-20);
            position: relative;
            z-index: 2;
            display: flex;
            block-size: 100%;
            align-items: center;
            padding-inline: 1.5rem;
            gap: .75rem;
            background-color: hsl(var(--p-main-header-bg-color))
        }

        .user-profile-button>* {
            flex-shrink: 0
        }

        .user-profile-button [class*=icon] {
            font-size: var(--icon-size-medium);
            color: hsl(var(--p-icon-color));
            transition: var(--transition)
        }

        .user-profile-button.is-open [class*=icon] {
            transform: rotate(180deg)
        }

        .theme-dark .user-profile-button {
            --p-name-color-text: var(--color-neutral-5);
            --p-title-color-text: var(--color-neutral-20);
            --p-icon-color: var(--color-neutral-20)
        }

        .user-profile-info {
            flex: 1;
            font-size: var(--font-size-0);
            line-height: 1.35
        }

        .user-profile-info>.text,
        .user-profile-info>.name,
        .user-profile-info>.title {
            display: block
        }

        .user-profile-info .name {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            color: hsl(var(--p-name-color-text))
        }

        .user-profile-info .title {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            color: hsl(var(--p-title-color-text))
        }

        @media (min-width: 1199px) {
            .user-profile {
                border-inline-start: solid .0625rem hsl(var(--p-main-header-border-color))
            }

            .user-profile-button {
                min-inline-size: 15rem
            }
        }

        .side-nav {
            --p-side-nav-bg-color: var(--color-neutral-0);
            --p-side-nav-border-color: var(--color-border);
            --p-side-nav-header-text-color: var(--color-neutral-50);
            background-color: hsl(var(--p-side-nav-bg-color));
            border-inline-end: solid .0625rem hsl(var(--p-side-nav-border-color))
        }

        .side-nav-level-1,
        .side-nav-level-2 {
            display: flex;
            flex-direction: column
        }

        .side-nav-level-1 {
            position: relative;
            transition: var(--transition)
        }

        @media (min-width: 1199px) {
            .side-nav-level-1.is-narrow {
                inline-size: 4.5rem
            }

            .side-nav-level-1.is-narrow .drop-section {
                padding-inline-end: 1rem
            }
        }

        .side-nav-level-2 {
            display: none;
            border-inline-start: solid .0625rem hsl(var(--color-border))
        }

        .side-nav-level-2.is-open {
            display: flex
        }

        .side-nav-main {
            flex: 1;
            overflow-y: auto;
            scrollbar-gutter: initial;
            overflow: overlay;
            overflow-x: hidden
        }

        .side-nav-main::-webkit-scrollbar {
            opacity: .7;
            width: .5rem;
            height: .5rem
        }

        .side-nav-main::-webkit-scrollbar-track {
            border-radius: .25rem;
            margin-right: .5rem
        }

        .side-nav-main::-webkit-scrollbar-thumb {
            border-radius: .25rem;
            background: hsl(var(--scroll-color))
        }

        .side-nav-main::-webkit-scrollbar-corner {
            background: hsl(var(--scroll-color));
            border-radius: .375rem
        }

        .side-nav-main:not(:hover)::-webkit-scrollbar-thumb {
            background: hsl(var(--transparent))
        }

        .side-nav-main:not(:hover)::-webkit-scrollbar-corner {
            background: hsl(var(--transparent))
        }

        .side-nav .drop-section {
            --section-padding-horizontal: 1rem;
            --section-padding-vertical: 1.5rem
        }

        .side-nav .drop-button {
            --button-padding-horizontal: .75rem;
            --button-padding-vertical: .5rem;
            line-height: 1.7145
        }

        .side-nav .drop-button .text {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all
        }

        .side-nav-button {
            position: absolute;
            inset-inline-end: -1rem;
            inset-block-end: 1.75rem;
            display: grid;
            place-content: center;
            padding-inline: 0;
            inline-size: 2rem;
            border-radius: var(--border-radius-small)
        }

        .side-nav-button .icon-cheveron-right {
            display: block;
            transition: var(--transition)
        }

        .side-nav-button.is-open .icon-cheveron-right {
            transform: rotate(180deg)
        }

        .side-nav .eyebrow-heading-3 {
            color: var(--p-side-nav-header-text-color)
        }

        .theme-dark .side-nav {
            --p-side-nav-bg-color: var(--color-neutral-105);
            --p-side-nav-header-text-color: var(--color-neutral-20)
        }

        @media (max-width: 767.99px),
        (min-width: 768px) and (max-width: 1198.99px) {
            .side-nav.is-mobile-center .drop-list-item {
                display: flex;
                justify-content: center
            }

            .side-nav.is-mobile-center .drop-button {
                justify-content: center
            }

            .side-nav.is-mobile-center .drop-button [class*=icon] {
                display: none
            }

            .side-nav .side-nav-level-1 {
                display: block
            }

            .side-nav .side-nav-level-2,
            .side-nav.is-open-level-2 .side-nav-level-1 {
                display: none
            }

            .side-nav.is-open-level-2 .side-nav-level-2 {
                display: block
            }
        }

        @media (min-width: 1199px) {
            .side-nav {
                display: flex;
                block-size: 100%
            }

            .side-nav-level-1,
            .side-nav-level-2 {
                inline-size: 12.5rem
            }

            .side-nav .drop-section {
                margin-inline: 0
            }
        }

        .main-footer {
            display: flex;
            flex-wrap: wrap;
            padding-block: 1rem;
            border-block-start: solid .0625rem hsl(var(--color-border));
            margin-inline: 2rem;
            margin-block-start: 2rem;
            font-size: var(--font-size-00)
        }

        @media (max-width: 767.99px),
        (min-width: 768px) and (max-width: 1198.99px) {
            .main-footer {
                gap: 1rem
            }

            .main-footer-start {
                margin-inline-end: auto
            }
        }

        @media (min-width: 1199px) {
            .main-footer {
                display: flex;
                flex-direction: row-reverse;
                justify-content: space-between
            }
        }
    }

    @layer grids {
        .grid-with-side {
            position: relative;
            --p-side-size: 12.5rem
        }

        .grid-with-side>:where(.alert) {
            grid-area: alert
        }

        .grid-with-side>:where(.top-banner) {
            grid-area: alert
        }

        .grid-with-side>:where(.main-header) {
            grid-area: header
        }

        .grid-with-side>:where(.main-side) {
            grid-area: side
        }

        .grid-with-side>:where(.main-content) {
            grid-area: main
        }

        @media (max-width: 767.99px),
        (min-width: 768px) and (max-width: 1198.99px) {
            .grid-with-side .main-side {
                display: none;
                max-block-size: none
            }

            .grid-with-side:where(.is-open) .main-side {
                display: block;
                position: static
            }

            .grid-with-side:where(.is-open) .main-content {
                display: none
            }
        }

        @media (min-width: 1199px) {
            .grid-with-side {
                display: grid;
                grid-template-columns: minmax(var(--p-side-size), auto) 1fr;
                grid-template-rows: auto auto 1fr;
                grid-template-areas: "alert alert" "header header" "side   main"
            }

            .grid-with-side>.main-content {
                max-inline-size: calc(100vw - var(--p-side-size))
            }

            .grid-with-side.is-fixed-layout {
                block-size: 100vh;
                block-size: 100lvh;
                max-block-size: 100vh;
                max-block-size: 100lvh
            }

            .grid-with-side.is-fixed-layout .main-side {
                block-size: auto
            }

            .grid-with-side.is-fixed-layout .main-content {
                overflow: auto
            }

            .grid-with-side.is-empty-side {
                grid-template-areas: "header header" "main    main"
            }

            .grid-with-side.is-empty-side .main-side {
                block-size: unset
            }

            .grid-with-side.is-empty-side .main-content>* {
                padding-inline-start: var(--p-side-size)
            }

            .grid-with-side .main-side {
                block-size: calc(100vh - var(--main-header-height))
            }
        }

        @media (min-width: 1199px) {
            .is-fixed-alert-layout {
                display: flex;
                flex-direction: column;
                block-size: 100vh;
                block-size: 100lvh;
                max-block-size: 100vh;
                max-block-size: 100lvh
            }

            .is-fixed-alert-layout .main-content {
                overflow: auto;
                flex: 1
            }
        }

        .main-content {
            position: relative;
            display: flex;
            flex-direction: column;
            flex: 1
        }

        .main-content>* {
            flex-shrink: 0
        }

        .main-header {
            position: sticky;
            z-index: 5;
            inset-block-start: 0
        }

        .main-side {
            position: sticky;
            z-index: 5;
            inset-block-start: var(--main-header-height);
            max-block-size: 100vh;
            overflow: hidden
        }

        .grid-box {
            --p-grid-gap: var(--grid-gap, 1.5rem);
            --p-grid-item-size: var(--grid-item-size, 13.125rem);
            --p-grid-item-size-small-screens: var(--grid-item-size-small-screens, 13.125rem);
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--p-grid-item-size), 1fr));
            grid-auto-rows: 1fr;
            gap: var(--p-grid-gap);
            flex-shrink: 0
        }

        @media (max-width: 767.99px) {
            .grid-box {
                --p-grid-item-size: var(--p-grid-item-size-small-screens)
            }
        }

        .grid-header {
            gap: 1.5rem
        }

        @media (max-width: 767.99px) {
            .grid-header {
                display: grid;
                grid-template-columns: auto auto;
                grid-template-areas: "col-1 col-2" "col-3 col-4"
            }

            .grid-header-col-1 {
                grid-area: col-1
            }

            .grid-header-col-2 {
                grid-area: col-2;
                justify-self: end
            }

            .grid-header-col-3 {
                grid-area: col-3;
                justify-self: start
            }

            .grid-header-col-4 {
                grid-area: col-4;
                justify-self: end
            }
        }

        @media (min-width: 768px) and (max-width: 1198.99px),
        (min-width: 1199px) {
            .grid-header {
                display: flex;
                justify-content: space-between
            }
        }

        .grid-code {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-auto-rows: auto;
            column-gap: .5rem;
            align-content: start;
            font-family: var(--code-font);
            counter-reset: lineNumbers
        }

        .grid-code-line-number {
            color: hsl(var(--color-neutral-50))
        }

        .grid-code-line-number:before {
            counter-increment: lineNumbers;
            content: counter(lineNumbers)
        }

        .grid-1-1 {
            display: grid
        }

        .grid-1-1.is-full-page {
            --p-side-1-color: var(--color-neutral-5);
            --p-side-2-color: var(--color-neutral-0)
        }

        .theme-dark .grid-1-1.is-full-page {
            --p-side-1-color: var(--color-neutral-90);
            --p-side-2-color: var(--color-neutral-105)
        }

        @media (max-width: 767.99px) {
            .grid-1-1.is-full-page {
                grid-template-rows: auto 1fr;
                min-block-size: 100vh;
                min-block-size: 100dvh;
                background-color: hsl(var(--p-side-2-color))
            }

            .grid-1-1.is-full-page .grid-1-1-col-2 .container {
                --container-padding-block: 0rem
            }

            .grid-1-1.is-full-page .grid-1-1-col-1 .container {
                --container-padding-block: 1rem
            }
        }

        @media (min-width: 768px) {
            .grid-1-1.is-full-page .grid-1-1-col-1 {
                background-color: hsl(var(--p-side-1-color))
            }

            .grid-1-1.is-full-page .grid-1-1-col-2 {
                background-color: hsl(var(--p-side-2-color))
            }

            .grid-1-1.is-full-page .grid-1-1-col-2>.container {
                block-size: 100vh;
                block-size: 100lvh
            }
        }

        @media (min-width: 768px) {
            .grid-1-1 {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        .grid-1-2 {
            display: grid;
            row-gap: 2rem
        }

        @media (min-width: 768px) {
            .grid-1-2 {
                grid-template-columns: 1fr 1.5fr;
                column-gap: 6.25rem
            }
        }

        .grid-300px-1fr {
            display: grid;
            gap: 2rem
        }

        @media (min-width: 1199px) {
            .grid-300px-1fr {
                grid-template-columns: 18.75rem 1fr
            }
        }

        .grid-dashboard-1s-2m-6l {
            display: grid;
            gap: 1.5rem
        }

        @media (min-width: 768px) and (max-width: 1198.99px) {
            .grid-dashboard-1s-2m-6l {
                grid-template-columns: repeat(2, 1fr)
            }

            .grid-dashboard-1s-2m-6l .is-2-columns-medium-screen {
                grid-column: span 2
            }
        }

        @media (min-width: 1199px) {
            .grid-dashboard-1s-2m-6l {
                grid-template-columns: repeat(6, 1fr)
            }

            .grid-dashboard-1s-2m-6l .is-2-columns-large-screen {
                grid-column: span 2
            }

            .grid-dashboard-1s-2m-6l .is-3-columns-large-screen {
                grid-column: span 3
            }

            .grid-dashboard-1s-2m-6l .is-location-row-2-end-large-screen {
                grid-row-start: 2;
                grid-column-end: -1
            }

            .grid-dashboard-1s-2m-6l .is-2-rows-large-screen {
                grid-row-end: span 2
            }
        }

        .wizard {
            --p-header-color: var(--color-neutral-0);
            --p-start-color: var(--color-neutral-5);
            --p-end-color: var(--color-neutral-0);
            --p-header-height: 4rem
        }

        .wizard-header-strip {
            background-color: hsl(var(--p-header-color));
            border-block-end: solid .0625rem hsl(var(--color-border))
        }

        .wizard-end-bg {
            background-color: hsl(var(--p-end-color))
        }

        .wizard-header,
        .wizard-side,
        .wizard-main {
            padding-inline: 2rem
        }

        .wizard-header-strip {
            position: sticky;
            z-index: 2;
            inset-block-start: 0
        }

        .wizard-header {
            position: sticky;
            z-index: 2;
            inset-block-start: 0;
            display: flex;
            align-items: center;
            gap: .75rem
        }

        .wizard-side {
            align-self: start
        }

        .wizard-media {
            display: grid;
            justify-content: center;
            align-items: end;
            position: relative
        }

        .wizard-media>* {
            position: sticky;
            inset-inline: 2rem;
            inset-block-end: 2rem;
            margin-inline: auto;
            max-inline-size: calc(100% - 64px);
            max-block-size: 320px
        }

        @media (max-height: 860px) {
            .wizard-media {
                display: none
            }
        }

        .wizard-main {
            display: flex;
            flex-direction: column;
            padding-block-start: 2.5rem;
            padding-inline: 2.5rem;
            min-inline-size: 0
        }

        .wizard .form {
            block-size: 100%;
            max-block-size: 100%
        }

        .wizard .form-footer {
            position: sticky;
            inset-block-end: 0;
            background-color: hsl(var(--p-end-color))
        }

        @media (max-width: 767.99px) {
            .wizard {
                display: grid;
                grid-template-rows: var(--p-header-height);
                min-block-size: 100dvh
            }

            .wizard-header-strip,
            .wizard-header {
                padding-inline: 1rem;
                grid-row: 1;
                grid-column: 1
            }

            .wizard .form-footer {
                padding-inline: 2.5rem;
                margin-inline: -1rem
            }

            .wizard-side {
                display: none;
                padding: 1rem
            }

            .wizard-side.is-shown-mobile {
                display: block
            }

            .wizard-main {
                padding: 1rem;
                padding-block-end: 0;
                background-color: hsl(var(--p-end-color))
            }

            .wizard-media,
            .wizard-start-bg,
            .wizard-end-bg {
                display: none
            }
        }

        @media (min-width: 768px) {
            .wizard {
                display: grid;
                grid-template-columns: 1fr minmax(15rem, 20.625rem) minmax(0rem, 6.25rem) minmax(30rem, 46.875rem) 1fr;
                grid-auto-rows: var(--p-header-height) auto 1fr;
                min-block-size: 100vh
            }

            .wizard.is-no-gap-middle {
                grid-template-columns: 1fr minmax(15rem, 20.625rem) 0 minmax(30rem, 46.875rem) 1fr
            }

            .wizard-side {
                position: sticky;
                z-index: 2;
                inset-block-start: var(--p-header-height);
                padding-block-start: 3.375rem
            }

            .wizard-header-strip {
                grid-row: 1;
                grid-column: 1/-1
            }

            .wizard-start-bg {
                grid-row: 2/4;
                grid-column: 1/3;
                background-color: hsl(var(--p-start-color));
                border-inline-end: solid .0625rem hsl(var(--color-border))
            }

            .wizard-end-bg {
                grid-row: 2/4;
                grid-column: 3/6
            }

            .wizard-header {
                grid-row: 1;
                grid-column: 2/5
            }

            .wizard-side {
                grid-row: 2;
                grid-column: 2
            }

            .wizard-main {
                grid-row: 2/4;
                grid-column: 4
            }

            .wizard-media {
                grid-row: 3;
                grid-column: 1/3
            }

            .wizard.is-full-center-layout .wizard-container {
                grid-column: 2/5;
                padding-inline: 2rem
            }
        }

        .theme-dark .wizard {
            --p-header-color: var(--color-neutral-105);
            --p-start-color: var(--color-neutral-100);
            --p-end-color: var(--color-neutral-90)
        }

        .wizard-secondary {
            display: block;
            min-block-size: 100dvh;
            padding-inline: 2rem
        }

        .wizard-secondary-container {
            max-inline-size: 75rem;
            margin-inline: auto
        }

        .wizard-secondary-header {
            position: sticky;
            inset-block-start: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-block-start: 2rem;
            padding-block-end: 1rem;
            background-color: hsl(var(--p-body-bg-color))
        }

        .wizard-secondary-content {
            display: flex;
            gap: 2rem;
            padding-block-start: 1rem
        }

        .wizard-secondary-content-sep {
            flex-basis: .0625rem;
            flex-shrink: 0;
            background-color: hsl(var(--color-border))
        }

        .wizard-secondary-options {
            position: sticky;
            inset-block-end: 0;
            display: flex;
            gap: 1rem;
            justify-content: space-between;
            padding-block: 2rem;
            border-block-start: solid .0625rem hsl(var(--color-border));
            margin-block-start: 2rem;
            background-color: hsl(var(--p-body-bg-color))
        }

        .wizard-secondary-options-start,
        .wizard-secondary-options-end {
            display: flex;
            gap: 1rem
        }

        @media (max-width: 767.99px) {

            .wizard-secondary-options,
            .wizard-secondary-options-start,
            .wizard-secondary-options-end {
                flex-direction: column-reverse
            }
        }

        @media (max-width: 1127.99px) {
            .wizard-secondary-content {
                flex-direction: column
            }
        }

        @media (min-width: 1128px) {
            .wizard-secondary-content-1 {
                flex: 2.25
            }

            .wizard-secondary-content-2 {
                flex: 1
            }

            .wizard-secondary-content-sticky {
                position: sticky;
                inset-block-start: 9.6875rem
            }
        }

        .cover-frame {
            --p-cover-frame-bg-header: var(--transparent);
            display: flex;
            flex-direction: column;
            block-size: 100vh;
            block-size: 100lvh
        }

        .cover-frame-header {
            padding-inline: 2rem;
            padding-block: 1.25rem;
            border-block-end: solid .0625rem hsl(var(--color-border));
            background-color: hsl(var(--p-cover-frame-bg-header))
        }

        .cover-frame-content {
            flex: 1;
            padding: 2rem;
            overflow: hidden
        }

        .cover-frame.is-color-header {
            --p-cover-frame-bg-header: var(--color-neutral-0)
        }

        .theme-dark .cover-frame.is-color-header {
            --p-cover-frame-bg-header: var(--color-neutral-500)
        }

        .inner-grid {
            display: flex;
            column-gap: 2.5rem;
            row-gap: 1.25rem;
            flex-wrap: wrap
        }

        .inner-grid-main {
            flex-grow: 1;
            flex-basis: 36.25rem
        }

        .inner-grid-side {
            flex: 1;
            flex-basis: 20rem
        }

        .inner-grid-main,
        .inner-grid-side {
            display: flex;
            flex-direction: column;
            gap: 1.25rem
        }
    }

    @layer utilities {
        .u-hide {
            display: none !important
        }

        .u-opacity-0 {
            opacity: 0 !important
        }

        .u-opacity-20 {
            opacity: .2 !important
        }

        .u-opacity-50 {
            opacity: .5 !important
        }

        .u-overflow-hidden {
            overflow: hidden !important
        }

        .u-overflow-visible {
            overflow: visible !important
        }

        .u-overflow-x-auto {
            overflow-x: auto !important
        }

        .u-overflow-y-auto {
            overflow-y: auto !important
        }

        .u-direction-ltr {
            direction: ltr !important
        }

        .u-direction-rtl {
            direction: rtl !important
        }

        .u-x-small {
            font-size: .75rem !important
        }

        .u-small {
            font-size: .875rem !important
        }

        .u-medium {
            font-size: 1rem !important
        }

        .u-font-size-20 {
            font-size: 1.25rem !important
        }

        .u-font-size-32 {
            font-size: 2rem !important
        }

        .u-bold {
            font-weight: 600 !important
        }

        .u-normal {
            font-weight: 400 !important
        }

        .u-underline {
            text-decoration: underline !important
        }

        .u-text-start {
            text-align: start !important
        }

        .u-text-center {
            text-align: center !important
        }

        .u-text-end {
            text-align: end !important
        }

        .u-line-height-0-7 {
            line-height: .7 !important
        }

        .u-line-height-1 {
            line-height: 1
        }

        .u-line-height-1-25 {
            line-height: 1.25
        }

        .u-line-height-1-5 {
            line-height: 1.5
        }

        .u-line-height-2 {
            line-height: 2
        }

        .u-trim {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block
        }

        .u-trim-1 {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all
        }

        .u-trim-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all
        }

        .u-trim-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all
        }

        .u-trim-start {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            direction: rtl;
            text-align: left
        }

        .u-break-word {
            overflow-wrap: break-word;
            word-wrap: break-word;
            -ms-word-break: break-all;
            word-break: break-all;
            word-break: break-word;
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto;
            white-space: initial
        }

        .u-break-all {
            overflow-wrap: break-all;
            word-wrap: break-all;
            -ms-word-break: break-all;
            word-break: break-all;
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto;
            white-space: initial
        }

        .u-un-break-text {
            white-space: nowrap !important
        }

        .u-capitalize {
            text-transform: capitalize !important
        }

        .u-icon-small {
            font-size: var(--icon-size-small) !important
        }

        .u-font-heading {
            font-family: var(--heading-font) !important
        }

        .u-font-content {
            font-family: var(--content-font) !important
        }

        .u-font-code {
            font-family: var(--code-font) !important
        }

        .u-cursor-pointer {
            cursor: pointer !important
        }

        .u-cursor-text {
            cursor: text !important
        }

        .u-color-text-disabled {
            color: hsl(var(--color-text-disabled)) !important
        }

        .u-color-text-offline {
            color: hsl(var(--color-text-offline)) !important
        }

        .u-color-text-info {
            color: hsl(var(--color-text-info)) !important
        }

        .u-color-text-danger {
            color: hsl(var(--color-text-danger)) !important
        }

        .u-color-text-warning {
            color: hsl(var(--color-text-warning)) !important
        }

        .u-color-text-success {
            color: hsl(var(--color-text-success)) !important
        }

        .u-color-text-gray {
            color: hsl(var(--color-text-gray)) !important
        }

        .u-color-text-pink {
            color: hsl(var(--color-pink-text)) !important
        }

        :where(body:not(.theme-dark)) .u-color-light-only-text-neutral-70 {
            color: hsl(var(--color-neutral-50)) !important
        }

        .theme-dark .u-color-dark-only-text-neutral-50 {
            color: hsl(var(--color-neutral-20)) !important
        }

        .u-position-sticky {
            --inset-block-start: auto;
            --inset-block-end: auto;
            --inset-inline-start: auto;
            --inset-inline-end: auto;
            position: sticky;
            inset-block: var(--inset-block-start) var(--inset-block-end) !important;
            inset-inline: var(--inset-inline-start) var(--inset-inline-end) !important
        }

        .u-position-relative {
            position: relative !important
        }

        .u-position-absolute {
            position: absolute !important
        }

        .u-position-fixed {
            position: fixed !important
        }

        .u-position-static {
            position: static !important
        }

        .u-z-index-0 {
            z-index: 0 !important
        }

        .u-z-index-1 {
            z-index: 1 !important
        }

        .u-z-index-5 {
            z-index: 5 !important
        }

        .u-z-index-10 {
            z-index: 10 !important
        }

        .u-z-index-15 {
            z-index: 15 !important
        }

        .u-z-index-20 {
            z-index: 20 !important
        }

        .u-block {
            display: block !important
        }

        .u-inline {
            display: inline !important
        }

        .u-grid {
            display: grid !important
        }

        .u-flex {
            display: flex !important
        }

        .u-inline-flex {
            display: inline-flex !important
        }

        .u-contents {
            display: contents !important
        }

        @media (max-width: 767.99px) {
            .u-contents-mobile {
                display: contents !important
            }
        }

        .u-box-sizing-content {
            box-sizing: content-box !important
        }

        .u-sep-inline-start {
            border-inline-start: solid .0625rem hsl(var(--color-border)) !important
        }

        .u-sep-block-start {
            border-block-start: solid .0625rem hsl(var(--color-border)) !important
        }

        .u-sep-block-end {
            border-block-end: solid .0625rem hsl(var(--color-border)) !important
        }

        .u-flex-vertical {
            display: flex !important;
            flex-direction: column !important
        }

        @media (max-width: 767.99px) {
            .u-flex-vertical-mobile {
                flex-direction: column !important
            }
        }

        .u-flex-wrap {
            flex-wrap: wrap !important
        }

        .u-stretch {
            flex: 1 !important
        }

        .u-flex-basis-140 {
            flex-basis: 8.75rem !important
        }

        .u-flex-basis-250 {
            flex-basis: 15.625rem !important
        }

        .u-flex-basis-500 {
            flex-basis: 31.25rem !important
        }

        .u-flex-basis-50-percent {
            flex-basis: 50% !important
        }

        .u-flex-basis-100-percent {
            flex-basis: 100% !important
        }

        .u-flex-shrink-0 {
            flex-shrink: 0 !important
        }

        .u-flex-basis-auto {
            flex-basis: auto !important
        }

        .u-grid-columns-auto-1fr {
            display: grid;
            grid-template-columns: auto 1fr
        }

        .u-grid-cols-2 {
            display: grid;
            grid-template-columns: 1fr 1fr
        }

        .u-grid-equal-row-size {
            display: grid;
            grid-auto-rows: 1fr;
            align-items: center
        }

        .u-width-fit-content {
            inline-size: fit-content !important
        }

        .u-width-full-line {
            inline-size: 100% !important
        }

        .u-width-140 {
            inline-size: 8.75rem !important
        }

        .u-width-150 {
            inline-size: 9.375rem !important
        }

        .u-width-200 {
            inline-size: 12.5rem !important
        }

        .u-width-250 {
            inline-size: 15.625rem !important
        }

        @media (min-width: 1199px) {
            .u-width-280-desktop {
                inline-size: 17.5rem !important
            }
        }

        .u-width-600 {
            inline-size: 37.5rem !important
        }

        .u-min-width-0 {
            min-inline-size: 0 !important
        }

        .u-min-width-200 {
            min-inline-size: 12.5rem !important
        }

        .u-min-width-100-percent {
            min-inline-size: 100% !important
        }

        .u-max-width-250 {
            max-inline-size: 15.625rem !important
        }

        .u-max-width-300 {
            max-inline-size: 18.75rem !important
        }

        .u-max-width-350 {
            max-inline-size: 21.875rem !important
        }

        .u-max-width-400 {
            max-inline-size: 25rem !important
        }

        .u-max-width-450 {
            max-inline-size: 27.5rem !important
        }

        .u-max-width-500 {
            max-inline-size: 31.25rem !important
        }

        .u-max-width-600 {
            max-inline-size: 37.5rem !important
        }

        .u-max-width-650 {
            max-inline-size: 40.625rem !important
        }

        .u-max-width-700 {
            max-inline-size: 43.75rem !important
        }

        .u-max-width-100-percent {
            max-inline-size: 100% !important
        }

        .u-height-100-percent {
            block-size: 100% !important
        }

        .u-height-auto {
            block-size: auto !important
        }

        .u-min-height-100 {
            min-block-size: 6.25rem !important
        }

        .u-min-height-184 {
            min-block-size: 11.5rem !important
        }

        .u-min-height-100-percent {
            min-block-size: 100% !important
        }

        .u-max-height-200 {
            max-block-size: 12.5rem !important
        }

        .u-full-screen-height {
            block-size: 100vh !important;
            block-size: 100lvh !important
        }

        .u-main-start {
            justify-content: start !important
        }

        .u-main-center {
            justify-content: center !important
        }

        .u-main-space-between {
            justify-content: space-between !important
        }

        .u-main-end {
            justify-content: end !important
        }

        .u-cross-start {
            align-items: start !important
        }

        .u-cross-baseline {
            align-items: baseline !important
        }

        .u-cross-center {
            align-items: center !important
        }

        .u-cross-end {
            align-items: end !important
        }

        .u-cross-child-start {
            align-self: start !important
        }

        .u-cross-child-center {
            align-self: center !important
        }

        .u-cross-child-end {
            align-self: end !important
        }

        .u-margin-0,
        .u-margin-negative-0 {
            margin: 0rem !important
        }

        .u-padding-0 {
            padding: 0rem !important
        }

        .u-inset-0 {
            top: 0rem !important;
            right: 0rem !important;
            bottom: 0rem !important;
            left: 0rem !important
        }

        .u-margin-inline-0,
        .u-margin-inline-negative-0 {
            margin-inline: 0rem !important
        }

        .u-padding-inline-0 {
            padding-inline: 0rem !important
        }

        .u-inset-inline-0 {
            inset-inline: 0rem !important
        }

        .u-margin-block-0,
        .u-margin-block-negative-0 {
            margin-block: 0rem !important
        }

        .u-padding-block-0 {
            padding-block: 0rem !important
        }

        .u-inset-block-0 {
            inset-block: 0rem !important
        }

        .u-margin-inline-start-0,
        .u-margin-inline-start-negative-0 {
            margin-inline-start: 0rem !important
        }

        .u-padding-inline-start-0 {
            padding-inline-start: 0rem !important
        }

        .u-inset-inline-start-0 {
            inset-inline-start: 0rem !important
        }

        .u-margin-inline-end-0,
        .u-margin-inline-end-negative-0 {
            margin-inline-end: 0rem !important
        }

        .u-padding-inline-end-0 {
            padding-inline-end: 0rem !important
        }

        .u-inset-inline-end-0 {
            inset-inline-end: 0rem !important
        }

        .u-margin-block-start-0,
        .u-margin-block-start-negative-0 {
            margin-block-start: 0rem !important
        }

        .u-padding-block-start-0 {
            padding-block-start: 0rem !important
        }

        .u-inset-block-start-0 {
            inset-block-start: 0rem !important
        }

        .u-margin-block-end-0,
        .u-margin-block-end-negative-0 {
            margin-block-end: 0rem !important
        }

        .u-padding-block-end-0 {
            padding-block-end: 0rem !important
        }

        .u-inset-block-end-0 {
            inset-block-end: 0rem !important
        }

        .u-gap-0 {
            gap: 0rem !important
        }

        .u-row-gap-0 {
            row-gap: 0rem !important
        }

        .u-column-gap-0 {
            column-gap: 0rem !important
        }

        .u-margin-1 {
            margin: .0625rem !important
        }

        .u-margin-negative-1 {
            margin: -.0625rem !important
        }

        .u-padding-1 {
            padding: .0625rem !important
        }

        .u-inset-1 {
            top: .0625rem !important;
            right: .0625rem !important;
            bottom: .0625rem !important;
            left: .0625rem !important
        }

        .u-margin-inline-1 {
            margin-inline: .0625rem !important
        }

        .u-margin-inline-negative-1 {
            margin-inline: -.0625rem !important
        }

        .u-padding-inline-1 {
            padding-inline: .0625rem !important
        }

        .u-inset-inline-1 {
            inset-inline: .0625rem !important
        }

        .u-margin-block-1 {
            margin-block: .0625rem !important
        }

        .u-margin-block-negative-1 {
            margin-block: -.0625rem !important
        }

        .u-padding-block-1 {
            padding-block: .0625rem !important
        }

        .u-inset-block-1 {
            inset-block: .0625rem !important
        }

        .u-margin-inline-start-1 {
            margin-inline-start: .0625rem !important
        }

        .u-margin-inline-start-negative-1 {
            margin-inline-start: -.0625rem !important
        }

        .u-padding-inline-start-1 {
            padding-inline-start: .0625rem !important
        }

        .u-inset-inline-start-1 {
            inset-inline-start: .0625rem !important
        }

        .u-margin-inline-end-1 {
            margin-inline-end: .0625rem !important
        }

        .u-margin-inline-end-negative-1 {
            margin-inline-end: -.0625rem !important
        }

        .u-padding-inline-end-1 {
            padding-inline-end: .0625rem !important
        }

        .u-inset-inline-end-1 {
            inset-inline-end: .0625rem !important
        }

        .u-margin-block-start-1 {
            margin-block-start: .0625rem !important
        }

        .u-margin-block-start-negative-1 {
            margin-block-start: -.0625rem !important
        }

        .u-padding-block-start-1 {
            padding-block-start: .0625rem !important
        }

        .u-inset-block-start-1 {
            inset-block-start: .0625rem !important
        }

        .u-margin-block-end-1 {
            margin-block-end: .0625rem !important
        }

        .u-margin-block-end-negative-1 {
            margin-block-end: -.0625rem !important
        }

        .u-padding-block-end-1 {
            padding-block-end: .0625rem !important
        }

        .u-inset-block-end-1 {
            inset-block-end: .0625rem !important
        }

        .u-gap-1 {
            gap: .0625rem !important
        }

        .u-row-gap-1 {
            row-gap: .0625rem !important
        }

        .u-column-gap-1 {
            column-gap: .0625rem !important
        }

        .u-margin-2 {
            margin: .125rem !important
        }

        .u-margin-negative-2 {
            margin: -.125rem !important
        }

        .u-padding-2 {
            padding: .125rem !important
        }

        .u-inset-2 {
            top: .125rem !important;
            right: .125rem !important;
            bottom: .125rem !important;
            left: .125rem !important
        }

        .u-margin-inline-2 {
            margin-inline: .125rem !important
        }

        .u-margin-inline-negative-2 {
            margin-inline: -.125rem !important
        }

        .u-padding-inline-2 {
            padding-inline: .125rem !important
        }

        .u-inset-inline-2 {
            inset-inline: .125rem !important
        }

        .u-margin-block-2 {
            margin-block: .125rem !important
        }

        .u-margin-block-negative-2 {
            margin-block: -.125rem !important
        }

        .u-padding-block-2 {
            padding-block: .125rem !important
        }

        .u-inset-block-2 {
            inset-block: .125rem !important
        }

        .u-margin-inline-start-2 {
            margin-inline-start: .125rem !important
        }

        .u-margin-inline-start-negative-2 {
            margin-inline-start: -.125rem !important
        }

        .u-padding-inline-start-2 {
            padding-inline-start: .125rem !important
        }

        .u-inset-inline-start-2 {
            inset-inline-start: .125rem !important
        }

        .u-margin-inline-end-2 {
            margin-inline-end: .125rem !important
        }

        .u-margin-inline-end-negative-2 {
            margin-inline-end: -.125rem !important
        }

        .u-padding-inline-end-2 {
            padding-inline-end: .125rem !important
        }

        .u-inset-inline-end-2 {
            inset-inline-end: .125rem !important
        }

        .u-margin-block-start-2 {
            margin-block-start: .125rem !important
        }

        .u-margin-block-start-negative-2 {
            margin-block-start: -.125rem !important
        }

        .u-padding-block-start-2 {
            padding-block-start: .125rem !important
        }

        .u-inset-block-start-2 {
            inset-block-start: .125rem !important
        }

        .u-margin-block-end-2 {
            margin-block-end: .125rem !important
        }

        .u-margin-block-end-negative-2 {
            margin-block-end: -.125rem !important
        }

        .u-padding-block-end-2 {
            padding-block-end: .125rem !important
        }

        .u-inset-block-end-2 {
            inset-block-end: .125rem !important
        }

        .u-gap-2 {
            gap: .125rem !important
        }

        .u-row-gap-2 {
            row-gap: .125rem !important
        }

        .u-column-gap-2 {
            column-gap: .125rem !important
        }

        .u-margin-4 {
            margin: .25rem !important
        }

        .u-margin-negative-4 {
            margin: -.25rem !important
        }

        .u-padding-4 {
            padding: .25rem !important
        }

        .u-inset-4 {
            top: .25rem !important;
            right: .25rem !important;
            bottom: .25rem !important;
            left: .25rem !important
        }

        .u-margin-inline-4 {
            margin-inline: .25rem !important
        }

        .u-margin-inline-negative-4 {
            margin-inline: -.25rem !important
        }

        .u-padding-inline-4 {
            padding-inline: .25rem !important
        }

        .u-inset-inline-4 {
            inset-inline: .25rem !important
        }

        .u-margin-block-4 {
            margin-block: .25rem !important
        }

        .u-margin-block-negative-4 {
            margin-block: -.25rem !important
        }

        .u-padding-block-4 {
            padding-block: .25rem !important
        }

        .u-inset-block-4 {
            inset-block: .25rem !important
        }

        .u-margin-inline-start-4 {
            margin-inline-start: .25rem !important
        }

        .u-margin-inline-start-negative-4 {
            margin-inline-start: -.25rem !important
        }

        .u-padding-inline-start-4 {
            padding-inline-start: .25rem !important
        }

        .u-inset-inline-start-4 {
            inset-inline-start: .25rem !important
        }

        .u-margin-inline-end-4 {
            margin-inline-end: .25rem !important
        }

        .u-margin-inline-end-negative-4 {
            margin-inline-end: -.25rem !important
        }

        .u-padding-inline-end-4 {
            padding-inline-end: .25rem !important
        }

        .u-inset-inline-end-4 {
            inset-inline-end: .25rem !important
        }

        .u-margin-block-start-4 {
            margin-block-start: .25rem !important
        }

        .u-margin-block-start-negative-4 {
            margin-block-start: -.25rem !important
        }

        .u-padding-block-start-4 {
            padding-block-start: .25rem !important
        }

        .u-inset-block-start-4 {
            inset-block-start: .25rem !important
        }

        .u-margin-block-end-4 {
            margin-block-end: .25rem !important
        }

        .u-margin-block-end-negative-4 {
            margin-block-end: -.25rem !important
        }

        .u-padding-block-end-4 {
            padding-block-end: .25rem !important
        }

        .u-inset-block-end-4 {
            inset-block-end: .25rem !important
        }

        .u-gap-4 {
            gap: .25rem !important
        }

        .u-row-gap-4 {
            row-gap: .25rem !important
        }

        .u-column-gap-4 {
            column-gap: .25rem !important
        }

        .u-margin-8 {
            margin: .5rem !important
        }

        .u-margin-negative-8 {
            margin: -.5rem !important
        }

        .u-padding-8 {
            padding: .5rem !important
        }

        .u-inset-8 {
            top: .5rem !important;
            right: .5rem !important;
            bottom: .5rem !important;
            left: .5rem !important
        }

        .u-margin-inline-8 {
            margin-inline: .5rem !important
        }

        .u-margin-inline-negative-8 {
            margin-inline: -.5rem !important
        }

        .u-padding-inline-8 {
            padding-inline: .5rem !important
        }

        .u-inset-inline-8 {
            inset-inline: .5rem !important
        }

        .u-margin-block-8 {
            margin-block: .5rem !important
        }

        .u-margin-block-negative-8 {
            margin-block: -.5rem !important
        }

        .u-padding-block-8 {
            padding-block: .5rem !important
        }

        .u-inset-block-8 {
            inset-block: .5rem !important
        }

        .u-margin-inline-start-8 {
            margin-inline-start: .5rem !important
        }

        .u-margin-inline-start-negative-8 {
            margin-inline-start: -.5rem !important
        }

        .u-padding-inline-start-8 {
            padding-inline-start: .5rem !important
        }

        .u-inset-inline-start-8 {
            inset-inline-start: .5rem !important
        }

        .u-margin-inline-end-8 {
            margin-inline-end: .5rem !important
        }

        .u-margin-inline-end-negative-8 {
            margin-inline-end: -.5rem !important
        }

        .u-padding-inline-end-8 {
            padding-inline-end: .5rem !important
        }

        .u-inset-inline-end-8 {
            inset-inline-end: .5rem !important
        }

        .u-margin-block-start-8 {
            margin-block-start: .5rem !important
        }

        .u-margin-block-start-negative-8 {
            margin-block-start: -.5rem !important
        }

        .u-padding-block-start-8 {
            padding-block-start: .5rem !important
        }

        .u-inset-block-start-8 {
            inset-block-start: .5rem !important
        }

        .u-margin-block-end-8 {
            margin-block-end: .5rem !important
        }

        .u-margin-block-end-negative-8 {
            margin-block-end: -.5rem !important
        }

        .u-padding-block-end-8 {
            padding-block-end: .5rem !important
        }

        .u-inset-block-end-8 {
            inset-block-end: .5rem !important
        }

        .u-gap-8 {
            gap: .5rem !important
        }

        .u-row-gap-8 {
            row-gap: .5rem !important
        }

        .u-column-gap-8 {
            column-gap: .5rem !important
        }

        .u-margin-12 {
            margin: .75rem !important
        }

        .u-margin-negative-12 {
            margin: -.75rem !important
        }

        .u-padding-12 {
            padding: .75rem !important
        }

        .u-inset-12 {
            top: .75rem !important;
            right: .75rem !important;
            bottom: .75rem !important;
            left: .75rem !important
        }

        .u-margin-inline-12 {
            margin-inline: .75rem !important
        }

        .u-margin-inline-negative-12 {
            margin-inline: -.75rem !important
        }

        .u-padding-inline-12 {
            padding-inline: .75rem !important
        }

        .u-inset-inline-12 {
            inset-inline: .75rem !important
        }

        .u-margin-block-12 {
            margin-block: .75rem !important
        }

        .u-margin-block-negative-12 {
            margin-block: -.75rem !important
        }

        .u-padding-block-12 {
            padding-block: .75rem !important
        }

        .u-inset-block-12 {
            inset-block: .75rem !important
        }

        .u-margin-inline-start-12 {
            margin-inline-start: .75rem !important
        }

        .u-margin-inline-start-negative-12 {
            margin-inline-start: -.75rem !important
        }

        .u-padding-inline-start-12 {
            padding-inline-start: .75rem !important
        }

        .u-inset-inline-start-12 {
            inset-inline-start: .75rem !important
        }

        .u-margin-inline-end-12 {
            margin-inline-end: .75rem !important
        }

        .u-margin-inline-end-negative-12 {
            margin-inline-end: -.75rem !important
        }

        .u-padding-inline-end-12 {
            padding-inline-end: .75rem !important
        }

        .u-inset-inline-end-12 {
            inset-inline-end: .75rem !important
        }

        .u-margin-block-start-12 {
            margin-block-start: .75rem !important
        }

        .u-margin-block-start-negative-12 {
            margin-block-start: -.75rem !important
        }

        .u-padding-block-start-12 {
            padding-block-start: .75rem !important
        }

        .u-inset-block-start-12 {
            inset-block-start: .75rem !important
        }

        .u-margin-block-end-12 {
            margin-block-end: .75rem !important
        }

        .u-margin-block-end-negative-12 {
            margin-block-end: -.75rem !important
        }

        .u-padding-block-end-12 {
            padding-block-end: .75rem !important
        }

        .u-inset-block-end-12 {
            inset-block-end: .75rem !important
        }

        .u-gap-12 {
            gap: .75rem !important
        }

        .u-row-gap-12 {
            row-gap: .75rem !important
        }

        .u-column-gap-12 {
            column-gap: .75rem !important
        }

        .u-margin-16 {
            margin: 1rem !important
        }

        .u-margin-negative-16 {
            margin: -1rem !important
        }

        .u-padding-16 {
            padding: 1rem !important
        }

        .u-inset-16 {
            top: 1rem !important;
            right: 1rem !important;
            bottom: 1rem !important;
            left: 1rem !important
        }

        .u-margin-inline-16 {
            margin-inline: 1rem !important
        }

        .u-margin-inline-negative-16 {
            margin-inline: -1rem !important
        }

        .u-padding-inline-16 {
            padding-inline: 1rem !important
        }

        .u-inset-inline-16 {
            inset-inline: 1rem !important
        }

        .u-margin-block-16 {
            margin-block: 1rem !important
        }

        .u-margin-block-negative-16 {
            margin-block: -1rem !important
        }

        .u-padding-block-16 {
            padding-block: 1rem !important
        }

        .u-inset-block-16 {
            inset-block: 1rem !important
        }

        .u-margin-inline-start-16 {
            margin-inline-start: 1rem !important
        }

        .u-margin-inline-start-negative-16 {
            margin-inline-start: -1rem !important
        }

        .u-padding-inline-start-16 {
            padding-inline-start: 1rem !important
        }

        .u-inset-inline-start-16 {
            inset-inline-start: 1rem !important
        }

        .u-margin-inline-end-16 {
            margin-inline-end: 1rem !important
        }

        .u-margin-inline-end-negative-16 {
            margin-inline-end: -1rem !important
        }

        .u-padding-inline-end-16 {
            padding-inline-end: 1rem !important
        }

        .u-inset-inline-end-16 {
            inset-inline-end: 1rem !important
        }

        .u-margin-block-start-16 {
            margin-block-start: 1rem !important
        }

        .u-margin-block-start-negative-16 {
            margin-block-start: -1rem !important
        }

        .u-padding-block-start-16 {
            padding-block-start: 1rem !important
        }

        .u-inset-block-start-16 {
            inset-block-start: 1rem !important
        }

        .u-margin-block-end-16 {
            margin-block-end: 1rem !important
        }

        .u-margin-block-end-negative-16 {
            margin-block-end: -1rem !important
        }

        .u-padding-block-end-16 {
            padding-block-end: 1rem !important
        }

        .u-inset-block-end-16 {
            inset-block-end: 1rem !important
        }

        .u-gap-16 {
            gap: 1rem !important
        }

        .u-row-gap-16 {
            row-gap: 1rem !important
        }

        .u-column-gap-16 {
            column-gap: 1rem !important
        }

        .u-margin-20 {
            margin: 1.25rem !important
        }

        .u-margin-negative-20 {
            margin: -1.25rem !important
        }

        .u-padding-20 {
            padding: 1.25rem !important
        }

        .u-inset-20 {
            top: 1.25rem !important;
            right: 1.25rem !important;
            bottom: 1.25rem !important;
            left: 1.25rem !important
        }

        .u-margin-inline-20 {
            margin-inline: 1.25rem !important
        }

        .u-margin-inline-negative-20 {
            margin-inline: -1.25rem !important
        }

        .u-padding-inline-20 {
            padding-inline: 1.25rem !important
        }

        .u-inset-inline-20 {
            inset-inline: 1.25rem !important
        }

        .u-margin-block-20 {
            margin-block: 1.25rem !important
        }

        .u-margin-block-negative-20 {
            margin-block: -1.25rem !important
        }

        .u-padding-block-20 {
            padding-block: 1.25rem !important
        }

        .u-inset-block-20 {
            inset-block: 1.25rem !important
        }

        .u-margin-inline-start-20 {
            margin-inline-start: 1.25rem !important
        }

        .u-margin-inline-start-negative-20 {
            margin-inline-start: -1.25rem !important
        }

        .u-padding-inline-start-20 {
            padding-inline-start: 1.25rem !important
        }

        .u-inset-inline-start-20 {
            inset-inline-start: 1.25rem !important
        }

        .u-margin-inline-end-20 {
            margin-inline-end: 1.25rem !important
        }

        .u-margin-inline-end-negative-20 {
            margin-inline-end: -1.25rem !important
        }

        .u-padding-inline-end-20 {
            padding-inline-end: 1.25rem !important
        }

        .u-inset-inline-end-20 {
            inset-inline-end: 1.25rem !important
        }

        .u-margin-block-start-20 {
            margin-block-start: 1.25rem !important
        }

        .u-margin-block-start-negative-20 {
            margin-block-start: -1.25rem !important
        }

        .u-padding-block-start-20 {
            padding-block-start: 1.25rem !important
        }

        .u-inset-block-start-20 {
            inset-block-start: 1.25rem !important
        }

        .u-margin-block-end-20 {
            margin-block-end: 1.25rem !important
        }

        .u-margin-block-end-negative-20 {
            margin-block-end: -1.25rem !important
        }

        .u-padding-block-end-20 {
            padding-block-end: 1.25rem !important
        }

        .u-inset-block-end-20 {
            inset-block-end: 1.25rem !important
        }

        .u-gap-20 {
            gap: 1.25rem !important
        }

        .u-row-gap-20 {
            row-gap: 1.25rem !important
        }

        .u-column-gap-20 {
            column-gap: 1.25rem !important
        }

        .u-margin-24 {
            margin: 1.5rem !important
        }

        .u-margin-negative-24 {
            margin: -1.5rem !important
        }

        .u-padding-24 {
            padding: 1.5rem !important
        }

        .u-inset-24 {
            top: 1.5rem !important;
            right: 1.5rem !important;
            bottom: 1.5rem !important;
            left: 1.5rem !important
        }

        .u-margin-inline-24 {
            margin-inline: 1.5rem !important
        }

        .u-margin-inline-negative-24 {
            margin-inline: -1.5rem !important
        }

        .u-padding-inline-24 {
            padding-inline: 1.5rem !important
        }

        .u-inset-inline-24 {
            inset-inline: 1.5rem !important
        }

        .u-margin-block-24 {
            margin-block: 1.5rem !important
        }

        .u-margin-block-negative-24 {
            margin-block: -1.5rem !important
        }

        .u-padding-block-24 {
            padding-block: 1.5rem !important
        }

        .u-inset-block-24 {
            inset-block: 1.5rem !important
        }

        .u-margin-inline-start-24 {
            margin-inline-start: 1.5rem !important
        }

        .u-margin-inline-start-negative-24 {
            margin-inline-start: -1.5rem !important
        }

        .u-padding-inline-start-24 {
            padding-inline-start: 1.5rem !important
        }

        .u-inset-inline-start-24 {
            inset-inline-start: 1.5rem !important
        }

        .u-margin-inline-end-24 {
            margin-inline-end: 1.5rem !important
        }

        .u-margin-inline-end-negative-24 {
            margin-inline-end: -1.5rem !important
        }

        .u-padding-inline-end-24 {
            padding-inline-end: 1.5rem !important
        }

        .u-inset-inline-end-24 {
            inset-inline-end: 1.5rem !important
        }

        .u-margin-block-start-24 {
            margin-block-start: 1.5rem !important
        }

        .u-margin-block-start-negative-24 {
            margin-block-start: -1.5rem !important
        }

        .u-padding-block-start-24 {
            padding-block-start: 1.5rem !important
        }

        .u-inset-block-start-24 {
            inset-block-start: 1.5rem !important
        }

        .u-margin-block-end-24 {
            margin-block-end: 1.5rem !important
        }

        .u-margin-block-end-negative-24 {
            margin-block-end: -1.5rem !important
        }

        .u-padding-block-end-24 {
            padding-block-end: 1.5rem !important
        }

        .u-inset-block-end-24 {
            inset-block-end: 1.5rem !important
        }

        .u-gap-24 {
            gap: 1.5rem !important
        }

        .u-row-gap-24 {
            row-gap: 1.5rem !important
        }

        .u-column-gap-24 {
            column-gap: 1.5rem !important
        }

        .u-margin-28 {
            margin: 1.75rem !important
        }

        .u-margin-negative-28 {
            margin: -1.75rem !important
        }

        .u-padding-28 {
            padding: 1.75rem !important
        }

        .u-inset-28 {
            top: 1.75rem !important;
            right: 1.75rem !important;
            bottom: 1.75rem !important;
            left: 1.75rem !important
        }

        .u-margin-inline-28 {
            margin-inline: 1.75rem !important
        }

        .u-margin-inline-negative-28 {
            margin-inline: -1.75rem !important
        }

        .u-padding-inline-28 {
            padding-inline: 1.75rem !important
        }

        .u-inset-inline-28 {
            inset-inline: 1.75rem !important
        }

        .u-margin-block-28 {
            margin-block: 1.75rem !important
        }

        .u-margin-block-negative-28 {
            margin-block: -1.75rem !important
        }

        .u-padding-block-28 {
            padding-block: 1.75rem !important
        }

        .u-inset-block-28 {
            inset-block: 1.75rem !important
        }

        .u-margin-inline-start-28 {
            margin-inline-start: 1.75rem !important
        }

        .u-margin-inline-start-negative-28 {
            margin-inline-start: -1.75rem !important
        }

        .u-padding-inline-start-28 {
            padding-inline-start: 1.75rem !important
        }

        .u-inset-inline-start-28 {
            inset-inline-start: 1.75rem !important
        }

        .u-margin-inline-end-28 {
            margin-inline-end: 1.75rem !important
        }

        .u-margin-inline-end-negative-28 {
            margin-inline-end: -1.75rem !important
        }

        .u-padding-inline-end-28 {
            padding-inline-end: 1.75rem !important
        }

        .u-inset-inline-end-28 {
            inset-inline-end: 1.75rem !important
        }

        .u-margin-block-start-28 {
            margin-block-start: 1.75rem !important
        }

        .u-margin-block-start-negative-28 {
            margin-block-start: -1.75rem !important
        }

        .u-padding-block-start-28 {
            padding-block-start: 1.75rem !important
        }

        .u-inset-block-start-28 {
            inset-block-start: 1.75rem !important
        }

        .u-margin-block-end-28 {
            margin-block-end: 1.75rem !important
        }

        .u-margin-block-end-negative-28 {
            margin-block-end: -1.75rem !important
        }

        .u-padding-block-end-28 {
            padding-block-end: 1.75rem !important
        }

        .u-inset-block-end-28 {
            inset-block-end: 1.75rem !important
        }

        .u-gap-28 {
            gap: 1.75rem !important
        }

        .u-row-gap-28 {
            row-gap: 1.75rem !important
        }

        .u-column-gap-28 {
            column-gap: 1.75rem !important
        }

        .u-margin-32 {
            margin: 2rem !important
        }

        .u-margin-negative-32 {
            margin: -2rem !important
        }

        .u-padding-32 {
            padding: 2rem !important
        }

        .u-inset-32 {
            top: 2rem !important;
            right: 2rem !important;
            bottom: 2rem !important;
            left: 2rem !important
        }

        .u-margin-inline-32 {
            margin-inline: 2rem !important
        }

        .u-margin-inline-negative-32 {
            margin-inline: -2rem !important
        }

        .u-padding-inline-32 {
            padding-inline: 2rem !important
        }

        .u-inset-inline-32 {
            inset-inline: 2rem !important
        }

        .u-margin-block-32 {
            margin-block: 2rem !important
        }

        .u-margin-block-negative-32 {
            margin-block: -2rem !important
        }

        .u-padding-block-32 {
            padding-block: 2rem !important
        }

        .u-inset-block-32 {
            inset-block: 2rem !important
        }

        .u-margin-inline-start-32 {
            margin-inline-start: 2rem !important
        }

        .u-margin-inline-start-negative-32 {
            margin-inline-start: -2rem !important
        }

        .u-padding-inline-start-32 {
            padding-inline-start: 2rem !important
        }

        .u-inset-inline-start-32 {
            inset-inline-start: 2rem !important
        }

        .u-margin-inline-end-32 {
            margin-inline-end: 2rem !important
        }

        .u-margin-inline-end-negative-32 {
            margin-inline-end: -2rem !important
        }

        .u-padding-inline-end-32 {
            padding-inline-end: 2rem !important
        }

        .u-inset-inline-end-32 {
            inset-inline-end: 2rem !important
        }

        .u-margin-block-start-32 {
            margin-block-start: 2rem !important
        }

        .u-margin-block-start-negative-32 {
            margin-block-start: -2rem !important
        }

        .u-padding-block-start-32 {
            padding-block-start: 2rem !important
        }

        .u-inset-block-start-32 {
            inset-block-start: 2rem !important
        }

        .u-margin-block-end-32 {
            margin-block-end: 2rem !important
        }

        .u-margin-block-end-negative-32 {
            margin-block-end: -2rem !important
        }

        .u-padding-block-end-32 {
            padding-block-end: 2rem !important
        }

        .u-inset-block-end-32 {
            inset-block-end: 2rem !important
        }

        .u-gap-32 {
            gap: 2rem !important
        }

        .u-row-gap-32 {
            row-gap: 2rem !important
        }

        .u-column-gap-32 {
            column-gap: 2rem !important
        }

        .u-margin-40 {
            margin: 2.5rem !important
        }

        .u-margin-negative-40 {
            margin: -2.5rem !important
        }

        .u-padding-40 {
            padding: 2.5rem !important
        }

        .u-inset-40 {
            top: 2.5rem !important;
            right: 2.5rem !important;
            bottom: 2.5rem !important;
            left: 2.5rem !important
        }

        .u-margin-inline-40 {
            margin-inline: 2.5rem !important
        }

        .u-margin-inline-negative-40 {
            margin-inline: -2.5rem !important
        }

        .u-padding-inline-40 {
            padding-inline: 2.5rem !important
        }

        .u-inset-inline-40 {
            inset-inline: 2.5rem !important
        }

        .u-margin-block-40 {
            margin-block: 2.5rem !important
        }

        .u-margin-block-negative-40 {
            margin-block: -2.5rem !important
        }

        .u-padding-block-40 {
            padding-block: 2.5rem !important
        }

        .u-inset-block-40 {
            inset-block: 2.5rem !important
        }

        .u-margin-inline-start-40 {
            margin-inline-start: 2.5rem !important
        }

        .u-margin-inline-start-negative-40 {
            margin-inline-start: -2.5rem !important
        }

        .u-padding-inline-start-40 {
            padding-inline-start: 2.5rem !important
        }

        .u-inset-inline-start-40 {
            inset-inline-start: 2.5rem !important
        }

        .u-margin-inline-end-40 {
            margin-inline-end: 2.5rem !important
        }

        .u-margin-inline-end-negative-40 {
            margin-inline-end: -2.5rem !important
        }

        .u-padding-inline-end-40 {
            padding-inline-end: 2.5rem !important
        }

        .u-inset-inline-end-40 {
            inset-inline-end: 2.5rem !important
        }

        .u-margin-block-start-40 {
            margin-block-start: 2.5rem !important
        }

        .u-margin-block-start-negative-40 {
            margin-block-start: -2.5rem !important
        }

        .u-padding-block-start-40 {
            padding-block-start: 2.5rem !important
        }

        .u-inset-block-start-40 {
            inset-block-start: 2.5rem !important
        }

        .u-margin-block-end-40 {
            margin-block-end: 2.5rem !important
        }

        .u-margin-block-end-negative-40 {
            margin-block-end: -2.5rem !important
        }

        .u-padding-block-end-40 {
            padding-block-end: 2.5rem !important
        }

        .u-inset-block-end-40 {
            inset-block-end: 2.5rem !important
        }

        .u-gap-40 {
            gap: 2.5rem !important
        }

        .u-row-gap-40 {
            row-gap: 2.5rem !important
        }

        .u-column-gap-40 {
            column-gap: 2.5rem !important
        }

        .u-margin-48 {
            margin: 3rem !important
        }

        .u-margin-negative-48 {
            margin: -3rem !important
        }

        .u-padding-48 {
            padding: 3rem !important
        }

        .u-inset-48 {
            top: 3rem !important;
            right: 3rem !important;
            bottom: 3rem !important;
            left: 3rem !important
        }

        .u-margin-inline-48 {
            margin-inline: 3rem !important
        }

        .u-margin-inline-negative-48 {
            margin-inline: -3rem !important
        }

        .u-padding-inline-48 {
            padding-inline: 3rem !important
        }

        .u-inset-inline-48 {
            inset-inline: 3rem !important
        }

        .u-margin-block-48 {
            margin-block: 3rem !important
        }

        .u-margin-block-negative-48 {
            margin-block: -3rem !important
        }

        .u-padding-block-48 {
            padding-block: 3rem !important
        }

        .u-inset-block-48 {
            inset-block: 3rem !important
        }

        .u-margin-inline-start-48 {
            margin-inline-start: 3rem !important
        }

        .u-margin-inline-start-negative-48 {
            margin-inline-start: -3rem !important
        }

        .u-padding-inline-start-48 {
            padding-inline-start: 3rem !important
        }

        .u-inset-inline-start-48 {
            inset-inline-start: 3rem !important
        }

        .u-margin-inline-end-48 {
            margin-inline-end: 3rem !important
        }

        .u-margin-inline-end-negative-48 {
            margin-inline-end: -3rem !important
        }

        .u-padding-inline-end-48 {
            padding-inline-end: 3rem !important
        }

        .u-inset-inline-end-48 {
            inset-inline-end: 3rem !important
        }

        .u-margin-block-start-48 {
            margin-block-start: 3rem !important
        }

        .u-margin-block-start-negative-48 {
            margin-block-start: -3rem !important
        }

        .u-padding-block-start-48 {
            padding-block-start: 3rem !important
        }

        .u-inset-block-start-48 {
            inset-block-start: 3rem !important
        }

        .u-margin-block-end-48 {
            margin-block-end: 3rem !important
        }

        .u-margin-block-end-negative-48 {
            margin-block-end: -3rem !important
        }

        .u-padding-block-end-48 {
            padding-block-end: 3rem !important
        }

        .u-inset-block-end-48 {
            inset-block-end: 3rem !important
        }

        .u-gap-48 {
            gap: 3rem !important
        }

        .u-row-gap-48 {
            row-gap: 3rem !important
        }

        .u-column-gap-48 {
            column-gap: 3rem !important
        }

        .u-margin-52 {
            margin: 3.25rem !important
        }

        .u-margin-negative-52 {
            margin: -3.25rem !important
        }

        .u-padding-52 {
            padding: 3.25rem !important
        }

        .u-inset-52 {
            top: 3.25rem !important;
            right: 3.25rem !important;
            bottom: 3.25rem !important;
            left: 3.25rem !important
        }

        .u-margin-inline-52 {
            margin-inline: 3.25rem !important
        }

        .u-margin-inline-negative-52 {
            margin-inline: -3.25rem !important
        }

        .u-padding-inline-52 {
            padding-inline: 3.25rem !important
        }

        .u-inset-inline-52 {
            inset-inline: 3.25rem !important
        }

        .u-margin-block-52 {
            margin-block: 3.25rem !important
        }

        .u-margin-block-negative-52 {
            margin-block: -3.25rem !important
        }

        .u-padding-block-52 {
            padding-block: 3.25rem !important
        }

        .u-inset-block-52 {
            inset-block: 3.25rem !important
        }

        .u-margin-inline-start-52 {
            margin-inline-start: 3.25rem !important
        }

        .u-margin-inline-start-negative-52 {
            margin-inline-start: -3.25rem !important
        }

        .u-padding-inline-start-52 {
            padding-inline-start: 3.25rem !important
        }

        .u-inset-inline-start-52 {
            inset-inline-start: 3.25rem !important
        }

        .u-margin-inline-end-52 {
            margin-inline-end: 3.25rem !important
        }

        .u-margin-inline-end-negative-52 {
            margin-inline-end: -3.25rem !important
        }

        .u-padding-inline-end-52 {
            padding-inline-end: 3.25rem !important
        }

        .u-inset-inline-end-52 {
            inset-inline-end: 3.25rem !important
        }

        .u-margin-block-start-52 {
            margin-block-start: 3.25rem !important
        }

        .u-margin-block-start-negative-52 {
            margin-block-start: -3.25rem !important
        }

        .u-padding-block-start-52 {
            padding-block-start: 3.25rem !important
        }

        .u-inset-block-start-52 {
            inset-block-start: 3.25rem !important
        }

        .u-margin-block-end-52 {
            margin-block-end: 3.25rem !important
        }

        .u-margin-block-end-negative-52 {
            margin-block-end: -3.25rem !important
        }

        .u-padding-block-end-52 {
            padding-block-end: 3.25rem !important
        }

        .u-inset-block-end-52 {
            inset-block-end: 3.25rem !important
        }

        .u-gap-52 {
            gap: 3.25rem !important
        }

        .u-row-gap-52 {
            row-gap: 3.25rem !important
        }

        .u-column-gap-52 {
            column-gap: 3.25rem !important
        }

        .u-margin-56 {
            margin: 3.5rem !important
        }

        .u-margin-negative-56 {
            margin: -3.5rem !important
        }

        .u-padding-56 {
            padding: 3.5rem !important
        }

        .u-inset-56 {
            top: 3.5rem !important;
            right: 3.5rem !important;
            bottom: 3.5rem !important;
            left: 3.5rem !important
        }

        .u-margin-inline-56 {
            margin-inline: 3.5rem !important
        }

        .u-margin-inline-negative-56 {
            margin-inline: -3.5rem !important
        }

        .u-padding-inline-56 {
            padding-inline: 3.5rem !important
        }

        .u-inset-inline-56 {
            inset-inline: 3.5rem !important
        }

        .u-margin-block-56 {
            margin-block: 3.5rem !important
        }

        .u-margin-block-negative-56 {
            margin-block: -3.5rem !important
        }

        .u-padding-block-56 {
            padding-block: 3.5rem !important
        }

        .u-inset-block-56 {
            inset-block: 3.5rem !important
        }

        .u-margin-inline-start-56 {
            margin-inline-start: 3.5rem !important
        }

        .u-margin-inline-start-negative-56 {
            margin-inline-start: -3.5rem !important
        }

        .u-padding-inline-start-56 {
            padding-inline-start: 3.5rem !important
        }

        .u-inset-inline-start-56 {
            inset-inline-start: 3.5rem !important
        }

        .u-margin-inline-end-56 {
            margin-inline-end: 3.5rem !important
        }

        .u-margin-inline-end-negative-56 {
            margin-inline-end: -3.5rem !important
        }

        .u-padding-inline-end-56 {
            padding-inline-end: 3.5rem !important
        }

        .u-inset-inline-end-56 {
            inset-inline-end: 3.5rem !important
        }

        .u-margin-block-start-56 {
            margin-block-start: 3.5rem !important
        }

        .u-padding-block-start-56 {
            padding-block-start: 3.5rem !important
        }

        .u-inset-block-start-56 {
            inset-block-start: 3.5rem !important
        }

        .u-margin-block-end-56 {
            margin-block-end: 3.5rem !important
        }

        .u-margin-block-end-negative-56 {
            margin-block-end: -3.5rem !important
        }

        .u-padding-block-end-56 {
            padding-block-end: 3.5rem !important
        }

        .u-inset-block-end-56 {
            inset-block-end: 3.5rem !important
        }

        .u-gap-56 {
            gap: 3.5rem !important
        }

        .u-row-gap-56 {
            row-gap: 3.5rem !important
        }

        .u-column-gap-56 {
            column-gap: 3.5rem !important
        }

        .u-margin-64 {
            margin: 4rem !important
        }

        .u-margin-negative-64 {
            margin: -4rem !important
        }

        .u-padding-64 {
            padding: 4rem !important
        }

        .u-inset-64 {
            top: 4rem !important;
            right: 4rem !important;
            bottom: 4rem !important;
            left: 4rem !important
        }

        .u-margin-inline-64 {
            margin-inline: 4rem !important
        }

        .u-margin-inline-negative-64 {
            margin-inline: -4rem !important
        }

        .u-padding-inline-64 {
            padding-inline: 4rem !important
        }

        .u-inset-inline-64 {
            inset-inline: 4rem !important
        }

        .u-margin-block-64 {
            margin-block: 4rem !important
        }

        .u-margin-block-negative-64 {
            margin-block: -4rem !important
        }

        .u-padding-block-64 {
            padding-block: 4rem !important
        }

        .u-inset-block-64 {
            inset-block: 4rem !important
        }

        .u-margin-inline-start-64 {
            margin-inline-start: 4rem !important
        }

        .u-margin-inline-start-negative-64 {
            margin-inline-start: -4rem !important
        }

        .u-padding-inline-start-64 {
            padding-inline-start: 4rem !important
        }

        .u-inset-inline-start-64 {
            inset-inline-start: 4rem !important
        }

        .u-margin-inline-end-64 {
            margin-inline-end: 4rem !important
        }

        .u-margin-inline-end-negative-64 {
            margin-inline-end: -4rem !important
        }

        .u-padding-inline-end-64 {
            padding-inline-end: 4rem !important
        }

        .u-inset-inline-end-64 {
            inset-inline-end: 4rem !important
        }

        .u-margin-block-start-64 {
            margin-block-start: 4rem !important
        }

        .u-margin-block-start-negative-64 {
            margin-block-start: -4rem !important
        }

        .u-padding-block-start-64 {
            padding-block-start: 4rem !important
        }

        .u-inset-block-start-64 {
            inset-block-start: 4rem !important
        }

        .u-margin-block-end-64 {
            margin-block-end: 4rem !important
        }

        .u-margin-block-end-negative-64 {
            margin-block-end: -4rem !important
        }

        .u-padding-block-end-64 {
            padding-block-end: 4rem !important
        }

        .u-inset-block-end-64 {
            inset-block-end: 4rem !important
        }

        .u-gap-64 {
            gap: 4rem !important
        }

        .u-row-gap-64 {
            row-gap: 4rem !important
        }

        .u-column-gap-64 {
            column-gap: 4rem !important
        }

        .u-margin-80 {
            margin: 5rem !important
        }

        .u-margin-negative-80 {
            margin: -5rem !important
        }

        .u-padding-80 {
            padding: 5rem !important
        }

        .u-inset-80 {
            top: 5rem !important;
            right: 5rem !important;
            bottom: 5rem !important;
            left: 5rem !important
        }

        .u-margin-inline-80 {
            margin-inline: 5rem !important
        }

        .u-margin-inline-negative-80 {
            margin-inline: -5rem !important
        }

        .u-padding-inline-80 {
            padding-inline: 5rem !important
        }

        .u-inset-inline-80 {
            inset-inline: 5rem !important
        }

        .u-margin-block-80 {
            margin-block: 5rem !important
        }

        .u-margin-block-negative-80 {
            margin-block: -5rem !important
        }

        .u-padding-block-80 {
            padding-block: 5rem !important
        }

        .u-inset-block-80 {
            inset-block: 5rem !important
        }

        .u-margin-inline-start-80 {
            margin-inline-start: 5rem !important
        }

        .u-margin-inline-start-negative-80 {
            margin-inline-start: -5rem !important
        }

        .u-padding-inline-start-80 {
            padding-inline-start: 5rem !important
        }

        .u-inset-inline-start-80 {
            inset-inline-start: 5rem !important
        }

        .u-margin-inline-end-80 {
            margin-inline-end: 5rem !important
        }

        .u-margin-inline-end-negative-80 {
            margin-inline-end: -5rem !important
        }

        .u-padding-inline-end-80 {
            padding-inline-end: 5rem !important
        }

        .u-inset-inline-end-80 {
            inset-inline-end: 5rem !important
        }

        .u-margin-block-start-80 {
            margin-block-start: 5rem !important
        }

        .u-margin-block-start-negative-80 {
            margin-block-start: -5rem !important
        }

        .u-padding-block-start-80 {
            padding-block-start: 5rem !important
        }

        .u-inset-block-start-80 {
            inset-block-start: 5rem !important
        }

        .u-margin-block-end-80 {
            margin-block-end: 5rem !important
        }

        .u-margin-block-end-negative-80 {
            margin-block-end: -5rem !important
        }

        .u-padding-block-end-80 {
            padding-block-end: 5rem !important
        }

        .u-inset-block-end-80 {
            inset-block-end: 5rem !important
        }

        .u-gap-80 {
            gap: 5rem !important
        }

        .u-row-gap-80 {
            row-gap: 5rem !important
        }

        .u-column-gap-80 {
            column-gap: 5rem !important
        }

        .u-margin-96 {
            margin: 6rem !important
        }

        .u-margin-negative-96 {
            margin: -6rem !important
        }

        .u-padding-96 {
            padding: 6rem !important
        }

        .u-inset-96 {
            top: 6rem !important;
            right: 6rem !important;
            bottom: 6rem !important;
            left: 6rem !important
        }

        .u-margin-inline-96 {
            margin-inline: 6rem !important
        }

        .u-margin-inline-negative-96 {
            margin-inline: -6rem !important
        }

        .u-padding-inline-96 {
            padding-inline: 6rem !important
        }

        .u-inset-inline-96 {
            inset-inline: 6rem !important
        }

        .u-margin-block-96 {
            margin-block: 6rem !important
        }

        .u-margin-block-negative-96 {
            margin-block: -6rem !important
        }

        .u-padding-block-96 {
            padding-block: 6rem !important
        }

        .u-inset-block-96 {
            inset-block: 6rem !important
        }

        .u-margin-inline-start-96 {
            margin-inline-start: 6rem !important
        }

        .u-margin-inline-start-negative-96 {
            margin-inline-start: -6rem !important
        }

        .u-padding-inline-start-96 {
            padding-inline-start: 6rem !important
        }

        .u-inset-inline-start-96 {
            inset-inline-start: 6rem !important
        }

        .u-margin-inline-end-96 {
            margin-inline-end: 6rem !important
        }

        .u-margin-inline-end-negative-96 {
            margin-inline-end: -6rem !important
        }

        .u-padding-inline-end-96 {
            padding-inline-end: 6rem !important
        }

        .u-inset-inline-end-96 {
            inset-inline-end: 6rem !important
        }

        .u-margin-block-start-96 {
            margin-block-start: 6rem !important
        }

        .u-margin-block-start-negative-96 {
            margin-block-start: -6rem !important
        }

        .u-padding-block-start-96 {
            padding-block-start: 6rem !important
        }

        .u-inset-block-start-96 {
            inset-block-start: 6rem !important
        }

        .u-margin-block-end-96 {
            margin-block-end: 6rem !important
        }

        .u-margin-block-end-negative-96 {
            margin-block-end: -6rem !important
        }

        .u-padding-block-end-96 {
            padding-block-end: 6rem !important
        }

        .u-inset-block-end-96 {
            inset-block-end: 6rem !important
        }

        .u-gap-96 {
            gap: 6rem !important
        }

        .u-row-gap-96 {
            row-gap: 6rem !important
        }

        .u-column-gap-96 {
            column-gap: 6rem !important
        }

        .u-margin-128 {
            margin: 8rem !important
        }

        .u-margin-negative-128 {
            margin: -8rem !important
        }

        .u-padding-128 {
            padding: 8rem !important
        }

        .u-inset-128 {
            top: 8rem !important;
            right: 8rem !important;
            bottom: 8rem !important;
            left: 8rem !important
        }

        .u-margin-inline-128 {
            margin-inline: 8rem !important
        }

        .u-margin-inline-negative-128 {
            margin-inline: -8rem !important
        }

        .u-padding-inline-128 {
            padding-inline: 8rem !important
        }

        .u-inset-inline-128 {
            inset-inline: 8rem !important
        }

        .u-margin-block-128 {
            margin-block: 8rem !important
        }

        .u-margin-block-negative-128 {
            margin-block: -8rem !important
        }

        .u-padding-block-128 {
            padding-block: 8rem !important
        }

        .u-inset-block-128 {
            inset-block: 8rem !important
        }

        .u-margin-inline-start-128 {
            margin-inline-start: 8rem !important
        }

        .u-margin-inline-start-negative-128 {
            margin-inline-start: -8rem !important
        }

        .u-padding-inline-start-128 {
            padding-inline-start: 8rem !important
        }

        .u-inset-inline-start-128 {
            inset-inline-start: 8rem !important
        }

        .u-margin-inline-end-128 {
            margin-inline-end: 8rem !important
        }

        .u-margin-inline-end-negative-128 {
            margin-inline-end: -8rem !important
        }

        .u-padding-inline-end-128 {
            padding-inline-end: 8rem !important
        }

        .u-inset-inline-end-128 {
            inset-inline-end: 8rem !important
        }

        .u-margin-block-start-128 {
            margin-block-start: 8rem !important
        }

        .u-margin-block-start-negative-128 {
            margin-block-start: -8rem !important
        }

        .u-padding-block-start-128 {
            padding-block-start: 8rem !important
        }

        .u-inset-block-start-128 {
            inset-block-start: 8rem !important
        }

        .u-margin-block-end-128 {
            margin-block-end: 8rem !important
        }

        .u-margin-block-end-negative-128 {
            margin-block-end: -8rem !important
        }

        .u-padding-block-end-128 {
            padding-block-end: 8rem !important
        }

        .u-inset-block-end-128 {
            inset-block-end: 8rem !important
        }

        .u-gap-128 {
            gap: 8rem !important
        }

        .u-row-gap-128 {
            row-gap: 8rem !important
        }

        .u-column-gap-128 {
            column-gap: 8rem !important
        }

        .u-margin-160 {
            margin: 10rem !important
        }

        .u-margin-negative-160 {
            margin: -10rem !important
        }

        .u-padding-160 {
            padding: 10rem !important
        }

        .u-inset-160 {
            top: 10rem !important;
            right: 10rem !important;
            bottom: 10rem !important;
            left: 10rem !important
        }

        .u-margin-inline-160 {
            margin-inline: 10rem !important
        }

        .u-margin-inline-negative-160 {
            margin-inline: -10rem !important
        }

        .u-padding-inline-160 {
            padding-inline: 10rem !important
        }

        .u-inset-inline-160 {
            inset-inline: 10rem !important
        }

        .u-margin-block-160 {
            margin-block: 10rem !important
        }

        .u-margin-block-negative-160 {
            margin-block: -10rem !important
        }

        .u-padding-block-160 {
            padding-block: 10rem !important
        }

        .u-inset-block-160 {
            inset-block: 10rem !important
        }

        .u-margin-inline-start-160 {
            margin-inline-start: 10rem !important
        }

        .u-margin-inline-start-negative-160 {
            margin-inline-start: -10rem !important
        }

        .u-padding-inline-start-160 {
            padding-inline-start: 10rem !important
        }

        .u-inset-inline-start-160 {
            inset-inline-start: 10rem !important
        }

        .u-margin-inline-end-160 {
            margin-inline-end: 10rem !important
        }

        .u-margin-inline-end-negative-160 {
            margin-inline-end: -10rem !important
        }

        .u-padding-inline-end-160 {
            padding-inline-end: 10rem !important
        }

        .u-inset-inline-end-160 {
            inset-inline-end: 10rem !important
        }

        .u-margin-block-start-160 {
            margin-block-start: 10rem !important
        }

        .u-margin-block-start-negative-160 {
            margin-block-start: -10rem !important
        }

        .u-padding-block-start-160 {
            padding-block-start: 10rem !important
        }

        .u-inset-block-start-160 {
            inset-block-start: 10rem !important
        }

        .u-margin-block-end-160 {
            margin-block-end: 10rem !important
        }

        .u-margin-block-end-negative-160 {
            margin-block-end: -10rem !important
        }

        .u-padding-block-end-160 {
            padding-block-end: 10rem !important
        }

        .u-inset-block-end-160 {
            inset-block-end: 10rem !important
        }

        .u-gap-160 {
            gap: 10rem !important
        }

        .u-row-gap-160 {
            row-gap: 10rem !important
        }

        .u-column-gap-160 {
            column-gap: 10rem !important
        }

        .u-margin-192 {
            margin: 12rem !important
        }

        .u-margin-negative-192 {
            margin: -12rem !important
        }

        .u-padding-192 {
            padding: 12rem !important
        }

        .u-inset-192 {
            top: 12rem !important;
            right: 12rem !important;
            bottom: 12rem !important;
            left: 12rem !important
        }

        .u-margin-inline-192 {
            margin-inline: 12rem !important
        }

        .u-margin-inline-negative-192 {
            margin-inline: -12rem !important
        }

        .u-padding-inline-192 {
            padding-inline: 12rem !important
        }

        .u-inset-inline-192 {
            inset-inline: 12rem !important
        }

        .u-margin-block-192 {
            margin-block: 12rem !important
        }

        .u-margin-block-negative-192 {
            margin-block: -12rem !important
        }

        .u-padding-block-192 {
            padding-block: 12rem !important
        }

        .u-inset-block-192 {
            inset-block: 12rem !important
        }

        .u-margin-inline-start-192 {
            margin-inline-start: 12rem !important
        }

        .u-margin-inline-start-negative-192 {
            margin-inline-start: -12rem !important
        }

        .u-padding-inline-start-192 {
            padding-inline-start: 12rem !important
        }

        .u-inset-inline-start-192 {
            inset-inline-start: 12rem !important
        }

        .u-margin-inline-end-192 {
            margin-inline-end: 12rem !important
        }

        .u-margin-inline-end-negative-192 {
            margin-inline-end: -12rem !important
        }

        .u-padding-inline-end-192 {
            padding-inline-end: 12rem !important
        }

        .u-inset-inline-end-192 {
            inset-inline-end: 12rem !important
        }

        .u-margin-block-start-192 {
            margin-block-start: 12rem !important
        }

        .u-margin-block-start-negative-192 {
            margin-block-start: -12rem !important
        }

        .u-padding-block-start-192 {
            padding-block-start: 12rem !important
        }

        .u-inset-block-start-192 {
            inset-block-start: 12rem !important
        }

        .u-margin-block-end-192 {
            margin-block-end: 12rem !important
        }

        .u-margin-block-end-negative-192 {
            margin-block-end: -12rem !important
        }

        .u-padding-block-end-192 {
            padding-block-end: 12rem !important
        }

        .u-inset-block-end-192 {
            inset-block-end: 12rem !important
        }

        .u-gap-192 {
            gap: 12rem !important
        }

        .u-row-gap-192 {
            row-gap: 12rem !important
        }

        .u-column-gap-192 {
            column-gap: 12rem !important
        }

        .u-margin-100 {
            margin: 6.25rem !important
        }

        .u-margin-negative-100 {
            margin: -6.25rem !important
        }

        .u-padding-100 {
            padding: 6.25rem !important
        }

        .u-inset-100 {
            top: 6.25rem !important;
            right: 6.25rem !important;
            bottom: 6.25rem !important;
            left: 6.25rem !important
        }

        .u-margin-inline-100 {
            margin-inline: 6.25rem !important
        }

        .u-margin-inline-negative-100 {
            margin-inline: -6.25rem !important
        }

        .u-padding-inline-100 {
            padding-inline: 6.25rem !important
        }

        .u-inset-inline-100 {
            inset-inline: 6.25rem !important
        }

        .u-margin-block-100 {
            margin-block: 6.25rem !important
        }

        .u-margin-block-negative-100 {
            margin-block: -6.25rem !important
        }

        .u-padding-block-100 {
            padding-block: 6.25rem !important
        }

        .u-inset-block-100 {
            inset-block: 6.25rem !important
        }

        .u-margin-inline-start-100 {
            margin-inline-start: 6.25rem !important
        }

        .u-margin-inline-start-negative-100 {
            margin-inline-start: -6.25rem !important
        }

        .u-padding-inline-start-100 {
            padding-inline-start: 6.25rem !important
        }

        .u-inset-inline-start-100 {
            inset-inline-start: 6.25rem !important
        }

        .u-margin-inline-end-100 {
            margin-inline-end: 6.25rem !important
        }

        .u-margin-inline-end-negative-100 {
            margin-inline-end: -6.25rem !important
        }

        .u-padding-inline-end-100 {
            padding-inline-end: 6.25rem !important
        }

        .u-inset-inline-end-100 {
            inset-inline-end: 6.25rem !important
        }

        .u-margin-block-start-100 {
            margin-block-start: 6.25rem !important
        }

        .u-margin-block-start-negative-100 {
            margin-block-start: -6.25rem !important
        }

        .u-padding-block-start-100 {
            padding-block-start: 6.25rem !important
        }

        .u-inset-block-start-100 {
            inset-block-start: 6.25rem !important
        }

        .u-margin-block-end-100 {
            margin-block-end: 6.25rem !important
        }

        .u-margin-block-end-negative-100 {
            margin-block-end: -6.25rem !important
        }

        .u-padding-block-end-100 {
            padding-block-end: 6.25rem !important
        }

        .u-inset-block-end-100 {
            inset-block-end: 6.25rem !important
        }

        .u-gap-100 {
            gap: 6.25rem !important
        }

        .u-row-gap-100 {
            row-gap: 6.25rem !important
        }

        .u-column-gap-100 {
            column-gap: 6.25rem !important
        }

        .u-margin-200 {
            margin: 12.5rem !important
        }

        .u-margin-negative-200 {
            margin: -12.5rem !important
        }

        .u-padding-200 {
            padding: 12.5rem !important
        }

        .u-inset-200 {
            top: 12.5rem !important;
            right: 12.5rem !important;
            bottom: 12.5rem !important;
            left: 12.5rem !important
        }

        .u-margin-inline-200 {
            margin-inline: 12.5rem !important
        }

        .u-margin-inline-negative-200 {
            margin-inline: -12.5rem !important
        }

        .u-padding-inline-200 {
            padding-inline: 12.5rem !important
        }

        .u-inset-inline-200 {
            inset-inline: 12.5rem !important
        }

        .u-margin-block-200 {
            margin-block: 12.5rem !important
        }

        .u-margin-block-negative-200 {
            margin-block: -12.5rem !important
        }

        .u-padding-block-200 {
            padding-block: 12.5rem !important
        }

        .u-inset-block-200 {
            inset-block: 12.5rem !important
        }

        .u-margin-inline-start-200 {
            margin-inline-start: 12.5rem !important
        }

        .u-margin-inline-start-negative-200 {
            margin-inline-start: -12.5rem !important
        }

        .u-padding-inline-start-200 {
            padding-inline-start: 12.5rem !important
        }

        .u-inset-inline-start-200 {
            inset-inline-start: 12.5rem !important
        }

        .u-margin-inline-end-200 {
            margin-inline-end: 12.5rem !important
        }

        .u-margin-inline-end-negative-200 {
            margin-inline-end: -12.5rem !important
        }

        .u-padding-inline-end-200 {
            padding-inline-end: 12.5rem !important
        }

        .u-inset-inline-end-200 {
            inset-inline-end: 12.5rem !important
        }

        .u-margin-block-start-200 {
            margin-block-start: 12.5rem !important
        }

        .u-margin-block-start-negative-200 {
            margin-block-start: -12.5rem !important
        }

        .u-padding-block-start-200 {
            padding-block-start: 12.5rem !important
        }

        .u-inset-block-start-200 {
            inset-block-start: 12.5rem !important
        }

        .u-margin-block-end-200 {
            margin-block-end: 12.5rem !important
        }

        .u-margin-block-end-negative-200 {
            margin-block-end: -12.5rem !important
        }

        .u-padding-block-end-200 {
            padding-block-end: 12.5rem !important
        }

        .u-inset-block-end-200 {
            inset-block-end: 12.5rem !important
        }

        .u-gap-200 {
            gap: 12.5rem !important
        }

        .u-row-gap-200 {
            row-gap: 12.5rem !important
        }

        .u-column-gap-200 {
            column-gap: 12.5rem !important
        }

        .u-margin-300 {
            margin: 18.75rem !important
        }

        .u-margin-negative-300 {
            margin: -18.75rem !important
        }

        .u-padding-300 {
            padding: 18.75rem !important
        }

        .u-inset-300 {
            top: 18.75rem !important;
            right: 18.75rem !important;
            bottom: 18.75rem !important;
            left: 18.75rem !important
        }

        .u-margin-inline-300 {
            margin-inline: 18.75rem !important
        }

        .u-margin-inline-negative-300 {
            margin-inline: -18.75rem !important
        }

        .u-padding-inline-300 {
            padding-inline: 18.75rem !important
        }

        .u-inset-inline-300 {
            inset-inline: 18.75rem !important
        }

        .u-margin-block-300 {
            margin-block: 18.75rem !important
        }

        .u-margin-block-negative-300 {
            margin-block: -18.75rem !important
        }

        .u-padding-block-300 {
            padding-block: 18.75rem !important
        }

        .u-inset-block-300 {
            inset-block: 18.75rem !important
        }

        .u-margin-inline-start-300 {
            margin-inline-start: 18.75rem !important
        }

        .u-margin-inline-start-negative-300 {
            margin-inline-start: -18.75rem !important
        }

        .u-padding-inline-start-300 {
            padding-inline-start: 18.75rem !important
        }

        .u-inset-inline-start-300 {
            inset-inline-start: 18.75rem !important
        }

        .u-margin-inline-end-300 {
            margin-inline-end: 18.75rem !important
        }

        .u-margin-inline-end-negative-300 {
            margin-inline-end: -18.75rem !important
        }

        .u-padding-inline-end-300 {
            padding-inline-end: 18.75rem !important
        }

        .u-inset-inline-end-300 {
            inset-inline-end: 18.75rem !important
        }

        .u-margin-block-start-300 {
            margin-block-start: 18.75rem !important
        }

        .u-margin-block-start-negative-300 {
            margin-block-start: -18.75rem !important
        }

        .u-padding-block-start-300 {
            padding-block-start: 18.75rem !important
        }

        .u-inset-block-start-300 {
            inset-block-start: 18.75rem !important
        }

        .u-margin-block-end-300 {
            margin-block-end: 18.75rem !important
        }

        .u-margin-block-end-negative-300 {
            margin-block-end: -18.75rem !important
        }

        .u-padding-block-end-300 {
            padding-block-end: 18.75rem !important
        }

        .u-inset-block-end-300 {
            inset-block-end: 18.75rem !important
        }

        .u-gap-300 {
            gap: 18.75rem !important
        }

        .u-row-gap-300 {
            row-gap: 18.75rem !important
        }

        .u-column-gap-300 {
            column-gap: 18.75rem !important
        }

        .u-margin-auto {
            margin: auto !important
        }

        .u-margin-inline-auto {
            margin-inline: auto !important
        }

        .u-margin-block-auto {
            margin-block: auto !important
        }

        .u-margin-inline-start-auto {
            margin-inline-start: auto !important
        }

        .u-margin-inline-end-auto {
            margin-inline-end: auto !important
        }

        .u-margin-block-start-auto {
            margin-block-start: auto !important
        }

        .u-margin-block-end-auto {
            margin-block-end: auto !important
        }

        .u-margin-16-negative {
            margin: -1rem !important
        }

        .u-margin-block-start-negative-56 {
            margin-block-start: -3.5rem !important
        }

        .u-margin-block-start-negative-168 {
            margin-block-start: -10.5rem !important
        }

        .u-border-width-0 {
            border-width: 0 !important
        }

        @media (max-width: 767.99px) {
            .u-mobile-border-width-0 {
                border-width: 0 !important
            }
        }

        .u-border-radius-4 {
            border-radius: var(--border-radius-xsmall) !important
        }

        .u-border-radius-8 {
            border-radius: var(--border-radius-small) !important
        }

        .u-border-radius-16 {
            border-radius: var(--border-radius-medium) !important
        }

        .u-border-radius-24 {
            border-radius: var(--border-radius-large) !important
        }

        .u-border-radius-circle {
            border-radius: var(--border-radius-circular) !important
        }

        .u-image-object-fit-contain {
            object-fit: contain !important
        }

        .u-image-object-fit-cover {
            object-fit: cover !important
        }

        .u-container-inline-size {
            container-type: inline-size
        }

        .u-drop-shadow-large {
            filter: drop-shadow(var(--shadow-large)) !important
        }

        .u-remove-input-number-buttons::-webkit-outer-spin-button,
        .u-remove-input-number-buttons::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

        .u-remove-input-number-buttons {
            -moz-appearance: textfield
        }

        .u-only-light,
        .u-only-dark {
            display: none !important
        }

        .theme-dark .u-only-dark {
            display: block !important
        }

        body:not(.theme-dark) .u-only-light {
            display: block !important
        }

        @media (min-width: 768px) {
            .is-only-mobile {
                display: none !important
            }
        }

        @media (max-width: 767.99px),
        (min-width: 1199px) {
            .is-only-tablet {
                display: none !important
            }
        }

        @media (max-width: 767.99px),
        (min-width: 768px) and (max-width: 1198.99px) {
            .is-only-desktop {
                display: none !important
            }
        }

        @media (max-width: 767.99px) {
            .is-not-mobile {
                display: none !important
            }
        }

        @media (min-width: 1199px) {
            .is-not-desktop {
                display: none !important
            }
        }
    }

    @font-face {
        font-family: icon;
        font-display: swap;
        src: url(icon.B4unWvXT.eot);
        src: url(icon.B4unWvXT.eot#iefix) format("embedded-opentype"), url(icon.CfRXJk2U.woff2) format("woff2"), url(icon.CH0Msdvm.woff) format("woff"), url(icon.v9aoPGGO.ttf) format("truetype"), url(icon.C6w_lMld.svg#icon) format("svg")
    }

    [class^=icon-],
    [class*=" icon-"] {
        font-family: icon !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    :root {
        --icon-academic-cap: "";
        --icon-adjustments: "";
        --icon-akamai: "";
        --icon-algolia: "";
        --icon-amazon: "";
        --icon-android: "";
        --icon-angular: "";
        --icon-annotation: "";
        --icon-anonymous: "";
        --icon-api: "";
        --icon-apple: "";
        --icon-appwrite: "";
        --icon-archive: "";
        --icon-arrow-circle-down: "";
        --icon-arrow-circle-left: "";
        --icon-arrow-circle-right: "";
        --icon-arrow-circle-up: "";
        --icon-arrow-down: "";
        --icon-arrow-expand: "";
        --icon-arrow-left: "";
        --icon-arrow-narrow-down: "";
        --icon-arrow-narrow-left: "";
        --icon-arrow-narrow-right: "";
        --icon-arrow-narrow-up: "";
        --icon-arrow-right: "";
        --icon-arrow-sm-down: "";
        --icon-arrow-sm-left: "";
        --icon-arrow-sm-right: "";
        --icon-arrow-sm-up: "";
        --icon-arrow-up: "";
        --icon-astro: "";
        --icon-at-symbol: "";
        --icon-auth0: "";
        --icon-authentik: "";
        --icon-autodesk: "";
        --icon-azure: "";
        --icon-backspace: "";
        --icon-badge-check: "";
        --icon-ban: "";
        --icon-beaker: "";
        --icon-behance: "";
        --icon-bell: "";
        --icon-bitBucket: "";
        --icon-bitly: "";
        --icon-book-open: "";
        --icon-bookmark-alt: "";
        --icon-bookmark: "";
        --icon-box: "";
        --icon-briefcase: "";
        --icon-bun-sh: "";
        --icon-cake: "";
        --icon-calculator: "";
        --icon-calendar: "";
        --icon-camera: "";
        --icon-cash: "";
        --icon-chart-bar: "";
        --icon-chart-pie: "";
        --icon-chart-square-bar: "";
        --icon-chat-alt-2: "";
        --icon-chat-alt: "";
        --icon-chat: "";
        --icon-check-circle: "";
        --icon-check: "";
        --icon-cheveron-down: "";
        --icon-cheveron-left: "";
        --icon-cheveron-right: "";
        --icon-cheveron-up: "";
        --icon-chevron-double-down: "";
        --icon-chevron-double-left: "";
        --icon-chevron-double-right: "";
        --icon-chevron-double-up: "";
        --icon-chip: "";
        --icon-clipboard-arrow: "";
        --icon-clipboard-check: "";
        --icon-clipboard-copy: "";
        --icon-clipboard-list: "";
        --icon-clock: "";
        --icon-cloud-download: "";
        --icon-cloud-upload: "";
        --icon-cloud: "";
        --icon-code: "";
        --icon-cog: "";
        --icon-collection: "";
        --icon-color-swatch: "";
        --icon-cpp: "";
        --icon-credit-card: "";
        --icon-css3: "";
        --icon-cube-transparent: "";
        --icon-cube: "";
        --icon-currency-bangladesh: "";
        --icon-currency-dollar: "";
        --icon-currency-euro: "";
        --icon-currency-pound: "";
        --icon-currency-rupee: "";
        --icon-currency-yen: "";
        --icon-cursor-click: "";
        --icon-dailymotion: "";
        --icon-dart: "";
        --icon-database: "";
        --icon-deno: "";
        --icon-desktop-computer: "";
        --icon-device-ipad: "";
        --icon-device-mobile: "";
        --icon-discord: "";
        --icon-disqus: "";
        --icon-docker: "";
        --icon-document-add: "";
        --icon-document-download: "";
        --icon-document-duplicate: "";
        --icon-document-remove: "";
        --icon-document-report: "";
        --icon-document-search: "";
        --icon-document-text: "";
        --icon-document: "";
        --icon-dotnet: "";
        --icon-dots-circle-horizontal: "";
        --icon-dots-horizontal: "";
        --icon-dots-vertical: "";
        --icon-download: "";
        --icon-dribbble: "";
        --icon-dropbox: "";
        --icon-duplicate: "";
        --icon-emoji-happy: "";
        --icon-emoji-sad: "";
        --icon-etsy: "";
        --icon-exclamation-circle: "";
        --icon-exclamation: "";
        --icon-external-link: "";
        --icon-eye-off: "";
        --icon-eye: "";
        --icon-facebook: "";
        --icon-fast-forward: "";
        --icon-figma: "";
        --icon-film: "";
        --icon-filter-line: "";
        --icon-filter: "";
        --icon-finger-print: "";
        --icon-fire: "";
        --icon-firefox: "";
        --icon-flag: "";
        --icon-flutter: "";
        --icon-folder-add: "";
        --icon-folder-download: "";
        --icon-folder-open: "";
        --icon-folder-remove: "";
        --icon-folder: "";
        --icon-gift: "";
        --icon-git-branch: "";
        --icon-git-commit: "";
        --icon-git: "";
        --icon-github: "";
        --icon-gitlab: "";
        --icon-globe-alt: "";
        --icon-globe: "";
        --icon-google: "";
        --icon-graphql: "";
        --icon-hand: "";
        --icon-hashtag: "";
        --icon-heart: "";
        --icon-home: "";
        --icon-html5: "";
        --icon-identification: "";
        --icon-inbox-in: "";
        --icon-inbox: "";
        --icon-info: "";
        --icon-instagram: "";
        --icon-ionic: "";
        --icon-ios: "";
        --icon-java: "";
        --icon-js: "";
        --icon-key: "";
        --icon-kotlin: "";
        --icon-light-bulb: "";
        --icon-lightning-bolt: "";
        --icon-link: "";
        --icon-linkedin: "";
        --icon-linux: "";
        --icon-list: "";
        --icon-location-marker: "";
        --icon-lock-closed: "";
        --icon-lock-open: "";
        --icon-logout-left: "";
        --icon-logout-right: "";
        --icon-mail-open: "";
        --icon-mail: "";
        --icon-map: "";
        --icon-md-library: "";
        --icon-medium: "";
        --icon-meilisearch: "";
        --icon-menu-alt-1: "";
        --icon-menu-alt-2: "";
        --icon-menu-alt-3: "";
        --icon-menu-alt-4: "";
        --icon-menu: "";
        --icon-microphone: "";
        --icon-microsoft: "";
        --icon-microsoft_edge: "";
        --icon-minus-circle: "";
        --icon-minus-sm: "";
        --icon-minus: "";
        --icon-mode: "";
        --icon-moon: "";
        --icon-ms_yammer: "";
        --icon-msg91: "";
        --icon-music-note: "";
        --icon-newspaper: "";
        --icon-nextjs: "";
        --icon-node_js: "";
        --icon-notion: "";
        --icon-null: "";
        --icon-nuxt: "";
        --icon-office-building: "";
        --icon-okta: "";
        --icon-open-ai: "";
        --icon-openid: "";
        --icon-opera: "";
        --icon-pangea: "";
        --icon-paper-airplane: "";
        --icon-paper-clip: "";
        --icon-pause: "";
        --icon-paypal: "";
        --icon-pencil-alt: "";
        --icon-pencil: "";
        --icon-perspective-api: "";
        --icon-phone-incoming: "";
        --icon-phone-missed-call: "";
        --icon-phone-outgoing: "";
        --icon-phone: "";
        --icon-photograph: "";
        --icon-php: "";
        --icon-pinterest: "";
        --icon-play-button: "";
        --icon-play: "";
        --icon-plus-circle: "";
        --icon-plus-sm: "";
        --icon-plus: "";
        --icon-podio: "";
        --icon-presentation-chart-1: "";
        --icon-presentation-chart-2: "";
        --icon-printer: "";
        --icon-product_hunt: "";
        --icon-puzzle: "";
        --icon-python: "";
        --icon-qrcode: "";
        --icon-question-mark-circle: "";
        --icon-qwik: "";
        --icon-react-native: "";
        --icon-react: "";
        --icon-receipt-refund: "";
        --icon-receipt-tax: "";
        --icon-reddit: "";
        --icon-refresh: "";
        --icon-relation: "";
        --icon-relationship: "";
        --icon-replay: "";
        --icon-rewind: "";
        --icon-rss: "";
        --icon-ruby: "";
        --icon-safari: "";
        --icon-salesforce: "";
        --icon-save-as: "";
        --icon-save: "";
        --icon-scale: "";
        --icon-scissors: "";
        --icon-search-circle: "";
        --icon-search: "";
        --icon-selector: "";
        --icon-send: "";
        --icon-server: "";
        --icon-share: "";
        --icon-shield-check: "";
        --icon-shield-exclamation: "";
        --icon-shopping-bag: "";
        --icon-shopping-cart: "";
        --icon-skype: "";
        --icon-slack: "";
        --icon-solidjs: "";
        --icon-sort-ascending: "";
        --icon-sort-descending: "";
        --icon-sparkles: "";
        --icon-speakerphone: "";
        --icon-spin: "";
        --icon-spotify: "";
        --icon-star: "";
        --icon-status-offline: "";
        --icon-status-online: "";
        --icon-stop: "";
        --icon-stripe: "";
        --icon-sun: "";
        --icon-support: "";
        --icon-svelte: "";
        --icon-swift: "";
        --icon-switch-horizontal: "";
        --icon-switch-vertical: "";
        --icon-table: "";
        --icon-tag: "";
        --icon-telegram: "";
        --icon-telesign: "";
        --icon-template: "";
        --icon-terminal: "";
        --icon-text: "";
        --icon-textmagic: "";
        --icon-thumb-dowm: "";
        --icon-thumb-up: "";
        --icon-ticket: "";
        --icon-tiktok: "";
        --icon-toggle: "";
        --icon-tradeshift: "";
        --icon-translate: "";
        --icon-trash: "";
        --icon-trending-down: "";
        --icon-trending-up: "";
        --icon-truck: "";
        --icon-tumbir: "";
        --icon-twilio: "";
        --icon-twitch: "";
        --icon-twitter: "";
        --icon-typescript: "";
        --icon-unity: "";
        --icon-upload: "";
        --icon-user-add: "";
        --icon-user-circle: "";
        --icon-user-group: "";
        --icon-user-remove: "";
        --icon-user: "";
        --icon-users: "";
        --icon-variable: "";
        --icon-video-camera: "";
        --icon-video: "";
        --icon-view-boards: "";
        --icon-view-grid-add: "";
        --icon-view-grid: "";
        --icon-view-list: "";
        --icon-vimeo: "";
        --icon-vk: "";
        --icon-volume-off: "";
        --icon-volume-up: "";
        --icon-vonage: "";
        --icon-vs_code: "";
        --icon-vue: "";
        --icon-whatsapp: "";
        --icon-wifi: "";
        --icon-wordpress: "";
        --icon-x-circle: "";
        --icon-x: "";
        --icon-yahoo: "";
        --icon-yandex: "";
        --icon-ycombinator: "";
        --icon-youtube: "";
        --icon-zoom-in: "";
        --icon-zoom-out: "";
        --icon-zoom: ""
    }

    .icon-academic-cap:before {
        content: var(--icon-academic-cap)
    }

    .icon-adjustments:before {
        content: var(--icon-adjustments)
    }

    .icon-akamai:before {
        content: var(--icon-akamai)
    }

    .icon-algolia:before {
        content: var(--icon-algolia)
    }

    .icon-amazon:before {
        content: var(--icon-amazon)
    }

    .icon-android:before {
        content: var(--icon-android)
    }

    .icon-angular:before {
        content: var(--icon-angular)
    }

    .icon-annotation:before {
        content: var(--icon-annotation)
    }

    .icon-anonymous:before {
        content: var(--icon-anonymous)
    }

    .icon-api:before {
        content: var(--icon-api)
    }

    .icon-apple:before {
        content: var(--icon-apple)
    }

    .icon-appwrite:before {
        content: var(--icon-appwrite)
    }

    .icon-archive:before {
        content: var(--icon-archive)
    }

    .icon-arrow-circle-down:before {
        content: var(--icon-arrow-circle-down)
    }

    .icon-arrow-circle-left:before {
        content: var(--icon-arrow-circle-left)
    }

    .icon-arrow-circle-right:before {
        content: var(--icon-arrow-circle-right)
    }

    .icon-arrow-circle-up:before {
        content: var(--icon-arrow-circle-up)
    }

    .icon-arrow-down:before {
        content: var(--icon-arrow-down)
    }

    .icon-arrow-expand:before {
        content: var(--icon-arrow-expand)
    }

    .icon-arrow-left:before {
        content: var(--icon-arrow-left)
    }

    .icon-arrow-narrow-down:before {
        content: var(--icon-arrow-narrow-down)
    }

    .icon-arrow-narrow-left:before {
        content: var(--icon-arrow-narrow-left)
    }

    .icon-arrow-narrow-right:before {
        content: var(--icon-arrow-narrow-right)
    }

    .icon-arrow-narrow-up:before {
        content: var(--icon-arrow-narrow-up)
    }

    .icon-arrow-right:before {
        content: var(--icon-arrow-right)
    }

    .icon-arrow-sm-down:before {
        content: var(--icon-arrow-sm-down)
    }

    .icon-arrow-sm-left:before {
        content: var(--icon-arrow-sm-left)
    }

    .icon-arrow-sm-right:before {
        content: var(--icon-arrow-sm-right)
    }

    .icon-arrow-sm-up:before {
        content: var(--icon-arrow-sm-up)
    }

    .icon-arrow-up:before {
        content: var(--icon-arrow-up)
    }

    .icon-astro:before {
        content: var(--icon-astro)
    }

    .icon-at-symbol:before {
        content: var(--icon-at-symbol)
    }

    .icon-auth0:before {
        content: var(--icon-auth0)
    }

    .icon-authentik:before {
        content: var(--icon-authentik)
    }

    .icon-autodesk:before {
        content: var(--icon-autodesk)
    }

    .icon-azure:before {
        content: var(--icon-azure)
    }

    .icon-backspace:before {
        content: var(--icon-backspace)
    }

    .icon-badge-check:before {
        content: var(--icon-badge-check)
    }

    .icon-ban:before {
        content: var(--icon-ban)
    }

    .icon-beaker:before {
        content: var(--icon-beaker)
    }

    .icon-behance:before {
        content: var(--icon-behance)
    }

    .icon-bell:before {
        content: var(--icon-bell)
    }

    .icon-bitBucket:before {
        content: var(--icon-bitBucket)
    }

    .icon-bitly:before {
        content: var(--icon-bitly)
    }

    .icon-book-open:before {
        content: var(--icon-book-open)
    }

    .icon-bookmark-alt:before {
        content: var(--icon-bookmark-alt)
    }

    .icon-bookmark:before {
        content: var(--icon-bookmark)
    }

    .icon-box:before {
        content: var(--icon-box)
    }

    .icon-briefcase:before {
        content: var(--icon-briefcase)
    }

    .icon-bun-sh:before {
        content: var(--icon-bun-sh)
    }

    .icon-cake:before {
        content: var(--icon-cake)
    }

    .icon-calculator:before {
        content: var(--icon-calculator)
    }

    .icon-calendar:before {
        content: var(--icon-calendar)
    }

    .icon-camera:before {
        content: var(--icon-camera)
    }

    .icon-cash:before {
        content: var(--icon-cash)
    }

    .icon-chart-bar:before {
        content: var(--icon-chart-bar)
    }

    .icon-chart-pie:before {
        content: var(--icon-chart-pie)
    }

    .icon-chart-square-bar:before {
        content: var(--icon-chart-square-bar)
    }

    .icon-chat-alt-2:before {
        content: var(--icon-chat-alt-2)
    }

    .icon-chat-alt:before {
        content: var(--icon-chat-alt)
    }

    .icon-chat:before {
        content: var(--icon-chat)
    }

    .icon-check-circle:before {
        content: var(--icon-check-circle)
    }

    .icon-check:before {
        content: var(--icon-check)
    }

    .icon-cheveron-down:before {
        content: var(--icon-cheveron-down)
    }

    .icon-cheveron-left:before {
        content: var(--icon-cheveron-left)
    }

    .icon-cheveron-right:before {
        content: var(--icon-cheveron-right)
    }

    .icon-cheveron-up:before {
        content: var(--icon-cheveron-up)
    }

    .icon-chevron-double-down:before {
        content: var(--icon-chevron-double-down)
    }

    .icon-chevron-double-left:before {
        content: var(--icon-chevron-double-left)
    }

    .icon-chevron-double-right:before {
        content: var(--icon-chevron-double-right)
    }

    .icon-chevron-double-up:before {
        content: var(--icon-chevron-double-up)
    }

    .icon-chip:before {
        content: var(--icon-chip)
    }

    .icon-clipboard-arrow:before {
        content: var(--icon-clipboard-arrow)
    }

    .icon-clipboard-check:before {
        content: var(--icon-clipboard-check)
    }

    .icon-clipboard-copy:before {
        content: var(--icon-clipboard-copy)
    }

    .icon-clipboard-list:before {
        content: var(--icon-clipboard-list)
    }

    .icon-clock:before {
        content: var(--icon-clock)
    }

    .icon-cloud-download:before {
        content: var(--icon-cloud-download)
    }

    .icon-cloud-upload:before {
        content: var(--icon-cloud-upload)
    }

    .icon-cloud:before {
        content: var(--icon-cloud)
    }

    .icon-code:before {
        content: var(--icon-code)
    }

    .icon-cog:before {
        content: var(--icon-cog)
    }

    .icon-collection:before {
        content: var(--icon-collection)
    }

    .icon-color-swatch:before {
        content: var(--icon-color-swatch)
    }

    .icon-cpp:before {
        content: var(--icon-cpp)
    }

    .icon-credit-card:before {
        content: var(--icon-credit-card)
    }

    .icon-css3:before {
        content: var(--icon-css3)
    }

    .icon-cube-transparent:before {
        content: var(--icon-cube-transparent)
    }

    .icon-cube:before {
        content: var(--icon-cube)
    }

    .icon-currency-bangladesh:before {
        content: var(--icon-currency-bangladesh)
    }

    .icon-currency-dollar:before {
        content: var(--icon-currency-dollar)
    }

    .icon-currency-euro:before {
        content: var(--icon-currency-euro)
    }

    .icon-currency-pound:before {
        content: var(--icon-currency-pound)
    }

    .icon-currency-rupee:before {
        content: var(--icon-currency-rupee)
    }

    .icon-currency-yen:before {
        content: var(--icon-currency-yen)
    }

    .icon-cursor-click:before {
        content: var(--icon-cursor-click)
    }

    .icon-dailymotion:before {
        content: var(--icon-dailymotion)
    }

    .icon-dart:before {
        content: var(--icon-dart)
    }

    .icon-database:before {
        content: var(--icon-database)
    }

    .icon-deno:before {
        content: var(--icon-deno)
    }

    .icon-desktop-computer:before {
        content: var(--icon-desktop-computer)
    }

    .icon-device-ipad:before {
        content: var(--icon-device-ipad)
    }

    .icon-device-mobile:before {
        content: var(--icon-device-mobile)
    }

    .icon-discord:before {
        content: var(--icon-discord)
    }

    .icon-disqus:before {
        content: var(--icon-disqus)
    }

    .icon-docker:before {
        content: var(--icon-docker)
    }

    .icon-document-add:before {
        content: var(--icon-document-add)
    }

    .icon-document-download:before {
        content: var(--icon-document-download)
    }

    .icon-document-duplicate:before {
        content: var(--icon-document-duplicate)
    }

    .icon-document-remove:before {
        content: var(--icon-document-remove)
    }

    .icon-document-report:before {
        content: var(--icon-document-report)
    }

    .icon-document-search:before {
        content: var(--icon-document-search)
    }

    .icon-document-text:before {
        content: var(--icon-document-text)
    }

    .icon-document:before {
        content: var(--icon-document)
    }

    .icon-dotnet:before {
        content: var(--icon-dotnet)
    }

    .icon-dots-circle-horizontal:before {
        content: var(--icon-dots-circle-horizontal)
    }

    .icon-dots-horizontal:before {
        content: var(--icon-dots-horizontal)
    }

    .icon-dots-vertical:before {
        content: var(--icon-dots-vertical)
    }

    .icon-download:before {
        content: var(--icon-download)
    }

    .icon-dribbble:before {
        content: var(--icon-dribbble)
    }

    .icon-dropbox:before {
        content: var(--icon-dropbox)
    }

    .icon-duplicate:before {
        content: var(--icon-duplicate)
    }

    .icon-emoji-happy:before {
        content: var(--icon-emoji-happy)
    }

    .icon-emoji-sad:before {
        content: var(--icon-emoji-sad)
    }

    .icon-etsy:before {
        content: var(--icon-etsy)
    }

    .icon-exclamation-circle:before {
        content: var(--icon-exclamation-circle)
    }

    .icon-exclamation:before {
        content: var(--icon-exclamation)
    }

    .icon-external-link:before {
        content: var(--icon-external-link)
    }

    .icon-eye-off:before {
        content: var(--icon-eye-off)
    }

    .icon-eye:before {
        content: var(--icon-eye)
    }

    .icon-facebook:before {
        content: var(--icon-facebook)
    }

    .icon-fast-forward:before {
        content: var(--icon-fast-forward)
    }

    .icon-figma:before {
        content: var(--icon-figma)
    }

    .icon-film:before {
        content: var(--icon-film)
    }

    .icon-filter-line:before {
        content: var(--icon-filter-line)
    }

    .icon-filter:before {
        content: var(--icon-filter)
    }

    .icon-finger-print:before {
        content: var(--icon-finger-print)
    }

    .icon-fire:before {
        content: var(--icon-fire)
    }

    .icon-firefox:before {
        content: var(--icon-firefox)
    }

    .icon-flag:before {
        content: var(--icon-flag)
    }

    .icon-flutter:before {
        content: var(--icon-flutter)
    }

    .icon-folder-add:before {
        content: var(--icon-folder-add)
    }

    .icon-folder-download:before {
        content: var(--icon-folder-download)
    }

    .icon-folder-open:before {
        content: var(--icon-folder-open)
    }

    .icon-folder-remove:before {
        content: var(--icon-folder-remove)
    }

    .icon-folder:before {
        content: var(--icon-folder)
    }

    .icon-gift:before {
        content: var(--icon-gift)
    }

    .icon-git-branch:before {
        content: var(--icon-git-branch)
    }

    .icon-git-commit:before {
        content: var(--icon-git-commit)
    }

    .icon-git:before {
        content: var(--icon-git)
    }

    .icon-github:before {
        content: var(--icon-github)
    }

    .icon-gitlab:before {
        content: var(--icon-gitlab)
    }

    .icon-globe-alt:before {
        content: var(--icon-globe-alt)
    }

    .icon-globe:before {
        content: var(--icon-globe)
    }

    .icon-google:before {
        content: var(--icon-google)
    }

    .icon-graphql:before {
        content: var(--icon-graphql)
    }

    .icon-hand:before {
        content: var(--icon-hand)
    }

    .icon-hashtag:before {
        content: var(--icon-hashtag)
    }

    .icon-heart:before {
        content: var(--icon-heart)
    }

    .icon-home:before {
        content: var(--icon-home)
    }

    .icon-html5:before {
        content: var(--icon-html5)
    }

    .icon-identification:before {
        content: var(--icon-identification)
    }

    .icon-inbox-in:before {
        content: var(--icon-inbox-in)
    }

    .icon-inbox:before {
        content: var(--icon-inbox)
    }

    .icon-info:before {
        content: var(--icon-info)
    }

    .icon-instagram:before {
        content: var(--icon-instagram)
    }

    .icon-ionic:before {
        content: var(--icon-ionic)
    }

    .icon-ios:before {
        content: var(--icon-ios)
    }

    .icon-java:before {
        content: var(--icon-java)
    }

    .icon-js:before {
        content: var(--icon-js)
    }

    .icon-key:before {
        content: var(--icon-key)
    }

    .icon-kotlin:before {
        content: var(--icon-kotlin)
    }

    .icon-light-bulb:before {
        content: var(--icon-light-bulb)
    }

    .icon-lightning-bolt:before {
        content: var(--icon-lightning-bolt)
    }

    .icon-link:before {
        content: var(--icon-link)
    }

    .icon-linkedin:before {
        content: var(--icon-linkedin)
    }

    .icon-linux:before {
        content: var(--icon-linux)
    }

    .icon-list:before {
        content: var(--icon-list)
    }

    .icon-location-marker:before {
        content: var(--icon-location-marker)
    }

    .icon-lock-closed:before {
        content: var(--icon-lock-closed)
    }

    .icon-lock-open:before {
        content: var(--icon-lock-open)
    }

    .icon-logout-left:before {
        content: var(--icon-logout-left)
    }

    .icon-logout-right:before {
        content: var(--icon-logout-right)
    }

    .icon-mail-open:before {
        content: var(--icon-mail-open)
    }

    .icon-mail:before {
        content: var(--icon-mail)
    }

    .icon-map:before {
        content: var(--icon-map)
    }

    .icon-md-library:before {
        content: var(--icon-md-library)
    }

    .icon-medium:before {
        content: var(--icon-medium)
    }

    .icon-meilisearch:before {
        content: var(--icon-meilisearch)
    }

    .icon-menu-alt-1:before {
        content: var(--icon-menu-alt-1)
    }

    .icon-menu-alt-2:before {
        content: var(--icon-menu-alt-2)
    }

    .icon-menu-alt-3:before {
        content: var(--icon-menu-alt-3)
    }

    .icon-menu-alt-4:before {
        content: var(--icon-menu-alt-4)
    }

    .icon-menu:before {
        content: var(--icon-menu)
    }

    .icon-microphone:before {
        content: var(--icon-microphone)
    }

    .icon-microsoft:before {
        content: var(--icon-microsoft)
    }

    .icon-microsoft_edge:before {
        content: var(--icon-microsoft_edge)
    }

    .icon-minus-circle:before {
        content: var(--icon-minus-circle)
    }

    .icon-minus-sm:before {
        content: var(--icon-minus-sm)
    }

    .icon-minus:before {
        content: var(--icon-minus)
    }

    .icon-mode:before {
        content: var(--icon-mode)
    }

    .icon-moon:before {
        content: var(--icon-moon)
    }

    .icon-ms_yammer:before {
        content: var(--icon-ms_yammer)
    }

    .icon-msg91:before {
        content: var(--icon-msg91)
    }

    .icon-music-note:before {
        content: var(--icon-music-note)
    }

    .icon-newspaper:before {
        content: var(--icon-newspaper)
    }

    .icon-nextjs:before {
        content: var(--icon-nextjs)
    }

    .icon-node_js:before {
        content: var(--icon-node_js)
    }

    .icon-notion:before {
        content: var(--icon-notion)
    }

    .icon-null:before {
        content: var(--icon-null)
    }

    .icon-nuxt:before {
        content: var(--icon-nuxt)
    }

    .icon-office-building:before {
        content: var(--icon-office-building)
    }

    .icon-okta:before {
        content: var(--icon-okta)
    }

    .icon-open-ai:before {
        content: var(--icon-open-ai)
    }

    .icon-openid:before {
        content: var(--icon-openid)
    }

    .icon-opera:before {
        content: var(--icon-opera)
    }

    .icon-pangea:before {
        content: var(--icon-pangea)
    }

    .icon-paper-airplane:before {
        content: var(--icon-paper-airplane)
    }

    .icon-paper-clip:before {
        content: var(--icon-paper-clip)
    }

    .icon-pause:before {
        content: var(--icon-pause)
    }

    .icon-paypal:before {
        content: var(--icon-paypal)
    }

    .icon-pencil-alt:before {
        content: var(--icon-pencil-alt)
    }

    .icon-pencil:before {
        content: var(--icon-pencil)
    }

    .icon-perspective-api:before {
        content: var(--icon-perspective-api)
    }

    .icon-phone-incoming:before {
        content: var(--icon-phone-incoming)
    }

    .icon-phone-missed-call:before {
        content: var(--icon-phone-missed-call)
    }

    .icon-phone-outgoing:before {
        content: var(--icon-phone-outgoing)
    }

    .icon-phone:before {
        content: var(--icon-phone)
    }

    .icon-photograph:before {
        content: var(--icon-photograph)
    }

    .icon-php:before {
        content: var(--icon-php)
    }

    .icon-pinterest:before {
        content: var(--icon-pinterest)
    }

    .icon-play-button:before {
        content: var(--icon-play-button)
    }

    .icon-play:before {
        content: var(--icon-play)
    }

    .icon-plus-circle:before {
        content: var(--icon-plus-circle)
    }

    .icon-plus-sm:before {
        content: var(--icon-plus-sm)
    }

    .icon-plus:before {
        content: var(--icon-plus)
    }

    .icon-podio:before {
        content: var(--icon-podio)
    }

    .icon-presentation-chart-1:before {
        content: var(--icon-presentation-chart-1)
    }

    .icon-presentation-chart-2:before {
        content: var(--icon-presentation-chart-2)
    }

    .icon-printer:before {
        content: var(--icon-printer)
    }

    .icon-product_hunt:before {
        content: var(--icon-product_hunt)
    }

    .icon-puzzle:before {
        content: var(--icon-puzzle)
    }

    .icon-python:before {
        content: var(--icon-python)
    }

    .icon-qrcode:before {
        content: var(--icon-qrcode)
    }

    .icon-question-mark-circle:before {
        content: var(--icon-question-mark-circle)
    }

    .icon-qwik:before {
        content: var(--icon-qwik)
    }

    .icon-react-native:before {
        content: var(--icon-react-native)
    }

    .icon-react:before {
        content: var(--icon-react)
    }

    .icon-receipt-refund:before {
        content: var(--icon-receipt-refund)
    }

    .icon-receipt-tax:before {
        content: var(--icon-receipt-tax)
    }

    .icon-reddit:before {
        content: var(--icon-reddit)
    }

    .icon-refresh:before {
        content: var(--icon-refresh)
    }

    .icon-relation:before {
        content: var(--icon-relation)
    }

    .icon-relationship:before {
        content: var(--icon-relationship)
    }

    .icon-replay:before {
        content: var(--icon-replay)
    }

    .icon-rewind:before {
        content: var(--icon-rewind)
    }

    .icon-rss:before {
        content: var(--icon-rss)
    }

    .icon-ruby:before {
        content: var(--icon-ruby)
    }

    .icon-safari:before {
        content: var(--icon-safari)
    }

    .icon-salesforce:before {
        content: var(--icon-salesforce)
    }

    .icon-save-as:before {
        content: var(--icon-save-as)
    }

    .icon-save:before {
        content: var(--icon-save)
    }

    .icon-scale:before {
        content: var(--icon-scale)
    }

    .icon-scissors:before {
        content: var(--icon-scissors)
    }

    .icon-search-circle:before {
        content: var(--icon-search-circle)
    }

    .icon-search:before {
        content: var(--icon-search)
    }

    .icon-selector:before {
        content: var(--icon-selector)
    }

    .icon-send:before {
        content: var(--icon-send)
    }

    .icon-server:before {
        content: var(--icon-server)
    }

    .icon-share:before {
        content: var(--icon-share)
    }

    .icon-shield-check:before {
        content: var(--icon-shield-check)
    }

    .icon-shield-exclamation:before {
        content: var(--icon-shield-exclamation)
    }

    .icon-shopping-bag:before {
        content: var(--icon-shopping-bag)
    }

    .icon-shopping-cart:before {
        content: var(--icon-shopping-cart)
    }

    .icon-skype:before {
        content: var(--icon-skype)
    }

    .icon-slack:before {
        content: var(--icon-slack)
    }

    .icon-solidjs:before {
        content: var(--icon-solidjs)
    }

    .icon-sort-ascending:before {
        content: var(--icon-sort-ascending)
    }

    .icon-sort-descending:before {
        content: var(--icon-sort-descending)
    }

    .icon-sparkles:before {
        content: var(--icon-sparkles)
    }

    .icon-speakerphone:before {
        content: var(--icon-speakerphone)
    }

    .icon-spin:before {
        content: var(--icon-spin)
    }

    .icon-spotify:before {
        content: var(--icon-spotify)
    }

    .icon-star:before {
        content: var(--icon-star)
    }

    .icon-status-offline:before {
        content: var(--icon-status-offline)
    }

    .icon-status-online:before {
        content: var(--icon-status-online)
    }

    .icon-stop:before {
        content: var(--icon-stop)
    }

    .icon-stripe:before {
        content: var(--icon-stripe)
    }

    .icon-sun:before {
        content: var(--icon-sun)
    }

    .icon-support:before {
        content: var(--icon-support)
    }

    .icon-svelte:before {
        content: var(--icon-svelte)
    }

    .icon-swift:before {
        content: var(--icon-swift)
    }

    .icon-switch-horizontal:before {
        content: var(--icon-switch-horizontal)
    }

    .icon-switch-vertical:before {
        content: var(--icon-switch-vertical)
    }

    .icon-table:before {
        content: var(--icon-table)
    }

    .icon-tag:before {
        content: var(--icon-tag)
    }

    .icon-telegram:before {
        content: var(--icon-telegram)
    }

    .icon-telesign:before {
        content: var(--icon-telesign)
    }

    .icon-template:before {
        content: var(--icon-template)
    }

    .icon-terminal:before {
        content: var(--icon-terminal)
    }

    .icon-text:before {
        content: var(--icon-text)
    }

    .icon-textmagic:before {
        content: var(--icon-textmagic)
    }

    .icon-thumb-dowm:before {
        content: var(--icon-thumb-dowm)
    }

    .icon-thumb-up:before {
        content: var(--icon-thumb-up)
    }

    .icon-ticket:before {
        content: var(--icon-ticket)
    }

    .icon-tiktok:before {
        content: var(--icon-tiktok)
    }

    .icon-toggle:before {
        content: var(--icon-toggle)
    }

    .icon-tradeshift:before {
        content: var(--icon-tradeshift)
    }

    .icon-translate:before {
        content: var(--icon-translate)
    }

    .icon-trash:before {
        content: var(--icon-trash)
    }

    .icon-trending-down:before {
        content: var(--icon-trending-down)
    }

    .icon-trending-up:before {
        content: var(--icon-trending-up)
    }

    .icon-truck:before {
        content: var(--icon-truck)
    }

    .icon-tumbir:before {
        content: var(--icon-tumbir)
    }

    .icon-twilio:before {
        content: var(--icon-twilio)
    }

    .icon-twitch:before {
        content: var(--icon-twitch)
    }

    .icon-twitter:before {
        content: var(--icon-twitter)
    }

    .icon-typescript:before {
        content: var(--icon-typescript)
    }

    .icon-unity:before {
        content: var(--icon-unity)
    }

    .icon-upload:before {
        content: var(--icon-upload)
    }

    .icon-user-add:before {
        content: var(--icon-user-add)
    }

    .icon-user-circle:before {
        content: var(--icon-user-circle)
    }

    .icon-user-group:before {
        content: var(--icon-user-group)
    }

    .icon-user-remove:before {
        content: var(--icon-user-remove)
    }

    .icon-user:before {
        content: var(--icon-user)
    }

    .icon-users:before {
        content: var(--icon-users)
    }

    .icon-variable:before {
        content: var(--icon-variable)
    }

    .icon-video-camera:before {
        content: var(--icon-video-camera)
    }

    .icon-video:before {
        content: var(--icon-video)
    }

    .icon-view-boards:before {
        content: var(--icon-view-boards)
    }

    .icon-view-grid-add:before {
        content: var(--icon-view-grid-add)
    }

    .icon-view-grid:before {
        content: var(--icon-view-grid)
    }

    .icon-view-list:before {
        content: var(--icon-view-list)
    }

    .icon-vimeo:before {
        content: var(--icon-vimeo)
    }

    .icon-vk:before {
        content: var(--icon-vk)
    }

    .icon-volume-off:before {
        content: var(--icon-volume-off)
    }

    .icon-volume-up:before {
        content: var(--icon-volume-up)
    }

    .icon-vonage:before {
        content: var(--icon-vonage)
    }

    .icon-vs_code:before {
        content: var(--icon-vs_code)
    }

    .icon-vue:before {
        content: var(--icon-vue)
    }

    .icon-whatsapp:before {
        content: var(--icon-whatsapp)
    }

    .icon-wifi:before {
        content: var(--icon-wifi)
    }

    .icon-wordpress:before {
        content: var(--icon-wordpress)
    }

    .icon-x-circle:before {
        content: var(--icon-x-circle)
    }

    .icon-x:before {
        content: var(--icon-x)
    }

    .icon-yahoo:before {
        content: var(--icon-yahoo)
    }

    .icon-yandex:before {
        content: var(--icon-yandex)
    }

    .icon-ycombinator:before {
        content: var(--icon-ycombinator)
    }

    .icon-youtube:before {
        content: var(--icon-youtube)
    }

    .icon-zoom-in:before {
        content: var(--icon-zoom-in)
    }

    .icon-zoom-out:before {
        content: var(--icon-zoom-out)
    }

    .icon-zoom:before {
        content: var(--icon-zoom)
    }
}

@layer css-variables {
    :root {
        --web-color-pink-hue: 343;
        --web-color-pink-200: var(--web-color-pink-hue) 98% 84%;
        --web-color-pink-500: var(--web-color-pink-hue) 98% 60%;
        --web-color-pink-600: var(--web-color-pink-hue) 65% 48%;
        --web-color-pink-700: var(--web-color-pink-hue) 65% 36%;
        --web-color-red-hue: 3;
        --web-color-red-200: calc(var(--web-color-red-hue) - 2) 100% 92%;
        --web-color-red-500: var(--web-color-red-hue) 100% 61%;
        --web-color-red-700: calc(var(--web-color-red-hue) - 3) 82% 39%;
        --web-color-orange-hue: 18;
        --web-color-orange-200: var(--web-color-orange-hue) 100% 88%;
        --web-color-orange-500: var(--web-color-orange-hue) 99% 70%;
        --web-color-orange-700: var(--web-color-orange-hue) 42% 42%;
        --web-color-mint-hue: 177;
        --web-color-mint-200: var(--web-color-mint-hue) 56% 88%;
        --web-color-mint-500: calc(var(--web-color-mint-hue) + 1) 54% 69%;
        --web-color-mint-700: calc(var(--web-color-mint-hue) + 2) 24% 41%;
        --web-color-purple-hue: 249;
        --web-color-purple-200: var(--web-color-purple-hue) 100% 88%;
        --web-color-purple-500: calc(var(--web-color-purple-hue) - 1) 99% 70%;
        --web-color-purple-700: calc(var(--web-color-purple-hue) - 1) 42% 42%;
        --web-color-yellow-hue: 42;
        --web-color-yellow-200: var(--web-color-yellow-hue) 100% 88%;
        --web-color-yellow-500: var(--web-color-yellow-hue) 99% 70%;
        --web-color-yellow-700: calc(var(--web-color-yellow-hue) + 1) 42% 42%;
        --web-color-blue-hue: 217;
        --web-color-blue-200: var(--web-color-blue-hue) 100% 88%;
        --web-color-blue-500: calc(var(--web-color-blue-hue) - 1) 99% 70%;
        --web-color-blue-700: calc(var(--web-color-blue-hue) - 1) 42% 42%;
        --web-color-secondary-hue: 351;
        --web-color-secondary-100: var(--web-color-secondary-hue) 99% 66%;
        --web-color-white: 0 0% 100%;
        --web-color-greyscale-25: 240 11% 98%;
        --web-color-greyscale-50: 240 11% 94%;
        --web-color-greyscale-100: 240 6% 90%;
        --web-color-greyscale-200: 240 4% 85%;
        --web-color-greyscale-250: 240 3% 77%;
        --web-color-greyscale-300: 240 2% 68%;
        --web-color-greyscale-400: 240 2% 60%;
        --web-color-greyscale-500: 240 2% 52%;
        --web-color-greyscale-600: 240 2% 43%;
        --web-color-greyscale-700: 240 3% 35%;
        --web-color-greyscale-750: 240 4% 26%;
        --web-color-greyscale-800: 240 4% 18%;
        --web-color-greyscale-850: 240 3% 14%;
        --web-color-greyscale-900: 240 5.7% 10.4%;
        --web-color-black: 0 0% 0%;
        --web-color-background: var(--web-color-greyscale-50);
        --web-color-background-docs: var(--web-color-greyscale-25);
        --web-color-primary: var(--web-color-greyscale-900);
        --web-color-secondary: var(--web-color-greyscale-700);
        --web-color-tertiary: var(--web-color-greyscale-600);
        --web-color-accent: var(--web-color-pink-500);
        --web-color-accent-darker: var(--web-color-pink-600);
        --web-color-accent-click: var(--web-color-pink-500);
        --web-color-card: var(--web-color-white) / .9;
        --web-color-smooth: var(--web-color-greyscale-900) / .04;
        --web-color-subtle: var(--web-color-greyscale-50);
        --web-color-offset: var(--web-color-black) / .08;
        --web-color-border: var(--web-color-greyscale-50)
    }

    :root .theme-light {
        --web-color-background: var(--web-color-greyscale-50);
        --web-color-background-docs: var(--web-color-greyscale-25);
        --web-color-primary: var(--web-color-greyscale-900);
        --web-color-secondary: var(--web-color-greyscale-700);
        --web-color-tertiary: var(--web-color-greyscale-600);
        --web-color-accent: var(--web-color-pink-500);
        --web-color-accent-darker: var(--web-color-pink-600);
        --web-color-accent-click: var(--web-color-pink-500);
        --web-color-card: var(--web-color-white) / .9;
        --web-color-smooth: var(--web-color-greyscale-900) / .04;
        --web-color-subtle: var(--web-color-greyscale-50);
        --web-color-offset: var(--web-color-black) / .08;
        --web-color-border: var(--web-color-greyscale-50)
    }

    :root .theme-dark {
        --web-color-background: var(--web-color-greyscale-900);
        --web-color-background-docs: var(--web-color-greyscale-900);
        --web-color-primary: var(--web-color-greyscale-100);
        --web-color-secondary: var(--web-color-greyscale-300);
        --web-color-tertiary: var(--web-color-greyscale-600);
        --web-color-accent: var(--web-color-pink-500);
        --web-color-accent-darker: var(--web-color-pink-600);
        --web-color-accent-click: var(--web-color-greyscale-50);
        --web-color-card: var(--web-color-greyscale-850) / .9;
        --web-color-smooth: var(--web-color-white) / .06;
        --web-color-subtle: var(--web-color-greyscale-850);
        --web-color-offset: var(--web-color-white) / .1;
        --web-color-border: var(--web-color-subtle)
    }

    .web-u-color-text-primary {
        color: hsl(var(--web-color-primary)) !important
    }

    .web-u-color-text-secondary {
        color: hsl(var(--web-color-secondary)) !important
    }

    .web-u-color-text-tertiary {
        color: hsl(var(--web-color-tertiary)) !important
    }

    .web-u-color-text-accent {
        -webkit-text-fill-color: hsl(var(--web-color-accent)) !important;
        color: hsl(var(--web-color-accent)) !important
    }

    .web-u-color-text-accent-darker {
        color: hsl(var(--web-color-accent-darker)) !important
    }

    .web-u-color-text-accent-click {
        color: hsl(var(--web-color-accent-click)) !important
    }

    :root {
        --web-font-family-aeonik-pro: "Aeonik Pro", arial, sans-serif;
        --web-font-family-inter: "Inter", arial, sans-serif;
        --web-font-family-aeonik-fono: "Aenoik Fono", monospace;
        --web-font-family-fira-code: "Fira Code", monospace
    }

    :root {
        --web-font-size-micro: .75rem;
        --web-font-size-tiny: .875rem;
        --web-font-size-small: 1rem;
        --web-font-size-medium: 1.125rem;
        --web-font-size-large: 1.25rem;
        --web-font-size-xl: 1.5rem;
        --web-font-size-xxl: 2rem;
        --web-font-size-xxxl: 2.5rem;
        --web-font-size-big: 3rem;
        --web-font-size-huge: 3.5rem;
        --web-font-size-super: 4rem;
        --web-font-size-giant: 5.5rem
    }

    :root {
        --web-line-height-micro: .875rem;
        --web-line-height-tiny: 1rem;
        --web-line-height-xs: 1.375rem;
        --web-line-height-sm: 1.625rem;
        --web-line-height-md: 1.75rem;
        --web-line-height-lg: 2.125rem;
        --web-line-height-big: 2.75rem;
        --web-line-height-xl: 3.125rem;
        --web-line-height-xxl: 3.5rem;
        --web-line-height-xxxl: 4.25rem;
        --web-line-height-xxxxl: 5.5rem
    }

    :root {
        --web-letter-spacing-compressed: -.022em;
        --web-letter-spacing-squeezed: -.01em;
        --web-letter-spacing-tighter: -.018em;
        --web-letter-spacing-tight: -.0045em;
        --web-letter-spacing-none: 0em;
        --web-letter-spacing-loose: .08em
    }

    :root {
        --web-font-weight-air: 100;
        --web-font-weight-thin: 200;
        --web-font-weight-light: 300;
        --web-font-weight-regular: 400;
        --web-font-weight-medium: 500;
        --web-font-weight-bold: 600;
        --web-font-weight-black: 700
    }

    :root {
        --container-size-normal: 75rem;
        --container-size-large: 90rem;
        --container-size-huge: 120rem
    }
}

@layer resets {
    body {
        --p-body-text-color: var(--web-color-secondary);
        --p-body-bg-color: var(--web-color-background-docs);
        font-family: var(--web-font-family-inter);
        font-weight: 400;
        font-size: 100%;
        line-height: 1.5;
        color: hsl(var(--p-body-text-color)) !important;
        background-color: hsl(var(--p-body-bg-color))
    }

    :where(body) :focus-visible {
        box-shadow: var(--focus-box-shadow)
    }

    ::selection {
        color: hsl(var(--web-color-black));
        -webkit-text-fill-color: hsl(var(--web-color-black));
        background-color: hsl(var(--web-color-mint-500));
        background-clip: revert;
        -webkit-background-clip: revert
    }
}

@layer fonts {
    @font-face {
        font-family: Aeonik Pro;
        font-style: normal;
        font-weight: 100;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-Air.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: italic;
        font-weight: 100;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-AirItalic.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-Thin.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: italic;
        font-weight: 200;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-ThinItalic.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-Light.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-LightItalic.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-Regular.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-RegularItalic.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-Medium.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-MediumItalic.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-Bold.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: italic;
        font-weight: 600;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-BoldItalic.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-Black.woff2) format("woff2")
    }

    @font-face {
        font-family: Aeonik Pro;
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: local("Aeonik Pro"), local("AeonikPro"), url(../../../fonts/aeonik-pro/AeonikPro-BlackItalic.woff2) format("woff2")
    }

    @font-face {
        font-family: Aenoik Fono;
        font-style: normal;
        font-weight: 100;
        font-display: swap;
        src: local("Aeonik Fono"), local("AeonikFono"), url(../../../fonts/aeonik-fono/AeonikFono-Air.woff2) format("woff2")
    }

    @font-face {
        font-family: Aenoik Fono;
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: local("Aeonik Fono"), local("AeonikFono"), url(../../../fonts/aeonik-fono/AeonikFono-Thin.woff2) format("woff2")
    }

    @font-face {
        font-family: Aenoik Fono;
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: local("Aeonik Fono"), local("AeonikFono"), url(../../../fonts/aeonik-fono/AeonikFono-Light.woff2) format("woff2")
    }

    @font-face {
        font-family: Aenoik Fono;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: local("Aeonik Fono"), local("AeonikFono"), url(../../../fonts/aeonik-fono/AeonikFono-Regular.woff2) format("woff2")
    }

    @font-face {
        font-family: Aenoik Fono;
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: local("Aeonik Fono"), local("AeonikFono"), url(../../../fonts/aeonik-fono/AeonikFono-Medium.woff2) format("woff2")
    }

    @font-face {
        font-family: Aenoik Fono;
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: local("Aeonik Fono"), local("AeonikFono"), url(../../../fonts/aeonik-fono/AeonikFono-Bold.woff2) format("woff2")
    }

    @font-face {
        font-family: Aenoik Fono;
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: local("Aeonik Fono"), local("AeonikFono"), url(../../../fonts/aeonik-fono/AeonikFono-Black.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 100;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-100-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-200-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-300-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-400-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-500-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-600-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-700-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-800-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter;
        font-style: normal;
        font-weight: 900;
        font-display: swap;
        src: url(../../../fonts/inter/inter-latin-900-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Fira Code;
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(../../../fonts/fira-code/fira-code-latin-300-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Fira Code;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../../../fonts/fira-code/fira-code-latin-400-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Fira Code;
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(../../../fonts/fira-code/fira-code-latin-500-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Fira Code;
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url(../../../fonts/fira-code/fira-code-latin-600-normal.woff2) format("woff2")
    }

    @font-face {
        font-family: Fira Code;
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(../../../fonts/fira-code/fira-code-latin-700-normal.woff2) format("woff2")
    }
}

@layer icons;

@layer animations {
    .web-animation-bounce {
        animation: bounce infinite 2s
    }

    @media (prefers-reduced-motion) {
        .web-animation-bounce {
            animation: none
        }
    }

    @keyframes web-bounce {

        0%,
        20%,
        50%,
        80%,
        to {
            transform: translateY(0)
        }

        40% {
            transform: translateY(-.9375rem)
        }

        60% {
            transform: translateY(-.4375rem)
        }
    }
}

@layer elements {
    .web-eyebrow {
        --p-font-family: var(--web-font-family-aeonik-fono);
        --p-font-size: var(--web-font-size-micro);
        --p-line-height: var(--web-line-height-tiny);
        --p-letter-spacing: var(--web-letter-spacing-loose);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight);
        text-transform: uppercase
    }

    .web-code {
        --p-font-family: var(--web-font-family-fira-code);
        --p-font-size: var(--web-font-size-micro);
        --p-line-height: var(--web-line-height-tiny);
        --p-letter-spacing: var(--web-letter-spacing-none);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    @media (min-width:1024px) {
        .web-code {
            --p-font-size: var(--web-font-size-tiny);
            --p-line-height: var(--web-line-height-xs)
        }
    }

    .web-caption-400 {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-tiny);
        --p-line-height: var(--web-line-height-xs);
        --p-letter-spacing: var(--web-letter-spacing-tight);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight);
        text-transform: none
    }

    .web-caption-500 {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-tiny);
        --p-line-height: var(--web-line-height-xs);
        --p-letter-spacing: var(--web-letter-spacing-tight);
        --p-font-weight: var(--web-font-weight-medium);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    .web-sub-body-400 {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-tiny);
        --p-line-height: var(--web-line-height-xs);
        --p-letter-spacing: var(--web-letter-spacing-tighter);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    @media (min-width:1024px) {
        .web-sub-body-400 {
            --p-font-size: var(--web-font-size-small);
            --p-letter-spacing: var(--web-letter-spacing-tight)
        }
    }

    .web-sub-body-500 {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-tiny);
        --p-line-height: var(--web-line-height-xs);
        --p-letter-spacing: var(--web-letter-spacing-tighter);
        --p-font-weight: var(--web-font-weight-medium);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    @media (min-width:1024px) {
        .web-sub-body-500 {
            --p-font-size: var(--web-font-size-small);
            --p-letter-spacing: var(--web-letter-spacing-tight)
        }
    }

    .web-main-body-400 {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-small);
        --p-line-height: var(--web-line-height-xs);
        --p-letter-spacing: var(--web-letter-spacing-tight);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight);
        text-transform: none
    }

    @media (min-width:1024px) {
        .web-main-body-400 {
            --p-font-size: var(--web-font-size-medium);
            --p-line-height: var(--web-line-height-sm);
            --p-letter-spacing: var(--web-letter-spacing-tight)
        }
    }

    .web-main-body-500 {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-small);
        --p-line-height: var(--web-line-height-xs);
        --p-letter-spacing: var(--web-letter-spacing-tight);
        --p-font-weight: var(--web-font-weight-medium);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    @media (min-width:1024px) {
        .web-main-body-500 {
            --p-font-size: var(--web-font-size-medium);
            --p-line-height: var(--web-line-height-sm)
        }
    }

    .web-paragraph-md {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-small);
        --p-line-height: var(--web-line-height-sm);
        --p-letter-spacing: var(--web-letter-spacing-tight);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    .web-paragraph-lg {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-medium);
        --p-line-height: var(--web-line-height-md);
        --p-letter-spacing: var(--web-letter-spacing-tight);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    .web-description {
        --p-font-family: var(--web-font-family-inter);
        --p-font-size: var(--web-font-size-medium);
        --p-line-height: var(--web-line-height-sm);
        --p-letter-spacing: var(--web-letter-spacing-tighter);
        --p-font-weight: var(--web-font-weight-medium);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight);
        color: hsl(var(--web-color-secondary))
    }

    @media (min-width:1024px) {
        .web-description {
            --p-font-size: var(--web-font-size-large);
            --p-line-height: var(--web-line-height-md)
        }
    }

    .web-label {
        --p-font-family: var(--web-font-family-aeonik-pro);
        --p-font-size: var(--web-font-size-xl);
        --p-line-height: var(--web-line-height-md);
        --p-letter-spacing: var(--web-letter-spacing-none);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    .web-title {
        --p-font-family: var(--web-font-family-aeonik-pro);
        --p-font-size: var(--web-font-size-xxl);
        --p-line-height: var(--web-line-height-lg);
        --p-letter-spacing: var(--web-letter-spacing-squeezed);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    @media (min-width:1280px) {
        .web-title {
            --p-line-height: var(--web-line-height-big);
            --p-font-size: var(--web-font-size-xxxl)
        }
    }

    .web-display {
        --p-font-family: var(--web-font-family-aeonik-pro);
        --p-font-size: var(--web-font-size-big);
        --p-line-height: var(--web-line-height-xl);
        --p-letter-spacing: var(--web-letter-spacing-compressed);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    @media (min-width:1024px) {
        .web-display {
            --p-font-size: var(--web-font-size-super);
            --p-line-height: var(--web-line-height-xxxl)
        }
    }

    .web-headline {
        --p-font-family: var(--web-font-family-aeonik-pro);
        --p-font-size: var(--web-font-size-huge);
        --p-line-height: var(--web-line-height-xxl);
        --p-letter-spacing: var(--web-letter-spacing-compressed);
        --p-font-weight: var(--web-font-weight-regular);
        font-family: var(--p-font-family);
        font-size: var(--p-font-size);
        line-height: var(--p-line-height);
        letter-spacing: var(--p-letter-spacing);
        font-weight: var(--p-font-weight)
    }

    @media (min-width:1024px) {
        .web-headline {
            --p-font-size: var(--web-font-size-giant);
            --p-line-height: var(--web-line-height-xxxxl)
        }
    }

    .web-dot {
        --p-dot-size: 1rem;
        border-radius: var(--p-dot-size);
        border: .5px solid rgba(255, 255, 255, .16);
        background: linear-gradient(138deg, #ffffff21 9.61%, #fff0 105.41%);
        -webkit-backdrop-filter: blur(100px);
        backdrop-filter: blur(100px);
        width: var(--p-dot-size);
        height: var(--p-dot-size)
    }

    .web-dot:after {
        content: "";
        background-color: #fff;
        border-radius: 100%;
        width: 4px;
        height: 4px;
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%
    }

    .web-container {
        --p-container-size: var(--container-size, var(--container-size-normal));
        box-sizing: content-box;
        max-inline-size: var(--p-container-size);
        padding-inline: 2rem;
        margin-inline: auto
    }

    @media (max-width:1023.9px) {
        .web-container {
            padding-inline: 1.25rem
        }
    }

    .web-main-section>* {
        padding-block: 1.5rem
    }

    .web-main-section>:first-child {
        padding-block-start: 0
    }

    .web-main-section>:last-child {
        padding-block-end: 0
    }

    .web-big-padding-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr)
    }

    @media (max-width:1023.9px) {
        .web-big-padding-section-level-1 {
            padding-block: 0rem
        }

        .web-big-padding-section-level-1:first-child {
            padding-block-start: 0rem
        }
    }

    @media (min-width:1024px) {
        .web-big-padding-section-level-1 {
            padding-block: 2.5rem
        }

        .web-big-padding-section-level-1:first-child {
            padding-block-start: 0rem
        }
    }

    .web-big-padding-section-level-1:last-child {
        padding-block-end: 0 !important
    }

    .web-big-padding-section-level-1:last-child .web-big-padding-section-level-2:last-child {
        padding-block-end: 0 !important;
        margin-block-end: 0 !important
    }

    @media (max-width:1023.9px) {
        .web-big-padding-section-level-2 {
            margin-block: 3rem
        }
    }

    @media (min-width:1024px) {
        .web-big-padding-section-level-2 {
            margin-block: 7.5rem
        }
    }

    .web-big-padding-section-level-2.is-margin-replace-padding {
        margin-block: 0
    }

    @media (max-width:1023.9px) {
        .web-big-padding-section-level-2.is-margin-replace-padding {
            padding-block: 3rem
        }
    }

    @media (min-width:1024px) {
        .web-big-padding-section-level-2.is-margin-replace-padding {
            padding-block: 7.5rem
        }
    }

    .web-white-section {
        background-color: hsl(var(--web-color-greyscale-50));
        color: hsl(var(--web-color-greyscale-600))
    }

    .web-link {
        --p-link-color-text: var(--p-link-color-text-default);
        --p-link-color-text-default: var(--web-color-primary);
        --p-link-color-text-hover: var(--web-color-accent-darker);
        --p-link-color-text-active: var(--web-color-accent);
        --p-link-color-text-focus-visible: var(--web-color-accent-click);
        color: hsl(var(--p-link-color-text));
        border-radius: .25rem;
        cursor: pointer
    }

    .web-link:where(:is(:hover):not(:disabled, .is-disabled)) {
        --p-link-color-text: var(--p-link-color-text-hover)
    }

    .web-link:where(:is(:active):not(:disabled, .is-disabled)) {
        --p-link-color-text: var(--p-link-color-text-active)
    }

    .web-link:where(:disabled, .is-disabled) {
        opacity: .4;
        cursor: initial
    }

    .web-link:where(:focus-visible) {
        --p-link-color-text: var(--p-link-color-text-focus-visible);
        outline: .0625rem solid hsl(var(--p-link-color-text-focus-visible));
        outline-offset: .125rem;
        box-shadow: none
    }

    .web-link.is-inline {
        text-decoration: underline
    }

    .web-link.is-secondary {
        --p-link-color-text-default: var(--web-color-secondary)
    }

    .web-link.is-pink {
        --p-link-color-text-default: var(--web-color-accent)
    }

    .web-snap-location,
    .web-snap-location-references {
        scroll-snap-align: start;
        scroll-margin-top: 7.5rem
    }

    @media (min-width:1024px) {
        .web-snap-location-references {
            scroll-margin-top: 12.5rem
        }
    }

    .web-table {
        table-layout: fixed;
        border-collapse: collapse;
        border-style: hidden;
        min-inline-size: 100%;
        font-size: .875rem
    }

    .web-table-wrapper {
        --p-table-header-bg-color: var(--web-color-white);
        --p-table-row-bg-odd-color: var(--web-color-greyscale-25);
        --p-table-row-bg-even-color: var(--web-color-white);
        --p-table-border-color: var(--web-color-greyscale-50)
    }

    .theme-dark .web-table-wrapper {
        --p-table-header-bg-color: var(--web-color-greyscale-850);
        --p-table-row-bg-odd-color: var(--web-color-greyscale-900);
        --p-table-row-bg-even-color: var(--web-color-greyscale-850);
        --p-table-border-color: var(--web-color-greyscale-800)
    }

    .web-table-scroll {
        overflow-x: auto;
        border: solid .0625rem hsl(var(--p-table-border-color));
        border-radius: .5rem
    }

    @media (max-width:1023.9px) {
        .web-table-scroll {
            border-width: 0
        }
    }

    .web-table-header {
        background-color: hsl(var(--p-table-header-bg-color));
        line-height: 1
    }

    .web-table-body .web-table-row>* {
        border-block-start: solid .0625rem hsl(var(--p-table-border-color))
    }

    .web-table-body .web-table-row:nth-child(odd) {
        background-color: hsl(var(--p-table-row-bg-odd-color))
    }

    .web-table-body .web-table-row:nth-child(2n) {
        background-color: hsl(var(--p-table-row-bg-even-color))
    }

    .web-table-head-col {
        padding: .75rem;
        min-inline-size: 11.25rem
    }

    .web-table-col {
        padding-block: 1.1875rem;
        padding-inline: .75rem
    }

    .web-table-col img {
        max-inline-size: none;
        max-block-size: none
    }

    .web-table-scroll:where(.is-remove-outer-styles) {
        border-width: 0;
        --p-table-header-bg-color: 0 0 0 / 0;
        --p-table-row-bg-odd-color: 0 0 0 / 0;
        --p-table-row-bg-even-color: 0 0 0 / 0;
        border-block-end: solid .0625rem hsl(var(--p-table-border-color))
    }

    .web-table-scroll:where(.is-remove-outer-styles) .web-table-head-col {
        padding-block-start: .5rem;
        padding-block-end: 1rem
    }

    .web-table-scroll:where(.is-remove-outer-styles) .web-table-col {
        padding-block: 1rem
    }

    .web-table-scroll:where(.is-remove-outer-styles) .web-table-head-col:first-child {
        padding-inline-start: 0
    }

    .web-table-scroll:where(.is-remove-outer-styles) .web-table-col:first-child {
        padding-inline-start: 0
    }

    .web-table-line {
        inline-size: 100%
    }

    .web-table-line-row {
        border-block-end: solid .0625rem hsl(var(--web-color-smooth))
    }

    .web-table-line-cell:nth-child(n+2) {
        padding-inline-start: 1.5rem
    }

    .web-table-line-head .web-table-line-cell {
        padding-block-end: 1rem
    }

    .web-table-line-body .web-table-line-row:last-child {
        border-block-end-width: 0
    }

    .web-table-line-body .web-table-line-cell {
        padding-block: 2rem
    }

    .web-order-list-level-1 {
        counter-reset: level-1
    }

    .web-order-list-level-1 li:before {
        counter-increment: level-1;
        content: counter(level-1) ". "
    }

    .web-order-list-level-2 {
        padding-inline-start: 1.5rem;
        counter-reset: level-2
    }

    .web-order-list-level-2 li:before {
        counter-increment: level-2;
        content: counter(level-2, lower-alpha) ". "
    }

    .web-icon-button {
        --p-icon-button-font-color: var(--p-icon-button-font-color-default);
        --p-icon-button-bg-color: var(--p-icon-button-bg-color-default);
        --p-icon-button-border-color: var(--p-icon-button-border-color-default);
        --p-icon-button-shadow-color: var(--p-icon-button-border-color-default);
        position: relative;
        display: flex;
        gap: .25rem;
        block-size: 1.75rem;
        inline-size: 1.75rem;
        border-radius: .5rem;
        -webkit-backdrop-filter: blur(.46875rem);
        backdrop-filter: blur(.46875rem);
        color: hsl(var(--p-icon-button-font-color));
        background-color: hsl(var(--p-icon-button-bg-color));
        border: .0625rem solid hsl(var(--p-icon-button-border-color));
        box-shadow: 0 0 0 .25rem hsl(var(--p-icon-button-shadow-color)/.16);
        --p-icon-button-font-color-default: var(--web-color-primary);
        --p-icon-button-font-color-hover: var(--web-color-accent-click);
        --p-icon-button-font-color-active: var(--web-color-accent-click);
        --p-icon-button-font-color-focus: var(--web-color-greyscale-900);
        --p-icon-button-bg-color-default: var(--web-color-smooth);
        --p-icon-button-bg-color-hover: var(--web-color-offset);
        --p-icon-button-bg-color-active: var(--web-color-smooth);
        --p-icon-button-bg-color-focus: var(--web-color-offset);
        --p-icon-button-border-color-default: transparent;
        --p-icon-button-border-color-focus: var(--web-color-pink-500);
        --p-icon-button-shadow-color-default: transparent;
        --p-icon-button-shadow-color-focus: var(--web-color-pink-500)
    }

    .web-icon-button>[class*=icon]:before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .web-icon-button.is-more-content {
        inline-size: fit-content;
        padding: .25rem;
        line-height: 1.125rem
    }

    .web-icon-button.is-more-content>[class*=icon] {
        position: relative;
        inline-size: 1rem
    }

    .web-icon-button:disabled {
        opacity: .4;
        cursor: not-allowed
    }

    .web-icon-button:hover:not(:disabled) {
        --p-icon-button-font-color: var(--p-icon-button-font-color-hover);
        --p-icon-button-bg-color: var(--p-icon-button-bg-color-hover)
    }

    .web-icon-button:active:not(:disabled) {
        --p-icon-button-font-color: var(--p-icon-button-font-color-active);
        --p-icon-button-bg-color: var(--p-icon-button-bg-color-active)
    }

    .web-icon-button:focus-visible:not(:disabled) {
        --p-icon-button-font-color: var(--p-icon-button-font-color-focus);
        --p-icon-button-bg-color: var(--p-icon-button-bg-color-focus);
        --p-icon-button-border-color: var(--p-icon-button-border-color-focus);
        --p-icon-button-shadow-color: var(--p-icon-button-shadow-color-focus)
    }

    .theme-dark .web-icon-button {
        --p-icon-button-font-color-focus: var(--web-color-greyscale-50);
        --p-icon-button-border-color-focus: var(--web-color-greyscale-100);
        --p-icon-button-shadow-color-focus: var(--web-color-white)
    }

    .theme-light .web-icon-button {
        --p-icon-button-font-color-default: var(--web-color-primary);
        --p-icon-button-font-color-hover: var(--web-color-accent-click);
        --p-icon-button-font-color-active: var(--web-color-accent-click);
        --p-icon-button-font-color-focus: var(--web-color-greyscale-900);
        --p-icon-button-bg-color-default: var(--web-color-smooth);
        --p-icon-button-bg-color-hover: var(--web-color-offset);
        --p-icon-button-bg-color-active: var(--web-color-smooth);
        --p-icon-button-bg-color-focus: var(--web-color-offset);
        --p-icon-button-border-color-default: transparent;
        --p-icon-button-border-color-focus: var(--web-color-pink-500);
        --p-icon-button-shadow-color-default: transparent;
        --p-icon-button-shadow-color-focus: var(--web-color-pink-500)
    }

    .web-hero-banner-button {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-gradient-before: linear-gradient(to bottom, rgba(253, 54, 110, .48) 0%, rgba(253, 54, 110, 0) 180%);
        --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% -0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
        --m-border-radius: .875rem;
        --p-hero-button-text-color: var(--p-hero-button-text-color-default);
        --p-hero-button-bg-color: var(--p-hero-button-bg-color-default);
        --p-hero-button-border-color: var(--p-hero-button-border-color-default);
        --p-hero-button-shadow-out-color: var(--p-hero-button-shadow-out-color-default);
        --p-hero-button-sep-color: var(--p-hero-button-sep-color-default);
        --p-hero-button-text-color-default: var(--web-color-pink-500);
        --p-hero-button-bg-color-default: var(--web-color-pink-500) / .08;
        --p-hero-button-border-color-default: var(--web-color-pink-500) / .4;
        --p-hero-button-shadow-out-color-default: var(--transparent);
        --p-hero-button-sep-color-default: var(--web-color-black) / .08;
        --p-hero-button-bg-color-hover: var(--web-color-pink-500) / .1;
        --p-hero-button-bg-color-active: var(--web-color-pink-500) / .12;
        --p-hero-button-shadow-out-color-focus: var(--web-color-pink-500) / .24;
        display: flex;
        align-items: baseline;
        gap: .25rem;
        padding-block: .25rem;
        padding-inline: .5rem;
        inline-size: fit-content;
        background: hsl(var(--p-hero-button-bg-color));
        line-height: 1.25rem;
        color: hsl(var(--p-hero-button-text-color));
        box-shadow: 0 0 0 .25rem hsl(var(--p-hero-button-shadow-out-color))
    }

    .web-hero-banner-button:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-hero-banner-button:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-hero-banner-button>* {
        min-inline-size: 0
    }

    .web-hero-banner-button [class*=icon] {
        align-self: center
    }

    .web-hero-banner-button-sep {
        inline-size: .0625rem;
        block-size: 1rem;
        align-self: center;
        margin-inline: .25rem;
        background-color: hsl(var(--p-hero-button-sep-color))
    }

    .web-hero-banner-button:hover:not(:disabled) {
        --p-hero-button-bg-color: var(--p-hero-button-bg-color-hover)
    }

    .web-hero-banner-button:active:not(:disabled) {
        --p-hero-button-bg-color: var(--p-hero-button-bg-color-active)
    }

    .web-hero-banner-button:focus-visible {
        --p-hero-button-shadow-out-color: var(--p-hero-button-shadow-out-color-focus)
    }

    .web-hero-banner-button:disabled {
        opacity: .4
    }

    .theme-dark .web-hero-banner-button {
        --p-hero-button-text-color-default: var(--web-color-white);
        --p-hero-button-bg-color-default: var(--web-color-pink-500) / .08;
        --p-hero-button-border-color-default: var(--web-color-pink-500);
        --p-hero-button-sep-color-default: var(--web-color-white) / .1;
        --p-hero-button-shadow-out-color-focus: var(--web-color-pink-500) / .16
    }


    .web-main-footer .u-flex {
        justify-content: flex-start; /* Aligns items to the left */
    }
    
    .web-badges {
        --p-badges-shadow-bg-color: #f2c8d6;
        --p-badges-shadow-border-color: #f69db7;
        --p-badges-shadowopacity: .4;
        align-self: center;
        color: hsl(var(--color-neutral-0));
        padding-block: .375rem;
        padding-inline: .75rem;
        border-radius: .375rem;
        background: radial-gradient(98.13% 199.7% at 98.13% 100%, #fe6947, #f90b0b 41.6%, #f90b0b);
        -webkit-backdrop-filter: blur(2.5rem);
        backdrop-filter: blur(2.5rem);
        box-shadow: .1875rem .1875rem var(--p-badges-shadow-bg-color), .25rem .1875rem var(--p-badges-shadow-border-color), .1875rem .25rem var(--p-badges-shadow-border-color), .125rem .1875rem var(--p-badges-shadow-border-color), .1875rem .125rem var(--p-badges-shadow-border-color)
    }

    .theme-dark .web-badges {
        --p-badges-shadow-bg-color: #2c2c2f;
        --p-badges-shadow-border-color: #39393c;
        --p-badges-shadowopacity: .13
    }

    .theme-light .web-badges {
        --p-badges-shadow-bg-color: #f2c8d6;
        --p-badges-shadow-border-color: #f69db7;
        --p-badges-shadowopacity: .4
    }

    .web-numeric-badge {
        --p-numeric-badge-text-color: var(--web-color-pink-500);
        --p-numeric-badge-bg-color: calc(var(--web-color-pink-hue) - 5) 62% 95%;
        --p-numeric-badge-border-color: calc(var(--web-color-pink-hue) - 1) 90% 84%;
        color: hsl(var(--p-numeric-badge-text-color));
        background: hsl(var(--p-numeric-badge-bg-color));
        border: .0625rem solid hsl(var(--p-numeric-badge-border-color));
        display: grid;
        place-content: center;
        min-inline-size: 1.5rem;
        block-size: 1.5rem;
        padding-inline: .375rem;
        border-radius: .375rem;
        font-size: .875rem;
        -webkit-user-select: none;
        user-select: none
    }

    .theme-dark .web-numeric-badge {
        --p-numeric-badge-text-color: var(--web-color-greyscale-100);
        --p-numeric-badge-bg-color: calc(var(--web-color-pink-hue) - 13) 23% 14%;
        --p-numeric-badge-border-color: calc(var(--web-color-pink-hue) - 2) 51% 29%
    }

    .web-tag {
        --p-tag-text-color: var(--web-color-primary);
        --p-tag-bg-color: var(--web-color-greyscale-100);
        color: hsl(var(--p-tag-text-color));
        background-color: hsl(var(--p-tag-bg-color));
        display: flex;
        align-items: center;
        gap: .25rem;
        block-size: 100%;
        padding-block: .25rem;
        padding-inline: .5rem;
        border-radius: .75rem;
        font-size: var(--web-font-size-micro);
        line-height: var(--web-line-height-tiny)
    }

    .theme-light .web-tag {
        --p-tag-bg-color: var(--web-color-greyscale-100)
    }

    .theme-dark .web-tag {
        --p-tag-bg-color: var(--web-color-greyscale-750)
    }

    .web-interactive-tag {
        display: flex;
        gap: .125rem;
        padding-inline: .625rem;
        padding-block: .1875rem;
        border: 1px solid transparent;
        border-radius: .875rem;
        -webkit-backdrop-filter: blur(.46875rem);
        backdrop-filter: blur(.46875rem);
        background: hsl(var(--web-color-smooth));
        color: hsl(var(--web-color-primary))
    }

    .web-interactive-tag:focus-visible:not(:disabled) {
        border-color: hsl(var(--web-color-accent-click));
        background: hsl(var(--web-color-offset));
        box-shadow: 0 0 0 .25rem #f90b0b29
    }

    .web-interactive-tag:hover:not(:disabled) {
        background: hsl(var(--web-color-offset));
        -webkit-backdrop-filter: blur(.46875rem);
        backdrop-filter: blur(.46875rem);
        color: hsl(var(--web-color-accent-click))
    }

    .web-interactive-tag:active:not(:disabled) {
        background: hsl(var(--web-color-smooth));
        -webkit-backdrop-filter: blur(.46875rem);
        backdrop-filter: blur(.46875rem);
        color: hsl(var(--web-color-accent-click))
    }

    .theme-dark .web-interactive-tag:focus-visible:not(:disabled) {
        border-color: hsl(var(--web-color-primary));
        background: hsl(var(--web-color-offset));
        box-shadow: 0 0 0 .25rem #ffffff29;
        color: hsl(var(--web-color-accent-click))
    }

    .theme-dark .web-interactive-tag:hover:not(:disabled) {
        background: hsl(var(--web-color-offset));
        color: hsl(var(--web-color-accent-click))
    }

    .theme-dark .web-interactive-tag:active:not(:disabled) {
        background: hsl(var(--web-color-smooth));
        color: hsl(var(--web-color-accent-click))
    }

    .theme-light .web-interactive-tag:focus-visible:not(:disabled) {
        border-color: hsl(var(--web-color-accent-click));
        background: hsl(var(--web-color-offset));
        box-shadow: 0 0 0 .25rem #f90b0b29
    }

    .theme-light .web-interactive-tag:hover:not(:disabled) {
        background: hsl(var(--web-color-offset));
        -webkit-backdrop-filter: blur(.46875rem);
        backdrop-filter: blur(.46875rem);
        color: hsl(var(--web-color-accent-click))
    }

    .theme-light .web-interactive-tag:active:not(:disabled) {
        background: hsl(var(--web-color-smooth));
        -webkit-backdrop-filter: blur(.46875rem);
        backdrop-filter: blur(.46875rem);
        color: hsl(var(--web-color-accent-click))
    }

    .web-interactive-tag:disabled {
        opacity: .4;
        cursor: not-allowed
    }

    .web-btn-tag {
        --p-tag-text-color: var(--web-color-primary);
        --p-tag-bg-color: var(--web-color-greyscale-100);
        --p-tag-border-color: var(--p-tag-bg-color);
        color: hsl(var(--p-tag-text-color));
        background-color: hsl(var(--p-tag-bg-color));
        border: 1px solid hsl(var(--p-tag-border-color));
        padding-block: .25rem;
        padding-inline: .5rem;
        border-radius: .75rem;
        font-size: var(--web-font-size-micro);
        line-height: var(--web-line-height-tiny)
    }

    .theme-dark .web-btn-tag {
        --p-tag-bg-color: var(--web-color-greyscale-750)
    }

    .theme-dark .web-btn-tag:where(:hover) {
        --p-tag-bg-color: var(--web-color-greyscale-700)
    }

    .theme-dark .web-btn-tag:where(:active) {
        --p-tag-bg-color: var(--web-color-greyscale-800)
    }

    .theme-dark .web-btn-tag:where(.is-selected) {
        --p-tag-border-color: var(--web-color-white)
    }

    .theme-dark .web-btn-tag:where(:disabled) {
        --p-tag-bg-color: var(--web-color-greyscale-800)
    }

    .web-inline-tag {
        --p-inline-tag-text: var(--web-color-primary);
        --p-inline-tag-bg: var(--web-color-primary);
        --p-inline-tag-bg-opacity: .08;
        display: grid;
        place-items: center;
        padding-block: .1875rem;
        padding-inline: .25rem;
        border-radius: .25rem;
        line-height: 1;
        color: hsl(var(--p-inline-tag-text));
        background-color: hsl(var(--p-inline-tag-bg)/var(--p-inline-tag-bg-opacity))
    }

    .web-inline-tag.is-pink {
        --p-inline-tag-text: var(--web-color-pink-500);
        --p-inline-tag-bg: var(--web-color-pink-500);
        --p-inline-tag-bg-opacity: .1
    }

    .theme-dark .web-inline-tag.is-pink {
        --p-inline-tag-bg-opacity: .24;
        --p-inline-tag-text: var(--web-color-greyscale-50)
    }

    .theme-light .web-inline-tag.is-pink {
        --p-inline-tag-text: var(--web-color-pink-500);
        --p-inline-tag-bg: var(--web-color-pink-500);
        --p-inline-tag-bg-opacity: .1
    }

    .web-card {
        --p-card-padding: var(--card-padding, 1.5rem);
        --p-card-border-radius: var(--card-border-radius, var(--border-radius-medium))
    }

    .web-card.is-normal {
        --p-card-bg-color: var(--p-card-bg-color-default);
        --p-card-bg-color-default: var(--web-color-card);
        --p-card-bg-color-hover: var(--web-color-smooth);
        --p-card-border-color: var(--p-card-border-color-default);
        --p-card-border-color-default: var(--web-color-offset);
        --p-card-shadow-color: var(--p-card-shadow-color-default);
        --p-card-shadow-color-default: var(--web-color-black) / 0;
        --p-card-shadow-color-focus-visible: var(--web-color-pink-500) / .72;
        --card-padding: 1rem;
        display: block;
        background-color: hsl(var(--p-card-bg-color));
        border: solid .0625rem hsl(var(--p-card-border-color));
        padding: var(--p-card-padding);
        border-radius: var(--p-card-border-radius)
    }

    .web-card.is-normal:where(a, button) {
        cursor: pointer;
        box-shadow: 0 0 0 .3125rem hsl(var(--p-card-shadow-color));
        transition: var(--transition)
    }

    .web-card.is-normal:where(a, button):where(:hover, :active, :focus):not(:disabled, .is-disabled) {
        --p-card-bg-color: var(--p-card-bg-color-hover)
    }

    .web-card.is-normal:where(a, button):where(:focus-visible):not(:disabled, .is-disabled) {
        --p-card-border-color: var(--transparent);
        --p-card-shadow-color: var(--p-card-shadow-color-focus-visible)
    }

    .web-card.is-normal:where(a, button):where(:disabled, .is-disabled) {
        opacity: .4
    }

    .theme-dark .web-card.is-normal {
        --p-card-border-color-default: var(--web-color-white) / .1;
        --p-card-shadow-color-focus-visible: var(--web-color-white) / .06
    }

    .web-card.is-white {
        display: flex;
        flex-direction: column;
        padding: var(--p-card-padding);
        background: linear-gradient(360deg, #ffffffe6, #ffffffa3);
        -webkit-backdrop-filter: blur(.75rem);
        backdrop-filter: blur(.75rem);
        border-radius: var(--p-card-border-radius)
    }

    .web-card.is-transparent {
        --p-card-padding: var(--card-padding, 2rem);
        padding: var(--p-card-padding);
        border: solid .0625rem rgba(255, 255, 255, .12);
        border-radius: 1rem;
        background: linear-gradient(136deg, #ffffff0a, #ffffff0a 30.91%, #fff0 100%, #ffffff03);
        -webkit-backdrop-filter: blur(6.25rem);
        backdrop-filter: blur(6.25rem)
    }

    .web-card.is-transparent-pink {
        background: linear-gradient(180deg, #f90b0b0a 61.28%, #f90b0b00);
        border-color: hsl(var(--web-color-pink-500)/.5)
    }

    .web-card.is-full-color {
        --card-bg-color: var(--web-color-white);
        padding: var(--p-card-padding, 1.25rem);
        border-radius: 1rem;
        background-color: hsl(var(--card-bg-color)/.9);
        border: solid .0625rem hsl(var(--web-color-subtle));
        -webkit-backdrop-filter: blur(.5rem);
        backdrop-filter: blur(.5rem)
    }

    .theme-dark .web-card.is-full-color {
        --card-bg-color: var(--web-color-greyscale-850)
    }

    .theme-light .web-card.is-full-color {
        --card-bg-color: var(--web-color-white)
    }

    .web-card.has-border-gradient {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-radius: var(--p-card-border-radius);
        --m-border-size: .0625rem;
        border: none;
        --m-border-gradient-before: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%)
    }

    .web-card.has-border-gradient:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-card.has-border-gradient:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-card.has-border-gradient.is-transparent-pink {
        --m-border-gradient-before: linear-gradient(180deg, rgba(253, 54, 110, .48) 0%, rgba(253, 54, 110, 0) 100%);
        --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%)
    }

    @media (max-width:1023.9px) {
        .web-card {
            --p-card-padding: var(--card-padding-mobile, 1.5rem)
        }
    }

    .web-list {
        --p-list-text-color: var(--web-color-greyscale-700);
        color: hsl(var(--p-list-text-color));
        display: flex;
        flex-direction: column;
        gap: .25rem
    }

    .web-list li {
        display: flex
    }

    .web-list li:before {
        content: "";
        align-self: start;
        inline-size: .5rem;
        block-size: .0625rem;
        margin-inline: .375rem;
        margin-block-start: .75rem;
        background-color: currentColor
    }

    .theme-dark .web-list {
        --p-list-text-color: var(--web-color-greyscale-300)
    }

    .web-numeric-list {
        --p-list-text-color: var(--web-color-greyscale-700);
        display: flex;
        flex-direction: column;
        gap: .5rem;
        color: hsl(var(--p-list-text-color));
        counter-reset: numeric-list
    }

    .web-numeric-list li:before {
        color: hsl(var(--web-color-accent-click));
        padding-inline-end: .75rem;
        line-height: var(--web-line-height-md)
    }

    .web-numeric-list li {
        display: flex
    }

    .web-numeric-list li:before {
        counter-increment: numeric-list;
        content: counter(numeric-list);
        align-self: start
    }

    .web-numeric-list .web-numeric-list {
        counter-reset: numeric-list-level-2;
        padding-inline-start: 1.5rem
    }

    .web-numeric-list .web-numeric-list li:before {
        color: revert;
        counter-increment: numeric-list-level-2;
        content: counter(numeric-list-level-2, upper-latin)
    }

    .web-numeric-list .web-numeric-list .web-numeric-list {
        counter-reset: numeric-list-level-3
    }

    .web-numeric-list .web-numeric-list .web-numeric-list li:before {
        counter-increment: numeric-list-level-3;
        content: counter(numeric-list-level-3, lower-latin)
    }

    .theme-dark .web-numeric-list {
        --p-list-text-color: var(--web-color-greyscale-300)
    }

    .web-checked-list {
        --p-list-text-color: var(--web-color-greyscale-700);
        color: hsl(var(--p-list-text-color));
        display: flex;
        flex-direction: column;
        gap: .5rem;
        counter-reset: numeric-list
    }

    .web-checked-list li {
        display: flex;
        gap: .5rem
    }

    .web-checked-list [type=checkbox] {
        cursor: initial
    }

    .theme-dark .web-checked-list {
        --p-list-text-color: var(--web-color-greyscale-300)
    }

    .web-checked-list-circle {
        display: flex;
        flex-direction: column;
        gap: 1.25rem
    }

    .web-checked-list-circle li {
        display: flex;
        align-items: start;
        gap: .5rem
    }

    .web-checked-list-circle li:before {
        content: "";
        display: block;
        inline-size: 1.25rem;
        min-inline-size: 1.25rem;
        block-size: 1.5rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOCIgZmlsbD0iI0ZEMzY2RSIgZmlsbC1vcGFjaXR5PSIwLjA4IiBzdHJva2U9IiNGRDM2NkUiIHN0cm9rZS1vcGFjaXR5PSIwLjMyIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik02LjI1IDExLjVMOC43NSAxMy41TDEzLjc1IDciIHN0cm9rZT0iI0U0RTRFNyIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
        background-position-y: center
    }

    .web-pink-dots {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        list-style: disc;
        padding-inline-start: 1.5rem
    }

    .web-pink-dots>li {
        display: list-item;
        list-style-type: disc
    }

    .web-pink-dots>li::marker {
        content: revert;
        color: hsl(var(--web-color-pink-500))
    }

    .web-pink-dots .web-pink-dots {
        margin-block-start: 0 !important
    }

    .web-pink-dots .web-pink-dots>li {
        list-style-type: circle
    }

    .web-pink-dots .web-pink-dots .web-pink-dots>li {
        list-style-type: disclosure-closed
    }

    .web-pink-dots .web-pink-dots .web-pink-dots>li::marker {
        font-size: .8em
    }

    .web-inline-code {
        --p-inline-code-text-color: var(--web-color-secondary);
        --p-inline-code-bg-color: var(--web-color-smooth);
        color: hsl(var(--p-inline-code-text-color));
        background-color: hsl(var(--p-inline-code-bg-color));
        display: inline-flex;
        padding-inline: .25rem;
        padding-block: .0625rem;
        border-radius: .25rem;
        font-family: var(--web-font-family-fira-code);
        word-break: break-word
    }

    .web-kbd {
        --p-kbd-text-color: var(--web-color-greyscale-700);
        --p-kbd-bg-color: var(--web-color-black) / .08;
        color: hsl(var(--p-kbd-text-color));
        background-color: hsl(var(--p-kbd-bg-color));
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-inline-size: 1.5rem;
        block-size: 1.5rem;
        padding-inline: .21875rem;
        border-radius: .25rem;
        flex-shrink: 0;
        -webkit-user-select: none;
        user-select: none
    }

    .theme-dark .web-kbd {
        --p-kbd-text-color: var(--web-color-greyscale-100);
        --p-kbd-bg-color: var(--web-color-white) / .18
    }

    .web-box-icon {
        --p-box-icon-bg-color: var(--web-color-white);
        --p-box-icon-shadow: 0px 5.352085113525391px 10.704170227050781px 0px rgba(0, 0, 0, .02);
        background-color: hsl(var(--p-box-icon-bg-color));
        box-shadow: var(--p-box-icon-shadow);
        display: grid;
        place-items: center;
        inline-size: 3.5rem;
        block-size: 3.5rem;
        border-radius: .5rem;
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem)
    }

    .theme-dark .web-box-icon {
        --p-box-icon-bg-color: var(--web-color-greyscale-850)
    }

    .web-box-icon.has-border-gradient {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-radius: .5rem;
        --m-border-size: .0625rem;
        border: none;
        --m-border-gradient-before: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%)
    }

    .web-box-icon.has-border-gradient:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-box-icon.has-border-gradient:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-box-icon.has-border-gradient.is-transparent-pink {
        --m-border-gradient-before: linear-gradient(180deg, rgba(253, 54, 110, .48) 0%, rgba(253, 54, 110, 0) 100%);
        --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%)
    }

    .web-metadata {
        display: flex;
        color: hsl(var(--web-color-secondary))
    }

    .web-metadata>* {
        display: flex
    }

    .web-metadata>*:nth-child(n+2):before {
        content: "•";
        display: block;
        margin-inline: .25rem
    }

    .web-metadata button>* {
        vertical-align: super
    }

    .web-media {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-gradient-before: linear-gradient(186deg, rgba(255, 255, 255, .16) -1.41%, rgba(255, 255, 255, 0) 104.86%);
        --m-border-radius: 1rem;
        --p-media-bg: linear-gradient(113deg, rgba(255, 255, 255, .1) -1.78%, rgba(255, 255, 255, .06) 62.5%, rgba(255, 255, 255, .1) 103.4%);
        background: var(--p-media-bg);
        padding: .5rem;
        border: solid .0625rem hsl(var(--p-media-border-color));
        border-radius: 1rem;
        -webkit-backdrop-filter: blur(1.875rem);
        backdrop-filter: blur(1.875rem)
    }

    .web-media:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-media:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-media>* {
        display: block;
        border-radius: .75rem
    }

    .theme-dark .web-media {
        --media-bg: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .06) 61.12%, rgba(255, 255, 255, .1) 100%)
    }

    .theme-light .web-media {
        --p-media-bg: linear-gradient(113deg, rgba(0, 0, 0, .1) -1.78%, rgba(0, 0, 0, .06) 62.5%, rgba(0, 0, 0, .1) 103.4%)
    }

    .web-media-container {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-gradient-before: linear-gradient(186deg, rgba(255, 255, 255, .16) -1.41%, rgba(255, 255, 255, 0) 104.86%);
        --p-media-container-border-radius: 1.5rem;
        --m-border-radius: var(--p-media-container-border-radius);
        --p-media-container-border-padding: .5rem;
        --p-media-border-radius: calc(var(--p-media-container-border-radius) - var(--p-media-container-border-padding));
        padding: var(--p-media-container-border-padding);
        border-radius: var(--p-media-container-border-radius);
        background: linear-gradient(135deg, #ffffff1a, #ffffff0f 61.12%, #ffffff1a);
        -webkit-backdrop-filter: blur(1.5625rem);
        backdrop-filter: blur(1.5625rem)
    }

    .web-media-container:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-media-container:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-media-container>* {
        display: block;
        border-radius: var(--p-media-border-radius);
        overflow: hidden;
        width: 100%;
        object-fit: cover
    }

    .web-gradient-text {
        display: block;
        background: linear-gradient(6deg, #f8a1ba, #fff 35%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .web-mini-card {
        --p-mini-card-bg-color: var(--web-color-white);
        --p-mini-card-border-color: var(--web-color-greyscale-100);
        padding: .625rem;
        padding-inline-start: 1rem;
        background-color: hsl(var(--p-mini-card-bg-color));
        border: solid .0625rem hsl(var(--p-mini-card-border-color));
        border-radius: 1rem
    }

    .web-tooltip {
        --p-tooltip-bg: rgba(47, 48, 49, 1);
        --p-tooltip-color: rgba(228, 228, 231, 1);
        font-size: 1rem;
        color: var(--p-tooltip-color);
        background-color: var(--p-tooltip-bg);
        padding: .5rem .75rem;
        border-radius: .5rem;
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem);
        box-shadow: 0 .0625rem 1.25rem .1875rem #0000001a;
        z-index: 999
    }

    .web-check-bullet {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        inline-size: 1.125rem;
        block-size: 1.125rem;
        background-color: hsl(var(--web-color-pink-500)/.08);
        border: solid .0625rem hsl(var(--web-color-pink-500)/.32);
        border-radius: 50%
    }

    .web-check-bullet:before {
        content: "";
        display: block;
        inline-size: .625rem;
        block-size: .625rem;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEwIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjI1IDUuNUwzLjc1IDcuNUw4Ljc1IDEiIHN0cm9rZT0iI0U0RTRFNyIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
        background-repeat: no-repeat;
        background-position: center center
    }

    .web-button {
        --m-border-radius: var(--border-radius-small);
        --m-border-size: .0625rem;
       /** background: linear-gradient(135deg, hsl(var(--web-color-pink-500)), hsl(var(--web-color-pink-500)) 61%, hsl(var(--web-color-secondary-100))); **/
        background: linear-gradient(135deg, hsl(0deg 100% 50%), hsl(0deg 100% 32.91%) 61%, hsl(351deg 100% 50%));
        background-origin: border-box;
        display: flex;
        inline-size: fit-content;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        padding-inline: .875rem;
        padding-block: .4375rem;
        min-block-size: 2.5rem;
        border-radius: var(--m-border-radius);
        border: solid var(--m-border-size) transparent;
        text-align: center;
        transition: var(--transition);
        -webkit-user-select: none;
        user-select: none;
        color: hsl(var(--web-color-white));
        font-weight: 500;
        text-decoration: none !important
    }

    .web-button [class*=icon] {
        line-height: 1
    }

    .web-button .web-inline-tag {
        margin-inline-end: -.125rem;
        background: #ffffff3d
    }

    .web-button:where(:hover):where(:not(:disabled, .is-disabled)) {
        box-shadow: 0 0 2rem #82000052
    }

    .web-button:where(:active):where(:not(:disabled, .is-disabled)) {
        box-shadow: 0 0 2rem #f90b0b3d
    }

    .web-button:where(:focus-visible) {
        box-shadow: 0 0 0 .25rem #f90b0b3d
    }

    .web-button:where(:focus-visible) .theme-dark {
        box-shadow: 0 0 0 .25rem #f90b0b7a
    }

    .web-button:where(:disabled, .is-disabled) {
        opacity: .4;
        cursor: initial
    }

    .web-button.is-secondary {
        background-image: none;
        border-width: 0;
        position: relative;
        border-radius: var(--m-border-radius);
        background: #f90b0b14;
        box-shadow: none;
        color: hsl(var(--web-color-accent-click));
        --m-border-gradient-before: linear-gradient(180deg, rgba(253, 54, 110, .19) 0%, rgba(253, 54, 110, .48) 100%);
        --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%)
    }

    .web-button.is-secondary:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-button.is-secondary:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-button.is-secondary .web-inline-tag {
        background: #ff40781a;
        color: hsl(var(--web-color-pink-500))
    }

    .web-button.is-secondary:where(:hover):not(:disabled) {
        background: #f90b0b1a
    }

    .web-button.is-secondary:where(:active):not(:disabled) {
        background: #f90b0b1f
    }

    .web-button.is-secondary:where(:focus-visible):not(:disabled) {
        box-shadow: 0 0 0 4px #f90b0b3d
    }

    .theme-dark .web-button.is-secondary {
        background: #f90b0b0a;
        color: hsl(var(--web-color-greyscale-100));
        box-shadow: 0 -6px 10px #f90b0b14 inset;
        --m-border-gradient-before: linear-gradient(to bottom, rgba(253, 54, 110, .48) 0%, rgba(253, 54, 110, 0) 180%);
        --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% -0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%)
    }

    .theme-dark .web-button.is-secondary [class*=icon] {
        color: hsl(var(--web-color-pink-500))
    }

    .theme-dark .web-button.is-secondary .web-inline-tag {
        background: #ff40783d;
        color: hsl(var(--web-color-greyscale-50))
    }

    .theme-dark .web-button.is-secondary:where(:hover):not(:disabled) {
        background: #f90b0b1a;
        box-shadow: 0 -6px 10px #f90b0b14 inset;
        --m-border-gradient-before: linear-gradient(180deg, rgba(253, 54, 110, .64) 0%, rgba(253, 54, 110, 0) 163.1%);
        --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%)
    }

    .theme-dark .web-button.is-secondary:where(:active):not(:disabled) {
        background: #f90b0b29;
        box-shadow: 0 -6px 10px #f90b0b14 inset;
        --m-border-gradient-before: linear-gradient(180deg, rgba(253, 54, 110, .64) 0%, rgba(253, 54, 110, 0) 163.1%);
        --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 100%)
    }

    .theme-dark .web-button.is-secondary:where(:focus-visible):not(:disabled) {
        background: #f90b0b0a;
        box-shadow: 0 0 0 4px #f90b0b29, 0 -6px 10px #f90b0b14 inset
    }

    .theme-light .web-button.is-secondary {
        background: #f90b0b14;
        box-shadow: none;
        color: hsl(var(--web-color-accent-click));
        --m-border-gradient-before: linear-gradient(180deg, rgba(253, 54, 110, .19) 0%, rgba(253, 54, 110, .48) 100%);
        --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%)
    }

    .theme-light .web-button.is-secondary .web-inline-tag {
        background: #ff40781a;
        color: hsl(var(--web-color-pink-500))
    }

    .theme-light .web-button.is-secondary:where(:hover):not(:disabled) {
        background: #f90b0b1a
    }

    .theme-light .web-button.is-secondary:where(:active):not(:disabled) {
        background: #f90b0b1f
    }

    .theme-light .web-button.is-secondary:where(:focus-visible):not(:disabled) {
        box-shadow: 0 0 0 4px #f90b0b3d
    }

    .web-button.is-transparent {
        background: #ededf029;
        border-width: 0
    }

    .web-button.is-text {
        color: hsl(var(--web-color-greyscale-700));
        background: hsl(var(--transparent));
        border-color: transparent;
        transition: none
    }

    .web-button.is-text [class*=icon] {
        opacity: .4
    }

    .web-button.is-text .web-inline-tag {
        background: #00000014;
        color: hsl(var(--web-color-greyscale-900))
    }

    .theme-dark .web-button.is-text .web-inline-tag {
        color: hsl(var(--web-color-greyscale-100))
    }

    .web-button.is-text:where(:focus) {
        box-shadow: none;
        outline: 4px solid rgba(0, 0, 0, .14)
    }

    .theme-dark .web-button.is-text:where(:focus) {
        outline: 4px solid rgba(255, 255, 255, .16)
    }

    .web-button.is-text:where(:hover, :active, [data-highlighted]):where(:not(:disabled, .is-disabled)) {
        box-shadow: none;
        color: hsl(var(--web-color-greyscale-900));
        -webkit-backdrop-filter: blur(.5rem);
        backdrop-filter: blur(.5rem)
    }

    .theme-dark .web-button.is-text:where(:hover, :active, [data-highlighted]):where(:not(:disabled, .is-disabled)) {
        color: hsl(var(--color-neutral-0))
    }

    .web-button.is-text:where(:hover, [data-highlighted]):where(:not(:disabled, .is-disabled)) {
        background: linear-gradient(135deg, #ffffff61, #ffffff82 54.74%, #ffffff61)
    }

    .web-button.is-text:where(:active):where(:not(:disabled, .is-disabled)) {
        background: linear-gradient(135deg, #fff9, #fffc 54.74%, #fff9)
    }

    .theme-dark .web-button.is-text {
        color: hsl(var(--color-neutral-0))
    }

    .theme-dark .web-button.is-text:where(:hover, [data-highlighted]):where(:not(:disabled, .is-disabled)) {
        background: linear-gradient(135deg, #ffffff0f, #ffffff1a 54.74%, #ffffff0f)
    }

    .theme-dark .web-button.is-text:where(:active):where(:not(:disabled, .is-disabled)) {
        background: linear-gradient(135deg, #ffffff17, #ffffff26 54.74%, #ffffff17)
    }

    .theme-dark .web-button.is-text .web-inline-tag {
        background: #ffffff1f
    }

    .theme-light .web-button.is-text {
        color: hsl(var(--web-color-greyscale-700))
    }

    .theme-light .web-button.is-text:where(:hover, :active, [data-highlighted]):where(:not(:disabled, .is-disabled)) {
        box-shadow: none;
        color: hsl(var(--web-color-greyscale-900));
        -webkit-backdrop-filter: blur(.5rem);
        backdrop-filter: blur(.5rem)
    }

    .theme-light .web-button.is-text:where(:hover, [data-highlighted]):where(:not(:disabled, .is-disabled)) {
        background: linear-gradient(135deg, #ffffff61, #ffffff82 54.74%, #ffffff61)
    }

    .theme-light .web-button.is-text:where(:active):where(:not(:disabled, .is-disabled)) {
        background: linear-gradient(135deg, #fff9, #fffc 54.74%, #fff9)
    }

    .theme-light .web-button.is-text .web-inline-tag {
        background: #00000014;
        color: hsl(var(--web-color-greyscale-900))
    }

    .web-button.is-only-icon {
        padding-inline: .625rem
    }

    .web-button.is-full-width {
        inline-size: 100%
    }

    @media (max-width:1023.9px) {
        .web-button.is-full-width-mobile {
            inline-size: 100%
        }
    }

    .web-input-text {
        --p-input-placeholder-text-color: var(--web-color-secondary);
        --p-input-focus-box-shadow-color: var(--web-color-black) / .1;
        --p-input-text-color-default: var(--web-color-primary);
        --p-input-bg-color-default: var(--web-color-smooth);
        --p-input-border-color-default: var(--web-color-offset);
        --p-input-text-color-hover: var(--p-input-text-color-default);
        --p-input-bg-color-hover: var(--web-color-smooth);
        --p-input-border-color-hover: var(--web-color-primary);
        --p-input-text-color-active: var(--p-input-text-color-default);
        --p-input-bg-color-active: var(--web-color-smooth);
        --p-input-border-color-active: var(--web-color-primary);
        --p-input-text-color-disabled: var(--web-color-secondary);
        --p-input-bg-color-disabled: var(--web-color-smooth);
        --p-input-border-color-disabled: var(--web-color-offset);
        --p-input-text-color-focus: var(--p-input-text-color-default);
        --p-input-bg-color-focus: var(--web-color-smooth);
        --p-input-border-color-focus: var(--web-color-primary);
        --p-input-border-color-error: var(--web-color-red-500);
        --p-input-text-color: var(--p-input-text-color-default);
        --p-input-bg-color: var(--p-input-bg-color-default);
        --p-input-border-color: var(--p-input-border-color-default);
        color: hsl(var(--p-input-text-color));
        background-color: hsl(var(--p-input-bg-color));
        border: solid .0625rem hsl(var(--p-input-border-color));
        display: flex;
        align-items: center;
        gap: .25rem;
        padding-inline: 1rem;
        padding-block: .75rem;
        border-radius: .5rem;
        font-size: 1rem;
        line-height: 1;
        white-space: nowrap
    }

    .theme-dark .web-input-text {
        --p-input-focus-box-shadow-color: var(--web-color-white) / .16;
        --p-input-text-color-default: var(--web-color-primary);
        --p-input-bg-color-default: var(--web-color-smooth);
        --p-input-border-color-default: var(--web-color-offset);
        --p-input-border-color-error-default: var(--web-color-red-500);
        --p-input-text-color-hover: var(--p-input-text-color-default);
        --p-input-bg-color-hover: var(--web-color-smooth);
        --p-input-border-color-hover: var(--web-color-primary);
        --p-input-text-color-active: var(--p-input-text-color-default);
        --p-input-bg-color-active: var(--web-color-smooth);
        --p-input-border-color-active: var(--web-color-primary);
        --p-input-text-color-disabled: var(--web-color-secondary);
        --p-input-bg-color-disabled: var(--web-color-smooth);
        --p-input-border-color-disabled: var(--web-color-offset);
        --p-input-text-color-focus: var(--p-input-text-color-default);
        --p-input-bg-color-focus: var(--web-color-smooth);
        --p-input-border-color-focus: var(--web-color-primary);
        --p-input-border-color-error: var(--web-color-red-500)
    }

    .theme-light .web-input-text {
        --p-input-placeholder-text-color: var(--web-color-secondary);
        --p-input-focus-box-shadow-color: var(--web-color-black) / .1;
        --p-input-text-color-default: var(--web-color-primary);
        --p-input-bg-color-default: var(--web-color-smooth);
        --p-input-border-color-default: var(--web-color-offset);
        --p-input-text-color-hover: var(--p-input-text-color-default);
        --p-input-bg-color-hover: var(--web-color-smooth);
        --p-input-border-color-hover: var(--web-color-primary);
        --p-input-text-color-active: var(--p-input-text-color-default);
        --p-input-bg-color-active: var(--web-color-smooth);
        --p-input-border-color-active: var(--web-color-primary);
        --p-input-text-color-disabled: var(--web-color-secondary);
        --p-input-bg-color-disabled: var(--web-color-smooth);
        --p-input-border-color-disabled: var(--web-color-offset);
        --p-input-text-color-focus: var(--p-input-text-color-default);
        --p-input-bg-color-focus: var(--web-color-smooth);
        --p-input-border-color-focus: var(--web-color-primary);
        --p-input-border-color-error: var(--web-color-red-500)
    }

    .web-input-text::placeholder {
        color: hsl(var(--p-input-placeholder-text-color))
    }

    .web-input-text.is-error,
    .web-input-text.is-warning,
    .web-input-text.is-success {
        box-shadow: none
    }

    .web-input-text:hover:where(:not(:disabled, .is-disabled)) {
        --p-input-bg-color: var(--p-input-bg-color-hover);
        --p-input-border-color: var(--p-input-border-color-hover)
    }

    .web-input-text:is(:focus) {
        --p-input-bg-color: var(--p-input-bg-color-focus);
        --p-input-border-color: var(--p-input-border-color-focus);
        box-shadow: 0 0 0 .25rem hsl(var(--p-input-focus-box-shadow-color))
    }

    .web-input-text:is(:active) {
        --p-input-bg-color: var(--p-input-bg-color-active);
        --p-input-border-color: var(--p-input-border-color-active);
        box-shadow: 0 0 0 .25rem hsl(var(--p-input-focus-box-shadow-color));
        border-width: .0625rem
    }

    .web-input-text:is(:disabled, .is-disabled) {
        --p-input-text-color: var(--p-input-text-color-disabled);
        --p-input-bg-color: var(--p-input-bg-color-disabled);
        --p-input-border-color: var(--p-input-border-color-disabled);
        opacity: .4
    }

    .web-input-text.is-error {
        --p-input-border-color: var(--p-input-border-color-error)
    }

    .web-input-text-search-wrapper {
        position: relative;
        min-inline-size: 21.875rem
    }

    .web-input-text-search-wrapper input {
        block-size: 3rem;
        padding-inline-start: 2.5rem
    }

    .web-input-text-search-wrapper .icon-search,
    .web-input-text-search-wrapper .web-icon-search {
        position: absolute;
        inset-block-start: 1rem;
        inset-inline-start: 1rem;
        line-height: 1
    }

    .web-input-text.is-reset-input-inside input {
        all: unset;
        display: block;
        inline-size: 100%;
        text-align: left
    }

    textarea.web-input-text {
        padding-inline: 1rem;
        padding-block: .75rem;
        block-size: 9.625rem
    }

    .web-subscribe-input {
        padding: .25rem;
        padding-inline-start: 1rem
    }

    .web-subscribe-input ::placeholder {
        color: hsl(var(--web-color-primary));
        opacity: .64
    }

    .web-form-list {
        display: grid
    }

    @media (min-width:1024px) {
        .web-form-list.is-two-columns {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media (min-width:1024px) {
        .web-form-item.is-column-span-2 {
            grid-column: span 2
        }
    }

    .web-input-button {
        --p-input-text-color: var(--p-input-text-color-default);
        --p-input-bg-color: var(--p-input-bg-color-default);
        --p-input-border-color: var(--p-input-border-color-default);
        --p-input-placeholder-text-color: var(--web-color-secondary);
        --p-input-focus-box-shadow-color: var(--web-color-black) / .1;
        --p-input-text-color-default: var(--web-color-secondary);
        --p-input-bg-color-default: var(--web-color-white);
        --p-input-border-color-default: var(--web-color-black) / .08;
        --p-input-text-color-hover: var(--p-input-text-color-default);
        --p-input-bg-color-hover: var(--web-color-greyscale-25);
        --p-input-border-color-hover: var(--web-color-black) / .08;
        --p-input-text-color-active: var(--p-input-text-color-default);
        --p-input-bg-color-active: var(--web-color-white);
        --p-input-border-color-active: var(--web-color-black) / .08;
        --p-input-text-color-disabled: var(--p-input-text-color-default);
        --p-input-bg-color-disabled: var(--web-color-white);
        --p-input-border-color-disabled: var(--web-color-black) / .08;
        --p-input-text-color-focus: var(--p-input-text-color-default);
        --p-input-bg-color-focus: var(--web-color-white);
        --p-input-border-color-focus: var(--web-color-greyscale-900);
        color: hsl(var(--p-input-text-color));
        background-color: hsl(var(--p-input-bg-color));
        border: solid .0625rem hsl(var(--p-input-border-color));
        display: flex;
        align-items: center;
        gap: .25rem;
        padding-inline: .75rem;
        padding-block: .5rem;
        border-radius: .5rem;
        font-size: .875rem;
        line-height: 1;
        white-space: nowrap
    }

    .theme-dark .web-input-button {
        --p-input-focus-box-shadow-color: var(--web-color-white) / .16;
        --p-input-text-color-default: var(--web-color-secondary);
        --p-input-bg-color-default: var(--web-color-white) / .08;
        --p-input-border-color-default: var(--web-color-white) / .1;
        --p-input-text-color-hover: var(--p-input-text-color-default);
        --p-input-bg-color-hover: var(--web-color-white) / .12;
        --p-input-border-color-hover: var(--web-color-white) / .1;
        --p-input-text-color-active: var(--p-input-text-color-default);
        --p-input-bg-color-active: var(--web-color-white) / .08;
        --p-input-border-color-active: var(--web-color-white) / .1;
        --p-input-text-color-disabled: var(--web-color-secondary);
        --p-input-bg-color-disabled: var(--web-color-white) / .08;
        --p-input-border-color-disabled: var(--web-color-white) / .1;
        --p-input-text-color-focus: var(--p-input-text-color-default);
        --p-input-bg-color-focus: var(--web-color-white) / .08;
        --p-input-border-color-focus: var(--web-color-primary)
    }

    .theme-light .web-input-button {
        --p-input-placeholder-text-color: var(--web-color-secondary);
        --p-input-focus-box-shadow-color: var(--web-color-black) / .1;
        --p-input-text-color-default: var(--web-color-secondary);
        --p-input-bg-color-default: var(--web-color-white);
        --p-input-border-color-default: var(--web-color-black) / .08;
        --p-input-text-color-hover: var(--p-input-text-color-default);
        --p-input-bg-color-hover: var(--web-color-greyscale-25);
        --p-input-border-color-hover: var(--web-color-black) / .08;
        --p-input-text-color-active: var(--p-input-text-color-default);
        --p-input-bg-color-active: var(--web-color-white);
        --p-input-border-color-active: var(--web-color-black) / .08;
        --p-input-text-color-disabled: var(--p-input-text-color-default);
        --p-input-bg-color-disabled: var(--web-color-white);
        --p-input-border-color-disabled: var(--web-color-black) / .08;
        --p-input-text-color-focus: var(--p-input-text-color-default);
        --p-input-bg-color-focus: var(--web-color-white);
        --p-input-border-color-focus: var(--web-color-greyscale-900)
    }

    .web-input-button::placeholder {
        color: hsl(var(--p-input-placeholder-text-color))
    }

    .web-input-button:hover:where(:not(:disabled, .is-disabled)) {
        --p-input-bg-color: var(--p-input-bg-color-hover);
        --p-input-border-color: var(--p-input-border-color-hover)
    }

    .web-input-button:is(:focus) {
        --p-input-bg-color: var(--p-input-bg-color-focus);
        --p-input-border-color: var(--p-input-border-color-focus);
        box-shadow: 0 0 0 .25rem hsl(var(--p-input-focus-box-shadow-color))
    }

    .web-input-button:is(:active) {
        --p-input-bg-color: var(--p-input-bg-color-active);
        --p-input-border-color: var(--p-input-border-color-active);
        box-shadow: 0 0 0 .25rem hsl(var(--p-input-focus-box-shadow-color));
        border-width: .0625rem
    }

    .web-input-button:is(:disabled, .is-disabled) {
        --p-input-text-color: var(--p-input-text-color-disabled);
        --p-input-bg-color: var(--p-input-bg-color-disabled);
        --p-input-border-color: var(--p-input-border-color-disabled);
        opacity: .4
    }

    .web-input-button-search-wrapper {
        position: relative;
        min-inline-size: 21.875rem
    }

    .web-input-button-search-wrapper input {
        block-size: 3rem;
        padding-inline-start: 2.5rem
    }

    .web-input-button-search-wrapper .icon-search {
        position: absolute;
        inset-block-start: 1rem;
        inset-inline-start: 1rem;
        line-height: 1
    }

    .web-radio-button {
        --p-radio-text-color: var(--p-radio-text-color-default);
        --p-radio-text-color-default: var(--web-color-secondary);
        --p-radio-text-color-hover: var(--web-color-primary);
        --p-radio-text-color-active: var(--web-color-primary);
        --p-radio-bg-color: var(--p-radio-bg-color-default);
        --p-radio-bg-color-default: var(--web-color-greyscale-900) / .04;
        --p-radio-bg-color-hover: var(--web-color-greyscale-900) / .04;
        --p-radio-bg-color-active: var(--web-color-black) / .08;
        --p-radio-box-shadow: var(--p-radio-box-shadow-default);
        --p-radio-box-shadow-default: var(--transparent);
        --p-radio-box-shadow-focus: var(--web-color-black) / .16;
        position: relative;
        all: unset;
        cursor: pointer;
        color: hsl(var(--p-radio-text-color));
        background-color: hsl(var(--p-radio-bg-color));
        display: grid;
        place-content: center;
        box-sizing: border-box;
        block-size: 1.75rem;
        inline-size: 1.75rem;
        padding: .25rem;
        border-radius: .5rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-origin: content-box
    }

    .web-radio-button:before {
        all: unset;
        content: "";
        display: block
    }

    .web-radio-button:disabled {
        opacity: .4
    }

    .web-radio-button:hover {
        --p-radio-text-color: var(--p-radio-text-color-hover);
        --p-radio-bg-color: var(--p-radio-bg-color-hover)
    }

    .web-radio-button:active {
        --p-radio-text-color: var(--p-radio-text-color-active);
        --p-radio-bg-color: var(--p-radio-bg-color-active)
    }

    .web-radio-button:focus {
        box-shadow: 0 0 0 .25rem hsl(var(--p-radio-box-shadow-focus))
    }

    .web-radio-button.is-selected {
        outline: solid .0625rem hsl(var(--p-radio-text-color))
    }

    .theme-dark .web-radio-button {
        --p-radio-bg-color-default: var(--web-color-white) / .06;
        --p-radio-bg-color-hover: var(--web-color-white) / .06;
        --p-radio-bg-color-active: var(--web-color-white) / .1;
        --p-radio-box-shadow-focus: var(--web-color-white) / .16
    }

    .web-select {
        --p-select-min-width: 8.125rem;
        all: unset;
        display: flex;
        align-items: center;
        position: relative;
        line-height: 1;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
        color: hsl(var(--web-color-primary));
        font-size: .875rem;
        min-width: var(--p-select-min-width);
        height: 1.875rem
    }

    .web-select select,
    .web-select .physical-select {
        all: unset;
        display: flex;
        align-items: center;
        padding-inline-end: 2rem;
        cursor: pointer;
        inline-size: 100%;
        height: 100%
    }

    .web-select select [class*=icon]:first-child,
    .web-select .physical-select [class*=icon]:first-child {
        margin-inline-end: .5rem;
        font-size: 20px !important
    }

    .web-select>[class*=icon]+:is(select, .physical-select) {
        padding-inline-start: 2rem
    }

    .web-select>[class*=icon]:first-child {
        position: absolute;
        inset-block: 0;
        inset-inline-start: .5rem;
        display: grid;
        place-content: center;
        pointer-events: none
    }

    .web-select [class*=icon-cheveron-] {
        position: absolute;
        inset-block: 0;
        inset-inline-end: .5rem;
        display: grid;
        place-content: center;
        pointer-events: none
    }

    .web-select.is-colored {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-radius: .5rem;
        --m-border-gradient-before: hsl(var(--web-color-greyscale-50));
        --p-select-bg-color-default: var(--web-color-white);
        --p-select-border-color-default: var(--web-color-black) / .06;
        --p-select-box-shadow-color-default: var(--transparent);
        --p-select-bg-color-hover: var(--web-color-greyscale-25);
        --p-select-border-color-hover: var(--web-color-black) / .06;
        --p-select-bg-color-sctive: var(--web-color-white);
        --p-select-border-color-active: var(--web-color-black) / .06;
        --p-select-bg-color-focus: var(--web-color-white);
        --p-select-border-color-focus: var(--web-color-greyscale-900);
        --p-select-box-shadow-color-focus: var(--web-color-black) / .1;
        --p-select-bg-color: var(--p-select-bg-color-default);
        --p-select-border-color: var(--p-select-border-color-default);
        --p-select-box-shadow-color: var(--p-select-box-shadow-color-default);
        background-color: hsl(var(--p-select-bg-color));
        box-shadow: 0 0 0 .25rem hsl(var(--p-select-box-shadow-color));
        line-height: 1.2
    }

    .web-select.is-colored:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-select.is-colored:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-select.is-colored select,
    .web-select.is-colored .physical-select {
        padding-inline: .5rem;
        padding-block: .1875rem
    }

    .web-select.is-colored:hover {
        --p-select-bg-color: var(--p-select-bg-color-hover);
        --p-select-border-color: var(--p-select-border-color-hover)
    }

    .web-select.is-colored:active {
        --p-select-bg-color: var(--p-select-bg-color-active);
        --p-select-border-color: var(--p-select-border-color-active)
    }

    .web-select.is-colored:disabled {
        opacity: .4
    }

    .web-select.is-colored:focus-visible {
        --p-select-bg-color: var(--p-select-bg-color-focus);
        --p-select-border-color: var(--p-select-border-color-focus);
        --p-select-box-shadow-color: var(--p-select-box-shadow-color-focus)
    }

    .theme-dark .web-select.is-colored {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-radius: .5rem;
        --m-border-gradient-before: linear-gradient(180deg, rgba(232, 233, 240, .51) -321.25%, rgba(232, 233, 240, 0) 136.25%);
        --p-select-bg-color-default: var(--web-color-white) / .08;
        --p-select-border-color-default: var(--web-color-white) / .1;
        --p-select-box-shadow-color-default: var(--transparent);
        --p-select-bg-color-hover: var(--web-color-white) / .12;
        --p-select-border-color-hover: var(--web-color-white) / .1;
        --p-select-bg-color-active: var(--web-color-white) / .08;
        --p-select-border-color-active: var(--web-color-white) / .1;
        --p-select-bg-color-focus: var(--web-color-white) / .08;
        --p-select-border-color-focus: var(--web-color-greyscale-100);
        --p-select-box-shadow-color-focus: var(--web-color-white) / .16
    }

    .theme-dark .web-select.is-colored:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .theme-dark .web-select.is-colored:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-select option,
    .web-select optgroup {
        background-color: #f5f5f5;
        color: #000
    }

    .web-select-menu {
        all: unset;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        color: hsl(var(--web-color-primary));
        font-size: .875rem;
        border-radius: .75rem;
        line-height: 1.2;
        box-sizing: border-box;
        padding-inline: .25rem;
        padding-block: .25rem;
        max-block-size: 18.75rem !important;
        overflow-y: auto;
        -webkit-user-select: none;
        user-select: none;
        --p-select-menu-bg-color: var(--web-color-white);
        --p-select-menu-border-color: var(--web-color-black) / .06;
        --p-select-menu-box-shadow-color: var(--transparent);
        background-color: hsl(var(--p-select-menu-bg-color));
        border: solid .0625rem hsl(var(--p-select-menu-border-color));
        box-shadow: 0 0 0 .25rem hsl(var(--p-select-menu-box-shadow-color))
    }

    .theme-dark .web-select-menu {
        --p-select-menu-bg-color: var(--web-color-greyscale-850);
        --p-select-menu-border-color: var(--web-color-white) / .1;
        --p-select-menu-box-shadow-color: var(--transparent)
    }

    .web-select-group {
        display: flex;
        flex-direction: column
    }

    .web-select-group-label {
        margin-block-end: .25rem;
        padding-inline-start: .25rem;
        font-weight: 500
    }

    .web-select-group .web-select-option {
        padding-inline-start: 1rem
    }

    .web-select-option {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-block: .25rem;
        padding-inline: .25rem;
        border-radius: .5rem;
        scroll-margin-block: .5rem;
        cursor: pointer;
        --p-select-option-bg-color-hover: var(--web-color-greyscale-25)
    }

    .theme-dark .web-select-option {
        --p-select-option-bg-color-hover: var(--web-color-white) / .12
    }

    .web-select-option:where(:hover, :focus, [data-highlighted]) {
        background-color: hsl(var(--p-select-option-bg-color-hover))
    }

    .web-select-option [class*=icon] {
        font-size: 20px !important
    }

    [type=checkbox],
    [type=radio] {
        --p-icon-color-default: var(--web-color-greyscale-100);
        --p-bg-color-default: var(--web-color-greyscale-100);
        --p-border-color-default: var(--web-color-greyscale-100);
        --p-bg-color-checked: var(--web-color-greyscale-750);
        --p-border-color-checked: var(--web-color-greyscale-750)
    }

    [type=checkbox]:where(.is-checked),
    [type=radio]:where(.is-checked) {
        --p-bg-color: var(--p-bg-color-checked);
        --p-border-color: var(--p-border-color-checked)
    }

    .theme-dark [type=checkbox],
    .theme-dark [type=radio] {
        --p-icon-color-default: var(--web-color-greyscale-100);
        --p-bg-color-default: var(--web-color-greyscale-100);
        --p-border-color-default: var(--web-color-greyscale-100);
        --p-bg-color-checked: var(--web-color-greyscale-750);
        --p-border-color-checked: var(--web-color-greyscale-750)
    }
}

@layer components {
    .web-mobile-header {
        --p-mobile-header-border-color: rgb(0, 0, 0, .1);
        position: sticky;
        z-index: 120;
        inset-block-start: 0;
        background-color: hsl(var(--p-body-bg-color));
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border-block-end: solid 1px var(--p-mobile-header-border-color);
        padding-inline: 1.25rem;
        padding-block: 1rem;
        transition: transform .3s ease
    }

    .web-mobile-header-start {
        display: flex;
        align-items: center
    }

    .web-mobile-header-end {
        display: flex;
        align-items: center;
        gap: .5rem
    }

    .web-mobile-header.is-transparent {
        background-color: transparent;
        -webkit-backdrop-filter: blur(.5rem);
        backdrop-filter: blur(.5rem)
    }

    @media (min-width:1280px) {
        .web-mobile-header {
            display: none
        }
    }

    .theme-dark .web-mobile-header,
    .web-mobile-header.theme-dark {
        --p-mobile-header-border-color: rgb(255, 255, 255, .1)
    }

    .theme-light .web-mobile-header,
    .web-mobile-header.theme-light {
        --p-mobile-header-border-color: rgb(0, 0, 0, .1)
    }

    .web-mobile-header.is-hidden {
        transform: translateY(-100%)
    }

    .web-main-header {
        --p-main-header-padding-block: .9375rem;
        --p-main-header-link-color: var(--web-color-greyscale-900);
        --p-main-header-border-color: rgb(0, 0, 0, .1);
        position: sticky;
        z-index: 999;
        inset-block-start: 0;
        background-color: hsl(var(--p-body-bg-color));
        padding-inline: 2rem;
        border-block-end: solid .0625rem var(--p-main-header-border-color);
        min-block-size: 4.5625rem;
        transition: transform .3s ease
    }

    .web-main-header.is-special-padding {
        padding-inline: clamp(1.25rem, 4vw, 120rem)
    }

    .web-main-header.is-docs .web-main-header-wrapper {
        max-inline-size: 86.875rem
    }

    .web-main-header.is-reference .web-main-header-wrapper {
        max-inline-size: var(--container-size-huge)
    }

    .web-main-header-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin-inline: auto;
        max-inline-size: 108rem;
        padding-block: var(--p-main-header-padding-block)
    }

    .web-main-header-start {
        display: flex;
        align-items: center
    }

    .web-main-header-end {
        display: flex;
        margin-inline-start: auto;
        align-items: center;
        gap: .5rem
    }

    .web-main-header .web-input-text {
        padding-block: .4375rem;
        padding-inline-end: .5rem
    }

    .web-main-header .web-logo {
        margin-inline-end: 2rem
    }

    .web-main-header-nav {
        align-self: center;
        font-size: 1rem;
        -webkit-user-select: none;
        user-select: none
    }

    .web-main-header-nav-list {
        display: flex;
        gap: 2rem
    }

    .web-main-header-nav-link {
        color: hsl(var(--web-color-primary));
        transition: var(--transition)
    }

    .web-main-header-nav-link.is-selected {
        color: hsl(var(--p-main-header-link-color))
    }

    .web-main-header-more-link {
        color: hsl(var(--color-neutral-0)/.64)
    }

    [data-js-enabled] .web-main-header.is-transparent {
        background-color: transparent;
        -webkit-backdrop-filter: blur(.625rem);
        backdrop-filter: blur(.625rem)
    }

    .theme-dark .web-main-header,
    .web-main-header.theme-dark {
        --p-main-header-link-color: var(--web-color-greyscale-100);
        --p-main-header-border-color: rgb(255, 255, 255, .1)
    }

    .theme-light .web-main-header,
    .web-main-header.theme-light {
        --p-main-header-link-color: var(--web-color-greyscale-900);
        --p-main-header-border-color: rgb(0, 0, 0, .1)
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px) {
        .web-main-header {
            display: none
        }
    }

    .web-main-header.is-hidden {
        transform: translateY(-100%)
    }

    .web-footer-nav {
        display: flex;
        justify-content: space-between;
        padding-block: 4rem;
        font-size: var(--web-font-size-tiny)
    }

    .web-footer-nav .web-logo {
        align-self: start
    }

    .web-footer-nav-main-title {
        margin-block-end: 1.5rem
    }

    .web-footer-nav-main-list {
        display: flex;
        justify-content: space-between;
        flex-basis: 51.875rem
    }

    .web-footer-nav-secondary-list {
        display: flex;
        flex-direction: column;
        gap: .625rem
    }

    @media (max-width:1023.9px) {
        .web-footer-nav {
            flex-direction: column;
            gap: 2.5rem
        }

        .web-footer-nav-main-list {
            display: flex;
            flex-direction: column;
            gap: .75rem;
            flex-basis: 0
        }

        .web-footer-nav-main-item {
            display: flex;
            flex-direction: column;
            background-color: hsl(var(--color-neutral-0)/.04);
            border-radius: .5rem;
            -webkit-backdrop-filter: blur(.5rem);
            backdrop-filter: blur(.5rem)
        }

        .web-footer-nav-main-item .web-footer-nav-secondary-list {
            padding: 1rem
        }

        .web-footer-nav-button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            inline-size: 100%;
            gap: 1rem;
            padding: 1rem
        }

        .web-footer-nav-button-arrow {
            transition: var(--transition)
        }
    }

    .web-main-footer {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding-block: 1.5rem;
        border-block-start: solid .0625rem hsl(var(--web-color-border));
        font-size: var(--web-font-size-tiny);
        color: hsl(var(--web-color-secondary))
    }

    .web-main-footer-links {
        display: flex;
        gap: 1rem
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px) {
        .web-main-footer-links {
            flex-direction: column
        }
    }

    .web-main-footer.is-with-bg-color {
        z-index: 25;
        background-color: hsl(var(--p-body-bg-color))
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px) {
        .web-main-footer {
            flex-direction: column
        }

        .web-main-footer-grid-1 {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1.5rem;
            grid-template-areas: "col-3 col-2" "col-1 col-1" "col-4 col-4"
        }

        .web-main-footer-grid-1-column-1 {
            grid-area: col-1
        }

        .web-main-footer-grid-1-column-2 {
            grid-area: col-2
        }

        .web-main-footer-grid-1-column-3 {
            grid-area: col-3
        }

        .web-main-footer-grid-1-column-4 {
            grid-area: col-4
        }
    }

    @media (min-width:1280px) {
        .web-main-footer-grid-1 {
            display: flex;
            align-items: center;
            gap: 2rem;
            inline-size: 100%
        }

        .web-main-footer-grid-1-column-1 {
            margin-inline-end: auto
        }
    }

    .web-side-nav {
        --p-side-nav-item-text-color: var(--p-side-nav-text-item-color-default);
        --p-side-nav-item-icon-color: var(--p-side-nav-icon-item-color-default);
        --p-side-nav-item-bg-color: var(--p-side-nav-item-bg-color-default);
        --p-side-nav-text-item-color-default: var(--web-color-secondary);
        --p-side-nav-icon-item-color-default: var(--web-color-greyscale-250);
        --p-side-nav-item-bg-color-default: var(--transparent);
        --p-side-nav-item-bg-color-hover: var(--web-color-greyscale-50);
        --p-side-nav-item-text-color-selected: var(--web-color-primary);
        --p-side-nav-item-icon-color-selected: linear-gradient(hsla(343, 98%, 60%, 1), hsla(22, 98%, 60%, 1));
        --p-side-nav-bg-color: var(--p-body-bg-color);
        position: sticky;
        z-index: 35;
        inset-block-start: 4.625rem;
        inset-block-end: 0;
        block-size: calc(100vh - 10rem);
        block-size: calc(100dvh - 4.5625rem);
        background-color: hsl(var(--p-side-nav-bg-color))
    }

    .web-side-nav .web-icon-button {
        transition: var(--transition);
        margin-block-end: -.25rem;
        margin-inline-end: .375rem
    }

    .web-side-nav-wrapper {
        display: flex;
        flex-direction: column;
        block-size: 100%;
        gap: 1rem;
        padding: 1rem;
        padding-block-end: 2rem;
        background-color: hsl(var(--p-side-nav-bg-color));
        transition: var(--transition)
    }

    .web-side-nav-wrapper-parent {
        position: sticky;
        inset-block-start: -1rem;
        background-color: hsl(var(--p-body-bg-color));
        display: flex;
        align-items: center;
        padding-block: 1rem;
        margin-block-start: -1rem;
        border-block-end: .0625rem solid hsl(var(--web-color-smooth))
    }

    .web-side-nav-wrapper-parent [class*=icon]:first-child {
        flex-shrink: 0;
        padding-inline: .75rem
    }

    .web-side-nav-wrapper-parent-title {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
        inline-size: 100%;
        margin-inline-end: 2.75rem;
        text-align: center;
        transition: var(--transition)
    }

    .web-side-nav-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding-inline: 1rem;
        margin-inline: -1rem
    }

    .web-side-nav-scroll::-webkit-scrollbar {
        opacity: .7;
        width: .5rem;
        height: .5rem
    }

    .web-side-nav-scroll::-webkit-scrollbar-track {
        border-radius: .25rem;
        margin-right: .5rem
    }

    .web-side-nav-scroll::-webkit-scrollbar-thumb {
        border-radius: .25rem;
        background-color: transparent
    }

    .web-side-nav-scroll::-webkit-scrollbar-corner {
        background-color: transparent;
        border-radius: .375rem
    }

    .web-side-nav-scroll:hover::-webkit-scrollbar-thumb,
    .web-side-nav-scroll:hover::-webkit-scrollbar-corner {
        background-color: hsl(var(--web-color-border))
    }

    .web-is-only-mobile .web-side-nav-scroll {
        border-block-start: 1px solid hsl(var(--web-color-smooth));
        padding-block-start: 2rem
    }

    .web-side-nav-header {
        margin-block-end: .5rem
    }

    .web-side-nav-button {
        display: flex;
        inline-size: 100%;
        align-items: center;
        gap: .5rem;
        padding-inline: .75rem;
        padding-block: .5rem;
        white-space: nowrap;
        color: hsl(var(--p-side-nav-item-text-color));
        background-color: hsl(var(--p-side-nav-item-bg-color));
        border-radius: .5rem
    }

    .web-side-nav-button [class*=icon]:first-child {
        color: hsl(var(--p-side-nav-item-icon-color));
        font-size: 1rem
    }

    .web-side-nav-button [class*=icon]:last-child {
        transition: var(--transiton)
    }

    .web-side-nav-button:hover {
        --p-side-nav-item-bg-color: var(--p-side-nav-item-bg-color-hover)
    }

    .web-side-nav-button.is-selected {
        color: hsl(var(--p-side-nav-item-text-color-selected))
    }

    .web-side-nav-button.is-selected [class*=icon]:first-child {
        background: var(--p-side-nav-item-icon-color-selected);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

    .web-side-nav-button.is-selected .web-caption-400 {
        font-weight: 600
    }

    .web-side-nav-inner .web-side-nav-button {
        color: hsl(var(--web-color-secondary))
    }

    .web-side-nav-inner .web-side-nav-button.is-selected {
        color: hsl(var(--web-color-primary))
    }

    .web-side-nav-inner .web-side-nav-button .web-icon-holder {
        inline-size: 1rem
    }

    .web-side-nav.is-transparent {
        --p-side-nav-bg-color: var(--transparent)
    }

    .web-side-nav-mobile-footer-buttons {
        display: none
    }

    @media (max-width:1023.9px) {
        .web-side-nav-open {
            overflow: hidden
        }

        .web-side-nav-wrapper {
            padding-inline: 0
        }

        .web-side-nav-mobile-footer-buttons {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            padding-block-start: 1rem;
            border-block-start: solid .0625rem hsl(var(--web-color-smooth));
            padding-inline: 1rem;
            margin-inline: -1rem
        }
    }

    .theme-dark .web-side-nav {
        --p-side-nav-item-bg-color-hover: var(--web-color-white) / .08
    }

    .web-references-menu {
        --p-references-menu-header-color-text: var(--web-color-primary);
        --p-references-menu-link-color-text: var(--web-color-secondary);
        --p-references-menu-link-color-text-selected: var(--web-color-primary);
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        padding-inline: 1rem
    }

    .web-references-menu-content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        inline-size: 15.9375rem
    }

    .web-references-menu-title {
        color: hsl(var(--web-color-primary))
    }

    .web-references-menu-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-block: .25rem;
        padding-inline: .25rem
    }

    .web-references-menu-list::-webkit-scrollbar {
        opacity: .7;
        width: .5rem;
        height: .5rem
    }

    .web-references-menu-list::-webkit-scrollbar-track {
        border-radius: .25rem;
        margin-right: .5rem
    }

    .web-references-menu-list::-webkit-scrollbar-thumb {
        border-radius: .25rem;
        background-color: transparent
    }

    .web-references-menu-list::-webkit-scrollbar-corner {
        background-color: transparent;
        border-radius: .375rem
    }

    .web-references-menu-list:hover::-webkit-scrollbar-thumb,
    .web-references-menu-list:hover::-webkit-scrollbar-corner {
        background-color: hsl(var(--web-color-border))
    }

    .web-references-menu-list:not(.web-references-menu-list .web-references-menu-list) {
        padding-inline-start: 1.75rem;
        margin-inline-start: -1.5rem;
        overflow-y: auto
    }

    .web-references-menu-item {
        position: relative;
        padding-inline: -.25rem
    }

    .web-references-menu-item:has(.is-selected):before {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: -1.3125rem;
        content: "";
        block-size: 100%;
        inline-size: .0625rem;
        background-color: hsl(var(--p-references-menu-link-color-text))
    }

    @media (min-width:1024px) and (max-width:1279.9px),
    (min-width:1280px) and (max-width:1439.9px),
    (min-width:1440px) and (max-width:1727.9px) {
        .web-references-menu-item:has(.is-selected):before {
            inset-inline-start: -1.75rem
        }
    }

    .web-references-menu-item:has(.web-references-menu-list):before {
        display: none !important
    }

    .web-references-menu-item .web-references-menu-list :before {
        inset-inline-start: -4rem
    }

    .web-references-menu-link {
        display: flex;
        gap: .5rem;
        color: hsl(var(--p-references-menu-link-color-text));
        transition: var(--transition)
    }

    .web-references-menu-link.is-selected {
        --p-references-menu-link-color-text: var(--p-references-menu-link-color-text-selected)
    }

    .web-hero {
        --p-hero-max-inline-size: var(--hero-max-inline-size, 53.4375rem);
        --p-hero-gap: var(--hero-gap, 1rem);
        display: flex;
        flex-direction: column;
        gap: var(--p-hero-gap);
        text-align: center;
        max-inline-size: var(--p-hero-max-inline-size);
        margin-inline: auto
    }

    .web-hero .web-sub-title {
        margin-block-end: .25rem
    }

    .web-hero :where(.web-title, .web-display, .web-headline):not(:frist-child) {
        color: hsl(var(--web-color-primary));
        margin-block-start: .5rem
    }

    .web-hero .web-description {
        margin-block-start: 1.25rem;
        color: hsl(var(--web-color-secondary))
    }

    .web-hero.is-align-start {
        text-align: start;
        margin-inline: 0
    }

    .web-hero.is-align-start .web-badges {
        align-self: start
    }

    @media (max-width:1023.9px) {
        .web-hero.is-mobile-center {
            justify-content: center;
            text-align: center;
            margin-inline: auto
        }
    }

    .web-hero.is-horizontal {
        display: flex;
        flex-direction: column;
        margin-inline: initial;
        text-align: start
    }

    @media (max-width:1023.9px) {
        .web-hero.is-horizontal {
            max-inline-size: initial
        }
    }

    @media (min-width:1024px) {
        .web-hero.is-horizontal {
            max-inline-size: 40.625rem
        }
    }

    @media (min-width:1280px) {
        .web-hero.is-horizontal {
            flex-direction: row;
            gap: 2rem;
            text-align: start;
            margin-inline: 0;
            max-inline-size: none
        }

        .web-hero.is-horizontal>:nth-child(1) {
            flex: 1.3
        }

        .web-hero.is-horizontal>:nth-child(2) {
            flex: 1
        }
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px),
    (min-width:1280px) and (max-width:1439.9px) {
        .web-hero.is-horizontal {
            overflow: hidden
        }
    }

    .web-hero.is-no-max-width {
        max-inline-size: initial
    }

    .web-info-boxes {
        --p-info-boxes-sep-color: var(--web-color-smooth);
        display: grid;
        gap: .0625rem;
        grid-template-columns: repeat(auto-fill, minmax(19.125rem, 1fr));
        margin-inline-start: -2rem;
        margin-block-start: -2rem;
        clip-path: inset(.075rem);
        overflow: hidden
    }

    .web-info-boxes-item {
        position: relative;
        padding-inline: 2rem;
        padding-block-start: 2rem;
        padding-block-end: 2rem;
        border-block-end: solid .0625rem hsl(var(--p-info-boxes-sep-color))
    }

    .web-info-boxes-item:after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        display: block;
        height: 100vh;
        border-inline-end: solid .0625rem hsl(var(--p-info-boxes-sep-color))
    }

    .web-info-boxes-title {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .75rem;
        margin-block-start: 1rem;
        color: hsl(var(--web-color-primary))
    }

    .web-info-boxes-content {
        margin-block-start: .25rem;
        color: hsl(var(--web-color-secondary))
    }

    @media (min-width:1024px) {
        .web-info-boxes:where(.is-desktop-max-out-3) {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media (max-width: 450px) {
        .web-info-boxes {
            grid-template-columns: repeat(auto-fill, minmax(9.125rem, 1fr))
        }
    }

    @media (min-width: 450.1px) and (max-width: 630px) {
        .web-info-boxes {
            grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr))
        }
    }

    .web-user-box {
        display: grid;
        column-gap: 1rem;
        grid-template-columns: auto 1fr;
        font-size: 1.125rem;
        line-height: 1.5rem
    }

    .web-user-box-image {
        grid-row: span 2;
        display: block;
        inline-size: 3rem;
        block-size: 3rem;
        border-radius: 50%
    }

    .web-user-box-name {
        color: hsl(var(--web-color-greyscale-700))
    }

    .web-user-box-username {
        color: hsl(var(--web-color-greyscale-600))
    }

    .web-social-item-icon {
        color: hsl(var(--web-color-greyscale-300))
    }

    .web-social-item-icon:before {
        font-size: 2rem
    }

    .web-big-list-info {
        display: flex;
        flex-direction: column;
        gap: 4rem
    }

    .web-big-list-info-item {
        padding-block-start: 1rem;
        border-block-start: solid 1px hsl(var(--web-color-smooth))
    }

    .web-big-list-info .text {
        color: hsl(var(--web-color-greyscale-300))
    }

    @media (min-width:1024px) {
        .web-big-list-info {
            inline-size: 30rem;
            max-inline-size: 30rem
        }
    }

    .web-secondary-tabs {
        --p-secondary-tabs-text-color-default: var(--web-color-greyscale-700);
        --p-secondary-tabs-text-color-hover: var(--web-color-greyscale-900);
        --p-secondary-tabs-text-color-active: var(--web-color-greyscale-900);
        --p-secondary-tabs-text-color-selected: var(--web-color-greyscale-900);
        --p-secondary-tabs-text-color-disabled: var(--web-color-greyscale-900) / .48;
        --p-secondary-tabs-text-color-focus: var(--web-color-greyscale-700);
        --p-secondary-tabs-bg-color-default: var(--web-color-white);
        --p-secondary-tabs-bg-color-hover: var(--web-color-greyscale-50);
        --p-secondary-tabs-bg-color-active: var(--web-color-greyscale-100);
        --p-secondary-tabs-bg-color-selected: var(--web-color-greyscale-100);
        --p-secondary-tabs-bg-color-disabled: var(--transparent);
        --p-secondary-tabs-bg-color-focus: var(--p-secondary-tabs-bg-color-default);
        --p-secondary-tabs-shadow-color-defalut: var(--transparent);
        --p-secondary-tabs-shadow-color-focus: var(--color-neutral-1000) / .16;
        --p-secondary-tabs-text-color: var(--p-secondary-tabs-text-color-default);
        --p-secondary-tabs-bg-color: var(--p-secondary-tabs-bg-color-default);
        --p-secondary-tabs-shadow-color: var(--p-secondary-tabs-shadow-color-defalut);
        display: flex;
        gap: .25rem;
        padding: .25rem;
        border-radius: .75rem;
        line-height: 1.5;
        background: linear-gradient(134deg, #ffffff1a, #ffffff1a 52.97%, #ffffff14 100%, #fff0);
        -webkit-backdrop-filter: blur(.5rem);
        backdrop-filter: blur(.5rem)
    }

    .web-secondary-tabs.is-transparent {
        background: transparent
    }

    .web-secondary-tabs-button {
        color: hsl(var(--p-secondary-tabs-text-color));
        background-color: hsl(var(--p-secondary-tabs-bg-color));
        box-shadow: 0 0 0 .25rem hsl(var(--p-secondary-tabs-shadow-color));
        padding-inline: .75rem;
        padding-block: .375rem;
        -webkit-user-select: none;
        user-select: none;
        text-align: center;
        border-radius: var(--border-radius-small);
        border-width: 0;
        transition: var(--transition)
    }

    .web-secondary-tabs-button:focus-visible {
        --p-secondary-tabs-text-color: var(--p-secondary-tabs-text-color-focus);
        --p-secondary-tabs-bg-color: var(--p-secondary-tabs-bg-color-focus);
        --p-secondary-tabs-shadow-color: var(--p-secondary-tabs-shadow-color-focus)
    }

    .web-secondary-tabs-button:hover {
        --p-secondary-tabs-text-color: var(--p-secondary-tabs-text-color-hover);
        --p-secondary-tabs-bg-color: var(--p-secondary-tabs-bg-color-hover)
    }

    .web-secondary-tabs-button:active {
        --p-secondary-tabs-text-color: var(--p-secondary-tabs-text-color-active);
        --p-secondary-tabs-bg-color: var(--p-secondary-tabs-bg-color-active)
    }

    .web-secondary-tabs-button.is-selected {
        --p-secondary-tabs-text-color: var(--p-secondary-tabs-text-color-selected);
        --p-secondary-tabs-bg-color: var(--p-secondary-tabs-bg-color-selected)
    }

    .web-secondary-tabs-button:is(:disabled, .is-disabled) {
        --p-secondary-tabs-text-color: var(--p-secondary-tabs-text-color-disabled);
        --p-secondary-tabs-bg-color: var(--p-secondary-tabs-bg-color-disabled);
        opacity: .4;
        cursor: initial
    }

    .theme-dark .web-secondary-tabs {
        --p-secondary-tabs-text-color-default: var(--web-color-greyscale-200) / .48;
        --p-secondary-tabs-text-color-hover: var(--web-color-greyscale-100);
        --p-secondary-tabs-text-color-active: var(--web-color-greyscale-50);
        --p-secondary-tabs-text-color-selected: var(--web-color-greyscale-100);
        --p-secondary-tabs-text-color-disabled: var(--web-color-greyscale-200) / .48;
        --p-secondary-tabs-text-color-focus: var(--web-color-greyscale-200) / .48;
        --p-secondary-tabs-bg-color-default: var(--transparent);
        --p-secondary-tabs-bg-color-hover: var(--color-neutral-0) / .04;
        --p-secondary-tabs-bg-color-active: var(--color-neutral-0) / .08;
        --p-secondary-tabs-bg-color-selected: var(--color-neutral-0) / .08;
        --p-secondary-tabs-bg-color-disabled: var(--transparent);
        --p-secondary-tabs-bg-color-focus: var(--p-secondary-tabs-bg-color-default);
        --p-secondary-tabs-shadow-color-defalut: var(--transparent);
        --p-secondary-tabs-shadow-color-focus: var(--color-neutral-0) / .16
    }

    .theme-light .web-secondary-tabs {
        --p-secondary-tabs-text-color-default: var(--web-color-greyscale-700);
        --p-secondary-tabs-text-color-hover: var(--web-color-greyscale-900);
        --p-secondary-tabs-text-color-active: var(--web-color-greyscale-900);
        --p-secondary-tabs-text-color-selected: var(--web-color-greyscale-900);
        --p-secondary-tabs-text-color-disabled: var(--web-color-greyscale-900) / .48;
        --p-secondary-tabs-text-color-focus: var(--web-color-greyscale-700);
        --p-secondary-tabs-bg-color-default: var(--web-color-white);
        --p-secondary-tabs-bg-color-hover: var(--web-color-greyscale-50);
        --p-secondary-tabs-bg-color-active: var(--web-color-greyscale-100);
        --p-secondary-tabs-bg-color-selected: var(--web-color-greyscale-100);
        --p-secondary-tabs-bg-color-disabled: var(--transparent);
        --p-secondary-tabs-bg-color-focus: var(--p-secondary-tabs-bg-color-default);
        --p-secondary-tabs-shadow-color-defalut: var(--transparent);
        --p-secondary-tabs-shadow-color-focus: var(--color-neutral-1000) / .16
    }

    .web-strip-plans-header {
        container-name: strip-plans;
        container-type: inline-size;
        margin-block-end: 2rem
    }

    .web-strip-plans-header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem
    }

    .web-strip-plans-item {
        container-name: strip-plans;
        container-type: inline-size;
        padding-block: 2rem
    }

    .web-strip-plans-item:nth-child(n+2) {
        border-block-start: solid .0625rem rgba(255, 255, 255, .12)
    }

    .web-strip-plans-item:last-child {
        padding-block-end: 0
    }

    .web-strip-plans-item-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 3rem
    }

    .web-strip-plans-plan {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        flex: 1;
        flex-basis: 6.4375rem;
        flex-shrink: 0
    }

    .web-strip-plans-plan .title {
        color: #ffffffa3
    }

    .web-strip-plans-plan .info {
        white-space: nowrap;
        color: #ffffffa3
    }

    .web-strip-plans-info {
        flex: 2.5;
        flex-basis: 14.375rem;
        color: #ffffffa3
    }

    .web-strip-plans .web-button {
        flex: 1;
        white-space: nowrap
    }

    @container strip-plans (max-inline-size: 31.25rem) {
        .web-strip-plans-header-wrapper {
            flex-direction: column;
            align-items: start
        }

        .web-strip-plans-item-wrapper {
            flex-direction: column;
            align-items: revert;
            gap: 1rem
        }

        .web-strip-plans-item-wrapper .web-button {
            margin-block-start: .25rem
        }

        .web-strip-plans-plan,
        .web-strip-plans-info {
            flex: initial;
            flex-basis: 0
        }
    }

    .web-code-snippet {
        --p-code-snippet-border-color: var(--web-color-greyscale-800);
        --p-code-snippet-bg-color: var(--web-color-greyscale-850);
        --p-code-snippet-header-bg-color: var(--web-color-greyscale-800)
    }

    .web-code-snippet-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .5rem;
        background-color: hsl(var(--p-code-snippet-header-bg-color));
        border: solid .0625rem hsl(var(--p-code-snippet-border-color));
        border-start-start-radius: .75rem;
        border-start-end-radius: .75rem
    }

    .web-code-snippet-header-start,
    .web-code-snippet-header-end {
        display: flex;
        align-items: center
    }

    .web-code-snippet-content {
        padding: .9375rem;
        background-color: hsl(var(--p-code-snippet-bg-color));
        border: solid .0625rem hsl(var(--p-code-snippet-border-color));
        border-block-start-width: 0;
        border-end-start-radius: .75rem;
        border-end-end-radius: .75rem;
        overflow-x: scroll
    }

    .web-code-snippet-content code {
        white-space: pre
    }

    .web-code-snippet .buttons-list-item:nth-child(n+2):before {
        background-color: hsl(var(--web-color-greyscale-750))
    }

    .web-articles {
        --p-articles-item-bg-color: var(--web-color-white);
        --p-articles-item-title-color: var(--web-color-greyscale-900);
        --p-articles-item-paragraph-color: var(--web-color-greyscale-700)
    }

    .web-articles-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
        gap: 2rem
    }

    .web-articles-item {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: .5rem;
        background-color: hsl(var(--p-articles-item-bg-color));
        border-radius: 1rem
    }

    .web-articles-item-header {
        color: hsl(var(--p-articles-item-title-color))
    }

    .web-articles-item-paragraph {
        color: hsl(var(--p-articles-item-paragraph-color))
    }

    .web-articles-item-content {
        padding: .75rem
    }

    .web-articles-item-image {
        border-radius: .5rem;
        max-inline-size: 100%
    }

    .web-articles.is-scroll {
        overflow-x: scroll
    }

    .theme-dark .web-articles {
        --p-articles-item-bg-color: var(--web-color-greyscale-850) / .94;
        --p-articles-item-title-color: var(--web-color-greyscale-100);
        --p-articles-item-paragraph-color: var(--web-color-greyscale-300)
    }

    .web-pricing-cards-header {
        padding-block-end: 2rem;
        border-block-end: solid .0625rem hsl(var(--web-color-border))
    }

    .web-pricing-cards-content {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding-block-start: 2rem
    }

    @media (max-width:1023.9px) {
        .web-pricing-cards-list {
            display: flex;
            flex-direction: column;
            gap: 2rem
        }
    }

    @media (min-width:1024px) {
        .web-pricing-cards-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem
        }
    }

    .web-page-steps {
        display: flex;
        gap: 1.5rem
    }

    .web-page-steps-location {
        --p-location: var(--location, 0%);
        position: relative;
        inline-size: 1rem;
        margin-block: .75rem;
        flex-shrink: 0
    }

    .web-page-steps-location:before {
        content: "";
        display: block;
        inline-size: .125rem;
        block-size: 100%;
        margin-inline: auto;
        background-color: hsl(var(--web-color-greyscale-700))
    }

    .web-page-steps-location-button {
        position: absolute;
        inset-block-start: var(--p-location);
        margin-block-start: -.5rem;
        transition: var(--transition)
    }

    .web-page-steps-list {
        display: flex;
        flex-direction: column;
        gap: 1.25rem
    }

    .web-page-steps .is-selected {
        color: hsl(var(--web-color-primary))
    }

    @media (min-width:1024px) {
        .web-page-steps {
            position: sticky;
            inset-block-start: 6.875rem;
            inline-size: 17.5rem
        }
    }

    .web-compare-table {
        inline-size: 100%
    }

    .web-compare-table-caption {
        position: sticky;
        inset-block-start: 6rem;
        padding-inline: .5rem;
        margin-inline: -.5rem;
        -webkit-backdrop-filter: blur(.5rem);
        backdrop-filter: blur(.5rem)
    }

    .web-compare-table-caption-button {
        padding-block: 1rem
    }

    @media (max-width:1023.9px) {
        .web-compare-table-caption {
            inset-block-start: 7.5rem
        }

        .web-compare-table-caption-button {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            inline-size: 100%;
            border-block-end: solid .0625rem hsl(var(--web-color-smooth))
        }

        .web-compare-table-caption-button [class*=icon-]:last-child {
            transition: var(--transition)
        }
    }

    @media (min-width:1024px) {
        .web-compare-table-caption {
            z-index: 5;
            max-inline-size: 17.25rem
        }
    }

    .web-compare-table tr {
        display: grid;
        gap: 2rem;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        border-block-start: solid .0625rem hsl(var(--web-color-smooth))
    }

    .web-compare-table tr:last-child {
        border-block-end: solid .0625rem hsl(var(--web-color-smooth))
    }

    .web-compare-table th,
    .web-compare-table td {
        padding-block: 1rem
    }

    .web-compare-table td:nth-child(n+2) {
        padding-inline-start: .5rem
    }

    @media (max-width:1023.9px) {
        .web-compare-table {
            margin-block-start: 1rem
        }

        .web-compare-table-body {
            display: none
        }

        .web-compare-table.is-open-in-mobile .web-compare-table-body {
            display: table-row-group
        }

        .web-compare-table.is-open-in-mobile .web-compare-table-caption-button {
            border-block-end-width: 0
        }

        .web-compare-table.is-open-in-mobile .web-compare-table-caption-button [class*=icon-]:last-child {
            rotate: 180deg
        }

        .web-compare-table [class*=level-] {
            display: none
        }

        .web-compare-table [class*=level-].is-selected {
            display: table-cell
        }
    }

    @media (min-width:1024px) {
        .web-compare-table {
            margin-block-start: 4rem
        }
    }

    .web-info-table {
        table-layout: fixed;
        border-collapse: collapse;
        border-style: hidden
    }

    .web-info-table-col,
    .web-info-table-col-header {
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
        min-inline-size: 14rem;
        padding-block: 1.125rem;
        padding-inline: .75rem;
        border: solid .0625rem hsl(var(--web-color-smooth))
    }

    .web-info-table-col-header {
        background-color: hsl(var(--web-color-greyscale-850));
        color: hsl(var(--web-color-primary));
        text-align: start
    }

    .web-info-table-col-header:first-child {
        max-inline-size: 14rem
    }

    .web-info-table-scroll {
        border-radius: .5rem;
        border: solid .0625rem hsl(var(--web-color-smooth));
        overflow-x: auto
    }

    @media (max-width:1023.9px) {
        .web-info-table-scroll {
            min-inline-size: calc(100vw - 2rem);
            border-start-end-radius: 0;
            border-end-end-radius: 0
        }
    }

    .web-info-table.is-4-equals-columns .web-info-table-col,
    .web-info-table.is-4-equals-columns .web-info-table-col-header {
        inline-size: 25%;
        min-inline-size: 10.3125rem
    }

    .web-content-footer {
        padding-block-start: 2rem;
        border-block-start: solid .0625rem hsl(var(--web-color-border))
    }

    .web-content-footer-header {
        display: flex;
        justify-content: space-between
    }

    .web-content-footer-header-start {
        display: flex;
        gap: 1rem
    }

    @media (max-width:1023.9px) {
        .web-content-footer-header {
            flex-direction: column-reverse;
            gap: 2rem
        }
    }

    @media (min-width:1024px) {
        .web-content-footer-header {
            justify-items: center;
            gap: 1rem
        }
    }

    @media (max-width:1023.9px) {
        .web-content-footer .web-card {
            margin-block-start: 1rem
        }
    }

    @media (min-width:1024px) {
        .web-content-footer .web-card {
            margin-block-start: 2rem
        }
    }

    .web-top-banner {
        display: flex;
        justify-content: center;
        padding-block: .3125rem;
        padding-inline: .75rem;
        background: linear-gradient(94deg, #f90b0b00, #fc0101 50.82%, #f90b0b00)
    }

    .web-top-banner-content {
        line-height: 1.25rem;
        transition: var(--transition)
    }

    .web-top-banner-button {
        position: absolute;
        inset-inline-end: .75rem
    }

    [data-banner-hidden] .web-top-banner {
        display: none
    }

    .web-top-banner-2 {
        position: relative;
        z-index: 10;
        padding-block: 1.125rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #000;
        background-image: url(../../../images/bgs/top-bg-init.png)
    }

    .web-top-banner-2-wrapper {
        margin-inline: auto;
        max-inline-size: 108rem
    }

    .web-top-banner-2.is-special-padding {
        padding-inline: clamp(1.25rem, 4vw, 120rem)
    }

    .web-top-banner-2:after {
        content: "";
        display: block;
        block-size: .0625rem;
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        background-color: hsl(var(--web-color-white));
        background-blend-mode: overlay;
        opacity: .12
    }

    .web-timeline-content-list {
        display: flex;
        flex-direction: column
    }

    @media (max-width:1023.9px) {
        .web-timeline-content-list {
            gap: 4.25rem
        }
    }

    @media (min-width:1024px) {
        .web-timeline-content-list {
            gap: 12.5rem
        }
    }

    .web-timeline-content-item {
        display: flex;
        flex-direction: column;
        gap: 11.25rem;
        row-gap: 4rem
    }

    @media (max-width:1023.9px) {
        .web-timeline-content-item-bottom {
            display: none
        }
    }

    .web-investor-cards {
        display: flex
    }

    .web-investor-cards .web-card {
        display: grid;
        place-content: center
    }

    @media (max-width:1023.9px) {
        .web-investor-cards {
            flex-direction: column;
            gap: 1.25rem
        }

        .web-investor-cards>* {
            flex: 1
        }
    }

    @media (min-width:1024px) {
        .web-investor-cards {
            max-inline-size: 62.125rem;
            margin-inline: auto;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem
        }

        .web-investor-cards>* {
            min-inline-size: 19.375rem
        }
    }

    .web-chat-list {
        display: flex;
        flex-direction: column;
        gap: 1.25rem
    }

    .web-chat-message {
        position: relative;
        padding: .75rem;
        max-inline-size: 23.75rem;
        border-radius: var(--border-radius-medium);
        background: #fcfcfc;
        -webkit-backdrop-filter: blur(.625rem);
        backdrop-filter: blur(.625rem)
    }

    .web-chat-message:before {
        position: absolute;
        inset-inline-start: 1.4375rem;
        inset-block-start: 100%;
        content: "";
        display: block;
        inline-size: 1.4375rem;
        block-size: 1rem;
        background-color: inherit;
        clip-path: polygon(50% 100%, 0 0, 100% 0)
    }

    .web-chat-message:after {
        position: absolute;
        inset-inline-start: 1.5rem;
        inset-block-start: 100%;
        content: "";
        display: block;
        inline-size: 1.3125rem;
        block-size: .9375rem;
        background-color: inherit;
        clip-path: polygon(50% 100%, 0 0, 100% 0)
    }

    .web-chat-item.is-user-b {
        align-self: end
    }

    .web-chat-item.is-user-b .web-chat-message {
        background-color: hsl(calc(var(--web-color-pink-hue) - 13), 26%, 91%);
        border: solid .0625rem hsl(calc(var(--web-color-pink-hue) - 3), 62%, 86%)
    }

    .web-chat-item.is-user-b .web-chat-message:before {
        inset-inline-end: 1.4375rem;
        inset-inline-start: auto;
        background-color: hsl(calc(var(--web-color-pink-hue) - 3), 62%, 86%)
    }

    .web-chat-item.is-user-b .web-chat-message:after {
        inset-inline-end: 1.5rem;
        inset-inline-start: auto
    }

    .web-article-header {
        position: sticky;
        z-index: 18;
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        padding-block-start: 2.5rem;
        padding-block-end: 2rem;
        background-color: hsl(var(--p-body-bg-color));
        border-block-end: solid .0625rem hsl(var(--web-color-border));
        margin-block-end: 1.5rem
    }

    .web-article-header-start {
        display: flex;
        align-items: center;
        gap: 1rem
    }

    .web-article-header-end {
        align-self: center
    }

    .web-article-header .web-title {
        color: hsl(var(--web-color-primary))
    }

    .web-article-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        color: hsl(var(--web-color-secondary))
    }

    .web-article-content article .web-sub-body-400,
    .web-article-content-spacing-logic .web-sub-body-400 {
        margin-block: 1rem
    }

    .web-article-content article .web-sub-body-500,
    .web-article-content-spacing-logic .web-sub-body-500 {
        margin-block-end: .25rem
    }

    .web-article-content article .web-main-body-500,
    .web-article-content-spacing-logic .web-main-body-500 {
        margin-block-end: .5rem
    }

    .web-article-content article .web-description,
    .web-article-content-spacing-logic .web-description {
        margin-block-end: 1rem
    }

    .web-article-content article .web-label,
    .web-article-content-spacing-logic .web-label {
        margin-block-end: 1rem
    }

    .web-article-content article .web-paragraph-md,
    .web-article-content-spacing-logic .web-paragraph-md {
        margin-block-end: 2rem
    }

    .web-article-content article .web-link,
    .web-article-content-spacing-logic .web-link {
        margin-block-end: 0 !important
    }

    .web-article-content article .web-code-snippet,
    .web-article-content-spacing-logic .web-code-snippet {
        margin-block-start: 1rem;
        margin-block-end: 2rem
    }

    .web-article-content article .web-card,
    .web-article-content-spacing-logic .web-card {
        margin-block-end: 2rem
    }

    .web-article-content article .web-list,
    .web-article-content article .web-numeric-list,
    .web-article-content article .web-pink-dots,
    .web-article-content-spacing-logic .web-list,
    .web-article-content-spacing-logic .web-numeric-list,
    .web-article-content-spacing-logic .web-pink-dots {
        margin-block-end: 1.5rem
    }

    .web-article-content article .web-blockquote,
    .web-article-content-spacing-logic .web-blockquote {
        margin-block: 2rem
    }

    .web-article-content article .web-table-wrapper,
    .web-article-content-spacing-logic .web-table-wrapper {
        margin-block-end: 2rem
    }

    .web-article-content article .web-media,
    .web-article-content-spacing-logic .web-media {
        margin-block-end: 2rem
    }

    .web-article-content article .web-media:not(:first-child),
    .web-article-content-spacing-logic .web-media:not(:first-child) {
        margin-block-start: 1rem
    }

    .web-article-content article .web-inline-info,
    .web-article-content-spacing-logic .web-inline-info {
        margin-block-end: 1.5rem
    }

    .web-article-content article .web-code-snippet,
    .web-article-content-spacing-logic .web-code-snippet {
        margin-block-end: 2rem
    }

    .web-article-content-header {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        gap: 1rem
    }

    @media (min-width:1024px) {
        .web-article-content-header .web-numeric-badge {
            position: absolute;
            inset-block-start: .125rem;
            transform: translate(calc((-100% - 1rem) * var(--transform-direction)))
        }
    }

    .web-article-content-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1.5rem
    }

    @media (min-width:1024px) {
        .web-article-content-section.is-with-line:before {
            content: "";
            display: block;
            position: absolute;
            inset-block-start: 1.5rem;
            inset-inline-start: -1.875rem;
            inline-size: .125rem;
            block-size: calc(100% + .5rem);
            background-color: hsl(var(--web-color-border))
        }
    }

    .web-article-content-grid-6-4>* {
        min-inline-size: 0
    }

    @media (max-width:1023.9px) {
        .web-article-content-grid-6-4 {
            display: flex;
            flex-direction: column;
            gap: 2rem
        }
    }

    @media (min-width:1024px) {
        .web-article-content-grid-6-4 {
            display: grid;
            grid-template-columns: 6fr 5.7fr;
            gap: 2rem
        }
    }

    .web-article .tabs-list {
        block-size: 2.5rem
    }

    @media (max-width:1023.9px) {
        .web-article-header {
            position: relative;
            z-index: 1;
            flex-direction: column-reverse;
            padding-block-start: 1rem
        }

        .web-article-header-end {
            align-self: initial
        }
    }

    .web-content {
        --p-section-gap: 3rem;
        --p-content-gap: 2rem;
        display: flex;
        flex-direction: column;
        gap: var(--p-section-gap)
    }

    .web-content section {
        display: flex;
        flex-direction: column;
        gap: var(--p-content-gap);
        scroll-snap-align: start;
        scroll-margin-top: 7.5rem
    }

    .web-content a:not(.web-button) {
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: break-all;
        word-break: break-word;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
        word-break: break-all
    }

    .web-content a:not(.web-button):where(:hover, :focus) {
        text-decoration: underline
    }

    .web-content a:not(.web-button):not(.web-link) {
        color: hsl(var(--web-color-primary))
    }

    .web-content ul {
        list-style: disc;
        padding-inline-start: 1.5rem
    }

    .web-content ul>li {
        display: list-item;
        list-style-type: disc
    }

    .web-content ul>li::marker {
        content: revert;
        color: hsl(var(--web-color-pink-500))
    }

    .web-content.is-count-headers {
        counter-reset: headers
    }

    .web-content.is-count-headers .web-title:before {
        counter-increment: headers;
        content: counter(headers) ". "
    }

    .web-content .count-secondary-title {
        counter-reset: inner-title
    }

    .web-content .count-secondary-title .web-sub-body-500:before {
        counter-increment: inner-title;
        content: counter(headers) "." counter(inner-title) " "
    }

    @media (max-width:1023.9px) {
        .web-content {
            --p-section-gap: 1.5rem;
            --p-content-gap: 1rem
        }
    }

    .web-inline-info {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-gradient-before: linear-gradient(0deg, #C3C3C6 0%, rgba(195, 195, 198, .2) 100%);
        --m-border-radius: .5rem;
        --p-inline-info-bg-color: var(--web-color-white) / .04;
        --p-inline-info-border-color: var(--web-color-greyscale-250);
        background: hsl(var(--p-inline-info-bg-color));
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: 1rem
    }

    .web-inline-info:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-inline-info:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-inline-info>:last-child {
        margin-block-end: 0 !important
    }

    .web-inline-info [class*=icon]:first-child {
        color: hsl(var(--web-color-primary));
        font-size: 1.5rem !important;
        line-height: 1.5rem !important
    }

    .theme-dark .web-inline-info {
        --p-inline-info-bg-color: var(--web-color-white) / .04;
        --p-inline-info-border-color: var(--web-color-white) / .6;
        --m-border-gradient-before: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .2) 100%)
    }
}

@layer sequences {
    .web-author {
        display: flex;
        gap: 1rem
    }

    .web-author-image {
        border-radius: 50%
    }

    .web-author-info {
        display: flex;
        align-items: baseline;
        gap: .5rem
    }

    .web-author-section {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        max-inline-size: 31.25rem;
        margin-inline: auto;
        text-align: center
    }

    .web-author-section-image {
        padding: .875rem;
        border: solid .0625rem hsl(var(--web-color-border));
        border-radius: 50%;
        margin-block-end: 1.5rem
    }

    .web-author-section-image img {
        display: block;
        border-radius: 50%
    }

    .web-author-section-info {
        text-wrap: balance
    }

    .web-category-header {
        display: flex;
        flex-direction: column
    }

    .web-category-header-content {
        display: flex;
        gap: 1.5rem
    }

    .web-category-header-description {
        max-inline-size: 55.75rem
    }

    @media (max-width:1023.9px) {
        .web-category-header-content {
            flex-direction: column
        }

        .web-category-header .web-input-text-search-wrapper {
            margin-block-start: 1.5rem
        }
    }

    @media (min-width:1024px) {
        .web-category-header-content {
            justify-content: space-between
        }

        .web-category-header .web-input-text-search-wrapper {
            align-self: end;
            margin-block-start: 2.5rem
        }
    }

    .web-blockquote {
        --p-blockquote-border-color: var(--web-color-greyscale-100);
        padding-inline-start: 1.25rem;
        border-inline-start: solid .25rem hsl(var(--p-blockquote-border-color));
        max-inline-size: 42.5rem
    }

    .web-blockquote-footer {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        margin-block-start: 1.5rem
    }

    .theme-dark .web-blockquote {
        --p-blockquote-border-color: var(--web-color-greyscale-750)
    }

    .web-feature-article-image img {
        inline-size: 100%;
        border-radius: .5rem
    }

    .web-feature-article-content {
        display: flex;
        flex-direction: column;
        max-inline-size: 28.125rem
    }

    @media (max-width:1023.9px) {
        .web-feature-article {
            display: flex;
            flex-direction: column;
            gap: 1.5rem
        }

        .web-feature-article-header {
            display: flex;
            flex-direction: column;
            gap: .25rem
        }

        .web-feature-article-content {
            padding: .5rem;
            gap: .5rem
        }

        .web-feature-article-content .web-author {
            margin-block-start: .5rem
        }

        .web-feature-article .web-button {
            margin-block-start: 2rem
        }
    }

    @media (min-width:1024px) {
        .web-feature-article {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem
        }

        .web-feature-article-content {
            padding: 1.5rem;
            gap: 1rem
        }
    }

    .web-grid-articles {
        --p-grid-articles-item-border-color: var(--p-grid-articles-item-border-color-default);
        --p-grid-articles-item-border-color-default: var(--web-color-smooth);
        --p-grid-articles-item-bg-color: var(--p-grid-articles-item-bg-color-default);
        --p-grid-articles-item-bg-color-default: var(--web-color-white);
        --p-grid-articles-width: 17.5rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--p-grid-articles-width), 1fr));
        grid-auto-columns: minmax(var(--p-grid-articles-width), 1fr)
    }

    .web-grid-articles.is-medium {
        --p-grid-articles-width: 20rem
    }

    .web-grid-articles.is-big {
        --p-grid-articles-width: 22.5rem
    }

    .web-grid-articles-scroll {
        container-type: inline-size;
        container-name: grid-articles
    }

    .web-grid-articles-item {
        display: flex;
        flex-direction: column;
        min-block-size: 100%;
        padding: .5rem;
        padding-block-end: .75rem;
        background-color: hsl(var(--p-grid-articles-item-bg-color));
        transition: var(--transition)
    }

    .web-grid-articles-item:not(.is-transparent) {
        position: relative;
        border-radius: var(--m-border-radius);
        --m-border-gradient-before: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .01) 100%);
        --m-border-radius: 1rem
    }

    .web-grid-articles-item:not(.is-transparent):before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-before) border-box
    }

    .web-grid-articles-item:not(.is-transparent):after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--m-border-radius);
        border: var(--m-border-size, 1px) solid transparent;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
        background: var(--m-border-gradient-after) border-box
    }

    .web-grid-articles-item-image {
        overflow: hidden;
        border-radius: .5rem
    }

    .web-grid-articles-item-image>* {
        display: block;
        transition: var(--transition);
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .web-grid-articles-item.is-transparent {
        padding: 0;
        background-color: transparent
    }

    .web-grid-articles-item-content {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: .75rem
    }

    .is-transparent .web-grid-articles-item-content {
        gap: 1rem;
        padding-inline: 0;
        padding-block-start: 1.5rem
    }

    .web-grid-articles-item:where(:hover, :focus) .web-grid-articles-item-image>* {
        scale: 1.05
    }

    .theme-dark .web-grid-articles {
        --p-grid-articles-item-border-color-default: var(--web-color-white) / .2;
        --p-grid-articles-item-bg-color-default: var(--web-color-white) / .06
    }

    @media (max-width:1023.9px) {
        .web-grid-articles {
            gap: 2rem
        }
    }

    @media (min-width:1024px) {
        .web-grid-articles {
            gap: 3rem
        }
    }

    .web-main-article-header {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        margin-block-end: 2rem
    }

    @media (min-width:1024px) {
        .web-main-article-header {
            padding-block-end: 2rem;
            border-block-end: solid .0625rem hsl(var(--web-color-border))
        }
    }

    @media (min-width:1280px) {
        .web-main-article-header .web-link {
            position: absolute;
            inset-inline-end: calc(100% + 4.625rem);
            white-space: nowrap
        }
    }

    @media (min-width:1024px) {
        .web-main-article .web-media-container {
            margin-inline: -3.4375rem
        }
    }
}

@layer grids {
    .web-grid-1-1 {
        --p-grid-1-1-gap: var(--grid-1-1-gap, 0);
        display: grid;
        gap: var(--p-grid-1-1-gap)
    }

    @media (min-width:1280px) {
        .web-grid-1-1 {
            --p-grid-1-1-gap-desktop: var(--grid-1-1-gap-desktop, 0);
            gap: var(--p-grid-1-1-gap-desktop);
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .web-grid-1-1-opt-2 {
        display: grid
    }

    @media (min-width:1024px) {
        .web-grid-1-1-opt-2 {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .web-grid-4-6>* {
        min-inline-size: 0
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px) {
        .web-grid-4-6 {
            display: flex;
            flex-direction: column;
            gap: 4rem
        }
    }

    @media (min-width:1280px) {
        .web-grid-4-6 {
            display: grid;
            grid-template-columns: 4fr 6fr;
            gap: 5rem
        }
    }

    .web-grid-3c-4c-6c {
        display: grid
    }

    @media (max-width:1023.9px) {
        .web-grid-3c-4c-6c {
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem
        }
    }

    @media (min-width:1024px) and (max-width:1279.9px) {
        .web-grid-3c-4c-6c {
            grid-template-columns: repeat(4, 1fr);
            column-gap: 2.5rem;
            row-gap: 2.5rem
        }
    }

    @media (min-width:1280px) {
        .web-grid-3c-4c-6c {
            grid-template-columns: repeat(6, 1fr);
            column-gap: 2.5rem;
            row-gap: 2.5rem
        }
    }

    .web-grid-3c-4c-6c.is-for-logos {
        text-align: center
    }

    .web-grid-3c-4c-6c.is-for-logos>li {
        display: grid;
        place-content: center
    }

    .web-grid-3c-4c-6c.is-for-logos img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
        object-position: center
    }

    .web-grid-2c-4c {
        --p-column-gap-mobile: var(--column-gap-mobile, 1.25rem);
        --p-row-gap-mobile: var(--row-gap-mobile, 2rem);
        --p-column-gap-desktop: var(--column-gap-desktop, 2rem);
        --p-row-gap-desktop: var(--row-gap-desktop, 3rem);
        display: grid
    }

    @media (max-width:1023.9px) {
        .web-grid-2c-4c {
            grid-template-columns: repeat(2, 1fr);
            column-gap: var(--p-column-gap-mobile);
            row-gap: var(--p-row-gap-mobile)
        }
    }

    @media (min-width:1024px) {
        .web-grid-2c-4c {
            grid-template-columns: repeat(4, 1fr);
            column-gap: var(--p-column-gap-desktop);
            row-gap: var(--p-row-gap-desktop)
        }
    }

    .web-grid-3-desktop-1-mobile {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem
    }

    @media (max-width:1023.9px) {
        .web-grid-3-desktop-1-mobile {
            grid-template-columns: 1fr
        }
    }

    .web-grid-15-25-desktop {
        display: flex
    }

    @media (max-width:1023.9px) {
        .web-grid-15-25-desktop {
            flex-direction: column
        }
    }

    @media (min-width:1024px) {
        .web-grid-15-25-desktop>:nth-child(1) {
            flex: 1.5
        }

        .web-grid-15-25-desktop>:nth-child(2) {
            flex: 2.5
        }
    }

    .web-grid-120-1fr-auto-header {
        grid-area: header
    }

    .web-grid-120-1fr-auto-side {
        grid-area: side
    }

    .web-grid-120-1fr-auto-main {
        grid-area: main
    }

    @media (max-width:1023.9px) {
        .web-grid-120-1fr-auto {
            padding-block-start: 2.5rem
        }

        .web-grid-120-1fr-auto-header {
            padding-block-end: 1.5rem
        }
    }

    @media (min-width:1024px) {
        .web-grid-120-1fr-auto {
            display: grid;
            grid-template-columns: 17.25rem max(42.5rem) auto;
            grid-template-areas: ".    header header" "side main .";
            column-gap: 3.4375rem;
            row-gap: 3rem;
            padding-block-start: 5rem
        }
    }

    .web-grid-row-2 {
        display: grid;
        gap: 2rem
    }

    .web-grid-row-2 li>* {
        min-block-size: 100%
    }

    @media (min-width:1024px) {
        .web-grid-row-2 {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .web-grid-row-4 {
        --p-gap: 2rem;
        display: grid;
        gap: var(--p-gap)
    }

    .web-grid-row-4 li>* {
        min-block-size: 100%
    }

    @media (max-width:1023.9px) {
        .web-grid-row-4-mobile-2 {
            --p-gap-mobile: var(--gap-mobile);
            gap: var(--gap-mobile, var(--p-gap));
            grid-template-columns: repeat(2, 1fr)
        }

        .web-grid-row-4-mobile-2 .is-mobile-col-span-2 {
            grid-column: span 2
        }
    }

    @media (min-width:1024px) {
        .web-grid-row-4 {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    .web-multi-columns-1 {
        --p-col-gap: 2rem;
        column-width: 21.25rem;
        column-gap: var(--p-col-gap)
    }

    .web-multi-columns-1>* {
        break-inside: avoid;
        margin-block-end: var(--p-col-gap)
    }

    .web-grid-side-nav .web-mobile-header,
    .web-grid-side-nav .web-main-header {
        grid-area: header
    }

    .web-grid-side-nav .web-side-nav {
        grid-area: side
    }

    .web-grid-side-nav .web-main-section {
        grid-area: main
    }

    @media (max-width:1023.9px) {
        .web-grid-side-nav.web-container {
            padding-inline: 1.25rem
        }

        .web-grid-side-nav .web-side-nav {
            display: none;
            max-inline-size: none;
            padding-inline: 1rem
        }

        .web-grid-side-nav .web-main-section {
            padding-inline: 1.25rem;
            padding-block-start: 2rem
        }

        .web-grid-side-nav.is-open {
            background: hsl(var(--web-color-background))
        }

        .web-grid-side-nav.is-open>*:not(.web-mobile-header, .web-side-nav) {
            display: none !important
        }

        .web-grid-side-nav.is-open .web-side-nav {
            display: block !important
        }
    }

    @media (min-width:1024px) and (max-width:1279.9px) {
        .web-grid-side-nav .web-side-nav {
            display: none;
            position: fixed;
            inset-inline-start: 0;
            inset-block-start: 4.5625rem;
            inset-block-end: 0;
            background: hsl(var(--web-color-background));
            inline-size: 17.5rem;
            block-size: initial;
            border-inline-end: solid .0625rem hsl(var(--color-border))
        }

        .web-grid-side-nav.is-open .web-side-nav {
            display: block !important
        }
    }

    @media (min-width:1024px) {
        .web-grid-side-nav .web-main-section {
            inline-size: 100%;
            max-inline-size: 68.875rem;
            padding-inline: 1.5rem;
            margin-inline: auto
        }

        .web-grid-side-nav .web-main-section .web-hero:first-child {
            margin-block-start: 6.25rem;
            margin-block-end: 5rem
        }

        .web-grid-side-nav .web-main-section>*:not(:first-child):where(:not(.u-position-absolute)) {
            margin-block-start: 10rem
        }
    }

    @media (min-width:1280px) {
        .web-grid-side-nav {
            display: grid;
            grid-template-columns: 17.5rem minmax(0, 1fr);
            grid-template-areas: "header header" "side   main"
        }

        .web-grid-side-nav .web-side-nav {
            border-inline-end: solid .0625rem hsl(var(--color-border))
        }

        .web-grid-side-nav .web-side-nav-wrapper {
            padding-block: 0
        }

        .web-grid-side-nav .web-side-nav-scroll {
            padding-block: 1rem
        }
    }

    .web-grid-two-side-navs {
        --p-grid-huge-navs-padding-inline: 1.75rem;
        --p-grid-huge-navs-main-header-height: 4.5625rem;
        --p-grid-huge-navs-secondary-header-height: 7.25rem;
        --p-grid-huge-navs-secondary-sticky-position: 7.5rem;
        --p-grid-huge-navs--margin-top-content-side-b: 2.5rem;
        --p-grid-huge-navs-side-nav-width-closed: 4.5625rem;
        --p-grid-huge-navs-side-nav-width-opened: 17.5rem;
        max-inline-size: var(--container-size-large);
        margin-inline: auto
    }

    .web-grid-two-side-navs .web-mobile-header,
    .web-grid-two-side-navs .web-main-header {
        grid-area: header;
        block-size: var(--p-grid-huge-navs-main-header-height)
    }

    .web-grid-two-side-navs .web-article-header {
        grid-area: a-header;
        block-size: auto;
        padding-block-start: 0
    }

    .web-grid-two-side-navs .web-side-nav {
        grid-area: side-a
    }

    .web-grid-two-side-navs .web-article {
        grid-area: main
    }

    .web-grid-two-side-navs .web-references-menu {
        grid-area: side-b
    }

    .web-grid-two-side-navs .web-main-footer {
        grid-area: footer;
        margin-inline: var(--p-grid-huge-navs-padding-inline)
    }

    .web-grid-two-side-navs .web-icon-button [class*=icon] {
        transition: var(--transition)
    }

    .web-grid-two-side-navs .web-article-header {
        margin-block-start: var(--p-grid-huge-navs--margin-top-content-side-b)
    }

    @media (max-width:1023.9px) {
        .web-grid-two-side-navs {
            padding-inline: var(--p-grid-huge-navs-padding-inline)
        }

        .web-grid-two-side-navs .web-mobile-header {
            margin-inline: calc(var(--p-grid-huge-navs-padding-inline) * -1)
        }

        .web-grid-two-side-navs .web-side-nav {
            display: none;
            max-inline-size: none
        }

        .web-grid-two-side-navs.is-open>*:not(.web-mobile-header, .web-side-nav) {
            display: none !important
        }

        .web-grid-two-side-navs.is-open .web-side-nav {
            display: block !important
        }

        .web-grid-two-side-navs .web-article-header {
            gap: 0
        }

        .web-grid-two-side-navs .web-references-menu {
            display: none !important
        }

        .web-grid-two-side-navs .web-main-footer {
            margin-inline: 0
        }
    }

    @media (min-width:1024px) and (max-width:1279.9px) {
        .web-grid-two-side-navs {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-areas: "a-header side-b" "main     side-b" "footer   footer"
        }

        .web-grid-two-side-navs .web-side-nav {
            display: none;
            position: fixed;
            inset-inline-start: 0rem;
            inset-block-start: var(--p-grid-huge-navs-main-header-height);
            inset-block-end: 0;
            inline-size: var(--p-grid-huge-navs-side-nav-width-opened)
        }

        .web-grid-two-side-navs.is-open .web-side-nav {
            display: block !important
        }
    }

    @media (min-width:1024px) {
        .web-grid-two-side-navs .web-side-nav-wrapper {
            border-inline-end: solid .0625rem hsl(var(--web-color-border))
        }

        .web-grid-two-side-navs .web-article-header {
            position: static;
            margin-inline: var(--p-grid-huge-navs-padding-inline);
            inset-block-start: var(--p-grid-huge-navs-main-header-height)
        }

        .web-grid-two-side-navs .web-article-header,
        .web-grid-two-side-navs .web-article-content {
            inline-size: 100%;
            max-inline-size: 43.5rem;
            padding-inline: var(--p-grid-huge-navs-padding-inline);
            margin-inline: auto
        }

        .web-grid-two-side-navs .web-references-menu {
            border-inline-start: solid .0625rem hsl(var(--web-color-border));
            margin-block-start: var(--p-grid-huge-navs--margin-top-content-side-b)
        }

        .web-grid-two-side-navs .web-references-menu-content {
            position: sticky;
            inset-block-start: var(--p-grid-huge-navs-secondary-sticky-position)
        }
    }

    @media (min-width:1280px) {
        .web-grid-two-side-navs {
            display: grid;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: auto 1fr auto;
            grid-template-areas: "side-a a-header side-b" "side-a main side-b" "side-a footer footer"
        }

        .web-grid-two-side-navs .web-side-nav {
            inline-size: var(--p-grid-huge-navs-side-nav-width-opened)
        }

        .web-grid-two-side-navs .web-side-nav-wrapper {
            padding-block: 0
        }

        .web-grid-two-side-navs .web-side-nav-scroll {
            padding-block: 1rem
        }
    }

    .web-grid-huge-navs {
        --p-grid-huge-navs-padding-inline: 2rem;
        --p-grid-huge-navs-main-header-height: 4.5625rem;
        --p-grid-huge-navs-secondary-header-height: 7.25rem;
        --p-grid-huge-navs-secondary-sticky-position: 12.8125rem;
        --p-grid-huge-navs-side-nav-width-closed: 4.5625rem;
        --p-grid-huge-navs-side-nav-width-opened: 17.5rem;
        max-inline-size: var(--container-size-huge);
        margin-inline: auto
    }

    .web-grid-huge-navs .web-article-header {
        grid-area: a-header
    }

    .web-grid-huge-navs .web-side-nav {
        grid-area: side-a
    }

    .web-grid-huge-navs .web-article {
        grid-area: main
    }

    .web-grid-huge-navs .web-references-menu {
        grid-area: side-b;
        padding-inline-end: var(--p-grid-huge-navs-padding-inline)
    }

    .web-grid-huge-navs .web-main-footer {
        grid-area: footer;
        margin-inline: var(--p-grid-huge-navs-padding-inline)
    }

    .web-grid-huge-navs .web-icon-button [class*=icon] {
        transition: var(--transition)
    }

    .web-grid-huge-navs .web-main-header-wrapper {
        max-inline-size: none
    }

    @media (max-width:1023.9px) {
        .web-grid-huge-navs {
            --p-grid-huge-navs-padding-inline: 1.25rem;
            padding-inline: var(--p-grid-huge-navs-padding-inline)
        }

        .web-grid-huge-navs .web-mobile-header {
            margin-inline: calc(var(--p-grid-huge-navs-padding-inline) * -1)
        }

        .web-grid-huge-navs .web-side-nav {
            display: none;
            max-inline-size: none
        }

        .web-grid-huge-navs.is-open>*:not(.web-mobile-header, .web-side-nav) {
            display: none !important
        }

        .web-grid-huge-navs.is-open .web-side-nav {
            display: block !important
        }

        .web-grid-huge-navs .web-references-menu {
            display: none !important
        }
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px),
    (min-width:1920px) {
        .web-grid-huge-navs .web-side-nav .web-icon-button {
            display: none
        }
    }

    @media (min-width:1024px) and (max-width:1279.9px) {
        .web-grid-huge-navs {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-areas: "a-header a-header" "main     side-b" "footer   footer"
        }

        .web-grid-huge-navs .web-side-nav {
            display: none;
            position: fixed;
            inset-inline-start: 0rem;
            inset-block-start: var(--p-grid-huge-navs-main-header-height);
            inset-block-end: 0;
            inline-size: var(--p-grid-huge-navs-side-nav-width-opened)
        }

        .web-grid-huge-navs.is-open .web-side-nav {
            display: block !important
        }
    }

    @media (min-width:1024px) and (max-width:1279.9px),
    (min-width:1280px) and (max-width:1439.9px),
    (min-width:1440px) and (max-width:1727.9px) {
        .web-grid-huge-navs .web-references-menu #refOpen {
            position: sticky;
            inset-block-start: 13.3125rem
        }

        .web-grid-huge-navs .web-references-menu-content {
            display: none;
            gap: 0;
            padding-inline-start: 1.5rem;
            padding-inline-end: var(--p-grid-huge-navs-padding-inline);
            border-inline-start: solid .0625rem hsl(var(--web-color-border));
            background-color: hsl(var(--p-body-bg-color));
            inline-size: var(--p-grid-huge-navs-side-nav-width-opened)
        }

        .web-grid-huge-navs .web-references-menu-list {
            margin-block-start: .5rem;
            padding-block-end: 1.5rem
        }

        .web-grid-huge-navs .web-references-menu.is-open .web-references-menu-content {
            display: flex;
            position: fixed;
            inset-inline-end: 0;
            inset-block-start: var(--p-grid-huge-navs-secondary-sticky-position);
            inset-block-end: 0
        }
    }

    @media (min-width:1024px) {
        .web-grid-huge-navs .web-side-nav-wrapper {
            border-inline-end: solid .0625rem hsl(var(--web-color-border))
        }

        .web-grid-huge-navs .web-article-header {
            block-size: var(--p-grid-huge-navs-secondary-header-height);
            padding-inline-end: var(--p-grid-huge-navs-padding-inline);
            margin-inline-start: var(--p-grid-huge-navs-padding-inline);
            inset-block-start: var(--p-grid-huge-navs-main-header-height)
        }

        .web-grid-huge-navs .web-article-content {
            padding-inline: var(--p-grid-huge-navs-padding-inline)
        }

        .web-grid-huge-navs .web-references-menu {
            border-inline-start: solid .0625rem hsl(var(--web-color-border))
        }

        .web-grid-huge-navs .web-references-menu-content {
            position: sticky;
            inset-block-start: var(--p-grid-huge-navs-secondary-sticky-position)
        }
    }

    @media (min-width:1280px) {
        .web-grid-huge-navs {
            display: grid;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: auto auto 1fr auto;
            grid-template-areas: "side-a a-header a-header" "side-a main side-b" "side-a footer footer"
        }
    }

    @media (min-width:1280px) and (max-width:1439.9px),
    (min-width:1440px) and (max-width:1727.9px),
    (min-width:1728px) and (max-width:1919.9px) {
        .web-grid-huge-navs .web-side-nav {
            max-inline-size: var(--p-grid-huge-navs-side-nav-width-closed)
        }

        .web-grid-huge-navs .web-side-nav-wrapper {
            inline-size: var(--p-grid-huge-navs-side-nav-width-closed);
            max-inline-size: var(--p-grid-huge-navs-side-nav-width-closed)
        }

        .web-grid-huge-navs .web-side-nav-wrapper-parent-title {
            opacity: 0
        }

        .web-grid-huge-navs .web-side-nav-header {
            opacity: 0;
            transition: var(--transition)
        }

        .web-grid-huge-navs .web-side-nav-button>*:not(:first-child) {
            opacity: 0;
            transition: var(--transition)
        }

        .web-grid-huge-navs.is-open .web-side-nav-wrapper {
            max-inline-size: var(--p-grid-huge-navs-side-nav-width-opened);
            inline-size: var(--p-grid-huge-navs-side-nav-width-opened)
        }

        .web-grid-huge-navs.is-open .web-side-nav-wrapper-parent-title,
        .web-grid-huge-navs.is-open .web-side-nav-header {
            opacity: 1
        }

        .web-grid-huge-navs.is-open .web-side-nav-button>*:not(:first-child) {
            opacity: 1
        }

        .web-grid-huge-navs.is-open .web-side-nav .web-icon-button {
            rotate: 180deg
        }
    }

    @media (min-width:1728px) {

        .web-grid-huge-navs .web-references-menu #refOpen,
        .web-grid-huge-navs .web-references-menu #refClose {
            display: none
        }

        .web-grid-huge-navs .web-references-menu-content {
            position: sticky;
            inset-block-start: 13.3125rem;
            max-block-size: calc(100dvh - 13.3125rem)
        }

        .web-grid-huge-navs .web-references-menu-content::-webkit-scrollbar {
            opacity: .7;
            width: .5rem;
            height: .5rem
        }

        .web-grid-huge-navs .web-references-menu-content::-webkit-scrollbar-track {
            border-radius: .25rem;
            margin-right: .5rem
        }

        .web-grid-huge-navs .web-references-menu-content::-webkit-scrollbar-thumb {
            border-radius: .25rem;
            background-color: transparent
        }

        .web-grid-huge-navs .web-references-menu-content::-webkit-scrollbar-corner {
            background-color: transparent;
            border-radius: .375rem
        }

        .web-grid-huge-navs .web-references-menu-content:hover::-webkit-scrollbar-thumb,
        .web-grid-huge-navs .web-references-menu-content:hover::-webkit-scrollbar-corner {
            background-color: hsl(var(--web-color-border))
        }
    }

    @media (min-width:1920px) {
        .web-grid-huge-navs .web-side-nav {
            inline-size: var(--p-grid-huge-navs-side-nav-width-opened)
        }

        .web-grid-huge-navs .web-side-nav-wrapper {
            padding-block: 0
        }

        .web-grid-huge-navs .web-side-nav-scroll {
            padding-block: 1rem
        }

        .web-grid-huge-navs .web-article-header {
            padding-inline-end: 0
        }
    }

    @media (min-width: 1920px) and (max-width: 1940.9px) {
        .web-grid-huge-navs .web-article-header {
            padding-inline-end: 32px
        }
    }

    @media (min-width: 1941px) and (max-width: 1960.9px) {
        .web-grid-huge-navs .web-article-header {
            padding-inline-end: 20px
        }
    }

    @media (min-width: 1961px) and (max-width: 1983.9px) {
        .web-grid-huge-navs .web-article-header {
            padding-inline-end: 10px
        }
    }
}

@layer pages;

@layer utilities {
    .web-u-text-wrap-balance {
        text-wrap: balance
    }

    @media (max-width:1023.9px) {
        .web-u-hide-mobile {
            display: none !important
        }
    }

    @media (max-width:1023.9px) {
        .web-u-opacity-40-mobile {
            opacity: .4
        }
    }

    .web-u-opacity-64 {
        opacity: .64 !important
    }

    .web-u-opacity-90 {
        opacity: .9 !important
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px),
    (min-width:1280px) and (max-width:1439.9px) {
        .web-u-overflow-hidden-break1-to-break3 {
            overflow: hidden
        }
    }

    .web-u-flex-vertical {
        display: flex !important;
        flex-direction: column !important
    }

    @media (max-width:1023.9px) {
        .web-u-flex-vertical-mobile {
            flex-direction: column !important
        }
    }

    @media (max-width:1023.9px) {
        .web-u-flex-vertical-reverse-mobile {
            flex-direction: column-reverse !important
        }
    }

    .web-u-padding-20 {
        padding: 1.25rem
    }

    .web-u-padding-inline-start-0 {
        padding-inline-start: 0 !important
    }

    .web-u-padding-inline-start-20 {
        padding-inline-start: 1.25rem !important
    }

    .web-u-padding-inline-start-24 {
        padding-inline-start: 1.5rem !important
    }

    .web-u-padding-inline-end-12 {
        padding-inline-end: 12px !important
    }

    .web-u-padding-block-0 {
        padding-block: 0 !important
    }

    .web-u-padding-block-4 {
        padding-block: .25rem !important
    }

    .web-u-padding-block-20 {
        padding-block: 1.25rem !important
    }

    .web-u-padding-block-start-32 {
        padding-block-start: 2rem !important
    }

    .web-u-padding-block-start-40 {
        padding-block-start: 2.5rem !important
    }

    .web-u-padding-block-start-48 {
        padding-block-start: 3rem !important
    }

    .web-u-padding-block-start-64 {
        padding-block-start: 4rem !important
    }

    .web-u-padding-block-start-80 {
        padding-block-start: 5rem !important
    }

    .web-u-padding-block-end-0 {
        padding-block-end: 0
    }

    .web-u-padding-block-end-8 {
        padding-block-end: .5rem
    }

    .web-u-padding-block-end-40 {
        padding-block-end: 2.5rem
    }

    .web-u-padding-block-end-56 {
        padding-block-end: 3.5rem
    }

    @media (max-width:1023.9px) {
        .web-u-padding-block-end-d-160-m-80 {
            padding-block-end: 5rem
        }
    }

    @media (min-width:1024px) {
        .web-u-padding-block-end-d-160-m-80 {
            padding-block-end: 10rem
        }
    }

    .web-u-padding-inline-8 {
        padding-inline: .5rem
    }

    .web-u-padding-inline-16 {
        padding-inline: 1rem
    }

    @media (min-width:1024px) {
        .web-u-padding-inline-start-48-not-break1 {
            padding-inline-start: 3rem
        }
    }

    @media (max-width:1023.9px) {
        .web-u-margin-inline-auto-mobile {
            margin-inline: auto
        }
    }

    .web-u-margin-inline-8-negative {
        margin-inline: -.5rem
    }

    .web-u-margin-inline-20-negative {
        margin-inline: -1.25rem
    }

    .web-u-margin-inline-32-negative {
        margin-inline: -2rem
    }

    .web-u-margin-block-0 {
        margin-block: 0
    }

    .web-u-margin-block-80 {
        margin-block: 5rem
    }

    .web-u-margin-block-start-8-negative {
        margin-block-start: -.5rem !important
    }

    .web-u-margin-block-start-0 {
        margin-block-start: 0 !important
    }

    .web-u-margin-block-start-24 {
        margin-block-start: 1.5rem
    }

    .web-u-margin-block-start-40 {
        margin-block-start: 2.5rem
    }

    @media (max-width:1023.9px) {
        .web-u-margin-block-start-40-mobile {
            margin-block-start: 2.5rem
        }
    }

    .web-u-margin-block-start-100-negative {
        margin-block-start: -6.25rem
    }

    .web-u-margin-block-end-0 {
        margin-block-end: 0 !important
    }

    .web-u-sep {
        border: solid .0625rem hsl(var(--web-color-smooth))
    }

    .web-u-sep-block {
        border-block: solid .0625rem hsl(var(--web-color-smooth))
    }

    .web-u-sep-block-start {
        border-block-start: solid .0625rem hsl(var(--web-color-smooth))
    }

    .web-u-sep-block-end {
        border-block-end: solid .0625rem hsl(var(--web-color-smooth))
    }

    @media (min-width:1024px) {
        .web-u-sep-inline-start-not-break1 {
            border-inline-start: solid .0625rem hsl(var(--web-color-smooth))
        }
    }

    @media (min-width:1024px) {
        .web-u-padding-block-end-136-not-mobile {
            padding-block-end: 8.5rem !important
        }
    }

    .web-u-border-radius-8 {
        border-radius: .5rem
    }

    .web-u-max-width-168 {
        max-inline-size: 10.5rem
    }

    .web-u-max-width-350 {
        max-inline-size: 21.875rem
    }

    .web-u-max-width-380 {
        max-inline-size: 23.75rem
    }

    .web-u-max-width-480 {
        max-inline-size: 30rem
    }

    .web-u-max-width-580 {
        max-inline-size: 36.25rem
    }

    .web-u-max-width-600 {
        max-inline-size: 37.5rem
    }

    .web-u-max-width-610 {
        max-inline-size: 38.125rem
    }

    .web-u-max-width-640 {
        max-inline-size: 40rem
    }

    .web-u-max-width-680 {
        max-inline-size: 42.5rem
    }

    .web-u-max-width-700 {
        max-inline-size: 43.75rem
    }

    .web-u-max-width-800 {
        max-inline-size: 50rem
    }

    .web-u-max-width-993 {
        max-inline-size: 62.0625rem
    }

    .web-u-max-height-300 {
        max-block-size: 18.75rem
    }

    .web-u-max-height-100-percent {
        max-block-size: 100%
    }

    .web-u-trim-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all
    }

    .web-u-line-height-1-2 {
        line-height: 1.2 !important
    }

    .web-u-line-height-2 {
        line-height: 2 !important
    }

    .web-u-size-40 {
        inline-size: 2.5rem;
        block-size: 2.5rem
    }

    .web-u-block-size-48 {
        block-size: 3rem
    }

    .web-u-block-size-160 {
        block-size: 10rem
    }

    .web-u-min-block-size-320 {
        min-block-size: 20rem
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px) {
        .web-u-inline-width-100-percent-mobile {
            inline-size: 100%
        }
    }

    @media (max-width:1023.9px) {
        .web-u-inline-width-100-percent-mobile-break1 {
            inline-size: 100%
        }
    }

    @media (max-width:1023.9px) {
        .web-u-max-inline-size-none-mobile {
            max-inline-size: none
        }
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px) {
        .web-u-max-inline-width-584-mobile {
            max-inline-size: 36.5rem
        }
    }

    .web-u-margin-inline-20 {
        margin-inline: 1.25rem
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px) {
        .web-u-margin-inline-auto-mobile {
            margin-inline: auto
        }
    }

    .web-u-margin-inline-end-4 {
        margin-inline-end: .25rem
    }

    @media (max-width:1023.9px) {
        .web-u-margin-block-32-mobile {
            margin-block: 2rem
        }
    }

    @media (min-width:1024px) {
        .web-u-margin-block-40-not-mobile {
            margin-block: 2.5rem
        }
    }

    .web-u-cross-start {
        align-items: start !important
    }

    .web-u-cross-center {
        align-items: center !important
    }

    @media (max-width:1023.9px) {
        .web-u-margin-block-120w-80s {
            margin-block: 5rem !important
        }
    }

    @media (min-width:1024px) {
        .web-u-margin-block-120w-80s {
            margin-block: 7.5rem !important
        }
    }

    .web-u-margin-block-start-2 {
        margin-block-start: .125rem
    }

    .web-u-margin-block-start-6 {
        margin-block-start: .375rem
    }

    .web-u-margin-block-start-48 {
        margin-block-start: 3rem
    }

    .web-u-margin-block-start-64 {
        margin-block-start: 4rem
    }

    .web-u-margin-block-start-80 {
        margin-block-start: 5rem
    }

    .web-u-margin-block-start-88 {
        margin-block-start: 5.5rem
    }

    .web-u-margin-block-start-160 {
        margin-block-start: 10rem !important
    }

    .web-u-margin-block-end-24 {
        margin-block-end: 1.5rem
    }

    .web-u-margin-block-end-32 {
        margin-block-end: 2rem
    }

    .web-u-margin-inline-start-48 {
        margin-inline-start: 3rem
    }

    .web-u-margin-inline-end-12 {
        margin-inline-end: .75rem
    }

    .web-u-text-color-primary-500 {
        color: hsl(var(--web-color-pink-500))
    }

    .web-u-text-color-secondary-100 {
        color: hsl(var(--web-color-secondary-100))
    }

    .web-u-text-color-neutral-50 {
        color: hsl(var(--web-color-greyscale-50))
    }

    .web-u-text-color-neutral-100 {
        color: hsl(var(--web-color-greyscale-100))
    }

    .web-u-text-color-neutral-500 {
        color: hsl(var(--web-color-greyscale-500))
    }

    .web-u-text-color-neutral-700 {
        color: hsl(var(--web-color-greyscale-700))
    }

    .web-u-text-color-neutral-900 {
        color: hsl(var(--web-color-greyscale-900))
    }

    .web-u-bg-color-neutral-50 {
        background-color: hsl(var(--web-color-greyscale-50))
    }

    .web-u-bg-color-neutral-100 {
        background-color: hsl(var(--web-color-greyscale-100))
    }

    .web-u-bg-color-neutral-800 {
        background-color: hsl(var(--web-color-greyscale-800))
    }

    .web-u-bg-color-neutral-900 {
        background-color: hsl(var(--web-color-greyscale-900))
    }

    .web-u-bg-color-primary-500 {
        background-color: hsl(var(--web-color-pink-500))
    }

    .web-u-font-size-16 {
        font-size: 1rem !important
    }

    .web-u-font-size-20 {
        font-size: 1.25rem !important
    }

    .web-u-font-size-24 {
        font-size: 1.5rem !important
    }

    .web-u-font-size-40 {
        font-size: 2.5rem !important
    }

    .web-u-border-radius-12 {
        border-radius: .75rem
    }

    .web-u-min-block-size-160 {
        min-block-size: 10rem !important
    }

    .web-u-min-block-size-320 {
        min-block-size: 20rem !important
    }

    @media (max-width:1023.9px) {
        .web-u-flex-direction-column-mobile {
            flex-direction: column
        }
    }

    .web-u-flex-basis-200 {
        flex-basis: 12.5rem
    }

    .web-u-flex-basis-300 {
        flex-basis: 18.75rem
    }

    .web-u-flex-basis-378 {
        flex-basis: 23.625rem
    }

    .web-u-flex-basis-380 {
        flex-basis: 23.75rem
    }

    .web-u-flex-basis-400 {
        flex-basis: 25rem
    }

    .web-u-translate-x-negative {
        transform: translate(-100%)
    }

    .web-u-gap-6 {
        gap: .375rem
    }

    .web-u-gap-20 {
        gap: 1.25rem !important
    }

    @media (max-width:1023.9px) {
        .web-u-gap-20-mobile {
            gap: 1.25rem !important
        }
    }

    .web-u-gap-32 {
        gap: 2rem !important
    }

    .web-u-gap-64 {
        gap: 4rem !important
    }

    .web-u-gap-80 {
        gap: 5rem
    }

    .web-u-gap-96 {
        gap: 6rem
    }

    .web-u-row-gap-24 {
        row-gap: 1.5rem !important
    }

    .web-u-row-gap-32 {
        row-gap: 2rem !important
    }

    .web-u-row-gap-48 {
        row-gap: 3rem !important
    }

    .web-u-row-gap-80 {
        row-gap: 5rem !important
    }

    .web-u-row-gap-96 {
        row-gap: 6rem !important
    }

    .web-u-column-gap-96 {
        column-gap: 6rem !important
    }

    .web-u-text-align-start {
        text-align: start !important
    }

    .web-u-text-align-center {
        text-align: center !important
    }

    @media (max-width:1023.9px) {
        .web-u-mobile-align-text-center {
            text-align: center !important
        }
    }

    .web-u-padding-inline-0 {
        padding-inline: 0 !important
    }

    .web-u-padding-inline-12 {
        padding-inline: .75rem !important
    }

    .web-u-padding-inline-64 {
        padding-inline: 4rem !important
    }

    .web-u-padding-block-8 {
        padding-block: .5rem !important
    }

    .web-u-inset-block-start-100 {
        inset-block-start: 10rem
    }

    .web-u-cross-child-start {
        align-self: start !important
    }

    .web-u-cross-child-center {
        align-self: center !important
    }

    .web-u-cross-child-end {
        align-self: end !important
    }

    .web-u-media-cover {
        object-fit: cover
    }

    .web-u-media-ratio-1-1 {
        display: block;
        aspect-ratio: 1/1;
        object-fit: cover
    }

    .web-u-media-ratio-16-9 {
        display: block;
        aspect-ratio: 16/9;
        object-fit: cover
    }

    .web-u-container-query-inline {
        container-type: inline-size
    }

    .web-u-pointer-events-none {
        pointer-events: none
    }

    .web-u-z-index-1-negative {
        z-index: -1
    }

    .web-u-list-inline-dot-sep>li:nth-child(n+2):before {
        content: "·";
        margin-inline-start: .5rem
    }

    .web-u-grid-auto-column-1fr {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr
    }

    .web-u-grid-auto-column-1fr.is-with-footer-border {
        padding-block: 40px
    }

    .web-u-grid-auto-column-1fr.is-with-footer-border:after {
        content: "";
        display: block;
        block-size: .0625rem;
        inline-size: 100vw;
        position: absolute;
        inset-inline-start: calc((100vw - 100cqw)/-2 + .5rem);
        inset-block-start: 100%;
        border-block-end: solid 1px hsl(var(--web-color-smooth))
    }

    .web-u-mobile-divider:after {
        content: "";
        display: block;
        block-size: .0625rem;
        padding-block-end: 40px;
        inline-size: 100vw;
        position: absolute;
        inset-inline-start: calc((100vw - 100cqw)/-2 + .5rem);
        inset-block-start: 100%;
        border-block-end: solid 1px hsl(var(--web-color-smooth))
    }

    .web-u-filter-blur-8 {
        -webkit-backdrop-filter: blur(.5rem);
        backdrop-filter: blur(.5rem);
        background-color: hsl(var(--web-color-greyscale-50)/.7)
    }

    .web-u-only-light,
    .web-u-only-dark {
        display: none
    }

    .theme-dark .web-u-only-dark {
        display: block
    }

    .theme-light .web-u-only-dark {
        display: none
    }

    .theme-light .web-u-only-light {
        display: block
    }

    @media (max-width:1023.9px) {
        .web-is-mobile-closed {
            display: none !important
        }
    }

    @media (min-width:1024px) {
        .web-is-only-mobile {
            display: none !important
        }
    }

    @media (max-width:1023.9px),
    (min-width:1280px) {
        .web-is-only-tablet {
            display: none !important
        }
    }

    @media (max-width:1023.9px),
    (min-width:1024px) and (max-width:1279.9px) {
        .web-is-only-desktop {
            display: none !important
        }
    }

    @media (max-width:1023.9px) {
        .web-is-not-mobile {
            display: none !important
        }
    }

    @media (min-width:1280px) {
        .web-is-not-desktop {
            display: none !important
        }
    }

    @media (max-width:1023.9px) {
        .web-u-gradient-mobile-align {
            width: 230% !important;
            margin-left: -50% !important;
            margin-top: -25% !important
        }
    }

    @media (max-width:1023.9px) {
        .web-u-gradient-mobile-align-2 {
            width: 230% !important;
            margin-left: -25% !important;
            margin-top: 100% !important
        }
    }

    .collapsible-button {
        padding-block: 1.5rem
    }

    .collapsible-content {
        margin-block-start: -.5rem
    }

    .web-u-flip-x {
        transform: scaleX(-1)
    }

    .web-u-flip-y {
        transform: scaleY(-1)
    }

    .web-u-inline-block {
        display: inline-block
    }

    .web-u-uppercase {
        text-transform: uppercase
    }

    .web-u-capitalize {
        text-transform: capitalize
    }

    .web-u-rotate-180 {
        transform: rotate(180deg)
    }

    .web-u-transition {
        transition: var(--transition)
    }

    .web-u-flex-1 {
        flex: 1
    }
}

html {
    color-scheme: dark
}

.skip.svelte-b0ikdf {
    position: absolute;
    inset-block-start: 0;
    z-index: 9999;
    display: block;
    background-color: hsl(var(--web-color-mint-500));
    color: hsl(var(--web-color-black));
    text-decoration: underline;
    opacity: 0;
    padding: .75rem 1.25rem;
    pointer-events: none
}

.skip.svelte-b0ikdf:focus {
    opacity: 1;
    position: relative;
    pointer-events: all
}