@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;300;400;500;700;900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@100;200;300;400;500;600;700;800;900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100..700;1,100..700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Jersey+10&display=swap";
@import"https://fonts.cdnfonts.com/css/sansation";
@import"https://fonts.googleapis.com/css2?family=Audiowide&display=swap";

@font-face {
    font-family: Rubik One;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/rubik-one@latest/latin-400-normal.woff2) format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/rubik-one@latest/latin-400-normal.woff) format("woff"), url(https://cdn.jsdelivr.net/fontsource/fonts/rubik-one@latest/latin-400-normal.ttf) format("truetype")
}

[v-cloak] {
    display: none !important
}

.fluent--triangle-down-32-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M13.15 27.319c1.236 2.242 4.457 2.242 5.693 0l10.75-19.498c1.194-2.166-.373-4.819-2.846-4.819H5.255c-2.473 0-4.04 2.652-2.847 4.818z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.lucide--loader-circle {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.lucide--arrow-right {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

/*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
@layer theme {

    :root,
    :host {
        --color-white: #fff;
        --spacing: .25rem;
        --breakpoint-lg: 64rem;
        --container-xl: 36rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: 1.2;
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --text-8xl: 6rem;
        --text-8xl--line-height: 1;
        --font-weight-bold: 700;
        --leading-tight: 1.25;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --animate-spin: spin 1s linear infinite;
        --primary: #0872fd;
        --title: #0872fd;
        --card-primary: #0049c7;
        --card-secondary: #04142f;
        --circle: #0b2b4c;
        --circle-active: #fff;
        --circle-shadow: #fff;
        --lifetime: #fdd458;
        --lifetime-next: #52cde5;
        --button: #0872fd;
        --background: #000;
        --background-claim: #04152f;
        --background-current: #031b54;
        --background-deposit: #003647;
        --table-border: #5277e5;
        --table-background: #04142f;
        --font-poppins: "Poppins", sans-serif
    }
}

@layer base, components;

@layer utilities {
    .container {
        width: 100%
    }

    @media (width>=40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (width>=48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (width>=64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (width>=80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (width>=96rem) {
        .container {
            max-width: 96rem
        }
    }

    .inline {
        display: inline
    }

    .table {
        display: table
    }

    .h-auto {
        height: auto
    }

    .h-full {
        height: 100%
    }

    .\!w-1\/2 {
        width: 50% !important
    }

    .\!w-full {
        width: 100% !important
    }

    .w-full {
        width: 100%
    }

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

    .min-w-\[96px\] {
        min-width: 96px
    }

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

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

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

    .border-\(--table-border\)\/40 {
        border-color: color-mix(in oklab, var(--table-border)40%, transparent)
    }

    .border-\(--table-border\)\/40\! {
        border-color: color-mix(in oklab, var(--table-border)40%, transparent) !important
    }

    .object-cover {
        object-fit: cover
    }

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

    .\!opacity-30 {
        opacity: .3 !important
    }

    .opacity-40 {
        opacity: .4
    }

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

    .group-\[\.complete\]\:w-full\!:is(:where(.group).complete *) {
        width: 100% !important
    }

    .group-\[\.complete\]\:rounded-none\!:is(:where(.group).complete *) {
        border-radius: 0 !important
    }

    .group-\[\.complete\]\:bg-\(--circle-active\)\!:is(:where(.group).complete *) {
        background-color: var(--circle-active) !important
    }

    .group-\[\.complete\]\:opacity-100\!:is(:where(.group).complete *),
    .group-\[\.current\]\:opacity-100\!:is(:where(.group).current *) {
        opacity: 1 !important
    }

    .group-\[\.current\]\:shadow-\[0px_0px_20px_var\(--circle-shadow\)\]\!:is(:where(.group).current *) {
        --tw-shadow: 0px 0px 20px var(--tw-shadow-color, var(--circle-shadow)) !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

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

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

        .lg\:\!px-1 {
            padding-inline: calc(var(--spacing)*1) !important
        }
    }
}

.main-outer-container {
    background-color: var(--background);
    min-height: 100vh;
    font-family: var(--font-poppins);
    color: var(--color-white)
}

.main-container {
    max-width: 100%;
    overflow-x: hidden
}

.loading-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    display: flex
}

.loading-icon {
    animation: var(--animate-spin);
    color: var(--primary);
    height: calc(var(--spacing)*10) !important;
    width: calc(var(--spacing)*10) !important
}

.banner-outer-container {
    padding-top: calc(var(--spacing)*6)
}

@media (width>=48rem) {
    .banner-outer-container {
        padding-block: calc(var(--spacing)*12)
    }
}

@media (width>=64rem) {
    .banner-outer-container {
        padding-block: calc(var(--spacing)*20)
    }
}

.banner-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*4);
    margin-inline: auto
}

@media (width>=40rem) {
    .banner-container {
        max-width: 40rem
    }
}

@media (width>=48rem) {
    .banner-container {
        max-width: 48rem
    }
}

@media (width>=64rem) {
    .banner-container {
        max-width: 64rem
    }
}

@media (width>=80rem) {
    .banner-container {
        max-width: 80rem
    }
}

@media (width>=96rem) {
    .banner-container {
        max-width: 96rem
    }
}

@media (width>=64rem) {
    .banner-container {
        max-width: var(--breakpoint-lg)
    }
}

.banner-wrapper {
    margin-inline: calc(var(--spacing)*-8);
    align-items: center;
    row-gap: calc(var(--spacing)*5);
    flex-direction: column;
    display: flex
}

@media (width>=48rem) {
    .banner-wrapper {
        flex-direction: row-reverse
    }
}

.banner-image-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*8);
    display: none
}

@media (width>=48rem) {
    .banner-image-container {
        width: 50%;
        display: block
    }
}

.banner-image-wrapper {
    max-width: var(--container-xl);
    --tw-scale-x: 125%;
    --tw-scale-y: 125%;
    --tw-scale-z: 125%;
    scale: var(--tw-scale-x)var(--tw-scale-y);
    padding: calc(var(--spacing)*4);
    margin-inline: auto
}

.banner-image {
    aspect-ratio: 223/198;
    width: 100%;
    height: auto
}

.banner-title-container {
    z-index: 10;
    width: 100%;
    padding-inline: calc(var(--spacing)*8)
}

@media (width>=48rem) {
    .banner-title-container {
        width: 50%
    }
}

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

.banner-title {
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--spacing)*8);
    color: var(--color-white);
    display: flex
}

.banner-main-title {
    font-size: var(--text-8xl);
    line-height: var(--tw-leading, var(--text-8xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--title);
    font-style: italic
}

@media (width>=48rem) {
    .banner-main-title {
        font-size: 8rem
    }
}

@media (width>=64rem) {
    .banner-main-title {
        font-size: 10rem
    }
}

.banner-sub-title {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-style: italic;
    --tw-leading: var(--leading-tight) !important;
    line-height: var(--leading-tight) !important
}

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

.claim-outer-container {
    z-index: 10;
    padding-bottom: calc(var(--spacing)*3);
    position: relative
}

@media (width>=48rem) {
    .claim-outer-container {
        margin-top: calc(var(--spacing)*-28)
    }
}

@media (width>=64rem) {
    .claim-outer-container {
        margin-top: calc(var(--spacing)*-40)
    }
}

.claim-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*4);
    margin-inline: auto
}

@media (width>=40rem) {
    .claim-container {
        max-width: 40rem
    }
}

@media (width>=48rem) {
    .claim-container {
        max-width: 48rem
    }
}

@media (width>=64rem) {
    .claim-container {
        max-width: 64rem
    }
}

@media (width>=80rem) {
    .claim-container {
        max-width: 80rem
    }
}

@media (width>=96rem) {
    .claim-container {
        max-width: 96rem
    }
}

@media (width>=64rem) {
    .claim-container {
        max-width: var(--breakpoint-lg)
    }
}

.claim-progress-title {
    margin-bottom: calc(var(--spacing)*5);
    text-align: center;
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-style: italic
}

@media (width>=48rem) {
    .claim-progress-title {
        text-align: left;
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height))
    }
}

.claim-progress-title-wrapper {
    color: var(--title)
}

.claim-progress-title-br {
    display: none
}

@media (width>=48rem) {
    .claim-progress-title-br {
        display: block
    }
}

.claim-current-outer-container {
    margin-bottom: calc(var(--spacing)*1.5);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing)*1.5);
    text-align: center;
    flex-wrap: wrap;
    display: flex
}

@media (width>=48rem) {
    .claim-current-outer-container {
        justify-content: flex-start
    }
}

.claim-current-container {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--background-current);
    background-color: var(--background-current);
    padding-inline: calc(var(--spacing)*2.5);
    padding-block: calc(var(--spacing)*1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: 700;
    font-weight: 700;
    display: inline-block;
    --tw-leading: 1 !important;
    line-height: 1 !important
}

@media (width>=64rem) {
    .claim-current-container {
        padding-inline: calc(var(--spacing)*3);
        padding-block: calc(var(--spacing)*2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
}

.claim-current-title {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-white);
    --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));
    --tw-gradient-to: var(--primary);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.claim-current-deposit-container {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--background-deposit);
    background-color: var(--background-deposit);
    padding-inline: calc(var(--spacing)*2.5);
    padding-block: calc(var(--spacing)*1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: 700;
    font-weight: 700;
    display: inline-block;
    --tw-leading: 1 !important;
    line-height: 1 !important
}

@media (width>=64rem) {
    .claim-current-deposit-container {
        padding-inline: calc(var(--spacing)*3);
        padding-block: calc(var(--spacing)*2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
}

.claim-current-deposit-wrapper {
    display: inline-block
}

.claim-current-deposit {
    color: var(--lifetime)
}

.claim-next-deposit {
    color: var(--lifetime-next)
}

.claim-section-outer-container {
    margin-bottom: calc(var(--spacing)*1.5)
}

@media (width>=48rem) {
    .claim-section-outer-container {
        margin-bottom: calc(var(--spacing)*3)
    }
}

.claim-section-container {
    margin-inline: calc(var(--spacing)*-1.5);
    row-gap: calc(var(--spacing)*1.5);
    flex-wrap: wrap;
    display: flex
}

.claim-rank-card-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*1.5)
}

@media (width>=48rem) {
    .claim-rank-card-container {
        width: 40%
    }
}

.claim-rank-card-wrapper {
    --tw-gradient-position: to top left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--card-primary);
    --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));
    --tw-gradient-to: var(--card-secondary);
    height: 100%;
    padding: calc(var(--spacing)*4);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden
}

@media (width>=48rem) {
    .claim-rank-card-wrapper {
        --tw-gradient-position: to bottom right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }
}

.claim-rank-card-image {
    width: 100%
}

.claim-cta-outer-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*1.5);
    position: relative
}

@media (width>=48rem) {
    .claim-cta-outer-container {
        width: 60%
    }
}

.claim-cta-login-container {
    inset: calc(var(--spacing)*0);
    z-index: 20;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute
}

.claim-cta-login-button {
    border-radius: var(--radius-md);
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-white);
    --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));
    --tw-gradient-to: var(--button);
    padding-inline: calc(var(--spacing)*4);
    padding-block: calc(var(--spacing)*2);
    --tw-font-weight: 900;
    color: #0a0303;
    align-items: center;
    font-weight: 900;
    display: inline-flex
}

.claim-cta-login-logo {
    margin-left: calc(var(--spacing)*2);
    height: calc(var(--spacing)*5) !important;
    width: calc(var(--spacing)*5) !important
}

.claim-bonus-display-container {
    margin-inline: -3px;
    margin-bottom: calc(var(--spacing)*1.5);
    row-gap: calc(var(--spacing)*1.5);
    flex-wrap: wrap;
    display: flex
}

@media (width>=48rem) {
    .claim-bonus-display-container {
        margin-inline: calc(var(--spacing)*-1.5);
        margin-bottom: calc(var(--spacing)*3);
        row-gap: calc(var(--spacing)*3)
    }
}

.claim-monthly-bonus-outer-container {
    flex-direction: column;
    padding-inline: 3px;
    display: flex
}

@media (width>=48rem) {
    .claim-monthly-bonus-outer-container {
        height: 76px;
        padding-inline: calc(var(--spacing)*1.5)
    }
}

@media (width>=64rem) {
    .claim-monthly-bonus-outer-container {
        height: 102.5px
    }
}

.claim-monthly-bonus-container {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--background);
    background-color: var(--background-claim);
    padding-block: calc(var(--spacing)*2.5);
    border-radius: 10px;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    display: flex;
    overflow: hidden
}

.claim-monthly-bonus-wrapper {
    padding-inline: 10px
}

.claim-monthly-bonus-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 400;
    font-weight: 400
}

@media (width>=64rem) {
    .claim-monthly-bonus-title {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }
}

.claim-monthly-bonus-amount-container {
    align-items: center;
    display: flex
}

.claim-monthly-bonus-amount-wrapper {
    width: 60%;
    padding-inline: calc(var(--spacing)*1.5)
}

@media (width>=48rem) {
    .claim-monthly-bonus-amount-wrapper {
        padding-inline: calc(var(--spacing)*2.5)
    }
}

.claim-monthly-bonus-amount {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-white);
    --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));
    --tw-gradient-to: var(--button);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 900;
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 900
}

@media (width>=48rem) {
    .claim-monthly-bonus-amount {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }
}

@media (width>=64rem) {
    .claim-monthly-bonus-amount {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }
}

.claim-monthly-bonus-button-container {
    width: 40%;
    padding-inline: calc(var(--spacing)*1.5)
}

@media (width>=48rem) {
    .claim-monthly-bonus-button-container {
        padding-inline: calc(var(--spacing)*2.5)
    }
}

.claim-monthly-bonus-button-wrapper {
    text-align: right
}

.claim-monthly-bonus-button {
    width: 100%;
    max-width: calc(var(--spacing)*20);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--button);
    --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));
    --tw-gradient-to: var(--color-white);
    padding-inline: calc(var(--spacing)*1.5);
    padding-block: calc(var(--spacing)*1);
    text-align: center;
    font-family: var(--font-poppins);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: 900;
    color: #251c04;
    border-width: 0;
    font-weight: 900;
    display: inline-block
}

.claim-monthly-bonus-button:disabled {
    opacity: .4
}

@media (width>=48rem) {
    .claim-monthly-bonus-button {
        padding-inline: calc(var(--spacing)*2);
        padding-block: calc(var(--spacing)*2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
}

.claim-birthday-bonus-outer-container {
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding-inline: 3px;
    display: flex
}

@media (width>=48rem) {
    .claim-birthday-bonus-outer-container {
        height: 76px;
        padding-inline: calc(var(--spacing)*1.5)
    }
}

@media (width>=64rem) {
    .claim-birthday-bonus-outer-container {
        height: 102.5px
    }
}

.claim-birthday-bonus-container {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--background);
    background-color: var(--background-claim);
    padding-block: calc(var(--spacing)*2.5);
    border-radius: 10px;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    display: flex;
    overflow: hidden
}

.claim-birthday-bonus-title-container {
    margin-bottom: calc(var(--spacing)*1);
    padding-inline: calc(var(--spacing)*2.5)
}

.claim-birthday-bonus-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 400;
    font-weight: 400
}

@media (width>=64rem) {
    .claim-birthday-bonus-title {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }
}

.claim-birthday-bonus-amount-container {
    align-items: center;
    display: flex
}

.claim-birthday-bonus-amount-wrapper {
    width: 60%;
    padding-inline: calc(var(--spacing)*1.5)
}

@media (width>=48rem) {
    .claim-birthday-bonus-amount-wrapper {
        padding-inline: calc(var(--spacing)*2.5)
    }
}

.claim-birthday-bonus-amount {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-white);
    --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));
    --tw-gradient-to: var(--button);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 900;
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 900
}

@media (width>=48rem) {
    .claim-birthday-bonus-amount {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }
}

@media (width>=64rem) {
    .claim-birthday-bonus-amount {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }
}

.claim-birthday-bonus-button-container {
    width: 40%;
    padding-inline: calc(var(--spacing)*1.5)
}

@media (width>=48rem) {
    .claim-birthday-bonus-button-container {
        padding-inline: calc(var(--spacing)*2.5)
    }
}

.claim-birthday-bonus-button-wrapper {
    text-align: right
}

.claim-birthday-bonus-button {
    width: 100%;
    max-width: calc(var(--spacing)*20);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--button);
    --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));
    --tw-gradient-to: var(--color-white);
    padding-inline: calc(var(--spacing)*1.5);
    padding-block: calc(var(--spacing)*1);
    text-align: center;
    font-family: var(--font-poppins);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: 900;
    color: #251c04;
    border-width: 0;
    font-weight: 900;
    display: inline-block
}

.claim-birthday-bonus-button:disabled {
    opacity: .4
}

@media (width>=48rem) {
    .claim-birthday-bonus-button {
        padding-inline: calc(var(--spacing)*2);
        padding-block: calc(var(--spacing)*2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
}

.claim-tier-upgrade-outer-container {
    width: 100%
}

.claim-tier-upgrade-container {
    position: relative
}

.claim-tier-upgrade-image-container {
    border-bottom-right-radius: var(--radius-lg);
    width: 25%;
    position: absolute;
    bottom: 1px;
    right: 1px;
    overflow: hidden
}

.claim-tier-upgrade-image {
    max-height: calc(var(--spacing)*16);
    object-fit: contain;
    object-position: right bottom;
    width: 100%;
    display: inline-block
}

@media (width>=48rem) {
    .claim-tier-upgrade-image {
        max-height: none
    }
}

.claim-tier-section-container {
    border-radius: 10px;
    overflow: hidden
}

.claim-tier-section-wrapper {
    background-color: var(--background-claim);
    align-items: center;
    display: flex
}

@media (width>=48rem) {
    .claim-tier-section-wrapper {
        height: 74px
    }
}

@media (width>=64rem) {
    .claim-tier-section-wrapper {
        height: 102.5px
    }
}

.claim-tier-title-container {
    width: 33.3333%;
    padding: calc(var(--spacing)*2.5)
}

.claim-tier-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 400;
    font-weight: 400
}

@media (width>=64rem) {
    .claim-tier-title {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }
}

.claim-tier-description {
    margin-top: calc(var(--spacing)*1);
    --tw-font-weight: 400;
    color: color-mix(in oklab, var(--color-white)70%, transparent);
    font-size: 10px;
    font-weight: 400
}

.claim-tier-description-link {
    color: inherit;
    text-decoration-line: underline;
    display: inline-block
}

.claim-tier-amount-outer-container {
    width: 33.3333%;
    padding-block: calc(var(--spacing)*2.5)
}

.claim-tier-amount-container {
    justify-content: center;
    align-items: center;
    display: flex
}

.claim-tier-amount-wrapper {
    width: 100%;
    padding-inline: calc(var(--spacing)*2);
    text-align: center
}

.claim-tier-amount {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 900;
    color: var(--color-white);
    font-weight: 900
}

@media (width>=48rem) {
    .claim-tier-amount {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }
}

@media (width>=64rem) {
    .claim-tier-amount {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }
}

.claim-upgrade-gift-outer-container {
    margin-top: calc(var(--spacing)*1.5);
    width: 100%
}

@media (width>=48rem) {
    .claim-upgrade-gift-outer-container {
        margin-top: calc(var(--spacing)*3)
    }
}

.claim-upgrade-gift-container {
    position: relative
}

.claim-upgrade-gift-wrapper {
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--table-border);
    --tw-shadow: 0px 0px 20px var(--tw-shadow-color, var(--table-border));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: 10px;
    overflow: hidden
}

.claim-upgrade-gift-inner-wrapper {
    background-color: var(--background-claim);
    padding: calc(var(--spacing)*2.5);
    align-items: center;
    display: flex
}

@media (width>=48rem) {
    .claim-upgrade-gift-inner-wrapper {
        height: 74px
    }
}

@media (width>=64rem) {
    .claim-upgrade-gift-inner-wrapper {
        height: 102.5px
    }
}

.claim-upgrade-gift-image-outer-container {
    width: 20%;
    padding: calc(var(--spacing)*2.5)
}

.claim-upgrade-gift-image-container {
    text-align: center
}

.claim-upgrade-gift-image-wrapper {
    aspect-ratio: 1;
    border-radius: 3.40282e38px;
    overflow: hidden
}

@media (width>=48rem) {
    .claim-upgrade-gift-image-wrapper {
        max-height: 54px
    }
}

@media (width>=64rem) {
    .claim-upgrade-gift-image-wrapper {
        max-height: 82.5px
    }
}

.claim-upgrade-gift-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: inline-block
}

.claim-upgrade-gift-title-container {
    width: 60%;
    padding-block: calc(var(--spacing)*2.5)
}

.claim-upgrade-gift-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 400;
    font-weight: 400
}

@media (width>=64rem) {
    .claim-upgrade-gift-title {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }
}

.claim-upgrade-gift-product-name {
    margin-top: calc(var(--spacing)*1);
    color: var(--table-border);
    font-style: italic
}

.claim-upgrade-gift-button-container {
    width: 20%;
    padding-block: calc(var(--spacing)*2.5)
}

.claim-upgrade-gift-button-wrapper {
    text-align: right
}

.claim-upgrade-gift-button {
    width: 100%;
    max-width: calc(var(--spacing)*20);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--button);
    --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));
    --tw-gradient-to: var(--color-white);
    padding-inline: calc(var(--spacing)*1.5);
    padding-block: calc(var(--spacing)*1);
    text-align: center;
    font-family: var(--font-poppins);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: 900;
    color: #251c04;
    border-width: 0;
    font-weight: 900;
    display: inline-block
}

.claim-upgrade-gift-button:disabled {
    opacity: .4
}

@media (width>=48rem) {
    .claim-upgrade-gift-button {
        padding-inline: calc(var(--spacing)*2);
        padding-block: calc(var(--spacing)*2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
}

.rank-badge-outer-container {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--background-claim);
    background-color: var(--background-claim);
    padding-block: calc(var(--spacing)*2);
    overflow-x: auto
}

@media (width>=48rem) {
    .rank-badge-outer-container {
        padding-block: calc(var(--spacing)*4)
    }
}

@media (width>=64rem) {
    .rank-badge-outer-container {
        padding-inline: calc(var(--spacing)*4)
    }
}

.rank-badge-outer-container::-webkit-scrollbar {
    display: block
}

.rank-badge-outer-container::-webkit-scrollbar {
    height: calc(var(--spacing)*2)
}

.rank-badge-outer-container::-webkit-scrollbar-thumb {
    border-radius: 3.40282e38px
}

.rank-badge-outer-container::-webkit-scrollbar-thumb {
    background-color: var(--table-border)
}

.rank-badge-outer-container::-webkit-scrollbar-track {
    border-radius: 3.40282e38px
}

.rank-badge-outer-container::-webkit-scrollbar-track {
    background-color: color-mix(in oklab, var(--color-white)10%, transparent)
}

.rank-badge-container {
    width: max-content;
    display: flex
}

@media (width>=64rem) {
    .rank-badge-container {
        width: 100%
    }
}

.rank-badge-wrapper {
    width: calc(var(--spacing)*36);
    flex-direction: column;
    flex: 1;
    display: flex
}

@media (width>=64rem) {
    .rank-badge-wrapper {
        width: auto
    }
}

.rank-badge-progress-outer-container {
    margin-inline: calc(var(--spacing)*0);
    align-items: center;
    row-gap: calc(var(--spacing)*5);
    padding-block: calc(var(--spacing)*3);
    flex-direction: column;
    flex: 1;
    display: flex;
    position: relative
}

.rank-badge-progress-container {
    height: calc(var(--spacing)*1.5);
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x)var(--tw-translate-y);
    background-color: var(--circle);
    position: absolute;
    top: 66px
}

.rank-badge-progress-wrapper {
    top: calc(var(--spacing)*0);
    left: calc(var(--spacing)*0);
    background-color: var(--circle-active);
    border-top-right-radius: 3.40282e38px;
    border-bottom-right-radius: 3.40282e38px;
    height: 100%;
    position: absolute
}

.rank-badge-inner-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*3);
    flex: 1;
    transform: none !important
}

.rank-badge-image-outer-container {
    max-width: calc(var(--spacing)*14);
    margin-inline: auto
}

.rank-badge-image-pointer-container {
    text-align: center;
    opacity: 0
}

.rank-badge-image-pointer {
    margin-bottom: calc(var(--spacing)*1);
    color: var(--circle-active)
}

.rank-badge-image-wrapper {
    z-index: 10;
    aspect-ratio: 1;
    width: calc(var(--spacing)*14);
    background-color: var(--circle);
    padding: calc(var(--spacing)*1.5);
    border-radius: 3.40282e38px;
    position: relative
}

.rank-badge-image {
    aspect-ratio: 1;
    object-fit: contain;
    width: 100%;
    padding: calc(var(--spacing)*1.5);
    background-color: #070903;
    border-radius: 3.40282e38px
}

@media (width>=48rem) {
    .rank-badge-image {
        padding: calc(var(--spacing)*2)
    }
}

.rank-badge-title-container {
    margin-top: calc(var(--spacing)*2);
    text-align: center;
    color: #fff
}

.rank-badge-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 900;
    text-transform: uppercase;
    font-weight: 900
}

.rank-badge-total-deposit-container {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: 400;
    font-style: italic;
    font-weight: 400
}

.rank-badge-card-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*3);
    opacity: .4
}

.rank-badge-card-wrapper {
    max-width: calc(var(--spacing)*60);
    margin-inline: auto
}

.rank-badge-card {
    width: 100%;
    min-width: 96px;
    height: auto
}

.rank-table-section {
    padding-bottom: calc(var(--spacing)*6)
}

@media (width>=64rem) {
    .rank-table-section {
        padding-bottom: calc(var(--spacing)*10)
    }
}

.rank-table-outer-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*4);
    margin-inline: auto
}

@media (width>=40rem) {
    .rank-table-outer-container {
        max-width: 40rem
    }
}

@media (width>=48rem) {
    .rank-table-outer-container {
        max-width: 48rem
    }
}

@media (width>=64rem) {
    .rank-table-outer-container {
        max-width: 64rem
    }
}

@media (width>=80rem) {
    .rank-table-outer-container {
        max-width: 80rem
    }
}

@media (width>=96rem) {
    .rank-table-outer-container {
        max-width: 96rem
    }
}

@media (width>=64rem) {
    .rank-table-outer-container {
        max-width: var(--breakpoint-lg)
    }
}

.rank-table-container {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--table-border);
    background-color: var(--table-background);
    padding: calc(var(--spacing)*2);
    padding-inline: calc(var(--spacing)*2.5)
}

.rank-table-wrapper {
    overflow-x: auto
}

.rank-table {
    width: 100%;
    min-width: max-content;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height))
}

.rank-table-header {
    padding-inline: calc(var(--spacing)*1);
    padding-top: calc(var(--spacing)*2);
    text-align: center;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: 700;
    font-weight: 700;
    --tw-leading: var(--leading-tight) !important;
    line-height: var(--leading-tight) !important
}

.rank-table-header-title {
    color: var(--table-border)
}

.rank-table-cell {
    padding: calc(var(--spacing)*2);
    text-align: center;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height))
}

.rank-table-badge {
    height: auto;
    width: calc(var(--spacing)*10);
    display: inline-block
}

.rank-table-tier-upgrade-gift-image-container {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing)*3);
    display: flex
}

.rank-table-tier-upgrade-gift-image-wrapper {
    height: calc(var(--spacing)*10);
    width: calc(var(--spacing)*10);
    border-radius: 3.40282e38px;
    overflow: hidden
}

.rank-table-tier-upgrade-gift-image {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.rank-table-tier-upgrade-gift-name {
    width: calc(var(--spacing)*20);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height))
}

@media (width>=64rem) {
    .rank-table-tier-upgrade-gift-name {
        width: calc(var(--spacing)*28)
    }
}

.tnc-outer-container {
    padding-bottom: calc(var(--spacing)*6)
}

@media (width>=64rem) {
    .tnc-outer-container {
        padding-bottom: calc(var(--spacing)*10)
    }
}

.tnc-container {
    width: 100%;
    padding-inline: calc(var(--spacing)*4);
    margin-inline: auto
}

@media (width>=40rem) {
    .tnc-container {
        max-width: 40rem
    }
}

@media (width>=48rem) {
    .tnc-container {
        max-width: 48rem
    }
}

@media (width>=64rem) {
    .tnc-container {
        max-width: 64rem
    }
}

@media (width>=80rem) {
    .tnc-container {
        max-width: 80rem
    }
}

@media (width>=96rem) {
    .tnc-container {
        max-width: 96rem
    }
}

@media (width>=64rem) {
    .tnc-container {
        max-width: var(--breakpoint-lg)
    }
}

.tnc-title {
    margin-top: calc(var(--spacing)*4);
    margin-bottom: calc(var(--spacing)*2);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold)
}

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

.tnc-title-wrapper {
    color: var(--primary)
}

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

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

@media (width>=48rem) {
    .tnc-description {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@property --tw-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-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

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

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

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

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

</style> // This is just a sample script. Paste your real code (javascript or HTML) here.

if ('this_is'==/an_example/) {
    of_beautifier();
}

else {
    var a=b?(c%d): e[f];
}