/*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */

@layer theme {
    :root, :host {
        --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        --page: #f4f4f0;
        --yellow: #f8ca19;
        --orange: #ff6b35;
        --pink: #d62d8d;
        --violet: #8b7eb3;
        --cyan: #31b8c6;
        --green: #35bb8a;
        --muted: #676266;
        --color-gray-100: oklch(.967 .003 264.542);
        --color-gray-200: oklch(.928 .006 264.531);
        --color-gray-300: oklch(.872 .01 258.338);
        --color-gray-400: oklch(.707 .022 261.325);
        --color-gray-500: oklch(.551 .027 264.364);
        --color-gray-600: oklch(.446 .03 256.802);
        --color-gray-700: oklch(.373 .034 259.733);
        --color-gray-900: oklch(.21 .034 264.665);
        --color-neutral-200: oklch(.922 0 0);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: 1.2;
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --text-6xl: 3.75rem;
        --text-6xl--line-height: 1;
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --radius-4xl: 2rem;
        --drop-shadow-2xl: 0 25px 25px #00000026;
        --ease-out: cubic-bezier(0,0,.2,1);
        --ease-in-out: cubic-bezier(.4,0,.2,1);
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
        --default-font-family: var(--font-sans);
        --default-font-feature-settings: var(--font-sans--font-feature-settings);
        --default-font-variation-settings: var(--font-sans--font-variation-settings);
        --default-mono-font-family: var(--font-mono);
        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
        --color-picto-primary: #9929fb;
        --color-picto-primary-dark: #650fa0;
        --color-soft-white: #f0f1f3;
        --color-soft-dark: #87909d;
        --gradient: linear-gradient(90deg, var(--yellow) 0%, var(--orange) 20%, var(--pink) 40%, var(--violet) 58%, var(--cyan) 78%, var(--green) 100%);
        --gradient-soft: linear-gradient(135deg, rgba(255,107,53,.15), rgba(214,45,141,.13) 36%, rgba(49,184,198,.16) 68%, rgba(53,187,138,.14));
        --ink: #171415;
        --dark-ink: #222222;
        --line: #d9d6d5;
        --shadow: 0 24px 70px rgba(23,20,21,.09);
        --surface: #ffffff;
        --surface-soft: #ecece7;
    }
}

@layer base {
    *, :after, :before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent
    }

    body {
        line-height: inherit
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b, strong {
        font-weight: bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
        font-feature-settings: var(--default-mono-font-feature-settings,normal);
        font-variation-settings: var(--default-mono-font-variation-settings,normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

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

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block
    }

    img, video {
        max-width: 100%;
        height: auto
    }

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple],[size])) optgroup {
        font-weight: bolder
    }

        :where(select:is([multiple],[size])) optgroup option {
            padding-inline-start: 20px
        }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1;
        color: color-mix(in oklab,currentColor 50%,transparent)
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button, input:where([type=button],[type=reset],[type=submit]) {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::file-selector-button {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }

    :where(:root), :root:has(input.theme-controller[value=light]:checked), [data-theme=light] {
        color-scheme: light;
        --color-base-100: oklch(100% 0 0);
        --color-base-200: oklch(98% 0 0);
        --color-base-300: oklch(95% 0 0);
        --color-base-content: oklch(21% .006 285.885);
        --color-primary: oklch(45% .24 277.023);
        --color-primary-content: oklch(93% .034 272.788);
        --color-secondary: oklch(65% .241 354.308);
        --color-secondary-content: oklch(94% .028 342.258);
        --color-accent: oklch(77% .152 181.912);
        --color-accent-content: oklch(38% .063 188.416);
        --color-neutral: oklch(14% .005 285.823);
        --color-neutral-content: oklch(92% .004 286.32);
        --color-info: oklch(74% .16 232.661);
        --color-info-content: oklch(29% .066 243.157);
        --color-success: oklch(76% .177 163.223);
        --color-success-content: oklch(37% .077 168.94);
        --color-warning: oklch(82% .189 84.429);
        --color-warning-content: oklch(41% .112 45.904);
        --color-error: oklch(71% .194 13.428);
        --color-error-content: oklch(27% .105 12.094);
        --radius-selector: .5rem;
        --radius-field: .25rem;
        --radius-box: .5rem;
        --size-selector: .25rem;
        --size-field: .25rem;
        --border: 1px;
        --depth: 1;
        --noise: 0
    }

    @media (prefers-color-scheme:dark) {
        :root {
            color-scheme: dark;
            --color-base-100: oklch(25.33% .016 252.42);
            --color-base-200: oklch(23.26% .014 253.1);
            --color-base-300: oklch(21.15% .012 254.09);
            --color-base-content: oklch(97.807% .029 256.847);
            --color-primary: oklch(58% .233 277.117);
            --color-primary-content: oklch(96% .018 272.314);
            --color-secondary: oklch(65% .241 354.308);
            --color-secondary-content: oklch(94% .028 342.258);
            --color-accent: oklch(77% .152 181.912);
            --color-accent-content: oklch(38% .063 188.416);
            --color-neutral: oklch(14% .005 285.823);
            --color-neutral-content: oklch(92% .004 286.32);
            --color-info: oklch(74% .16 232.661);
            --color-info-content: oklch(29% .066 243.157);
            --color-success: oklch(76% .177 163.223);
            --color-success-content: oklch(37% .077 168.94);
            --color-warning: oklch(82% .189 84.429);
            --color-warning-content: oklch(41% .112 45.904);
            --color-error: oklch(71% .194 13.428);
            --color-error-content: oklch(27% .105 12.094);
            --radius-selector: .5rem;
            --radius-field: .25rem;
            --radius-box: .5rem;
            --size-selector: .25rem;
            --size-field: .25rem;
            --border: 1px;
            --depth: 1;
            --noise: 0
        }
    }

    :root:has(input.theme-controller[value=light]:checked), [data-theme=light] {
        color-scheme: light;
        --color-base-100: oklch(100% 0 0);
        --color-base-200: oklch(98% 0 0);
        --color-base-300: oklch(95% 0 0);
        --color-base-content: oklch(21% .006 285.885);
        --color-primary: oklch(45% .24 277.023);
        --color-primary-content: oklch(93% .034 272.788);
        --color-secondary: oklch(65% .241 354.308);
        --color-secondary-content: oklch(94% .028 342.258);
        --color-accent: oklch(77% .152 181.912);
        --color-accent-content: oklch(38% .063 188.416);
        --color-neutral: oklch(14% .005 285.823);
        --color-neutral-content: oklch(92% .004 286.32);
        --color-info: oklch(74% .16 232.661);
        --color-info-content: oklch(29% .066 243.157);
        --color-success: oklch(76% .177 163.223);
        --color-success-content: oklch(37% .077 168.94);
        --color-warning: oklch(82% .189 84.429);
        --color-warning-content: oklch(41% .112 45.904);
        --color-error: oklch(71% .194 13.428);
        --color-error-content: oklch(27% .105 12.094);
        --radius-selector: .5rem;
        --radius-field: .25rem;
        --radius-box: .5rem;
        --size-selector: .25rem;
        --size-field: .25rem;
        --border: 1px;
        --depth: 1;
        --noise: 0
    }

    :root:has(input.theme-controller[value=dark]:checked), [data-theme=dark] {
        color-scheme: dark;
        --color-base-100: oklch(25.33% .016 252.42);
        --color-base-200: oklch(23.26% .014 253.1);
        --color-base-300: oklch(21.15% .012 254.09);
        --color-base-content: oklch(97.807% .029 256.847);
        --color-primary: oklch(58% .233 277.117);
        --color-primary-content: oklch(96% .018 272.314);
        --color-secondary: oklch(65% .241 354.308);
        --color-secondary-content: oklch(94% .028 342.258);
        --color-accent: oklch(77% .152 181.912);
        --color-accent-content: oklch(38% .063 188.416);
        --color-neutral: oklch(14% .005 285.823);
        --color-neutral-content: oklch(92% .004 286.32);
        --color-info: oklch(74% .16 232.661);
        --color-info-content: oklch(29% .066 243.157);
        --color-success: oklch(76% .177 163.223);
        --color-success-content: oklch(37% .077 168.94);
        --color-warning: oklch(82% .189 84.429);
        --color-warning-content: oklch(41% .112 45.904);
        --color-error: oklch(71% .194 13.428);
        --color-error-content: oklch(27% .105 12.094);
        --radius-selector: .5rem;
        --radius-field: .25rem;
        --radius-box: .5rem;
        --size-selector: .25rem;
        --size-field: .25rem;
        --border: 1px;
        --depth: 1;
        --noise: 0
    }

    :root:has(input.theme-controller[value=cupcake]:checked), [data-theme=cupcake] {
        color-scheme: light;
        --color-base-100: oklch(97.788% .004 56.375);
        --color-base-200: oklch(93.982% .007 61.449);
        --color-base-300: oklch(91.586% .006 53.44);
        --color-base-content: oklch(23.574% .066 313.189);
        --color-primary: oklch(85% .138 181.071);
        --color-primary-content: oklch(43% .078 188.216);
        --color-secondary: oklch(89% .061 343.231);
        --color-secondary-content: oklch(45% .187 3.815);
        --color-accent: oklch(90% .076 70.697);
        --color-accent-content: oklch(47% .157 37.304);
        --color-neutral: oklch(27% .006 286.033);
        --color-neutral-content: oklch(92% .004 286.32);
        --color-info: oklch(68% .169 237.323);
        --color-info-content: oklch(29% .066 243.157);
        --color-success: oklch(69% .17 162.48);
        --color-success-content: oklch(26% .051 172.552);
        --color-warning: oklch(79% .184 86.047);
        --color-warning-content: oklch(28% .066 53.813);
        --color-error: oklch(64% .246 16.439);
        --color-error-content: oklch(27% .105 12.094);
        --radius-selector: 1rem;
        --radius-field: 2rem;
        --radius-box: 1rem;
        --size-selector: .25rem;
        --size-field: .25rem;
        --border: 2px;
        --depth: 1;
        --noise: 0
    }

    @property --radialprogress {
        syntax: "<percentage>";
        inherits: true;
        initial-value: 0%;
    }

    :root {
        scrollbar-color: color-mix(in oklch,currentColor 35%,#0000)#0000
    }

        :root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not([class*=drawer-open])>.drawer-toggle:checked) {
            overflow: hidden
        }

    /*:root, [data-theme] {
        background-color: var(--root-bg,var(--color-base-100));
        color: var(--color-base-content)
    }*/

    :root {
        --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E")
    }

    .chat {
        --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e")
    }

    :where(:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not(.drawer-open)>.drawer-toggle:checked)) {
        scrollbar-gutter: stable;
        background-image: linear-gradient(var(--color-base-100),var(--color-base-100));
        --root-bg: color-mix(in srgb,var(--color-base-100),oklch(0% 0 0) 40%)
    }
}

@layer components;

@layer utilities {
    .menu {
        --menu-active-fg: var(--color-neutral-content);
        --menu-active-bg: var(--color-neutral);
        flex-flow: column wrap;
        width: fit-content;
        padding: .5rem;
        font-size: .875rem;
        display: flex
    }

        .menu :where(li ul) {
            white-space: nowrap;
            margin-inline-start: 1rem;
            padding-inline-start: .5rem;
            position: relative
        }

            .menu :where(li ul):before {
                background-color: var(--color-base-content);
                opacity: .1;
                width: var(--border);
                content: "";
                inset-inline-start: 0;
                position: absolute;
                top: .75rem;
                bottom: .75rem
            }

        .menu :where(li>.menu-dropdown:not(.menu-dropdown-show)) {
            display: none
        }

        .menu :where(li:not(.menu-title)>:not(ul,details,.menu-title,.btn)), .menu :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
            border-radius: var(--radius-field);
            text-align: start;
            text-wrap: balance;
            -webkit-user-select: none;
            user-select: none;
            grid-auto-columns: minmax(auto,max-content) auto max-content;
            grid-auto-flow: column;
            align-content: flex-start;
            align-items: center;
            gap: .5rem;
            padding-block: .375rem;
            padding-inline: .75rem;
            transition-property: color,background-color,box-shadow;
            transition-duration: .2s;
            transition-timing-function: cubic-bezier(0,0,.2,1);
            display: grid
        }

        .menu :where(li>details>summary) {
            --tw-outline-style: none;
            outline-style: none
        }

    @media (forced-colors:active) {
        .menu :where(li>details>summary) {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .menu :where(li>details>summary)::-webkit-details-marker {
        display: none
    }

    :is(.menu :where(li>details>summary),.menu :where(li>.menu-dropdown-toggle)):after {
        content: "";
        transform-origin: 50%;
        pointer-events: none;
        justify-self: flex-end;
        width: .375rem;
        height: .375rem;
        transition-property: rotate,translate;
        transition-duration: .2s;
        display: block;
        translate: 0 -1px;
        rotate: -135deg;
        box-shadow: inset 2px 2px
    }

    .menu :where(li>details[open]>summary):after, .menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after {
        translate: 0 1px;
        rotate: 45deg
    }

    .menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus, .menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
        cursor: pointer;
        background-color: color-mix(in oklab,var(--color-base-content)10%,transparent);
        color: var(--color-base-content);
        --tw-outline-style: none;
        outline-style: none
    }

    @media (forced-colors:active) {
        :is(.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible) {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
        cursor: pointer;
        /*background-color: color-mix(in oklab,var(--color-base-content)10%,transparent);*/
        --tw-outline-style: none;
        outline-style: none;
        box-shadow: inset 0 1px #00000003,inset 0 -1px #ffffff03
    }

    @media (forced-colors:active) {
        .menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .menu :where(li:empty) {
        background-color: var(--color-base-content);
        opacity: .1;
        height: 1px;
        margin: .5rem 1rem
    }

    .menu :where(li) {
        flex-flow: column wrap;
        flex-shrink: 0;
        align-items: stretch;
        display: flex;
        position: relative
    }

        .menu :where(li) .badge {
            justify-self: flex-end
        }

        .menu :where(li) > :not(ul,.menu-title,details,.btn):active, .menu :where(li) > :not(ul,.menu-title,details,.btn).menu-active, .menu :where(li) > details > summary:active {
            --tw-outline-style: none;
            color: var(--menu-active-fg);
            background-color: var(--menu-active-bg);
            background-size: auto,calc(var(--noise)*100%);
            background-image: none,var(--fx-noise);
            outline-style: none
        }

    @media (forced-colors:active) {
        :is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active) {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    :is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active):not(:is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active):active) {
        box-shadow: 0 2px calc(var(--depth)*3px) -2px var(--menu-active-bg)
    }

    .menu :where(li).menu-disabled {
        pointer-events: none;
        color: color-mix(in oklab,var(--color-base-content)20%,transparent)
    }

    .menu .dropdown:focus-within .menu-dropdown-toggle:after {
        translate: 0 1px;
        rotate: 45deg
    }

    .menu .dropdown-content {
        margin-top: .5rem;
        padding: .5rem
    }

        .menu .dropdown-content:before {
            display: none
        }

    .dropdown {
        position-area: var(--anchor-v,bottom)var(--anchor-h,span-right);
        display: inline-block;
        position: relative
    }

        .dropdown > :not(summary):focus {
            --tw-outline-style: none;
            outline-style: none
        }

    @media (forced-colors:active) {
        .dropdown > :not(summary):focus {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .dropdown .dropdown-content {
        position: absolute
    }

    .dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content {
        transform-origin: top;
        opacity: 0;
        display: none;
        scale: 95%
    }

    .dropdown[popover], .dropdown .dropdown-content {
        z-index: 999;
        transition-behavior: allow-discrete;
        transition-property: opacity,scale,display;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
        animation: .2s dropdown
    }

    @starting-style {
        .dropdown[popover], .dropdown .dropdown-content {
            opacity: 0;
            scale: 95%
        }
    }

    :is(.dropdown.dropdown-open,.dropdown:not(.dropdown-hover):focus,.dropdown:focus-within) > [tabindex]:first-child {
        pointer-events: none
    }

    :is(.dropdown.dropdown-open,.dropdown:not(.dropdown-hover):focus,.dropdown:focus-within) .dropdown-content {
        opacity: 1
    }

    .dropdown.dropdown-hover:hover .dropdown-content {
        opacity: 1;
        scale: 100%
    }

    .dropdown:is(details) summary::-webkit-details-marker {
        display: none
    }

    :is(.dropdown.dropdown-open,.dropdown:focus,.dropdown:focus-within) .dropdown-content {
        scale: 100%
    }

    .dropdown:where([popover]) {
        background: 0 0
    }

    .dropdown[popover] {
        color: inherit;
        position: fixed
    }

    @supports not (position-area:bottom) {
        .dropdown[popover] {
            margin: auto
        }

            .dropdown[popover].dropdown-open:not(:popover-open) {
                transform-origin: top;
                opacity: 0;
                display: none;
                scale: 95%
            }

            .dropdown[popover]::backdrop {
                background-color: oklab(0% none none/.3)
            }
    }

    .dropdown[popover]:not(.dropdown-open,:popover-open) {
        transform-origin: top;
        opacity: 0;
        display: none;
        scale: 95%
    }

    .btn {
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
        outline-offset: 2px;
        webkit-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        padding-inline: var(--btn-p);
        color: var(--btn-fg);
        --tw-prose-links: var(--btn-fg);
        height: var(--size);
        font-size: var(--fontsize,.875rem);
        outline-color: var(--btn-color,var(--color-base-content));
        background-color: var(--btn-bg);
        background-size: auto,calc(var(--noise)*100%);
        background-image: none,var(--btn-noise);
        border-width: var(--border);
        border-style: solid;
        border-color: var(--btn-border);
        text-shadow: 0 .5px oklch(100% 0 0/calc(var(--depth)*.15));
        box-shadow: 0 .5px 0 .5px oklch(100% 0 0/calc(var(--depth)*6%)) inset,var(--btn-shadow);
        --size: calc(var(--size-field,.25rem)*10);
        --btn-bg: var(--btn-color,var(--color-base-200));
        --btn-fg: var(--color-base-content);
        --btn-p: 1rem;
        --btn-border: color-mix(in oklab,var(--btn-bg),#000 calc(var(--depth)*5%));
        --btn-shadow: 0 3px 2px -2px color-mix(in oklab,var(--btn-bg)calc(var(--depth)*30%),#0000),0 4px 3px -2px color-mix(in oklab,var(--btn-bg)calc(var(--depth)*30%),#0000);
        --btn-noise: var(--fx-noise);
        border-start-start-radius: var(--join-ss,var(--radius-field));
        border-start-end-radius: var(--join-se,var(--radius-field));
        border-end-end-radius: var(--join-ee,var(--radius-field));
        border-end-start-radius: var(--join-es,var(--radius-field));
        flex-wrap: nowrap;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        gap: .375rem;
        font-weight: 600;
        transition-property: color,background-color,border-color,box-shadow;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(0,0,.2,1);
        display: inline-flex
    }

    .prose .btn {
        text-decoration-line: none
    }

    .button {
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 13px 22px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: .94rem;
        font-weight: 800;
        text-decoration: none;
        transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    .button-light {
        background: white;
        color: var(--ink);
    }

    .button-primary {
        background: var(--ink);
        color: white;
        box-shadow: 0 12px 30px rgba(23,20,21,.18);
    }

    @media (hover:hover) {
        .btn:hover {
            --btn-bg: color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 7%)
        }
        .button:hover {
            --btn-bg: color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 7%)
        }
    }

    .btn:focus-visible {
        outline-width: 2px;
        outline-style: solid
    }

    .button:focus-visible {
        outline-width: 2px;
        outline-style: solid
    }

    .btn:active:not(.btn-active) {
        --btn-bg: color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 5%);
        --btn-border: color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 7%);
        --btn-shadow: 0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0);
        translate: 0 .5px
    }

    .button:active:not(.btn-active) {
        --btn-bg: color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 5%);
        --btn-border: color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 7%);
        --btn-shadow: 0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0);
        translate: 0 .5px
    }

    .btn:is(:disabled,[disabled],.btn-disabled) {
        pointer-events: none;
        --btn-border: #0000;
        --btn-noise: none;
        --btn-fg: color-mix(in oklch,var(--color-base-content)20%,#0000)
    }

        .btn:is(:disabled,[disabled],.btn-disabled):not(.btn-link,.btn-ghost) {
            background-color: color-mix(in oklab,var(--color-base-content)10%,transparent);
            box-shadow: none
        }

    @media (hover:hover) {
        .btn:is(:disabled,[disabled],.btn-disabled):hover {
            pointer-events: none;
            background-color: color-mix(in oklab,var(--color-neutral)20%,transparent);
            --btn-border: #0000;
            --btn-fg: color-mix(in oklch,var(--color-base-content)20%,#0000)
        }
    }

    .btn:is(input[type=checkbox],input[type=radio]) {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

        .btn:is(input[type=checkbox],input[type=radio]):after {
            content: attr(aria-label)
        }

    .btn:where(input:checked:not(.filter .btn)) {
        --btn-color: var(--color-primary);
        --btn-fg: var(--color-primary-content);
        isolation: isolate
    }

    .input {
        cursor: text;
        border: var(--border)solid #0000;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--color-base-100);
        vertical-align: middle;
        white-space: nowrap;
        width: clamp(3rem,20rem,100%);
        height: var(--size);
        border-color: var(--input-color);
        box-shadow: 0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset;
        --size: calc(var(--size-field,.25rem)*10);
        --input-color: color-mix(in oklab,var(--color-base-content)20%,#0000);
        border-start-start-radius: var(--join-ss,var(--radius-field));
        border-start-end-radius: var(--join-se,var(--radius-field));
        border-end-end-radius: var(--join-ee,var(--radius-field));
        border-end-start-radius: var(--join-es,var(--radius-field));
        flex-shrink: 1;
        align-items: center;
        gap: .5rem;
        padding-inline: .75rem;
        font-size: .875rem;
        display: inline-flex;
        position: relative
    }

        .input:where(input) {
            display: inline-flex
        }

        .input :where(input) {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: #0000;
            border: none;
            width: 100%;
            height: 100%;
            display: inline-flex
        }

            .input :where(input):focus, .input :where(input):focus-within {
                --tw-outline-style: none;
                outline-style: none
            }

    @media (forced-colors:active) {
        :is(.input :where(input):focus,.input :where(input):focus-within) {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .input:focus, .input:focus-within {
        --input-color: var(--color-base-content);
        box-shadow: 0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000);
        outline: 2px solid var(--input-color);
        outline-offset: 2px;
        isolation: isolate
    }

    .input:has(>input[disabled]), .input:is(:disabled,[disabled]) {
        cursor: not-allowed;
        border-color: var(--color-base-200);
        background-color: var(--color-base-200);
        color: color-mix(in oklab,var(--color-base-content)40%,transparent);
        box-shadow: none
    }

    :is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]))::placeholder {
        color: color-mix(in oklab,var(--color-base-content)20%,transparent)
    }

    .input:has(>input[disabled]) > input[disabled] {
        cursor: not-allowed
    }

    .input::-webkit-date-and-time-value {
        text-align: inherit
    }

    .input[type=number]::-webkit-inner-spin-button {
        margin-block: -.75rem;
        margin-inline-end: -.75rem
    }

    .input::-webkit-calendar-picker-indicator {
        position: absolute;
        inset-inline-end: .75em
    }

    .range {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        webkit-appearance: none;
        --range-thumb: var(--color-base-100);
        --range-thumb-size: calc(var(--size-selector,.25rem)*6);
        --range-progress: currentColor;
        --range-fill: 1;
        --range-p: .25rem;
        --range-bg: color-mix(in oklab,currentColor 10%,#0000);
        cursor: pointer;
        vertical-align: middle;
        --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
        border-radius: calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));
        width: clamp(3rem,20rem,100%);
        height: var(--range-thumb-size);
        background-color: #0000;
        border: none;
        overflow: hidden
    }

    [dir=rtl] .range {
        --range-dir: -1
    }

    .range:focus {
        outline: none
    }

    .range:focus-visible {
        outline-offset: 2px;
        outline: 2px solid
    }

    .range::-webkit-slider-runnable-track {
        background-color: var(--range-bg);
        border-radius: var(--radius-selector);
        width: 100%;
        height: calc(var(--range-thumb-size)*.5)
    }

    @media (forced-colors:active) {
        .range::-webkit-slider-runnable-track {
            border: 1px solid
        }

        .range::-moz-range-track {
            border: 1px solid
        }
    }

    .range::-webkit-slider-thumb {
        box-sizing: border-box;
        border-radius: calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));
        height: var(--range-thumb-size);
        width: var(--range-thumb-size);
        border: var(--range-p)solid;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        webkit-appearance: none;
        color: var(--range-progress);
        box-shadow: 0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
        background-color: currentColor;
        position: relative;
        top: 50%;
        transform: translateY(-50%)
    }

    .range::-moz-range-track {
        background-color: var(--range-bg);
        border-radius: var(--radius-selector);
        width: 100%;
        height: calc(var(--range-thumb-size)*.5)
    }

    .range::-moz-range-thumb {
        box-sizing: border-box;
        border-radius: calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));
        height: var(--range-thumb-size);
        width: var(--range-thumb-size);
        border: var(--range-p)solid;
        color: var(--range-progress);
        box-shadow: 0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
        background-color: currentColor;
        position: relative;
        top: 50%
    }

    .range:disabled {
        cursor: not-allowed;
        opacity: .3
    }

    .menu-horizontal {
        flex-direction: row;
        display: inline-flex
    }

        .menu-horizontal > li:not(.menu-title) > details > ul {
            margin-inline-start: 0;
            margin-top: 1rem;
            padding-block: .5rem;
            padding-inline-end: .5rem;
            position: absolute
        }

        .menu-horizontal > li > details > ul:before {
            content: none
        }

    :where(.menu-horizontal>li:not(.menu-title)>details>ul) {
        border-radius: var(--radius-box);
        background-color: var(--color-base-100);
        box-shadow: 0 1px 3px #0000001a,0 1px 2px -1px #0000001a
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .sticky {
        position: sticky
    }

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

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

    .-bottom-15 {
        bottom: calc(var(--spacing)*-15)
    }

    .-bottom-20 {
        bottom: calc(var(--spacing)*-20)
    }

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

    .bottom-9 {
        bottom: calc(var(--spacing)*9)
    }

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

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

    .z-1 {
        z-index: 1
    }

    .z-10 {
        z-index: 10
    }

    .z-50 {
        z-index: 50
    }

    .m-6 {
        margin: calc(var(--spacing)*6)
    }

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

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

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

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

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

    .mx-auto {
        margin-inline: auto
    }

    .input-lg {
        --size: calc(var(--size-field,.25rem)*12);
        font-size: 1.125rem
    }

        .input-lg[type=number]::-webkit-inner-spin-button {
            margin-block: -.75rem;
            margin-inline-end: -.75rem
        }

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

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

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

    .my-8\.75 {
        margin-block: calc(var(--spacing)*8.75)
    }

    .my-auto {
        margin-block: auto
    }

    .ms-1 {
        margin-inline-start: calc(var(--spacing)*1)
    }

    .ms-3 {
        margin-inline-start: calc(var(--spacing)*3)
    }

    .ms-3\.25 {
        margin-inline-start: calc(var(--spacing)*3.25)
    }

    .ms-4 {
        margin-inline-start: calc(var(--spacing)*4)
    }

    .ms-\[12px\] {
        margin-inline-start: 12px
    }

    .me-5 {
        margin-inline-end: calc(var(--spacing)*5)
    }

    .me-31\.5 {
        margin-inline-end: calc(var(--spacing)*31.5)
    }

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

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

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

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

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

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

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

    .mt-12\.5 {
        margin-top: calc(var(--spacing)*12.5)
    }

    .mt-\[-16px\] {
        margin-top: -16px
    }

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

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

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

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

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

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

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

    .navbar {
        align-items: center;
        width: 100%;
        min-height: 4rem;
        padding: .5rem;
        display: flex
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline-block {
        display: inline-block
    }

    .aspect-\[536\/636\] {
        aspect-ratio: 536/636
    }

    .aspect-auto {
        aspect-ratio: auto
    }

    .aspect-square {
        aspect-ratio: 1
    }

    .h-0\.5 {
        height: calc(var(--spacing)*.5)
    }

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

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

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

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

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

    .h-56\.5 {
        height: calc(var(--spacing)*56.5)
    }

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

    .h-\[100vh\] {
        height: 100vh
    }

    .h-\[120\%\] {
        height: 120%
    }

    .h-auto {
        height: auto
    }

    .h-fit {
        height: fit-content
    }

    .h-full {
        height: 100%
    }

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

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

    .w-4\.5 {
        width: calc(var(--spacing)*4.5)
    }

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

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

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

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

    .w-\[5px\] {
        width: 5px
    }

    .w-\[33rem\] {
        width: 33rem
    }

    .w-\[100vw\] {
        width: 100vw
    }

    .w-auto {
        width: auto
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .w-lvw {
        width: 100lvw
    }

    .max-w-66 {
        max-width: calc(var(--spacing)*66)
    }

    .max-w-84 {
        max-width: calc(var(--spacing)*84)
    }

    .max-w-106 {
        max-width: calc(var(--spacing)*106)
    }

    .max-w-134 {
        max-width: calc(var(--spacing)*134)
    }

    .max-w-135 {
        max-width: calc(var(--spacing)*135)
    }

    .max-w-144\.25 {
        max-width: calc(var(--spacing)*144.25)
    }

    .max-w-169 {
        max-width: calc(var(--spacing)*169)
    }

    .max-w-218 {
        max-width: calc(var(--spacing)*218)
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .scale-0 {
        --tw-scale-x: 0%;
        --tw-scale-y: 0%;
        --tw-scale-z: 0%;
        scale: var(--tw-scale-x)var(--tw-scale-y)
    }

    .scale-x-0 {
        --tw-scale-x: 0%;
        scale: var(--tw-scale-x)var(--tw-scale-y)
    }

    .transform {
        transform: var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)
    }

    .link {
        cursor: pointer;
        text-decoration-line: underline
    }

        .link:focus {
            --tw-outline-style: none;
            outline-style: none
        }

    @media (forced-colors:active) {
        .link:focus {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .link:focus-visible {
        outline-offset: 2px;
        outline: 2px solid
    }

    .cursor-grab {
        cursor: grab
    }

    .cursor-pointer {
        cursor: pointer
    }

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

    .flex-col {
        flex-direction: column
    }

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

    .flex-nowrap {
        flex-wrap: nowrap
    }

    .items-center {
        align-items: center
    }

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

    .justify-center {
        justify-content: center
    }

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

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

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

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

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

    .overflow-hidden {
        overflow: hidden
    }

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

    .menu-lg :where(li:not(.menu-title)>:not(ul,details,.menu-title)), .menu-lg :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
        border-radius: var(--radius-field);
        padding-block: .375rem;
        padding-inline: 1rem;
        font-size: 1.125rem
    }

    .menu-lg .menu-title {
        padding-block: .75rem;
        padding-inline: 1.5rem
    }

    .rounded-2xl {
        border-radius: var(--radius-2xl)
    }

    .rounded-3xl {
        border-radius: var(--radius-3xl)
    }

    .rounded-\[4px\] {
        border-radius: 4px
    }

    .rounded-\[10px\] {
        border-radius: 10px
    }

    .rounded-box {
        border-radius: var(--radius-box)
    }

    .rounded-full {
        border-radius: 3.40282e38px
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-none {
        border-radius: 0
    }

    .rounded-sm {
        border-radius: var(--radius-sm)
    }

    .rounded-xl {
        border-radius: var(--radius-xl)
    }

    .rounded-b-4xl {
        border-bottom-right-radius: var(--radius-4xl);
        border-bottom-left-radius: var(--radius-4xl)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-0 {
        border-style: var(--tw-border-style);
        border-width: 0
    }

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

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

    .border-\[\#E6E8EB\] {
        border-color: #e6e8eb
    }

    .border-gray-100 {
        border-color: var(--color-gray-100)
    }

    .border-gray-200 {
        border-color: var(--color-gray-200)
    }

    .border-gray-300 {
        border-color: var(--color-gray-300)
    }

    .border-white {
        border-color: var(--color-white)
    }

    .bg-\[\#2A374A\] {
        background-color: #2a374a
    }

    .bg-\[\#EDD8FF80\] {
        background-color: #edd8ff80
    }

    .bg-\[\#F6EBFE\] {
        background-color: #f6ebfe
    }

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

    .bg-picto-primary {
        background-color: var(--color-picto-primary)
    }

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

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

    .object-cover {
        object-fit: cover
    }

    .object-fill {
        object-fit: fill
    }

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

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

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

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

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

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

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

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

    .px-\[0\.90rem\] {
        padding-inline: .9rem
    }

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

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

    .py-6\.5 {
        padding-block: calc(var(--spacing)*6.5)
    }

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

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

    .ps-5 {
        padding-inline-start: calc(var(--spacing)*5)
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    .pb-17\.5 {
        padding-bottom: calc(var(--spacing)*17.5)
    }

    .text-center {
        text-align: center
    }

    .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading,var(--text-2xl--line-height))
    }

    .text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading,var(--text-3xl--line-height))
    }

    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading,var(--text-lg--line-height))
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height))
    }

    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading,var(--text-xl--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    .text-\[8px\] {
        font-size: 8px
    }

    .text-\[10px\] {
        font-size: 10px
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .text-\[13px\] {
        font-size: 13px
    }

    .text-\[14px\] {
        font-size: 14px
    }

    .text-\[16px\] {
        font-size: 16px
    }

    .text-\[18px\] {
        font-size: 18px
    }

    .text-\[35px\] {
        font-size: 35px
    }

    .text-\[min\(24px\,38px\)\] {
        font-size: 24px
    }

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

    .font-light {
        --tw-font-weight: var(--font-weight-light);
        font-weight: var(--font-weight-light)
    }

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

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

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

    .text-nowrap {
        text-wrap: nowrap
    }

    .text-wrap {
        text-wrap: wrap
    }

    .text-\[\#424E60\] {
        color: #424e60
    }

    .text-\[\#132238\] {
        color: #132238
    }

    .text-\[\#333333\] {
        color: #333
    }

    .text-\[\#697482\] {
        color: #697482
    }

    .text-\[\#A5ACB5\] {
        color: #a5acb5
    }

    .text-black {
        color: var(--color-black)
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-500 {
        color: var(--color-gray-500)
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-gray-700 {
        color: var(--color-gray-700)
    }

    .text-gray-900 {
        color: var(--color-gray-900)
    }

    .text-neutral-200 {
        color: var(--color-neutral-200)
    }

    .text-picto-primary {
        color: var(--color-picto-primary)
    }

    .text-soft-dark {
        color: var(--color-soft-dark)
    }

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

    .underline {
        text-decoration-line: underline
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color,#00000040);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-\[0px_0px_90px_9px_rgba\(0\,_0\,_0\,_0\.1\)\] {
        --tw-shadow: 0px 0px 90px 9px var(--tw-shadow-color,#0000001a);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-gray-200 {
        --tw-shadow-color: var(--color-gray-200)
    }

    .shadow-gray-300 {
        --tw-shadow-color: var(--color-gray-300)
    }

    .shadow-white {
        --tw-shadow-color: var(--color-white)
    }

    .btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible) {
        --btn-shadow: "";
        --btn-bg: #0000;
        --btn-border: #0000;
        --btn-noise: none
    }

        .btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible):not(:disabled,[disabled],.btn-disabled) {
            --btn-fg: currentColor;
            outline-color: currentColor
        }

    .outline-\[\#FFFFFF\] {
        outline-color: #fff
    }

    .drop-shadow-2xl {
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .transition {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

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

    .delay-150 {
        transition-delay: .15s
    }

    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .duration-450 {
        --tw-duration: .45s;
        transition-duration: .45s
    }

    .duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    .duration-800 {
        --tw-duration: .8s;
        transition-duration: .8s
    }

    .duration-1000 {
        --tw-duration: 1s;
        transition-duration: 1s
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .btn-sm {
        --fontsize: .75rem;
        --btn-p: .75rem;
        --size: calc(var(--size-field,.25rem)*8)
    }

    .btn-xs {
        --fontsize: .6875rem;
        --btn-p: .5rem;
        --size: calc(var(--size-field,.25rem)*6)
    }

    .btn-primary {
        --btn-color: var(--color-primary);
        --btn-fg: var(--color-primary-content)
    }

    @media (hover:hover) {
        .group-hover\:scale-x-100:is(:where(.group):hover *) {
            --tw-scale-x: 100%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }
    }

    .placeholder\:text-\[15px\]::placeholder {
        font-size: 15px
    }

    @media (hover:hover) {
        .hover\:scale-120:hover {
            --tw-scale-x: 120%;
            --tw-scale-y: 120%;
            --tw-scale-z: 120%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .hover\:scale-\[1\]:hover {
            scale: 1
        }

        .hover\:cursor-pointer:hover {
            cursor: pointer
        }

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

        .hover\:border-picto-primary:hover {
            border-color: var(--color-picto-primary)
        }

        /*.hover\:bg-picto-primary:hover {
            background-color: var(--color-picto-primary)
        }*/

        .hover\:bg-picto-primary:hover {
            background-color: var(--color-white)
        }

        .hover\:bg-picto-primary-dark:hover {
            background-color: var(--color-picto-primary-dark)
        }

        .hover\:text-picto-primary:hover {
            color: var(--color-picto-primary)
        }

        .hover\:text-white:hover {
            color: var(--color-white)
        }

        .hover\:text-black:hover {
            color: var(--ink)
        }

        .hover\:shadow-2xl:hover {
            --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color,#00000040);
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .hover\:shadow-\[0px_0px_37px_5px_rgba\(0\,_0\,_0\,_0\.1\)\]:hover {
            --tw-shadow: 0px 0px 37px 5px var(--tw-shadow-color,#0000001a);
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .hover\:shadow-xl:hover {
            --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .hover\:drop-shadow-2xl:hover {
            --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
            filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
        }
    }

    .focus\:border-picto-primary:focus {
        border-color: var(--color-picto-primary)
    }

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

    .focus\:placeholder\:text-picto-primary:focus::placeholder {
        color: var(--color-picto-primary)
    }

    @media (width<96rem) {
        .max-2xl\:px-3 {
            padding-inline: calc(var(--spacing)*3)
        }
    }

    @media (width<82.5rem) {
        .max-xxl\:p-2 {
            padding: calc(var(--spacing)*2)
        }

        .max-xxl\:px-4 {
            padding-inline: calc(var(--spacing)*4)
        }
    }

    @media (width<80rem) {
        .max-xl\:mb-5 {
            margin-bottom: calc(var(--spacing)*5)
        }

        .max-xl\:mb-8 {
            margin-bottom: calc(var(--spacing)*8)
        }

        .max-xl\:gap-2 {
            gap: calc(var(--spacing)*2)
        }

        .max-xl\:text-center {
            text-align: center
        }
    }

    @media (width<64rem) {
        .max-lg\:mx-auto {
            margin-inline: auto
        }

        .max-lg\:hidden {
            display: none
        }

        .max-lg\:flex-col-reverse {
            flex-direction: column-reverse
        }

        .max-lg\:text-center {
            text-align: center
        }
    }

    @media (width<48rem) {
        .max-md\:mx-auto {
            margin-inline: auto
        }

        .max-md\:my-7 {
            margin-block: calc(var(--spacing)*7)
        }

        .max-md\:mb-4 {
            margin-bottom: calc(var(--spacing)*4)
        }

        .max-md\:mb-5 {
            margin-bottom: calc(var(--spacing)*5)
        }

        .max-md\:flex-col {
            flex-direction: column
        }

        .max-md\:justify-center {
            justify-content: center
        }

        .max-md\:text-center {
            text-align: center
        }

        .max-md\:text-\[14px\] {
            font-size: 14px
        }
    }

    @media (width<40rem) {
        .max-sm\:mx-auto {
            margin-inline: auto
        }

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

        .max-sm\:p-2 {
            padding: calc(var(--spacing)*2)
        }

        .max-sm\:px-2 {
            padding-inline: calc(var(--spacing)*2)
        }

        .max-sm\:text-\[14px\] {
            font-size: 14px
        }
    }

    @media (width<23.125rem) {
        .max-xs\:mt-3 {
            margin-top: calc(var(--spacing)*3)
        }

        .max-xs\:mb-3 {
            margin-bottom: calc(var(--spacing)*3)
        }

        .max-xs\:flex-col {
            flex-direction: column
        }

        .max-xs\:gap-4 {
            gap: calc(var(--spacing)*4)
        }

        .max-xs\:px-2 {
            padding-inline: calc(var(--spacing)*2)
        }

        .max-xs\:text-\[12px\] {
            font-size: 12px
        }
    }

    @media (width<21.25rem) {
        .max-xxs\:grid-flow-col {
            grid-auto-flow: column
        }
    }

    @media (width>=21.25rem) {
        .xxs\:my-5 {
            margin-block: calc(var(--spacing)*5)
        }

        .xxs\:py-3 {
            padding-block: calc(var(--spacing)*3)
        }

        .xxs\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading,var(--text-3xl--line-height))
        }

        .xxs\:text-4xl {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading,var(--text-4xl--line-height))
        }

        .xxs\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,var(--text-lg--line-height))
        }

        .xxs\:text-\[9px\] {
            font-size: 9px
        }

        .xxs\:text-\[14px\] {
            font-size: 14px
        }

        .xxs\:text-\[18px\] {
            font-size: 18px
        }

        .xxs\:btn-lg {
            --fontsize: 1.125rem;
            --btn-p: 1.25rem;
            --size: calc(var(--size-field,.25rem)*12)
        }
    }

    @media (width>=23.125rem) {
        .xs\:ms-3 {
            margin-inline-start: calc(var(--spacing)*3)
        }

        .xs\:mt-4 {
            margin-top: calc(var(--spacing)*4)
        }

        .xs\:mt-6 {
            margin-top: calc(var(--spacing)*6)
        }

        .xs\:mt-\[-32px\] {
            margin-top: -32px
        }

        .xs\:mb-6 {
            margin-bottom: calc(var(--spacing)*6)
        }

        .xs\:w-\[50\%\] {
            width: 50%
        }

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

        .xs\:p-2\.5 {
            padding: calc(var(--spacing)*2.5)
        }

        .xs\:p-8 {
            padding: calc(var(--spacing)*8)
        }

        .xs\:py-5\.75 {
            padding-block: calc(var(--spacing)*5.75)
        }

        .xs\:pt-3\.75 {
            padding-top: calc(var(--spacing)*3.75)
        }

        .xs\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading,var(--text-2xl--line-height))
        }

        .xs\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,var(--text-lg--line-height))
        }

        .xs\:text-\[14px\] {
            font-size: 14px
        }

        .xs\:text-\[16px\] {
            font-size: 16px
        }

        .xs\:btn-md {
            --fontsize: .875rem;
            --btn-p: 1rem;
            --size: calc(var(--size-field,.25rem)*10)
        }

        .xs\:not-odd\:my-3:not(:nth-child(odd)) {
            margin-block: calc(var(--spacing)*3)
        }

        @media (hover:hover) {
            .xs\:hover\:gap-4:hover {
                gap: calc(var(--spacing)*4)
            }
        }
    }

    @media (width>=40rem) {
        .sm\:mx-4 {
            margin-inline: calc(var(--spacing)*4)
        }

        .sm\:my-\[17px\] {
            margin-block: 17px
        }

        .sm\:me-10 {
            margin-inline-end: calc(var(--spacing)*10)
        }

        .sm\:mt-8 {
            margin-top: calc(var(--spacing)*8)
        }

        .sm\:h-5 {
            height: calc(var(--spacing)*5)
        }

        .sm\:h-8 {
            height: calc(var(--spacing)*8)
        }

        .sm\:h-12\.5 {
            height: calc(var(--spacing)*12.5)
        }

        .sm\:h-14 {
            height: calc(var(--spacing)*14)
        }

        .sm\:h-18 {
            height: calc(var(--spacing)*18)
        }

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

        .sm\:w-12\.5 {
            width: calc(var(--spacing)*12.5)
        }

        .sm\:w-18 {
            width: calc(var(--spacing)*18)
        }

        .sm\:w-20 {
            width: calc(var(--spacing)*20)
        }

        .sm\:max-w-78 {
            max-width: calc(var(--spacing)*78)
        }

        .sm\:justify-between {
            justify-content: space-between
        }

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

        .sm\:p-8 {
            padding: calc(var(--spacing)*8)
        }

        .sm\:p-10 {
            padding: calc(var(--spacing)*10)
        }

        .sm\:px-\[1rem\] {
            padding-inline: 1rem
        }

        .sm\:ps-10 {
            padding-inline-start: calc(var(--spacing)*10)
        }

        .sm\:pt-4 {
            padding-top: calc(var(--spacing)*4)
        }

        .sm\:pb-10 {
            padding-bottom: calc(var(--spacing)*10)
        }

        .sm\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading,var(--text-2xl--line-height))
        }

        .sm\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading,var(--text-3xl--line-height))
        }

        .sm\:text-4xl {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading,var(--text-4xl--line-height))
        }

        .sm\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,var(--text-lg--line-height))
        }

        .sm\:text-xl {
            font-size: var(--text-xl);
            line-height: var(--tw-leading,var(--text-xl--line-height))
        }

        .sm\:text-\[14px\] {
            font-size: 14px
        }

        .sm\:text-\[16px\] {
            font-size: 16px
        }

        .sm\:text-\[32px\] {
            font-size: 32px
        }

        .sm\:text-\[28px\] {
            font-size: 28px
        }

        .sm\:btn-lg {
            --fontsize: 1.125rem;
            --btn-p: 1.25rem;
            --size: calc(var(--size-field,.25rem)*12)
        }

        @media (width<80rem) {
            .sm\:max-xl\:text-5xl {
                font-size: var(--text-5xl);
                line-height: var(--tw-leading,var(--text-5xl--line-height))
            }
        }

        @media (width<64rem) {
            .sm\:max-lg\:flex {
                display: flex
            }
        }
    }

    @media (width>=48rem) {
        .md\:mt-12\.5 {
            margin-top: calc(var(--spacing)*12.5)
        }

        .md\:mt-15 {
            margin-top: calc(var(--spacing)*15)
        }

        .md\:pt-15 {
            padding-top: calc(var(--spacing)*15)
        }

        .md\:mb-25 {
            margin-bottom: calc(var(--spacing)*25)
        }

        .pd\:pb-25 {
            padding-bottom: calc(var(--spacing)*25)
        }

        .md\:h-7 {
            height: calc(var(--spacing)*7)
        }

        .md\:h-10 {
            height: calc(var(--spacing)*10)
        }

        .md\:h-12 {
            height: calc(var(--spacing)*12)
        }

        .md\:w-6 {
            width: calc(var(--spacing)*6)
        }

        .md\:w-30 {
            width: calc(var(--spacing)*30)
        }

        .md\:shrink-0 {
            flex-shrink: 0
        }

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

        .md\:p-3\.75 {
            padding: calc(var(--spacing)*3.75)
        }

        .md\:p-10 {
            padding: calc(var(--spacing)*10)
        }

        .md\:p-16 {
            padding: calc(var(--spacing)*16)
        }

        .md\:px-4 {
            padding-inline: calc(var(--spacing)*4)
        }

        .md\:px-6 {
            padding-inline: calc(var(--spacing)*6)
        }

        .md\:px-6\.5 {
            padding-inline: calc(var(--spacing)*6.5)
        }

        .md\:py-3 {
            padding-block: calc(var(--spacing)*3)
        }

        .md\:py-6 {
            padding-block: calc(var(--spacing)*6)
        }

        .md\:py-10 {
            padding-block: calc(var(--spacing)*10)
        }

        .md\:py-15 {
            padding-block: calc(var(--spacing)*15)
        }

        .md\:py-25 {
            padding-block: calc(var(--spacing)*25)
        }

        .md\:ps-20 {
            padding-inline-start: calc(var(--spacing)*20)
        }

        .md\:pe-8 {
            padding-inline-end: calc(var(--spacing)*8)
        }

        .md\:pt-5 {
            padding-top: calc(var(--spacing)*5)
        }

        .md\:pt-10 {
            padding-top: calc(var(--spacing)*10)
        }

        .md\:pt-40 {
            padding-top: calc(var(--spacing)*40)
        }

        .md\:pb-14 {
            padding-bottom: calc(var(--spacing)*14)
        }

        .md\:pb-25 {
            padding-bottom: calc(var(--spacing)*25)
        }

        .md\:text-5xl {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading,var(--text-5xl--line-height))
        }

        .md\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,var(--text-lg--line-height))
        }

        .md\:text-xl {
            font-size: var(--text-xl);
            line-height: var(--tw-leading,var(--text-xl--line-height))
        }

        .md\:text-\[14px\] {
            font-size: 14px
        }

        .md\:text-\[16px\] {
            font-size: 16px
        }

        .md\:text-\[18px\] {
            font-size: 18px
        }

        .md\:text-\[38px\] {
            font-size: 38px
        }

        .md\:font-semibold {
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold)
        }

        .md\:placeholder\:text-lg::placeholder {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,var(--text-lg--line-height))
        }
    }

    @media (width>=64rem) {
        .lg\:-bottom-28 {
            bottom: calc(var(--spacing)*-28)
        }

        .lg\:mx-0 {
            margin-inline: calc(var(--spacing)*0)
        }

        .lg\:mt-12\.5 {
            margin-top: calc(var(--spacing)*12.5)
        }

        .lg\:mb-27\.5 {
            margin-bottom: calc(var(--spacing)*27.5)
        }

        .lg\:flex {
            display: flex
        }

        .lg\:hidden {
            display: none
        }

        .lg\:h-15 {
            height: calc(var(--spacing)*15)
        }

        .lg\:w-15 {
            width: calc(var(--spacing)*15)
        }

        .lg\:w-auto {
            width: auto
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:gap-5 {
            gap: calc(var(--spacing)*5)
        }

        .lg\:p-6 {
            padding: calc(var(--spacing)*6)
        }

        .lg\:p-20 {
            padding: calc(var(--spacing)*20)
        }

        .lg\:p-22 {
            padding: calc(var(--spacing)*22)
        }

        .lg\:py-25 {
            padding-block: calc(var(--spacing)*25)
        }

        .lg\:py-37\.5 {
            padding-block: calc(var(--spacing)*37.5)
        }

        .lg\:pe-10 {
            padding-inline-end: calc(var(--spacing)*10)
        }

        .lg\:pe-35\.75 {
            padding-inline-end: calc(var(--spacing)*35.75)
        }

        .lg\:pt-31\.5 {
            padding-top: calc(var(--spacing)*31.5)
        }

        .lg\:text-start {
            text-align: start
        }

        .lg\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,var(--text-lg--line-height))
        }

        .lg\:text-\[18px\] {
            font-size: 18px
        }

        .lg\:text-\[38px\] {
            font-size: 38px
        }

        .lg\:pb-27\.5 {
            padding-bottom: calc(var(--spacing)*27.5)
        }

        @media (width<82.5rem) {
            .lg\:max-xxl\:ps-5 {
                padding-inline-start: calc(var(--spacing)*5)
            }
        }
    }

    @media (width>=80rem) {
        .xl\:mt-25 {
            margin-top: calc(var(--spacing)*25)
        }

        .xl\:pt-25 {
            padding-top: calc(var(--spacing)*25)
        }

        .xl\:mb-17\.5 {
            margin-bottom: calc(var(--spacing)*17.5)
        }

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

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

        .xl\:items-center {
            align-items: center
        }

        .xl\:gap-25\.75 {
            gap: calc(var(--spacing)*25.75)
        }

        .xl\:p-28 {
            padding: calc(var(--spacing)*28)
        }

        .xl\:py-35 {
            padding-block: calc(var(--spacing)*35)
        }

        .xl\:pe-35\.75 {
            padding-inline-end: calc(var(--spacing)*35.75)
        }

        .xl\:text-6xl {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading,var(--text-6xl--line-height))
        }

        .xl\:grid-cols-r-2 {
            grid-template-columns: repeat(2,1fr);
            gap: 22px;
        }
    }

    @media (width>=82.5rem) {
        .xxl\:mx-0\.5 {
            margin-inline: calc(var(--spacing)*.5)
        }

        .xxl\:max-h-126 {
            max-height: calc(var(--spacing)*126)
        }

        .xxl\:max-w-106 {
            max-width: calc(var(--spacing)*106)
        }

        .xxl\:px-2 {
            padding-inline: calc(var(--spacing)*2)
        }
    }
}

* {
    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
    --tw-duration: .2s;
    transition-duration: .2s
}

.btn-primary {
    border-style: var(--tw-border-style);
    background-color: var(--color-picto-primary);
    color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
    --tw-duration: .5s;
    border-width: 0;
    transition-duration: .5s
}

@media (hover:hover) {
    .btn-primary:hover {
        background-color: var(--color-picto-primary-dark);
        scale: 102%
    }
    .button-primary:hover {
        background-color: var(--dark-ink);
        scale: 102%
    }
}

body {
    font-family: Work Sans,sans-serif
}

@media (width<82.5rem) {
    .content {
        width: 100%
    }
}

@media (width>=82.5rem) {
    .content {
        max-width: 1320px;
        margin-inline: auto
    }
}

.section-title {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading,var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium)
}

@media (width>=40rem) {
    .section-title {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading,var(--text-4xl--line-height))
    }
}

@media (width>=48rem) {
    .section-title {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading,var(--text-5xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }
}

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

.introduction-profile-background {
    background: radial-gradient(circle at 12% 100%,#ffe2b0f5 1%,#ffe2b0f5 5px,#0000 15%),radial-gradient(circle at 95% -15%,#da4df166 5%,#0000 30%),radial-gradient(circle at 100%,#c4f5e9b2 2%,#0000 35%)
}

.blog-background {
    background: radial-gradient(circle at -10% 0,#da4df166 1%,#0000 25%),radial-gradient(circle at 110% 30%,#c4f5e9b2 5%,#0000 25%)
}

@keyframes skeleton {
    0% {
        background-position: 150%
    }

    to {
        background-position: -50%
    }
}

@keyframes progress {
    50% {
        background-position-x: -115%
    }
}

@keyframes radio {
    0% {
        padding: 5px
    }

    50% {
        padding: 3px
    }
}

@keyframes dropdown {
    0% {
        opacity: 0
    }
}

@keyframes rating {
    0%,40% {
        filter: brightness(1.05)contrast(1.05);
        scale: 1.1
    }
}

@keyframes toast {
    0% {
        opacity: 0;
        scale: .9
    }

    to {
        opacity: 1;
        scale: 1
    }
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
    initial-value: rotateX(0)
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
    initial-value: rotateY(0)
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
    initial-value: rotateZ(0)
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false;
    initial-value: skewX(0)
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false;
    initial-value: skewY(0)
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}