/* CODSHIPX_AI_R36_R40_REPLAY_FROM_SCRATCH */

html[data-cx-r40-replay="1"],
html[data-cx-r40-replay="1"] body{
    margin:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    background:#010201!important;
}

#cx-r40-root,
#cx-r40-root *{
    box-sizing:border-box;
}

#cx-r40-root{
    position:fixed;
    inset:0;
    z-index:2147483600;

    display:grid;
    place-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(179,255,43,.055),
            transparent 25%
        ),
        radial-gradient(
            ellipse at 50% 110%,
            rgba(89,243,132,.04),
            transparent 43%
        ),
        #010201;

    color:#fff;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

#cx-r40-root::before{
    content:"";

    position:absolute;
    left:50%;
    bottom:-72vw;

    width:125vw;
    height:125vw;

    transform:translateX(-50%);

    border:
        1px solid
        rgba(180,255,45,.07);

    border-radius:50%;

    pointer-events:none;
}

#cx-r40-root::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background-image:
        radial-gradient(
            circle,
            rgba(179,255,43,.12) 0 1px,
            transparent 1.5px
        );

    background-size:
        230px 190px;

    opacity:.09;
}


/* shell */

.cx-r40-shell{
    position:relative;
    z-index:2;

    width:min(
        940px,
        calc(100vw - 48px)
    );

    max-height:
        calc(100vh - 48px);

    display:flex;
    flex-direction:column;

    align-items:center;

    overflow:hidden;

    text-align:center;
}


/* brand */

.cx-r40-brand{
    position:relative;

    width:70px;
    height:70px;

    display:grid;
    place-items:center;

    margin-bottom:19px;

    border:
        1px solid
        rgba(180,255,45,.15);

    border-radius:22px;

    background:
        rgba(180,255,45,.035);

    box-shadow:
        0 0 46px
        rgba(180,255,45,.07);
}

.cx-r40-brand::before{
    content:"";

    position:absolute;

    inset:-13px;

    border:
        1px solid
        rgba(180,255,45,.07);

    border-radius:28px;
}

.cx-r40-brand img{
    width:45px;
    height:45px;

    display:block;

    border-radius:14px;

    object-fit:cover;
}


/* typography */

.cx-r40-kicker{
    margin:0 0 12px;

    color:
        rgba(180,255,45,.72);

    font-size:10px;
    font-weight:900;

    letter-spacing:.18em;

    text-transform:uppercase;
}

.cx-r40-title{
    max-width:900px;

    margin:0;

    color:#fff;

    font-size:
        clamp(
            44px,
            5.3vw,
            76px
        );

    line-height:.98;

    font-weight:950;

    letter-spacing:-.052em;

    text-wrap:balance;
}

.cx-r40-subtitle{
    max-width:760px;

    margin:
        15px auto
        0;

    color:
        rgba(255,255,255,.58);

    font-size:
        clamp(
            14px,
            1.2vw,
            17px
        );

    line-height:1.55;

    font-weight:570;

    text-wrap:balance;
}


/* progress section */

.cx-r40-progress{
    width:min(
        820px,
        100%
    );

    margin-top:30px;
}

.cx-r40-progress-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    margin-bottom:9px;
}

.cx-r40-progress-label{
    color:
        rgba(255,255,255,.45);

    font-size:10px;
    font-weight:850;

    letter-spacing:.09em;

    text-transform:uppercase;
}

.cx-r40-percent{
    color:#fff;

    font-variant-numeric:
        tabular-nums;

    font-size:14px;
    font-weight:900;
}

.cx-r40-track{
    position:relative;

    width:100%;
    height:6px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(255,255,255,.085);
}

.cx-r40-fill{
    position:absolute;
    inset:
        0 auto
        0 0;

    width:1%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #b9ff32 0%,
            #91fa32 46%,
            #59ef86 100%
        );

    box-shadow:
        0 0 18px
        rgba(172,255,48,.18);

    transition:
        width .23s linear;
}


/* process */

.cx-r40-processes{
    width:min(
        820px,
        100%
    );

    display:grid;

    gap:7px;

    margin-top:22px;

    text-align:left;
}

.cx-r40-process{
    position:relative;

    min-height:43px;

    display:grid;

    grid-template-columns:
        27px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:10px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255,255,255,.045);

    border-radius:12px;

    background:
        rgba(255,255,255,.014);

    color:
        rgba(255,255,255,.28);

    transition:
        border-color .25s ease,
        background .25s ease,
        color .25s ease,
        opacity .25s ease,
        transform .25s ease;

    opacity:.64;
}

.cx-r40-process-dot{
    width:16px;
    height:16px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:50%;

    color:#071005;

    background:
        rgba(255,255,255,.04);

    font-size:9px;
    font-weight:950;
}

.cx-r40-process-name{
    min-width:0;

    font-size:
        clamp(
            11px,
            1vw,
            13px
        );

    line-height:1.3;

    font-weight:680;
}

.cx-r40-process-state{
    color:
        rgba(255,255,255,.24);

    font-size:9px;
    font-weight:850;

    letter-spacing:.07em;

    text-transform:uppercase;
}


/* active */

.cx-r40-process[data-state="active"]{
    opacity:1;

    transform:
        translateX(4px);

    color:#fff;

    border-color:
        rgba(180,255,45,.18);

    background:
        rgba(180,255,45,.055);

    box-shadow:
        0 8px 30px
        rgba(138,220,31,.035);
}

.cx-r40-process[data-state="active"]
.cx-r40-process-dot{
    border-color:
        rgba(180,255,45,.44);

    background:
        linear-gradient(
            135deg,
            #b9ff32,
            #59ef86
        );

    box-shadow:
        0 0 0 5px
        rgba(180,255,45,.035),
        0 0 13px
        rgba(180,255,45,.13);
}

.cx-r40-process[data-state="active"]
.cx-r40-process-state{
    color:
        rgba(180,255,45,.82);
}


/* done */

.cx-r40-process[data-state="done"]{
    opacity:.89;

    color:
        rgba(255,255,255,.66);

    border-color:
        rgba(89,239,134,.07);

    background:
        rgba(89,239,134,.018);
}

.cx-r40-process[data-state="done"]
.cx-r40-process-dot{
    border-color:
        rgba(89,239,134,.23);

    background:
        linear-gradient(
            135deg,
            #b9ff32,
            #59ef86
        );

    color:#071005;
}

.cx-r40-process[data-state="done"]
.cx-r40-process-state{
    color:
        rgba(89,239,134,.55);
}


/* footer */

.cx-r40-note{
    margin-top:13px;

    color:
        rgba(255,255,255,.25);

    font-size:9.5px;

    letter-spacing:.02em;
}


/* success */

.cx-r40-success-mark{
    width:78px;
    height:78px;

    display:grid;
    place-items:center;

    margin-bottom:19px;

    border:
        1px solid
        rgba(180,255,45,.18);

    border-radius:50%;

    color:#fff;

    background:
        rgba(180,255,45,.04);

    box-shadow:
        0 0 44px
        rgba(180,255,45,.06);

    font-size:36px;
    font-weight:800;
}

.cx-r40-success-summary{
    width:min(
        820px,
        100%
    );

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:16px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(89,239,134,.075);

    border-radius:12px;

    background:
        rgba(89,239,134,.018);

    color:
        rgba(255,255,255,.60);

    font-size:11px;
    font-weight:700;
}

.cx-r40-success-summary strong{
    color:
        rgba(180,255,45,.88);

    font-size:11px;
}

.cx-r40-open{
    min-width:210px;
    min-height:49px;

    margin-top:20px;

    padding:
        0 26px;

    border:0;

    border-radius:13px;

    color:#071005;

    background:
        linear-gradient(
            135deg,
            #b9ff32,
            #59ef86
        );

    box-shadow:
        0 13px 32px
        rgba(145,245,50,.09);

    font:inherit;
    font-size:12px;
    font-weight:950;

    cursor:pointer;
}


/* mobile */

@media(max-width:720px){

    .cx-r40-shell{
        width:
            calc(100vw - 24px);

        max-height:
            calc(100vh - 24px);
    }

    .cx-r40-title{
        font-size:
            clamp(
                35px,
                11vw,
                50px
            );
    }

    .cx-r40-subtitle{
        font-size:12px;
    }

    .cx-r40-process{
        grid-template-columns:
            24px
            minmax(0,1fr);

        min-height:40px;
    }

    .cx-r40-process-state{
        display:none;
    }

    .cx-r40-brand{
        width:60px;
        height:60px;

        margin-bottom:15px;
    }

    .cx-r40-brand img{
        width:39px;
        height:39px;
    }
}