@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(media/d426c6df177f02c4-s.woff2) format("woff2");
    unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(media/9b4fbfc777bb173a-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(media/a74fb1607b845cb0-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(media/d426c6df177f02c4-s.woff2) format("woff2");
    unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(media/9b4fbfc777bb173a-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(media/a74fb1607b845cb0-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(media/d426c6df177f02c4-s.woff2) format("woff2");
    unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(media/9b4fbfc777bb173a-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(media/a74fb1607b845cb0-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(media/d426c6df177f02c4-s.woff2) format("woff2");
    unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(media/9b4fbfc777bb173a-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(media/a74fb1607b845cb0-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Quicksand Fallback;
    src: local("Arial");
    ascent-override: 95.87%;
    descent-override: 23.97%;
    line-gap-override: 0.00%;
    size-adjust: 104.31%
}

.__className_8f5f65 {
    font-family: Quicksand, Quicksand Fallback;
    font-style: normal
}

:root {
    --font-quicksand: "Quicksand", "Quicksand Fallback"
}

@font-face {
    font-family: Libre Baskerville;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(media/adb2ac03cdb7d75b-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Libre Baskerville;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(media/782fd72d8ca20ddd-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Libre Baskerville;
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(media/adb2ac03cdb7d75b-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Libre Baskerville;
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(media/782fd72d8ca20ddd-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Libre Baskerville;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(media/645c88064de6876a-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Libre Baskerville;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(media/cccb76cee38030ea-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Libre Baskerville;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(media/645c88064de6876a-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Libre Baskerville;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(media/cccb76cee38030ea-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Libre Baskerville Fallback;
    src: local("Times New Roman");
    ascent-override: 76.22%;
    descent-override: 21.22%;
    line-gap-override: 0.00%;
    size-adjust: 127.26%
}

.__className_07b071 {
    font-family: Libre Baskerville, Libre Baskerville Fallback
}

:root {
    --font-libre: "Libre Baskerville", "Libre Baskerville Fallback"
}


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

@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
        *, ::backdrop, :after, :before {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-divide-y-reverse: 0;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial
        }
    }
}

@layer theme {
    :host,
    :root {
        --font-sans: var(--font-quicksand), ui-sans-serif, system-ui, sans-serif;
        --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
        --color-white: #fff;
        --spacing: .25rem;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-black: 900;
        --tracking-wide: .025em;
        --tracking-wider: .05em;
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --leading-relaxed: 1.625;
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --blur-md: 12px;
        --blur-xl: 24px;
        --blur-2xl: 40px;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-line: #e2e8f0;
        --font-display: var(--font-libre), Georgia, serif
    }
}

@layer base {
    *,
    ::backdrop,
    :after,
    :before {
        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
    }
    :host,
    html {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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
    }
    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,
    pre,
    samp {
        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:where(:not(iframe)) {
        outline: auto
    }
    progress {
        vertical-align: baseline
    }
    summary {
        display: list-item
    }
    menu,
    ol,
    ul {
        list-style: none
    }
    audio,
    canvas,
    embed,
    iframe,
    img,
    object,
    svg,
    video {
        vertical-align: middle;
        display: block
    }
    img,
    video {
        max-width: 100%;
        height: auto
    }
    button,
    input,
    optgroup,
    select,
    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
    }
    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }
        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                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,
    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-millisecond-field,
    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }
    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }
    :-moz-ui-invalid {
        box-shadow: none
    }
    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }
    ::file-selector-button {
        appearance: button
    }
    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
        height: auto
    }
    [hidden]:where(:not([hidden=until-found])) {
        display: none!important
    }
}

@layer components;
@layer utilities {
    .pointer-events-none {
        pointer-events: none
    }
    .visible {
        visibility: visible
    }
    .sr-only {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden
    }
    .absolute,
    .sr-only {
        position: absolute
    }
    .fixed {
        position: fixed
    }
    .relative {
        position: relative
    }
    .static {
        position: static
    }
    .sticky {
        position: sticky
    }
    .-inset-3 {
        inset: calc(var(--spacing) * -3)
    }
    .inset-0 {
        inset: 0
    }
    .inset-2 {
        inset: calc(var(--spacing) * 2)
    }
    .inset-x-0 {
        inset-inline: 0
    }
    .inset-y-0 {
        inset-block: 0
    }
    .top-0 {
        top: 0
    }
    .top-1\/2 {
        top: 50%
    }
    .top-10 {
        top: calc(var(--spacing) * 10)
    }
    .top-\[2px\] {
        top: 2px
    }
    .-right-20 {
        right: calc(var(--spacing) * -20)
    }
    .right-0 {
        right: 0
    }
    .right-4 {
        right: calc(var(--spacing) * 4)
    }
    .right-6 {
        right: calc(var(--spacing) * 6)
    }
    .right-\[-6\%\] {
        right: -6%
    }
    .right-\[7\%\] {
        right: 7%
    }
    .right-\[18\%\] {
        right: 18%
    }
    .-bottom-24 {
        bottom: calc(var(--spacing) * -24)
    }
    .bottom-0 {
        bottom: 0
    }
    .-left-24 {
        left: calc(var(--spacing) * -24)
    }
    .left-0 {
        left: 0
    }
    .left-1\/2 {
        left: 50%
    }
    .left-\[2px\] {
        left: 2px
    }
    .left-\[75\%\] {
        left: 75%
    }
    .-z-10 {
        z-index: calc(10 * -1)
    }
    .z-10 {
        z-index: 10
    }
    .z-20 {
        z-index: 20
    }
    .z-30 {
        z-index: 30
    }
    .z-50 {
        z-index: 50
    }
    .order-1 {
        order: 1
    }
    .order-2 {
        order: 2
    }
    .mx-auto {
        margin-inline: auto
    }
    .mt-0\.5 {
        margin-top: calc(var(--spacing) * .5)
    }
    .mt-1 {
        margin-top: var(--spacing)
    }
    .mt-1\.5 {
        margin-top: calc(var(--spacing) * 1.5)
    }
    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }
    .mt-2\.5 {
        margin-top: calc(var(--spacing) * 2.5)
    }
    .mt-3 {
        margin-top: calc(var(--spacing) * 3)
    }
    .mt-3\.5 {
        margin-top: calc(var(--spacing) * 3.5)
    }
    .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-7 {
        margin-top: calc(var(--spacing) * 7)
    }
    .mt-8 {
        margin-top: calc(var(--spacing) * 8)
    }
    .mt-9 {
        margin-top: calc(var(--spacing) * 9)
    }
    .mt-10 {
        margin-top: calc(var(--spacing) * 10)
    }
    .mt-12 {
        margin-top: calc(var(--spacing) * 12)
    }
    .mt-14 {
        margin-top: calc(var(--spacing) * 14)
    }
    .mr-0\.5 {
        margin-right: calc(var(--spacing) * .5)
    }
    .mr-1 {
        margin-right: var(--spacing)
    }
    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2)
    }
    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3)
    }
    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8)
    }
    .ml-auto {
        margin-left: auto
    }
    .block {
        display: block
    }
    .flex {
        display: flex
    }
    .grid {
        display: grid
    }
    .hidden {
        display: none
    }
    .inline-block {
        display: inline-block
    }
    .inline-flex {
        display: inline-flex
    }
    .table {
        display: table
    }
    .h-1 {
        height: var(--spacing)
    }
    .h-1\.5 {
        height: calc(var(--spacing) * 1.5)
    }
    .h-2 {
        height: calc(var(--spacing) * 2)
    }
    .h-2\.5 {
        height: calc(var(--spacing) * 2.5)
    }
    .h-3 {
        height: calc(var(--spacing) * 3)
    }
    .h-3\.5 {
        height: calc(var(--spacing) * 3.5)
    }
    .h-4 {
        height: calc(var(--spacing) * 4)
    }
    .h-5 {
        height: calc(var(--spacing) * 5)
    }
    .h-6 {
        height: calc(var(--spacing) * 6)
    }
    .h-7 {
        height: calc(var(--spacing) * 7)
    }
    .h-8 {
        height: calc(var(--spacing) * 8)
    }
    .h-9 {
        height: calc(var(--spacing) * 9)
    }
    .h-10 {
        height: calc(var(--spacing) * 10)
    }
    .h-11 {
        height: calc(var(--spacing) * 11)
    }
    .h-12 {
        height: calc(var(--spacing) * 12)
    }
    .h-16 {
        height: calc(var(--spacing) * 16)
    }
    .h-20 {
        height: calc(var(--spacing) * 20)
    }
    .h-24 {
        height: calc(var(--spacing) * 24)
    }
    .h-40 {
        height: calc(var(--spacing) * 40)
    }
    .h-80 {
        height: calc(var(--spacing) * 80)
    }
    .h-96 {
        height: calc(var(--spacing) * 96)
    }
    .h-\[14px\] {
        height: 14px
    }
    .h-\[15px\] {
        height: 15px
    }
    .h-\[16px\] {
        height: 16px
    }
    .h-\[17px\] {
        height: 17px
    }
    .h-\[18px\] {
        height: 18px
    }
    .h-\[19px\] {
        height: 19px
    }
    .h-\[20px\] {
        height: 20px
    }
    .h-\[22px\] {
        height: 22px
    }
    .h-\[26px\] {
        height: 26px
    }
    .h-\[55\%\] {
        height: 55%
    }
    .h-\[76px\] {
        height: 76px
    }
    .h-\[132px\] {
        height: 132px
    }
    .h-\[220px\] {
        height: 220px
    }
    .h-\[300px\] {
        height: 300px
    }
    .h-auto {
        height: auto
    }
    .h-full {
        height: 100%
    }
    .\!min-h-0 {
        min-height: 0!important
    }
    .min-h-\[18px\] {
        min-height: 18px
    }
    .min-h-\[252px\] {
        min-height: 252px
    }
    .min-h-\[272px\] {
        min-height: 272px
    }
    .w-1 {
        width: var(--spacing)
    }
    .w-1\.5 {
        width: calc(var(--spacing) * 1.5)
    }
    .w-1\/3 {
        width: 33.3333%
    }
    .w-2 {
        width: calc(var(--spacing) * 2)
    }
    .w-2\.5 {
        width: calc(var(--spacing) * 2.5)
    }
    .w-3 {
        width: calc(var(--spacing) * 3)
    }
    .w-3\.5 {
        width: calc(var(--spacing) * 3.5)
    }
    .w-4 {
        width: calc(var(--spacing) * 4)
    }
    .w-5 {
        width: calc(var(--spacing) * 5)
    }
    .w-6 {
        width: calc(var(--spacing) * 6)
    }
    .w-7 {
        width: calc(var(--spacing) * 7)
    }
    .w-8 {
        width: calc(var(--spacing) * 8)
    }
    .w-9 {
        width: calc(var(--spacing) * 9)
    }
    .w-10 {
        width: calc(var(--spacing) * 10)
    }
    .w-11 {
        width: calc(var(--spacing) * 11)
    }
    .w-12 {
        width: calc(var(--spacing) * 12)
    }
    .w-16 {
        width: calc(var(--spacing) * 16)
    }
    .w-24 {
        width: calc(var(--spacing) * 24)
    }
    .w-80 {
        width: calc(var(--spacing) * 80)
    }
    .w-96 {
        width: calc(var(--spacing) * 96)
    }
    .w-\[3px\] {
        width: 3px
    }
    .w-\[14px\] {
        width: 14px
    }
    .w-\[15px\] {
        width: 15px
    }
    .w-\[17px\] {
        width: 17px
    }
    .w-\[18px\] {
        width: 18px
    }
    .w-\[19px\] {
        width: 19px
    }
    .w-\[20px\] {
        width: 20px
    }
    .w-\[22px\] {
        width: 22px
    }
    .w-\[28px\] {
        width: 28px
    }
    .w-\[42\%\] {
        width: 42%
    }
    .w-\[55\%\] {
        width: 55%
    }
    .w-\[68px\] {
        width: 68px
    }
    .w-\[86px\] {
        width: 86px
    }
    .w-\[132px\] {
        width: 132px
    }
    .w-\[180px\] {
        width: 180px
    }
    .w-\[190px\] {
        width: 190px
    }
    .w-\[280px\] {
        width: 280px
    }
    .w-\[380px\] {
        width: 380px
    }
    .w-auto {
        width: auto
    }
    .w-fit {
        width: fit-content
    }
    .w-full {
        width: 100%
    }
    .w-max {
        width: max-content
    }
    .w-px {
        width: 1px
    }
    .max-w-\[14ch\] {
        max-width: 14ch
    }
    .max-w-\[15ch\] {
        max-width: 15ch
    }
    .max-w-\[19ch\] {
        max-width: 19ch
    }
    .max-w-\[24ch\] {
        max-width: 24ch
    }
    .max-w-\[34px\] {
        max-width: 34px
    }
    .max-w-\[46ch\] {
        max-width: 46ch
    }
    .max-w-\[52ch\] {
        max-width: 52ch
    }
    .max-w-\[54ch\] {
        max-width: 54ch
    }
    .max-w-\[240px\] {
        max-width: 240px
    }
    .max-w-\[300px\] {
        max-width: 300px
    }
    .max-w-\[320px\] {
        max-width: 320px
    }
    .max-w-\[360px\] {
        max-width: 360px
    }
    .max-w-\[640px\] {
        max-width: 640px
    }
    .max-w-\[720px\] {
        max-width: 720px
    }
    .max-w-\[760px\] {
        max-width: 760px
    }
    .max-w-\[820px\] {
        max-width: 820px
    }
    .max-w-\[880px\] {
        max-width: 880px
    }
    .max-w-\[1160px\] {
        max-width: 1160px
    }
    .max-w-\[1280px\] {
        max-width: 1280px
    }
    .min-w-0 {
        min-width: 0
    }
    .min-w-\[200px\] {
        min-width: 200px
    }
    .min-w-\[220px\] {
        min-width: 220px
    }
    .min-w-\[860px\] {
        min-width: 860px
    }
    .flex-1 {
        flex: 1
    }
    .shrink-0 {
        flex-shrink: 0
    }
    .border-collapse {
        border-collapse: collapse
    }
    .-translate-x-1\/2 {
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1)
    }
    .-translate-x-1\/2,
    .-translate-y-1\/2 {
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }
    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1)
    }
    .scale-110 {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        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, )
    }
    .resize {
        resize: both
    }
    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .flex-col {
        flex-direction: column
    }
    .flex-wrap {
        flex-wrap: wrap
    }
    .place-items-center {
        place-items: center
    }
    .items-center {
        align-items: center
    }
    .items-end {
        align-items: flex-end
    }
    .items-start {
        align-items: flex-start
    }
    .justify-between {
        justify-content: space-between
    }
    .justify-center {
        justify-content: center
    }
    .justify-end {
        justify-content: flex-end
    }
    .gap-0\.5 {
        gap: calc(var(--spacing) * .5)
    }
    .gap-1 {
        gap: var(--spacing)
    }
    .gap-1\.5 {
        gap: calc(var(--spacing) * 1.5)
    }
    .gap-2 {
        gap: calc(var(--spacing) * 2)
    }
    .gap-2\.5 {
        gap: calc(var(--spacing) * 2.5)
    }
    .gap-3 {
        gap: calc(var(--spacing) * 3)
    }
    .gap-3\.5 {
        gap: calc(var(--spacing) * 3.5)
    }
    .gap-4 {
        gap: calc(var(--spacing) * 4)
    }
    .gap-5 {
        gap: calc(var(--spacing) * 5)
    }
    .gap-6 {
        gap: calc(var(--spacing) * 6)
    }
    .gap-8 {
        gap: calc(var(--spacing) * 8)
    }
    .gap-12 {
        gap: calc(var(--spacing) * 12)
    }
    .gap-px {
        gap: 1px
    }
    :where(.space-y-1\.5>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))
    }
    :where(.space-y-2\.5>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)))
    }
    :where(.space-y-3>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))
    }
    :where(.space-y-7>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)))
    }
    .gap-x-2\.5 {
        column-gap: calc(var(--spacing) * 2.5)
    }
    .gap-x-3 {
        column-gap: calc(var(--spacing) * 3)
    }
    .gap-x-6 {
        column-gap: calc(var(--spacing) * 6)
    }
    .gap-y-1 {
        row-gap: var(--spacing)
    }
    .gap-y-3 {
        row-gap: calc(var(--spacing) * 3)
    }
    .gap-y-10 {
        row-gap: calc(var(--spacing) * 10)
    }
    :where(.divide-y>:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)))
    }
    :where(.divide-\[\#e2e8f0\]\/70>:not(:last-child)) {
        border-color: oklab(92.8761% -.00315791 -.0122172/.7)
    }
    :where(.divide-\[\#eef2f7\]>:not(:last-child)) {
        border-color: #eef2f7
    }
    :where(.divide-\[\#f1f5f9\]>:not(:last-child)) {
        border-color: #f1f5f9
    }
    :where(.divide-white\/10>:not(:last-child)) {
        border-color: #ffffff1a
    }
    @supports (color:color-mix(in lab, red, red)) {
        :where(.divide-white\/10>: not(:last-child)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent)
        }
    }
    .truncate {
        text-overflow: ellipsis;
        white-space: nowrap
    }
    .overflow-hidden,
    .truncate {
        overflow: hidden
    }
    .overflow-x-auto {
        overflow-x: auto
    }
    .rounded {
        border-radius: .25rem
    }
    .rounded-2xl {
        border-radius: var(--radius-2xl)
    }
    .rounded-full {
        border-radius: 3.40282e+38px
    }
    .rounded-lg {
        border-radius: var(--radius-lg)
    }
    .rounded-md {
        border-radius: var(--radius-md)
    }
    .rounded-xl {
        border-radius: var(--radius-xl)
    }
    .rounded-t-md {
        border-top-left-radius: var(--radius-md);
        border-top-right-radius: var(--radius-md)
    }
    .rounded-t-xl {
        border-top-left-radius: var(--radius-xl);
        border-top-right-radius: var(--radius-xl)
    }
    .rounded-tl-sm {
        border-top-left-radius: var(--radius-sm)
    }
    .rounded-br-sm {
        border-bottom-right-radius: var(--radius-sm)
    }
    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }
    .border-2 {
        border-style: var(--tw-border-style);
        border-width: 2px
    }
    .border-\[1\.5px\] {
        border-style: var(--tw-border-style);
        border-width: 1.5px
    }
    .border-y {
        border-block-style: var(--tw-border-style);
        border-block-width: 1px
    }
    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }
    .border-r {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px
    }
    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }
    .border-l-2 {
        border-left-style: var(--tw-border-style);
        border-left-width: 2px
    }
    .border-dashed {
        --tw-border-style: dashed;
        border-style: dashed
    }
    .border-\[\#4ade80\]\/40 {
        border-color: oklab(80.0349% -.160317 .0862818/.4)
    }
    .border-\[\#69b4ff\] {
        border-color: #69b4ff
    }
    .border-\[\#69b4ff\]\/35 {
        border-color: oklab(75.2467% -.0452642 -.124243/.35)
    }
    .border-\[\#0582ff\] {
        border-color: #0582ff
    }
    .border-\[\#0582ff\]\/25 {
        border-color: oklab(61.9702% -.0510587 -.201832/.25)
    }
    .border-\[\#0582ff\]\/30 {
        border-color: oklab(61.9702% -.0510587 -.201832/.3)
    }
    .border-\[\#0582ff\]\/40 {
        border-color: oklab(61.9702% -.0510587 -.201832/.4)
    }
    .border-\[\#0582ff\]\/50 {
        border-color: oklab(61.9702% -.0510587 -.201832/.5)
    }
    .border-\[\#cbd5e1\] {
        border-color: #cbd5e1
    }
    .border-\[\#e2e8f0\] {
        border-color: #e2e8f0
    }
    .border-\[\#e2e8f0\]\/70 {
        border-color: oklab(92.8761% -.00315791 -.0122172/.7)
    }
    .border-\[\#e2e8f0\]\/80 {
        border-color: oklab(92.8761% -.00315791 -.0122172/.8)
    }
    .border-\[\#ee0000\]\/60 {
        border-color: oklab(59.6005% .213422 .119443/.6)
    }
    .border-\[\#eef2f7\] {
        border-color: #eef2f7
    }
    .border-\[\#f1f5f9\] {
        border-color: #f1f5f9
    }
    .border-white\/12 {
        border-color: #ffffff1f
    }
    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/12 {
            border-color: color-mix(in oklab, var(--color-white) 12%, transparent)
        }
    }
    .border-white\/15 {
        border-color: #ffffff26
    }
    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/15 {
            border-color: color-mix(in oklab, var(--color-white) 15%, transparent)
        }
    }
    .border-t-transparent {
        border-top-color: #0000
    }
    .bg-\[\#0a1b33\] {
        background-color: #0a1b33
    }
    .bg-\[\#0b1220\] {
        background-color: #0b1220
    }
    .bg-\[\#4ade80\]\/10 {
        background-color: oklab(80.0349% -.160317 .0862818/.1)
    }
    .bg-\[\#7c5cff\]\/\[0\.07\] {
        background-color: oklab(59.9049% .0641689 -.220803/.07)
    }
    .bg-\[\#067a52\] {
        background-color: #067a52
    }
    .bg-\[\#69b4ff\]\/10 {
        background-color: oklab(75.2467% -.0452642 -.124243/.1)
    }
    .bg-\[\#0469db\] {
        background-color: #0469db
    }
    .bg-\[\#0582ff\] {
        background-color: #0582ff
    }
    .bg-\[\#0582ff\]\/35 {
        background-color: oklab(61.9702% -.0510587 -.201832/.35)
    }
    .bg-\[\#0582ff\]\/\[0\.08\] {
        background-color: oklab(61.9702% -.0510587 -.201832/.08)
    }
    .bg-\[\#5865F2\] {
        background-color: #5865f2
    }
    .bg-\[\#cbd5e1\] {
        background-color: #cbd5e1
    }
    .bg-\[\#dbe2ec\] {
        background-color: #dbe2ec
    }
    .bg-\[\#e2e8f0\] {
        background-color: #e2e8f0
    }
    .bg-\[\#e7f5ee\] {
        background-color: #e7f5ee
    }
    .bg-\[\#eaf3ff\] {
        background-color: #eaf3ff
    }
    .bg-\[\#ee0000\] {
        background-color: #e00
    }
    .bg-\[\#eef2f7\] {
        background-color: #eef2f7
    }
    .bg-\[\#f1f5f9\] {
        background-color: #f1f5f9
    }
    .bg-\[\#f2f7ff\] {
        background-color: #f2f7ff
    }
    .bg-\[\#f4f9ff\] {
        background-color: #f4f9ff
    }
    .bg-\[\#f7f9fc\] {
        background-color: #f7f9fc
    }
    .bg-\[\#fbfcfe\] {
        background-color: #fbfcfe
    }
    .bg-\[\#fdecec\] {
        background-color: #fdecec
    }
    .bg-transparent {
        background-color: #0000
    }
    .bg-white {
        background-color: var(--color-white)
    }
    .bg-white\/50 {
        background-color: #ffffff80
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/50 {
            background-color: color-mix(in oklab, var(--color-white) 50%, transparent)
        }
    }
    .bg-white\/60 {
        background-color: #fff9
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/60 {
            background-color: color-mix(in oklab, var(--color-white) 60%, transparent)
        }
    }
    .bg-white\/70 {
        background-color: #ffffffb3
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/70 {
            background-color: color-mix(in oklab, var(--color-white) 70%, transparent)
        }
    }
    .bg-white\/92 {
        background-color: #ffffffeb
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/92 {
            background-color: color-mix(in oklab, var(--color-white) 92%, transparent)
        }
    }
    .bg-white\/95 {
        background-color: #fffffff2
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/95 {
            background-color: color-mix(in oklab, var(--color-white) 95%, transparent)
        }
    }
    .bg-white\/\[0\.06\] {
        background-color: #ffffff0f
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/\[0\.06\] {
            background-color: color-mix(in oklab, var(--color-white) 6%, transparent)
        }
    }
    .bg-gradient-to-b {
        --tw-gradient-position: to bottom in oklab
    }
    .bg-gradient-to-b,
    .bg-gradient-to-l {
        background-image: linear-gradient(var(--tw-gradient-stops))
    }
    .bg-gradient-to-l {
        --tw-gradient-position: to left in oklab
    }
    .bg-gradient-to-r {
        --tw-gradient-position: to right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }
    .from-\[\#0582ff\] {
        --tw-gradient-from: #0582ff;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }
    .from-transparent {
        --tw-gradient-from: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }
    .from-white\/80 {
        --tw-gradient-from: #fffc
    }
    @supports (color:color-mix(in lab, red, red)) {
        .from-white\/80 {
            --tw-gradient-from: color-mix(in oklab, var(--color-white) 80%, transparent)
        }
    }
    .from-white\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }
    .via-\[\#0582ff\]\/20 {
        --tw-gradient-via: oklab(61.9702% -.0510587 -.201832/.2);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }
    .via-\[\#0582ff\]\/55 {
        --tw-gradient-via: oklab(61.9702% -.0510587 -.201832/.55);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }
    .to-\[\#067a52\] {
        --tw-gradient-to: #067a52;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }
    .to-transparent {
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }
    .bg-cover {
        background-size: cover
    }
    .bg-\[position\:72\%_center\] {
        background-position: 72%
    }
    .bg-\[position\:center_30\%\] {
        background-position: 50% 30%
    }
    .bg-center {
        background-position: 50%
    }
    .p-3 {
        padding: calc(var(--spacing) * 3)
    }
    .p-3\.5 {
        padding: calc(var(--spacing) * 3.5)
    }
    .p-4 {
        padding: calc(var(--spacing) * 4)
    }
    .p-6 {
        padding: calc(var(--spacing) * 6)
    }
    .p-7 {
        padding: calc(var(--spacing) * 7)
    }
    .px-1 {
        padding-inline: var(--spacing)
    }
    .px-1\.5 {
        padding-inline: calc(var(--spacing) * 1.5)
    }
    .px-2 {
        padding-inline: calc(var(--spacing) * 2)
    }
    .px-2\.5 {
        padding-inline: calc(var(--spacing) * 2.5)
    }
    .px-3 {
        padding-inline: calc(var(--spacing) * 3)
    }
    .px-3\.5 {
        padding-inline: calc(var(--spacing) * 3.5)
    }
    .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-7 {
        padding-inline: calc(var(--spacing) * 7)
    }
    .px-\[3px\] {
        padding-inline: 3px
    }
    .\!py-2\.5 {
        padding-block: calc(var(--spacing) * 2.5)!important
    }
    .py-0\.5 {
        padding-block: calc(var(--spacing) * .5)
    }
    .py-1 {
        padding-block: var(--spacing)
    }
    .py-1\.5 {
        padding-block: calc(var(--spacing) * 1.5)
    }
    .py-2 {
        padding-block: calc(var(--spacing) * 2)
    }
    .py-2\.5 {
        padding-block: calc(var(--spacing) * 2.5)
    }
    .py-3 {
        padding-block: calc(var(--spacing) * 3)
    }
    .py-3\.5 {
        padding-block: calc(var(--spacing) * 3.5)
    }
    .py-4 {
        padding-block: calc(var(--spacing) * 4)
    }
    .py-5 {
        padding-block: calc(var(--spacing) * 5)
    }
    .py-6 {
        padding-block: calc(var(--spacing) * 6)
    }
    .py-8 {
        padding-block: calc(var(--spacing) * 8)
    }
    .py-11 {
        padding-block: calc(var(--spacing) * 11)
    }
    .py-12 {
        padding-block: calc(var(--spacing) * 12)
    }
    .py-14 {
        padding-block: calc(var(--spacing) * 14)
    }
    .py-\[3px\] {
        padding-block: 3px
    }
    .py-\[6px\] {
        padding-block: 6px
    }
    .py-\[7px\] {
        padding-block: 7px
    }
    .py-\[clamp\(48px\,5vw\,72px\)\] {
        padding-block: clamp(48px, 5vw, 72px)
    }
    .py-\[clamp\(56px\,6vw\,88px\)\] {
        padding-block: clamp(56px, 6vw, 88px)
    }
    .py-\[clamp\(64px\,7vw\,104px\)\] {
        padding-block: clamp(64px, 7vw, 104px)
    }
    .pt-1 {
        padding-top: var(--spacing)
    }
    .pt-2\.5 {
        padding-top: calc(var(--spacing) * 2.5)
    }
    .pt-3 {
        padding-top: calc(var(--spacing) * 3)
    }
    .pt-4 {
        padding-top: calc(var(--spacing) * 4)
    }
    .pt-5 {
        padding-top: calc(var(--spacing) * 5)
    }
    .pt-6 {
        padding-top: calc(var(--spacing) * 6)
    }
    .pt-7 {
        padding-top: calc(var(--spacing) * 7)
    }
    .pt-8 {
        padding-top: calc(var(--spacing) * 8)
    }
    .pt-\[clamp\(112px\,11vw\,152px\)\] {
        padding-top: clamp(112px, 11vw, 152px)
    }
    .pr-2\.5 {
        padding-right: calc(var(--spacing) * 2.5)
    }
    .pr-3 {
        padding-right: calc(var(--spacing) * 3)
    }
    .pr-4 {
        padding-right: calc(var(--spacing) * 4)
    }
    .pr-5 {
        padding-right: calc(var(--spacing) * 5)
    }
    .pr-12 {
        padding-right: calc(var(--spacing) * 12)
    }
    .pb-2 {
        padding-bottom: calc(var(--spacing) * 2)
    }
    .pb-4 {
        padding-bottom: calc(var(--spacing) * 4)
    }
    .pb-\[clamp\(64px\,7vw\,104px\)\] {
        padding-bottom: clamp(64px, 7vw, 104px)
    }
    .pl-1\.5 {
        padding-left: calc(var(--spacing) * 1.5)
    }
    .pl-4 {
        padding-left: calc(var(--spacing) * 4)
    }
    .pl-5 {
        padding-left: calc(var(--spacing) * 5)
    }
    .text-center {
        text-align: center
    }
    .text-left {
        text-align: left
    }
    .text-right {
        text-align: right
    }
    .align-bottom {
        vertical-align: bottom
    }
    .align-middle {
        vertical-align: middle
    }
    .\!text-\[14px\] {
        font-size: 14px!important
    }
    .text-\[8\.5px\] {
        font-size: 8.5px
    }
    .text-\[8px\] {
        font-size: 8px
    }
    .text-\[9\.5px\] {
        font-size: 9.5px
    }
    .text-\[9px\] {
        font-size: 9px
    }
    .text-\[10\.5px\] {
        font-size: 10.5px
    }
    .text-\[10px\] {
        font-size: 10px
    }
    .text-\[11\.5px\] {
        font-size: 11.5px
    }
    .text-\[11px\] {
        font-size: 11px
    }
    .text-\[12\.5px\] {
        font-size: 12.5px
    }
    .text-\[12px\] {
        font-size: 12px
    }
    .text-\[13\.5px\] {
        font-size: 13.5px
    }
    .text-\[13px\] {
        font-size: 13px
    }
    .text-\[14\.5px\] {
        font-size: 14.5px
    }
    .text-\[14px\] {
        font-size: 14px
    }
    .text-\[15\.5px\] {
        font-size: 15.5px
    }
    .text-\[15px\] {
        font-size: 15px
    }
    .text-\[16\.5px\] {
        font-size: 16.5px
    }
    .text-\[16px\] {
        font-size: 16px
    }
    .text-\[17\.5px\] {
        font-size: 17.5px
    }
    .text-\[17px\] {
        font-size: 17px
    }
    .text-\[18px\] {
        font-size: 18px
    }
    .text-\[19px\] {
        font-size: 19px
    }
    .text-\[26px\] {
        font-size: 26px
    }
    .text-\[30px\] {
        font-size: 30px
    }
    .text-\[clamp\(1\.05rem\,1\.6vw\,1\.3rem\)\] {
        font-size: clamp(1.05rem, 1.6vw, 1.3rem)
    }
    .text-\[clamp\(1\.6rem\,2\.6vw\,2\.1rem\)\] {
        font-size: clamp(1.6rem, 2.6vw, 2.1rem)
    }
    .text-\[clamp\(1\.7rem\,3\.2vw\,2\.6rem\)\] {
        font-size: clamp(1.7rem, 3.2vw, 2.6rem)
    }
    .text-\[clamp\(1\.8rem\,3\.4vw\,2\.75rem\)\] {
        font-size: clamp(1.8rem, 3.4vw, 2.75rem)
    }
    .text-\[clamp\(1\.15rem\,2\.15vw\,1\.7rem\)\] {
        font-size: clamp(1.15rem, 2.15vw, 1.7rem)
    }
    .text-\[clamp\(1\.75rem\,3\.4vw\,2\.75rem\)\] {
        font-size: clamp(1.75rem, 3.4vw, 2.75rem)
    }
    .text-\[clamp\(2\.1rem\,3\.6vw\,2\.9rem\)\] {
        font-size: clamp(2.1rem, 3.6vw, 2.9rem)
    }
    .text-\[clamp\(2\.25rem\,4\.4vw\,3\.5rem\)\] {
        font-size: clamp(2.25rem, 4.4vw, 3.5rem)
    }
    .text-\[clamp\(2rem\,3\.6vw\,2\.75rem\)\] {
        font-size: clamp(2rem, 3.6vw, 2.75rem)
    }
    .text-\[clamp\(2rem\,3\.6vw\,3rem\)\] {
        font-size: clamp(2rem, 3.6vw, 3rem)
    }
    .leading-\[1\.6\] {
        --tw-leading: 1.6;
        line-height: 1.6
    }
    .leading-\[1\.7\] {
        --tw-leading: 1.7;
        line-height: 1.7
    }
    .leading-\[1\.15\] {
        --tw-leading: 1.15;
        line-height: 1.15
    }
    .leading-\[1\.18\] {
        --tw-leading: 1.18;
        line-height: 1.18
    }
    .leading-\[1\.55\] {
        --tw-leading: 1.55;
        line-height: 1.55
    }
    .leading-\[1\.65\] {
        --tw-leading: 1.65;
        line-height: 1.65
    }
    .leading-\[1\.68\] {
        --tw-leading: 1.68;
        line-height: 1.68
    }
    .leading-\[1\.72\] {
        --tw-leading: 1.72;
        line-height: 1.72
    }
    .leading-none {
        --tw-leading: 1;
        line-height: 1
    }
    .leading-relaxed {
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed)
    }
    .leading-snug {
        --tw-leading: var(--leading-snug);
        line-height: var(--leading-snug)
    }
    .leading-tight {
        --tw-leading: var(--leading-tight);
        line-height: var(--leading-tight)
    }
    .font-black {
        --tw-font-weight: var(--font-weight-black);
        font-weight: var(--font-weight-black)
    }
    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }
    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }
    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }
    .tracking-wide {
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide)
    }
    .tracking-wider {
        --tw-tracking: var(--tracking-wider);
        letter-spacing: var(--tracking-wider)
    }
    .whitespace-nowrap {
        white-space: nowrap
    }
    .text-\[\#0b1220\] {
        color: #0b1220
    }
    .text-\[\#3d4a5c\] {
        color: #3d4a5c
    }
    .text-\[\#4ade80\] {
        color: #4ade80
    }
    .text-\[\#5b86b8\] {
        color: #5b86b8
    }
    .text-\[\#7fb4ec\] {
        color: #7fb4ec
    }
    .text-\[\#8fb0d8\] {
        color: #8fb0d8
    }
    .text-\[\#9fc8ff\] {
        color: #9fc8ff
    }
    .text-\[\#067a52\] {
        color: #067a52
    }
    .text-\[\#69b4ff\] {
        color: #69b4ff
    }
    .text-\[\#86efac\] {
        color: #86efac
    }
    .text-\[\#94a3b8\] {
        color: #94a3b8
    }
    .text-\[\#0469db\] {
        color: #0469db
    }
    .text-\[\#0582ff\] {
        color: #0582ff
    }
    .text-\[\#64748b\] {
        color: #64748b
    }
    .text-\[\#101722\] {
        color: #101722
    }
    .text-\[\#475569\] {
        color: #475569
    }
    .text-\[\#a06060\] {
        color: #a06060
    }
    .text-\[\#b7c9e0\] {
        color: #b7c9e0
    }
    .text-\[\#b42318\] {
        color: #b42318
    }
    .text-\[\#b45309\] {
        color: #b45309
    }
    .text-\[\#c98787\] {
        color: #c98787
    }
    .text-\[\#d6e6fb\] {
        color: #d6e6fb
    }
    .text-white {
        color: var(--color-white)
    }
    .text-white\/\[0\.07\] {
        color: #ffffff12
    }
    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/\[0\.07\] {
            color: color-mix(in oklab, var(--color-white) 7%, transparent)
        }
    }
    .text-white\/\[0\.045\] {
        color: #ffffff0b
    }
    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/\[0\.045\] {
            color: color-mix(in oklab, var(--color-white) 4.5%, transparent)
        }
    }
    .uppercase {
        text-transform: uppercase
    }
    .italic {
        font-style: italic
    }
    .opacity-40 {
        opacity: .4
    }
    .opacity-45 {
        opacity: .45
    }
    .opacity-60 {
        opacity: .6
    }
    .opacity-70 {
        opacity: .7
    }
    .shadow-\[0_0_0_4px_rgba\(5\,130\,255\,\.08\)\,
    inset_0_0_24px_rgba\(5\,130\,255\,\.06\)\] {
        --tw-shadow: 0 0 0 4px var(--tw-shadow-color, #0582ff14), inset 0 0 24px var(--tw-shadow-color, #0582ff0f);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .shadow-\[0_0_0_4px_rgba\(5\,130\,255\,\.12\)\] {
        --tw-shadow: 0 0 0 4px var(--tw-shadow-color, #0582ff1f)
    }
    .shadow-\[0_0_0_4px_rgba\(5\,130\,255\,\.12\)\],
    .shadow-\[0_0_10px_2px_rgba\(5\,130\,255\,\.55\)\] {
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .shadow-\[0_0_10px_2px_rgba\(5\,130\,255\,\.55\)\] {
        --tw-shadow: 0 0 10px 2px var(--tw-shadow-color, #0582ff8c)
    }
    .shadow-\[0_0_20px_-2px_rgba\(5\,130\,255\,\.6\)\] {
        --tw-shadow: 0 0 20px -2px var(--tw-shadow-color, #0582ff99)
    }
    .shadow-\[0_0_20px_-2px_rgba\(5\,130\,255\,\.6\)\],
    .shadow-\[0_10px_24px_-12px_rgba\(11\,18\,32\,\.35\)\] {
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .shadow-\[0_10px_24px_-12px_rgba\(11\,18\,32\,\.35\)\] {
        --tw-shadow: 0 10px 24px -12px var(--tw-shadow-color, #0b122059)
    }
    .shadow-\[0_10px_30px_-8px_rgba\(11\,18\,32\,\.6\)\] {
        --tw-shadow: 0 10px 30px -8px var(--tw-shadow-color, #0b122099)
    }
    .shadow-\[0_10px_30px_-8px_rgba\(11\,18\,32\,\.6\)\],
    .shadow-\[0_16px_40px_-24px_rgba\(11\,18\,32\,\.4\)\] {
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .shadow-\[0_16px_40px_-24px_rgba\(11\,18\,32\,\.4\)\] {
        --tw-shadow: 0 16px 40px -24px var(--tw-shadow-color, #0b122066)
    }
    .shadow-\[0_18px_44px_-24px_rgba\(11\,18\,32\,\.35\)\] {
        --tw-shadow: 0 18px 44px -24px var(--tw-shadow-color, #0b122059)
    }
    .shadow-\[0_18px_44px_-24px_rgba\(11\,18\,32\,\.35\)\],
    .shadow-\[0_24px_70px_-42px_rgba\(11\,18\,32\,\.45\)\] {
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .shadow-\[0_24px_70px_-42px_rgba\(11\,18\,32\,\.45\)\] {
        --tw-shadow: 0 24px 70px -42px var(--tw-shadow-color, #0b122073)
    }
    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a)
    }
    .ring-1,
    .shadow-sm {
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .ring-1 {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor)
    }
    .ring-\[\#0582ff\]\/30 {
        --tw-ring-color: oklab(61.9702% -.0510587 -.201832/.3)
    }
    .ring-\[\#0582ff\]\/35 {
        --tw-ring-color: oklab(61.9702% -.0510587 -.201832/.35)
    }
    .blur {
        --tw-blur: blur(8px)
    }
    .blur,
    .blur-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, )
    }
    .blur-2xl {
        --tw-blur: blur(var(--blur-2xl))
    }
    .blur-\[90px\] {
        --tw-blur: blur(90px)
    }
    .blur-\[100px\],
    .blur-\[90px\] {
        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, )
    }
    .blur-\[100px\] {
        --tw-blur: blur(100px)
    }
    .blur-md {
        --tw-blur: blur(var(--blur-md))
    }
    .blur-md,
    .blur-xl {
        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, )
    }
    .blur-xl {
        --tw-blur: blur(var(--blur-xl))
    }
    .grayscale {
        --tw-grayscale: grayscale(100%)
    }
    .filter,
    .grayscale {
        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, )
    }
    .backdrop-blur {
        --tw-backdrop-blur: blur(8px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }
    .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, display, content-visibility, overlay, pointer-events;
        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))
    }
    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }
    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }
    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }
    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }
    .duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }
    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }
    @media (hover:hover) {
        .group-hover\:\[animation-play-state\:paused\]:is(:where(.group): hover *) {
            animation-play-state: paused
        }
    }
    .last\:border-0:last-child {
        border-style: var(--tw-border-style);
        border-width: 0
    }
    @media (hover:hover) {
        .hover\:border-\[\#0582ff\]:hover {
            border-color: #0582ff
        }
        .hover\:bg-\[\#1c2942\]:hover {
            background-color: #1c2942
        }
        .hover\:bg-\[\#0469db\]:hover {
            background-color: #0469db
        }
        .hover\:text-\[\#0469db\]:hover {
            color: #0469db
        }
        .hover\:opacity-90:hover {
            opacity: .9
        }
        .hover\:opacity-100:hover {
            opacity: 1
        }
        .hover\:grayscale-0:hover {
            --tw-grayscale: grayscale(0%);
            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, )
        }
    }
    .disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed
    }
    .disabled\:opacity-35:disabled {
        opacity: .35
    }
    @media (hover:hover) {
        .disabled\:hover\:border-\[\#e2e8f0\]:disabled:hover {
            border-color: #e2e8f0
        }
        .disabled\:hover\:text-\[\#0b1220\]:disabled:hover {
            color: #0b1220
        }
    }
    @media (min-width:40rem) {
        .sm\:right-6 {
            right: calc(var(--spacing) * 6)
        }
        .sm\:block {
            display: block
        }
        .sm\:inline-flex {
            display: inline-flex
        }
        .sm\:h-\[330px\] {
            height: 330px
        }
        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
        .sm\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
        .sm\:gap-6 {
            gap: calc(var(--spacing) * 6)
        }
        .sm\:p-7 {
            padding: calc(var(--spacing) * 7)
        }
        .sm\:p-8 {
            padding: calc(var(--spacing) * 8)
        }
        .sm\:p-9 {
            padding: calc(var(--spacing) * 9)
        }
        .sm\:px-6 {
            padding-inline: calc(var(--spacing) * 6)
        }
        .sm\:px-8 {
            padding-inline: calc(var(--spacing) * 8)
        }
        .sm\:px-12 {
            padding-inline: calc(var(--spacing) * 12)
        }
    }
    @media (min-width:48rem) {
        .md\:right-12 {
            right: calc(var(--spacing) * 12)
        }
        .md\:block {
            display: block
        }
        .md\:w-\[220px\] {
            width: 220px
        }
        .md\:py-16 {
            padding-block: calc(var(--spacing) * 16)
        }
    }
    @media (min-width:64rem) {
        .lg\:order-1 {
            order: 1
        }
        .lg\:order-2 {
            order: 2
        }
        .lg\:block {
            display: block
        }
        .lg\:hidden {
            display: none
        }
        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
        .lg\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr))
        }
        .lg\:grid-cols-\[1\.02fr_1fr\] {
            grid-template-columns: 1.02fr 1fr
        }
        .lg\:grid-cols-\[1\.05fr_1fr\] {
            grid-template-columns: 1.05fr 1fr
        }
        .lg\:grid-cols-\[1fr_1\.04fr\] {
            grid-template-columns: 1fr 1.04fr
        }
        .lg\:grid-cols-\[minmax\(0\,1fr\)_2\.6fr\] {
            grid-template-columns: minmax(0, 1fr) 2.6fr
        }
        .lg\:gap-14 {
            gap: calc(var(--spacing) * 14)
        }
        .lg\:gap-16 {
            gap: calc(var(--spacing) * 16)
        }
        .lg\:gap-x-24 {
            column-gap: calc(var(--spacing) * 24)
        }
    }
}

:root {
    --chapter: clamp(64px, 5.6vw, 92px);
    --measure: 66ch;
    color-scheme: light
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scroll-padding-top: 92px
}

body {
    color: #0b1220;
    font-family: var(--font-sans);
    background: #fff;
    overflow-x: clip
}

::selection {
    background: #0582ff2e
}

.display {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    text-wrap: balance;
    font-weight: 400;
    line-height: 1.14
}

.kicker {
    font-family: var(--font-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700
}

.accent-italic {
    font-family: var(--font-display);
    font-style: italic
}

.measure {
    max-width: var(--measure)
}

.tnum {
    font-variant-numeric: tabular-nums
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums
}

.reveal {
    opacity: 1;
    transform: none
}

.js .reveal {
    opacity: 0;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--reveal-delay, 0s);
    transform: translateY(20px)
}

.js .reveal[data-in=true] {
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion:reduce) {
    .js .reveal,
    .js .reveal[data-in=true] {
        opacity: 1!important;
        transition: none!important;
        transform: none!important
    }
    html {
        scroll-behavior: auto
    }
    *,
    :after,
    :before {
        transition-duration: .001ms!important;
        animation-duration: .001ms!important;
        animation-iteration-count: 1!important
    }
}

.btn {
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 15px 24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    transition: background .16s, border-color .16s, color .16s;
    display: inline-flex
}

.btn-primary {
    color: #fff;
    background: #0582ff;
    border: 1px solid #0582ff
}

.btn-primary:hover {
    background: #0469db;
    border-color: #0469db
}

.btn-primary:active {
    background: #0354b3
}

.btn-secondary {
    color: #0b1220;
    background: #fff;
    border: 1px solid #cbd5e1
}

.btn-secondary:hover {
    color: #0469db;
    border-color: #0582ff
}

.btn-on-deep {
    color: #fff;
    background: 0 0;
    border: 1px solid #ffffff73
}

.btn-on-deep:hover {
    background: #ffffff14;
    border-color: #fff
}

:focus-visible {
    outline-offset: 2px;
    border-radius: 4px;
    outline: 3px solid #0582ff
}

.on-deep :focus-visible {
    outline-color: #9fc8ff
}

.skip-link {
    z-index: 100;
    color: #fff;
    background: #0b1220;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    transition: top .15s;
    position: absolute;
    top: -100px;
    left: 16px
}

.skip-link:focus {
    top: 16px
}

.panel {
    border: 1px solid var(--color-line);
    background: #fff;
    border-radius: 12px
}

.rule {
    background: var(--color-line);
    height: 1px
}

.no-bar {
    scrollbar-width: thin
}

.js .step-panel[data-active=false] {
    display: none
}

.step-panel {
    animation: stepIn .64s cubic-bezier(.16, 1, .3, 1) both
}

@keyframes stepIn {
    0% {
        opacity: 0;
        filter: blur(7px);
        transform: translateY(16px)scale(.965)
    }
    55% {
        filter: blur()
    }
    to {
        opacity: 1;
        filter: blur();
        transform: none
    }
}

@keyframes rowPop {
    0% {
        opacity: 0;
        transform: translateY(9px)scale(.96)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.row-pop {
    animation: rowPop .46s cubic-bezier(.22, 1, .36, 1) both
}

@keyframes cardBeat {
    0% {
        box-shadow: 0 24px 70px -42px #0b122073, 0 0 #0582ff00
    }
    30% {
        box-shadow: 0 24px 70px -42px #0b122073, 0 0 0 5px #0582ff24
    }
    to {
        box-shadow: 0 24px 70px -42px #0b122073, 0 0 #0582ff00
    }
}

.card-beat {
    animation: cardBeat .9s cubic-bezier(.22, 1, .36, 1) both
}

@media (prefers-reduced-motion:reduce) {
    .card-beat,
    .row-pop,
    .step-panel {
        animation: none!important
    }
}

@keyframes flyToCore {
    0% {
        opacity: 0;
        left: var(--from-x);
        top: var(--from-y);
        transform: translate(-50%, -50%)scale(.65)
    }
    18% {
        opacity: 1;
        left: var(--from-x);
        top: var(--from-y);
        transform: translate(-50%, -50%)scale(1)
    }
    72% {
        opacity: 1;
        left: var(--to-x);
        top: var(--to-y);
        transform: translate(-50%, -50%)scale(.82)
    }
    to {
        opacity: 0;
        left: var(--to-x);
        top: var(--to-y);
        transform: translate(-50%, -50%)scale(.25)
    }
}

.fly {
    animation: flyToCore .9s cubic-bezier(.5, 0, .6, 1) both
}

@keyframes corePulse {
    0% {
        opacity: .35;
        transform: scale(.85)
    }
    55% {
        opacity: .85;
        transform: scale(1.3)
    }
    to {
        opacity: .45;
        transform: scale(1)
    }
}

.core-flare {
    animation: corePulse 1s ease-out .56s both
}

@keyframes ringOut {
    0% {
        opacity: .6;
        transform: scale(.7)
    }
    to {
        opacity: 0;
        transform: scale(1.9)
    }
}

.core-ring {
    animation: ringOut 1.4s ease-out .56s both
}

@keyframes resultIn {
    0% {
        opacity: 0;
        filter: blur(5px);
        transform: translate(18px)scale(.96)
    }
    to {
        opacity: 1;
        filter: blur();
        transform: none
    }
}

.result-in {
    animation: resultIn .56s cubic-bezier(.22, 1, .36, 1) .56s both
}

@keyframes resBar {
    0% {
        width: 0
    }
    to {
        width: 100%
    }
}

.res-bar {
    width: 100%;
    animation: resBar 1s cubic-bezier(.22, 1, .36, 1) .7s both
}

@keyframes caretBlink {
    50% {
        opacity: 0
    }
}

.caret {
    vertical-align: -2px;
    background: #0582ff;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    animation: caretBlink 1s step-end infinite;
    display: inline-block
}

@keyframes rowIn {
    0% {
        opacity: 0;
        transform: translate(-10px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.row-in {
    animation: rowIn .46s cubic-bezier(.22, 1, .36, 1) both
}

@keyframes livePulse {
    0%,
    to {
        opacity: 1
    }
    50% {
        opacity: .35
    }
}

.live-dot {
    animation: livePulse 1.6s ease-in-out infinite
}

@media (prefers-reduced-motion:reduce) {
    .caret,
    .core-flare,
    .core-ring,
    .fly,
    .live-dot,
    .res-bar,
    .result-in,
    .row-in {
        animation: none!important
    }
    .fly {
        opacity: 0!important
    }
}

@keyframes swapIn {
    0% {
        opacity: 0;
        transform: translateY(4px)scale(.92)
    }
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes swapOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.swap-in {
    animation: swapIn .38s cubic-bezier(.22, 1, .36, 1) both
}

.swap-out {
    opacity: 0;
    animation: swapOut .26s both
}

@keyframes trackOn {
    0% {
        background: #cbd5e1
    }
    to {
        background: #0582ff
    }
}

@keyframes knobOn {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(12px)
    }
}

.tgl-track {
    background: #0582ff;
    animation: trackOn .34s both
}

.tgl-knob {
    animation: knobOn .34s cubic-bezier(.34, 1.56, .64, 1) both;
    transform: translate(12px)
}

@keyframes miniSpin {
    to {
        transform: rotate(1turn)
    }
}

.mini-spin {
    animation: miniSpin .9s linear infinite
}

@keyframes sealIn {
    0% {
        opacity: 0;
        transform: scale(1.035)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.seal-in {
    animation: sealIn .75s cubic-bezier(.22, 1, .36, 1) both
}

@media (prefers-reduced-motion:reduce) {
    .mini-spin,
    .seal-in,
    .swap-in,
    .swap-out,
    .tgl-knob,
    .tgl-track {
        animation: none!important
    }
}

@keyframes bmarquee {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-50%)
    }
}

@media (prefers-reduced-motion:reduce) {
    .marquee-row {
        animation: none!important;
        transform: none!important
    }
}

.glass-card {
    -webkit-backdrop-filter: blur(20px)saturate(140%);
    background: linear-gradient(#ffffffdb, #ffffff9e);
    border: 1px solid #ffffffb3;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1), border-color .45s;
    box-shadow: 0 1px 1px #10172a08, 0 24px 60px -30px #10172a38
}

.glass-card:focus-within,
.glass-card:hover {
    border-color: #0582ff47;
    transform: translateY(-5px);
    box-shadow: 0 1px 1px #10172a08, 0 34px 76px -28px #0582ff52
}

.glass-well {
    -webkit-backdrop-filter: blur(10px);
    background: linear-gradient(#ffffffb3, #fff6);
    border: 1px solid #e2e8f0e6
}

@keyframes packetTravel {
    0%,
    6% {
        opacity: 0;
        left: 6%
    }
    16% {
        opacity: 1
    }
    46% {
        opacity: 1;
        left: 76%
    }
    51%,
    to {
        opacity: 0;
        left: 76%
    }
}

@keyframes wallHit {
    0%,
    44% {
        opacity: 0;
        transform: translate(-50%, -50%)scale(.5)
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%)scale(1)
    }
    74%,
    to {
        opacity: 0;
        transform: translate(-50%, -50%)scale(1.7)
    }
}

@keyframes blockedFlash {
    0%,
    42% {
        opacity: 0;
        transform: translate(-50%, -50%)scale(.85)
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%)scale(1)
    }
    66% {
        opacity: 1;
        transform: translate(-50%, -50%)scale(1)
    }
    80%,
    to {
        opacity: 0;
        transform: translate(-50%, -50%)scale(1)
    }
}

.anim-packet {
    animation: packetTravel 2.6s ease-in-out infinite paused
}

.anim-wallhit {
    animation: wallHit 2.6s ease-in-out infinite paused
}

.anim-blocked {
    animation: blockedFlash 2.6s ease-in-out infinite paused
}

@keyframes sweepBar {
    0% {
        opacity: 0;
        transform: translate(-120%)
    }
    15% {
        opacity: 1
    }
    85% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate(340%)
    }
}

@keyframes haloPulse {
    0%,
    to {
        opacity: .32;
        transform: scale(.88)
    }
    50% {
        opacity: .68;
        transform: scale(1.18)
    }
}

.anim-sweep {
    animation: sweepBar 2.2s ease-in-out infinite paused
}

.anim-halo {
    animation: haloPulse 2.2s ease-in-out infinite paused
}

.anim-cardmarquee {
    animation: bmarquee 7s linear infinite paused
}

@keyframes countGlow {
    0%,
    to {
        text-shadow: 0 0 #0582ff00
    }
    50% {
        text-shadow: 0 0 18px #0582ff73
    }
}

.anim-countglow {
    animation: countGlow 2.4s ease-in-out infinite paused
}

@keyframes routeScan {
    0%,
    4% {
        opacity: 1;
        top: 16%
    }
    29%,
    33% {
        opacity: 1;
        top: 16%
    }
    37% {
        opacity: 1;
        top: 50%
    }
    62%,
    66% {
        opacity: 1;
        top: 50%
    }
    70% {
        opacity: 1;
        top: 84%
    }
    95%,
    to {
        opacity: 1;
        top: 84%
    }
}

.anim-scan {
    animation: routeScan 3.6s ease-in-out infinite paused
}

.group:focus-within [class*=anim-],
.group:hover [class*=anim-] {
    animation-play-state: running
}

@keyframes wireBreathe {
    0%,
    to {
        stroke-opacity: .16
    }
    50% {
        stroke-opacity: .48
    }
}

.wire-breathe {
    animation: wireBreathe 2.4s ease-in-out infinite
}

@keyframes brainGlow {
    0%,
    to {
        opacity: .3;
        transform: scale(.9)
    }
    50% {
        opacity: .65;
        transform: scale(1.1)
    }
}

.brain-glow {
    animation: brainGlow 2.6s ease-in-out infinite
}

@keyframes nodePulse {
    0%,
    to {
        box-shadow: 0 0 #0582ff00
    }
    50% {
        box-shadow: 0 0 0 4px #0582ff29
    }
}

.node-pulse {
    animation: nodePulse 2.4s ease-in-out infinite
}

@media (prefers-reduced-motion:reduce) {
    .brain-glow,
    .node-pulse,
    .wire-breathe,
    [class*=anim-] {
        animation: none!important
    }
    .glass-card {
        transition: none!important
    }
    .glass-card:focus-within,
    .glass-card:hover {
        transform: none!important
    }
}

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

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

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

@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
}

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

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

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

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

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-divide-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

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

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

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

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

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

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

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

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

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

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

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

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

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

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@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-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

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

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

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

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

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

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

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

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

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

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

@property --tw-duration {
    syntax: "*";
    inherits: false
}
/* ===== home-case-strip (was inline <style> in index.html head) ===== */
        /* Challenge → Solution strip. Values are literal because the homepage loads
   site.css, which does not carry barie.css's token set. */
        
        #case-strip .cs {
            border: 1px solid #e4eaf2;
            border-radius: 14px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 18px 40px -22px rgba(11, 18, 32, .2), 0 40px 80px -50px rgba(11, 18, 32, .24)
        }
        
        #case-strip .cs__bar {
            margin: 0;
            padding: 15px 22px;
            background: #0a1b33;
            color: #fff;
            font: 700 clamp(15px, 1.15vw, 17px)/1.35 var(--font-sans, Quicksand, ui-sans-serif, system-ui, sans-serif)
        }
        
        #case-strip .cs__sector {
            display: block;
            margin: 0 0 4px;
            font-size: 9.5px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: #69b4ff
        }
        
        #case-strip .cs__row {
            padding: 18px 22px 20px;
            border-top: 1px solid #e4eaf2
        }
        
        #case-strip .cs__row:first-of-type {
            border-top: 0
        }
        
        #case-strip .cs__row--s {
            background: #f6f9fd
        }
        
        #case-strip .cs__label {
            margin: 0 0 9px;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: .15em;
            text-transform: uppercase
        }
        
        #case-strip .cs__row--c .cs__label {
            color: #b3261e
        }
        
        #case-strip .cs__row--s .cs__label {
            color: #067a52
        }
        
        #case-strip .cs__row p {
            margin: 0;
            font-size: clamp(14.5px, 1.02vw, 15.5px);
            line-height: 1.66;
            color: #3d4a5c
        }
        
        #case-strip .cs__more {
            margin: 14px 0 0
        }
        
        #case-strip .cs__more a {
            font-size: 13px;
            font-weight: 700;
            color: #0469db;
            text-decoration: none
        }
        
        #case-strip .cs__more a:hover {
            text-decoration: underline
        }
        
        #case-strip .cs__tbd {
            border-bottom: 1px dotted #94a3b8;
            color: #64748b;
            cursor: help
        }
        
        #case-strip .cs-rot__item {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s
        }
        
        #case-strip .cs-rot__item[data-on="true"] {
            position: relative;
            opacity: 1;
            visibility: visible;
            transform: none
        }
        
        #case-strip .cs-rot__stage {
            position: relative
        }
        
        #case-strip .cs-rot__dots {
            display: flex;
            justify-content: center;
            gap: 9px;
            margin: 22px 0 0;
            padding: 0;
            list-style: none
        }
        
        #case-strip .cs-rot__dots button {
            position: relative;
            width: 8px;
            height: 8px;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: #e4eaf2;
            cursor: pointer;
            overflow: hidden;
            transition: background .25s ease, width .35s cubic-bezier(.22, 1, .36, 1)
        }
        /* the live dot stretches into a track and fills over the dwell time, so the
   strip reads as running even in the seconds between advances */
        
        #case-strip .cs-rot__dots button[aria-selected="true"] {
            width: 26px;
            background: #cfe3fb
        }
        
        #case-strip .cs-rot__dots button[aria-selected="true"]::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 999px;
            background: #0582ff;
            transform: scaleX(0);
            transform-origin: left center;
            animation: csFill var(--cs-dur, 4800ms) linear forwards;
            animation-play-state: paused
        }
        
        #case-strip.is-playing .cs-rot__dots button[aria-selected="true"]::after {
            animation-play-state: running
        }
        
        @keyframes csFill {
            to {
                transform: scaleX(1)
            }
        }
        
        #case-strip .cs-rot__dots button:focus-visible {
            outline: 2px solid #0582ff;
            outline-offset: 3px
        }
        
        @media (prefers-reduced-motion:reduce) {
            #case-strip .cs-rot__item {
                transition: none
            }
            #case-strip .cs-rot__dots button[aria-selected="true"]::after {
                animation: none;
                transform: scaleX(1)
            }
        }
        
        @media (max-width:560px) {
            #case-strip .cs__bar {
                padding: 13px 16px
            }
            #case-strip .cs__row {
                padding: 15px 16px 17px
            }
        }

/* ===== home-shift (was inline <style> in index.html head) ===== */
        /* Merged fragmented-problem → unified-solution block. Values are literal
   because the homepage loads site.css, which does not carry barie.css's
   token set. Both cases live in one figure and cross-fade in place. */
        
        #shift .sh__ar {
            display: inline-block;
            margin: 0 .55em;
            color: #0582ff;
            font-weight: 700
        }
        /* ── the figure ─────────────────────────────────────────────── */
        
        #shift .sh__bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-bottom: 1px solid #eef2f7;
            padding: 11px 14px 11px 18px
        }
        
        #shift .sh__cap {
            font-size: 12.5px;
            color: #64748b;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        
        #shift .sh__cap b {
            color: #0b1220;
            font-weight: 700
        }
        
        #shift .sh__cap[data-cap=solution],
        #shift [data-state=solution] .sh__cap[data-cap=problem] {
            display: none
        }
        
        #shift [data-state=solution] .sh__cap[data-cap=solution] {
            display: block
        }
        
        #shift .sh__tabs {
            display: flex;
            flex: none;
            gap: 2px;
            padding: 3px;
            border-radius: 999px;
            background: #f1f5f9
        }
        
        #shift .sh__tab {
            appearance: none;
            border: 0;
            cursor: pointer;
            border-radius: 999px;
            padding: 5px 12px;
            font: 700 11.5px/1 var(--font-sans, Quicksand, ui-sans-serif, system-ui, sans-serif);
            color: #64748b;
            background: transparent;
            transition: background-color .25s, color .25s, box-shadow .25s
        }
        
        #shift .sh__tab[aria-selected=true] {
            background: #fff;
            color: #0b1220;
            box-shadow: 0 1px 2px rgba(11, 18, 32, .1)
        }
        
        #shift .sh__tab:focus-visible {
            outline: 2px solid #0582ff;
            outline-offset: 2px
        }
        /* both panes share one grid cell, so the stage is as tall as the taller
   pane and switching states never shifts the page */
        
        #shift .sh__stage {
            display: grid
        }
        
        #shift .sh__pane {
            grid-area: 1/1;
            min-width: 0;
            transition: opacity .42s cubic-bezier(.22, 1, .36, 1), transform .42s cubic-bezier(.22, 1, .36, 1)
        }
        
        #shift .sh__pane[data-pane=problem] {
            opacity: 1;
            transform: none
        }
        
        #shift .sh__pane[data-pane=solution] {
            opacity: 0;
            transform: translateY(10px) scale(.985);
            visibility: hidden;
            pointer-events: none
        }
        
        #shift [data-state=solution] .sh__pane[data-pane=problem] {
            opacity: 0;
            transform: translateY(-10px) scale(.985);
            visibility: hidden;
            pointer-events: none
        }
        
        #shift [data-state=solution] .sh__pane[data-pane=solution] {
            opacity: 1;
            transform: none;
            visibility: visible;
            pointer-events: auto
        }
        /* ── problem pane ───────────────────────────────────────────── */
        
        #shift .sh__rows {
            margin: 0;
            padding: 0;
            list-style: none
        }
        
        #shift .sh__row {
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            align-items: center;
            gap: 12px;
            padding: 13px 18px;
            border-top: 1px solid #eef2f7;
            animation: shRowIn .5s cubic-bezier(.22, 1, .36, 1) both;
            animation-delay: calc(var(--i) * 70ms)
        }
        
        #shift .sh__row:first-child {
            border-top: 0
        }
        
        #shift .sh__dot {
            width: 18px;
            height: 18px;
            flex: none;
            border-radius: 5px;
            background: #e2e8f0;
            display: grid;
            place-items: center
        }
        
        #shift .sh__dot::after {
            content: "";
            width: 6.4px;
            height: 6.4px;
            border-radius: 50%;
            background: #94a3b8
        }
        
        #shift .sh__name {
            font-size: 13.5px;
            font-weight: 600;
            color: #0b1220;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        
        #shift .sh__price {
            font-size: 12px;
            font-weight: 700;
            color: #b45309
        }
        
        #shift .sh__frag {
            width: 70px;
            text-align: right;
            font-size: 11.5px;
            font-weight: 700;
            color: #b42318;
            animation: shFragBlink 3.2s ease-in-out infinite;
            animation-delay: calc(var(--i) * 70ms)
        }
        /* ── solution pane ──────────────────────────────────────────── */
        
        #shift .sh__sol {
            padding: 26px 22px 22px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%
        }
        
        #shift .sh__chips {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none
        }
        
        #shift .sh__chip {
            display: flex;
            height: 38px;
            align-items: center;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            padding: 0 12px;
            font-size: 11px;
            font-weight: 600;
            color: #3d4a5c;
            animation: shChipIn .5s cubic-bezier(.22, 1, .36, 1) both, nodePulse 2.4s ease-in-out infinite;
            animation-delay: calc(var(--i) * 70ms), calc(400ms + var(--i) * 400ms)
        }
        
        #shift .sh__wires {
            display: block;
            margin: 8px auto 0;
            width: 100%;
            max-width: 240px;
            height: 40px
        }
        
        #shift .sh__wire {
            animation: shWireIn .6s ease both, wireBreathe 2.4s ease-in-out infinite;
            animation-delay: calc(260ms + var(--i) * 90ms), calc(700ms + var(--i) * 260ms)
        }
        
        #shift .sh__brainwrap {
            position: relative;
            margin: 0 auto;
            max-width: 380px;
            animation: shChipIn .55s cubic-bezier(.22, 1, .36, 1) both;
            animation-delay: 600ms
        }
        
        #shift .sh__glow {
            position: absolute;
            inset: -10px;
            border-radius: 16px;
            background: #0582ff;
            filter: blur(18px);
            opacity: .3;
            pointer-events: none
        }
        
        #shift .sh__brain {
            position: relative;
            margin: 0 auto;
            display: flex;
            max-width: 380px;
            align-items: center;
            gap: 12px;
            border: 1px solid rgba(5, 130, 255, .25);
            border-radius: 10px;
            background: #eaf3ff;
            padding: 13px 16px
        }
        
        #shift .sh__mark {
            display: grid;
            place-items: center;
            flex: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: #0b1220;
            color: #fff
        }
        
        #shift .sh__mark svg {
            width: 20px;
            height: 20px
        }
        
        #shift .sh__brainname {
            display: block;
            font-size: 13.5px;
            font-weight: 700;
            color: #0b1220
        }
        
        #shift .sh__brainsub {
            display: block;
            font-size: 11.5px;
            color: #3d4a5c
        }
        
        #shift .sh__lake {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin: 18px 0 0;
            padding: 0;
            list-style: none
        }
        
        #shift .sh__lakeitem {
            border: 1px solid #dbeafe;
            border-radius: 999px;
            background: #f4f9ff;
            padding: 5px 12px;
            font-size: 11.5px;
            font-weight: 600;
            color: #3d4a5c;
            animation: shChipIn .5s cubic-bezier(.22, 1, .36, 1) both;
            animation-delay: calc(820ms + var(--i) * 90ms)
        }
        
        #shift .sh__lakeitem b {
            color: #0469db;
            font-weight: 700
        }
        /* ── footer bar ─────────────────────────────────────────────── */
        
        #shift .sh__foot {
            margin: 0;
            border-top: 1px solid #eef2f7;
            padding: 13px 18px;
            font-size: 13px;
            font-weight: 700;
            background: #fdf3f3;
            color: #b42318;
            transition: background-color .42s, color .42s
        }
        
        #shift [data-state=solution] .sh__foot {
            background: #f0f9f4;
            color: #067a52
        }
        
        #shift .sh__footline[data-cap=solution],
        #shift [data-state=solution] .sh__footline[data-cap=problem] {
            display: none
        }
        
        #shift [data-state=solution] .sh__footline[data-cap=solution] {
            display: inline
        }
        
        @keyframes shRowIn {
            from {
                opacity: 0;
                transform: translateX(-10px)
            }
            to {
                opacity: 1;
                transform: none
            }
        }
        
        @keyframes shChipIn {
            from {
                opacity: 0;
                transform: translateY(10px)
            }
            to {
                opacity: 1;
                transform: none
            }
        }
        
        @keyframes shWireIn {
            from {
                opacity: 0;
                stroke-dasharray: 60;
                stroke-dashoffset: 60
            }
            to {
                opacity: 1;
                stroke-dasharray: 60;
                stroke-dashoffset: 0
            }
        }
        
        @keyframes shFragBlink {
            0%,
            42% {
                opacity: .25
            }
            52%,
            92% {
                opacity: 1
            }
            100% {
                opacity: .25
            }
        }
        
        @media (prefers-reduced-motion:reduce) {
            #shift .sh__row,
            #shift .sh__chip,
            #shift .sh__wire,
            #shift .sh__brainwrap,
            #shift .sh__lakeitem,
            #shift .sh__frag {
                animation: none;
                opacity: 1;
                transform: none;
                stroke-dashoffset: 0
            }
            #shift .sh__pane {
                transition: none
            }
        }

/* ===== home-economics (was inline <style> in index.html head) ===== */
        /* The bill that keeps printing. Literal values: the homepage loads site.css,
   not barie.css. main.js §7 drives the tape; everything here is presentation
   plus the per-row print animation, which has to be a keyframe so it can be
   re-fired on each new row. */
        
        #economics .ec-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            padding: 22px 24px 0
        }
        
        #economics .ec-run {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 5px;
            line-height: 1;
            flex: none
        }
        
        #economics .ec-run-n {
            font-family: "Libre Baskerville", Georgia, serif;
            font-size: clamp(19px, 2.1vw, 25px);
            letter-spacing: -.02em;
            color: #b42318;
            white-space: nowrap
        }
        
        #economics .ec-run-l {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #94a3b8;
            white-space: nowrap
        }
        
        #economics .ec-nm {
            font-size: 13.5px;
            font-weight: 700;
            color: #0b1220
        }
        
        #economics .ec-dot {
            width: 9px;
            height: 9px;
            flex: none;
            border-radius: 9999px
        }
        
        #economics .ec-dot--red {
            background: #dc2626
        }
        
        #economics .ec-dot--blue {
            background: #0582ff
        }
        
        #economics .ec-tag {
            margin-left: auto;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase
        }
        
        #economics .ec-tag--red {
            color: #c0392f
        }
        
        #economics .ec-tag--blue {
            color: #0469db;
            border-radius: 9999px;
            padding: 3px 9px;
            background: #e3f0ff
        }
        
        #economics .ec-bill {
            position: relative;
            margin: 16px 24px 0;
            border: 1px solid #f4d8d5;
            border-radius: 10px;
            background: #fffbfa
        }
        
        #economics .ec-bill.ec-shake {
            animation: ecShake 360ms ease-in-out
        }
        
        #economics .ec-bill-top,
        #economics .ec-own-top {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 11px 14px;
            border-bottom: 1px dashed #f1d2ce
        }
        
        #economics .ec-tape {
            position: relative;
            height: 186px;
            overflow: hidden;
            border-radius: 0 0 9px 9px;
            -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
            mask-image: linear-gradient(180deg, transparent 0, #000 16%)
        }
        
        #economics .ec-rows {
            will-change: transform
        }
        
        #economics .ec-row {
            display: grid;
            grid-template-columns: 34px 1fr auto;
            align-items: center;
            gap: 10px;
            height: 31px;
            padding: 0 14px;
            border-bottom: 1px dotted #f2dcd9;
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 11.5px;
            color: #4a5768
        }
        
        #economics .ec-row-w {
            font-weight: 700;
            color: #9aa7b8
        }
        
        #economics .ec-row-t {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
        }
        
        #economics .ec-row-a {
            font-weight: 700;
            color: #b42318;
            font-variant-numeric: tabular-nums
        }
        
        #economics .ec-row--new {
            animation: ecPrint 460ms cubic-bezier(.22, 1, .36, 1) both
        }
        
        #economics .ec-sweep {
            position: absolute;
            inset: auto 0 0 0;
            height: 31px;
            opacity: 0;
            pointer-events: none;
            background: linear-gradient(90deg, transparent, rgba(220, 38, 38, .18) 45%, transparent)
        }
        
        #economics .ec-sweep.on {
            animation: ecSweep 500ms ease-out
        }
        
        #economics .ec-stamp {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            opacity: 0;
            pointer-events: none;
            background: rgba(255, 250, 249, .9);
            font-size: 12.5px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #b42318
        }
        
        #economics .ec-stamp.on {
            animation: ecStamp 1250ms cubic-bezier(.22, 1, .36, 1)
        }
        
        #economics .ec-own {
            margin: 12px 24px 0;
            border: 1px solid #cfe3fb;
            border-radius: 10px;
            background: #f7fbff
        }
        
        #economics .ec-own-top {
            border-bottom: 1px dashed #d5e6fb
        }
        
        #economics .ec-own-row {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 10px;
            height: 31px;
            padding: 0 14px;
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 11.5px;
            color: #4a5768
        }
        
        #economics .ec-own-amt {
            font-weight: 700;
            color: #0469db
        }
        
        #economics .ec-own.ec-assert #ec-owntag {
            animation: ecCalm 1250ms ease-out
        }
        
        #economics .ec-punch {
            margin-top: 18px;
            border-top: 1px solid #e2e8f0;
            background: #eaf3ff;
            padding: 16px 24px 18px
        }
        
        #economics .ec-punch-line {
            font-size: 15px;
            line-height: 1.45;
            font-weight: 600;
            color: #0b1220
        }
        
        #economics .ec-note {
            margin-top: 8px;
            font-size: 11.5px;
            line-height: 1.5;
            color: #7c8ba1
        }
        
        @keyframes ecPrint {
            0% {
                opacity: 0;
                transform: translateY(7px);
                background: #fbdedb
            }
            55% {
                opacity: 1;
                background: #fde9e7
            }
            100% {
                opacity: 1;
                transform: none;
                background: transparent
            }
        }
        
        @keyframes ecSweep {
            0% {
                opacity: 0;
                transform: translateX(-100%)
            }
            28% {
                opacity: 1
            }
            100% {
                opacity: 0;
                transform: translateX(100%)
            }
        }
        
        @keyframes ecStamp {
            0% {
                opacity: 0;
                transform: scale(1.05)
            }
            16%,
            74% {
                opacity: 1;
                transform: scale(1)
            }
            100% {
                opacity: 0;
                transform: scale(1)
            }
        }
        
        @keyframes ecShake {
            0%,
            100% {
                transform: translateX(0)
            }
            22% {
                transform: translateX(-3px)
            }
            48% {
                transform: translateX(3px)
            }
            74% {
                transform: translateX(-2px)
            }
        }
        
        @keyframes ecCalm {
            0% {
                box-shadow: 0 0 0 0 rgba(5, 130, 255, .5)
            }
            100% {
                box-shadow: 0 0 0 12px rgba(5, 130, 255, 0)
            }
        }
        
        @media (max-width:430px) {
            #economics .ec-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px
            }
            #economics .ec-bill,
            #economics .ec-own {
                margin-left: 18px;
                margin-right: 18px
            }
            #economics .ec-punch {
                padding-left: 18px;
                padding-right: 18px
            }
            #economics .ec-row {
                grid-template-columns: 30px 1fr auto;
                gap: 8px;
                font-size: 11px;
                padding: 0 11px
            }
        }
        
        @media (prefers-reduced-motion:reduce) {
            #economics .ec-panel * {
                animation: none!important
            }
        }

/* ===== home-nav-menus (was inline <style> in index.html head) ===== */
        .hmenu {
            position: relative
        }
        
        .hmenu__panel {
            position: absolute;
            top: 100%;
            left: -18px;
            z-index: 60;
            padding-top: 14px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: opacity .2s ease, transform .2s ease, visibility .2s;
            pointer-events: none
        }
        
        .hmenu:hover .hmenu__panel,
        .hmenu:focus-within .hmenu__panel {
            opacity: 1;
            visibility: visible;
            transform: none;
            pointer-events: auto
        }
        
        .hmenu__inner {
            background: rgba(255, 255, 255, .98);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border: 1px solid #e4eaf2;
            border-radius: 14px;
            box-shadow: 0 24px 48px -24px rgba(11, 18, 32, .22);
            padding: 8px;
            min-width: 262px
        }
        
        .hmenu__panel--wide .hmenu__inner {
            min-width: 648px
        }
        
        .hmenu__list {
            list-style: none;
            margin: 0;
            padding: 0
        }
        
        .hmenu__list--2col {
            columns: 2;
            column-gap: 26px
        }
        
        .hmenu__list--2col li {
            break-inside: avoid;
            -webkit-column-break-inside: avoid
        }
        
        .hmenu__list li a {
            display: block;
            padding: 10px 12px;
            border-radius: 9px;
            color: #3d4a5c;
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.3;
            transition: background .14s, color .14s
        }
        
        .hmenu__list li a:hover {
            background: #eaf3ff;
            color: #0469db
        }
        
        .hmenu__all {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 6px;
            padding: 11px 12px;
            border-top: 1px solid #eef2f7;
            color: #0582ff;
            font-weight: 700;
            font-size: 14px;
            text-decoration: none
        }
        
        .hmenu__all:hover {
            color: #0469db
        }
        
        .hmenu__caret {
            width: 13px;
            height: 13px;
            margin-left: 5px;
            color: #94a3b8;
            transition: transform .26s ease, color .2s ease
        }
        
        .hmenu:hover .hmenu__caret,
        .hmenu:focus-within .hmenu__caret {
            transform: rotate(180deg);
            color: #0469db
        }
        
        @media (prefers-reduced-motion: reduce) {
            .hmenu__panel,
            .hmenu__caret {
                transition: none
            }
        }