@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

.night-glow-run-page * {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.night-glow-run-page button:focus-visible {
    outline: 2px solid #4a90e2 !important;
    outline: -webkit-focus-ring-color auto 5px !important;
}

.night-glow-run-page a {
    text-decoration: none;
}

.night-glow-run-page .frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 0px 20px 200px;
    position: relative;
    background-color: #252525;
}

@media (min-width: 769px) {
    .night-glow-run-page .frame {
        padding: 0px 100px 200px;
    }
}

.night-glow-run-page .frame .slide {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1.78; /* Calculated from 393px / 221.06px */
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
    margin-left: -20.00px;
    margin-right: -20.00px;
}

.night-glow-run-page .frame .div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px; /* Unified gap for all major sections */
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.night-glow-run-page .frame .div-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.night-glow-run-page .frame .div-3 {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.night-glow-run-page .frame .ai-disclaimer {
    font-size: 0.8em;
    color: #ccc; /* Light grey for subtlety */
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.night-glow-run-page .frame .night-glow-run {
    position: relative;
    flex: 1;
    margin-top: -1.00px;
    font-family: "SUIT", sans-serif;
    font-weight: 700;
    color: #e2e2e2;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
}

.night-glow-run-page .frame .text-wrapper {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "SUIT", sans-serif;
    font-weight: 700;
    color: #e2e2e2;
    font-size: 32px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
}

.night-glow-run-page .frame .img {
    position: relative;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 3.56;
    object-fit: cover;
}

.night-glow-run-page .frame .text-wrapper-2 {
    position: relative;
    align-self: stretch;
    font-family: "SUIT", sans-serif;
    font-weight: 700;
    color: #e2e2e2;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
}

.night-glow-run-page .frame .p {
    position: relative;
    align-self: stretch;
    font-family: "SUIT", sans-serif;
    font-weight: 400;
    color: #e2e2e2;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 20px;
}

.night-glow-run-page .frame .character-group {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove the gap between the text and the character container */
    width: 100%;
}

.night-glow-run-page .frame .div-4 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    align-self: stretch;
    width: 100%;
    margin-bottom: 121px;
}

.night-glow-run-page .frame .element {
    position: relative;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 11.03;
}

.night-glow-run-page .frame .frame-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.night-glow-run-page .frame .text-wrapper-3 {
    align-self: stretch;
    margin-top: -1.00px;
    font-family: "SUIT", sans-serif;
    font-weight: 700;
    color: #e2e2e2;
    font-size: 20px;
    line-height: normal;
    position: relative;
    letter-spacing: 0;
}

.night-glow-run-page .frame .element-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.31px;
    padding: 85.85px 36.61px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-radius: 315.62px;
    overflow: hidden;
    border: 0.95px solid;
    border-color: #f1f1f1;
    background-image: url(/assets/projects/night_glow_run/frame-9.png);
    background-size: cover;
    background-position: 50% 50%;
}

.night-glow-run-page .frame .element-2 {
    width: fit-content;
    opacity: 0.9;
    font-family: "SUIT", sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-size: 25.2px;
    text-align: center;
    line-height: 28.4px;
    position: relative;
    letter-spacing: 0;
}

.night-glow-run-page .frame .div-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.31px;
    padding: 85.85px 17.67px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-radius: 315.62px;
    overflow: hidden;
    border: 0.95px solid;
    border-color: #f1f1f1;
    background-image: url(/assets/projects/night_glow_run/frame-8.png);
    background-size: cover;
    background-position: 50% 50%;
}

.night-glow-run-page .frame .div-5 {
    width: fit-content;
    opacity: 0.9;
    font-family: "SUIT", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 25.2px;
    text-align: center;
    line-height: 28.4px;
    position: relative;
    letter-spacing: 0;
}

.night-glow-run-page .frame .span {
    font-weight: 500;
}

.night-glow-run-page .frame .text-wrapper-4 {
    font-family: "SUIT", sans-serif;
    font-weight: bold;
}

.night-glow-run-page .frame .div-wrapper-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.31px;
    padding: 85.85px 51.13px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-radius: 315.62px;
    overflow: hidden;
    border: 0.95px solid;
    border-color: #f1f1f1;
    background-image: url(/assets/projects/night_glow_run/frame-7.png);
    background-size: cover;
    background-position: 50% 50%;
}

.night-glow-run-page .frame .div-6 {
    width: fit-content;
    opacity: 0.9;
    font-family: "SUIT", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 25.2px;
    text-align: center;
    line-height: 28.4px;
    position: relative;
    letter-spacing: 0;
}

.night-glow-run-page .frame .text-wrapper-5 {
    font-family: "SUIT", sans-serif;
    font-weight: bold;
    color: #ffffff;
    font-size: 25.2px;
    letter-spacing: 0;
    line-height: 28.4px;
}

.night-glow-run-page .frame .text-wrapper-6 {
    font-family: "SUIT", sans-serif;
    font-weight: 500;
}

.night-glow-run-page .frame .div-7 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Changed to stretch to unify vertical height */
    gap: 14px;
    justify-content: center;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.night-glow-run-page .frame .div-8,
.night-glow-run-page .frame .div-9,
.night-glow-run-page .frame .div-10,
.night-glow-run-page .frame .div-11 {
    display: flex;
    flex-direction: column;
    width: calc(25% - 10.5px);
    align-items: flex-start;
    gap: 9.93px;
    padding: 25.37px 13.24px;
    position: relative;
}

.night-glow-run-page .frame .div-8 { background-color: #fb52d7; }
.night-glow-run-page .frame .div-9 { background-color: #b9ff61; }
.night-glow-run-page .frame .div-10 { background-color: #f5e549; }
.night-glow-run-page .frame .div-11 { background-color: #66ecea; }

.night-glow-run-page .frame .text-wrapper-7 {
    position: relative;
    align-self: stretch;
    margin-top: -0.37px;
    font-family: "SUIT", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 10.3px;
    letter-spacing: -0.10px;
    line-height: 14.4px;
}

.night-glow-run-page .frame .text-wrapper-8,
.night-glow-run-page .frame .text-wrapper-9 {
    align-self: stretch;
    font-family: "SUIT", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 12px;
    line-height: 14.0px;
    position: relative;
    letter-spacing: 0;
}

.night-glow-run-page .frame .frame-wrapper-2 {
    position: relative;
    align-self: stretch;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1.06;
    overflow-x: scroll;
}

.night-glow-run-page .frame .frame-wrapper-2::-webkit-scrollbar { width: 0; display: none; }

.night-glow-run-page .frame .frame-wrapper-3 {
    position: relative;
    top: calc(50.00% - 176px);
    width: 909px;
    height: 352px;
    display: flex;
    background-color: #2b2a3c;
    overflow-x: scroll;
}

.night-glow-run-page .frame .frame-wrapper-3::-webkit-scrollbar { width: 0; display: none; }

.night-glow-run-page .frame .div-12 {
    display: inline-flex;
    margin-top: 8.0px;
    width: 852.07px;
    height: 329.37px;
    margin-left: 28.4px;
    position: relative;
    align-items: flex-start;
}

.night-glow-run-page .frame .div-13 {
    width: 213.02px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    position: relative;
}

.night-glow-run-page .frame .img-2 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 176.57px;
}

.night-glow-run-page .frame .div-14,
.night-glow-run-page .frame .div-15,
.night-glow-run-page .frame .div-16 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8.05px;
    padding: 20.83px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.night-glow-run-page .frame .h {
    position: relative;
    align-self: stretch;
    margin-top: -0.47px;
    font-family: "SUIT", sans-serif;
    font-weight: 800;
    color: #ffffff;
    font-size: 18.9px;
    text-align: center;
    letter-spacing: -0.19px;
    line-height: 26.5px;
}

.night-glow-run-page .frame .h-2 {
    align-self: stretch;
    font-family: "SUIT", sans-serif;
    font-weight: 400;
    font-size: 11.4px;
    letter-spacing: -0.11px;
    line-height: 15.9px;
    position: relative;
    color: #ffffff;
    text-align: center;
}

.night-glow-run-page .frame .vector {
    position: relative;
    width: 161.53px;
    height: 1px;
}

.night-glow-run-page .frame .h-3,
.night-glow-run-page .frame .h-4 {
    width: fit-content;
    font-family: "SUIT", sans-serif;
    font-weight: 400;
    font-size: 7.6px;
    letter-spacing: -0.08px;
    line-height: 10.6px;
    position: relative;
    color: #ffffff;
    text-align: center;
}

.night-glow-run-page .frame .div-17 {
    align-items: center;
    justify-content: center;
    gap: 24px; /* Increased gap */
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 48px;
}

.night-glow-run-page .frame .div-18 {
    position: relative;
    align-self: stretch;
    font-family: "SUIT", sans-serif;
    font-weight: 400;
    color: #e2e2e2;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.night-glow-run-page .frame .spacer-bottom {
    margin-bottom: 30px; /* Increased margin */
}

.night-glow-run-page .frame .text-wrapper-10 {
    font-weight: 700;
}

.night-glow-run-page .frame .text-wrapper-11 {
    font-family: "SUIT", sans-serif;
}

.night-glow-run-page .frame .element-3 {
    position: relative;
    width: 283.44px;
    height: 246.17px;
    aspect-ratio: 1.15;
    object-fit: cover;
}

.night-glow-run-page .frame .text-wrapper-12 {
    font-family: "SUIT", sans-serif;
}

.night-glow-run-page .frame .group {
    position: relative;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 353 / 19.74;
}

.night-glow-run-page .frame .group-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 15px;
    position: relative;
    align-self: stretch;
    width: 100%;
    background-color: #ffffff;
    aspect-ratio: 1.32;
}

.night-glow-run-page .frame .giveaway-items-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.night-glow-run-page .frame .image-container-white {
    background-color: #ffffff;
    width: 100%;
    padding: 20px;
    border-radius: 0; /* Removed border-radius as requested */
    box-sizing: border-box;
}

.night-glow-run-page .frame .img-3 {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 1.35;
}

.night-glow-run-page .frame .slide-2 {
    position: relative;
    width: 100%;
    align-self: stretch;
    height: auto;
    aspect-ratio: 1.78;
}

.night-glow-run-page .frame .div-19,
.night-glow-run-page .frame .div-20,
.night-glow-run-page .frame .div-21 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    width: 100%;
}

.night-glow-run-page .frame .div-20 {
}

.night-glow-run-page .frame .slide-3,
.night-glow-run-page .frame .slide-7 {
    height: auto;
    position: relative;
    width: calc(50% - 7px);
    object-fit: cover;
}
.night-glow-run-page .frame .slide-3 { aspect-ratio: 0.85; }
.night-glow-run-page .frame .slide-7 { aspect-ratio: 1.88; }

.night-glow-run-page .frame .slide-4 {
    position: relative;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 3.18;
}

.night-glow-run-page .frame .left-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: calc(50% - 7px);
}

.night-glow-run-page .frame .slide-5 {
    height: auto;
    aspect-ratio: 1.04;
    position: relative;
    width: 100%;
    object-fit: cover;
}

.night-glow-run-page .frame .slide-6 {
    height: auto;
    aspect-ratio: 0.66;
    position: relative;
    width: calc(50% - 7px);
    object-fit: cover;
}

.night-glow-run-page .frame .slide-8 {
    height: auto;
    aspect-ratio: 1.78;
    position: relative;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .night-glow-run-page .frame .div-8,
    .night-glow-run-page .frame .div-9,
    .night-glow-run-page .frame .div-10,
    .night-glow-run-page .frame .div-11 {
        width: calc(50% - 7px);
    }
}

@media (min-width: 769px) {
    /* Disable scrolling on desktop */
    .night-glow-run-page .frame .frame-wrapper-2,
    .night-glow-run-page .frame .frame-wrapper-3 {
        overflow-x: hidden;
    }

    /* Allow height to be determined by content */
    .night-glow-run-page .frame .frame-wrapper-2 {
        aspect-ratio: auto;
    }

    /* Reset container to flow naturally and center content */
    .night-glow-run-page .frame .frame-wrapper-3 {
        position: static; /* Remove relative positioning to ignore 'top' */
        top: 0; /* Explicitly reset top */
        height: auto; /* Let content define the height */
        width: 100%; /* Take full width of parent */
        justify-content: center; /* Center the items inside */
        background-color: transparent;
    }

    /* Reset inner content block */
    .night-glow-run-page .frame .div-12 {
        margin-left: 0;
        width: fit-content;
    }

    /* Target section: arrange 3 containers in a row on desktop */
    .night-glow-run-page .frame .target-blocks-container { /* Corrected selector */
        display: flex; /* Apply flex to the new container */
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch; /* Ensure equal heights */
    }

    .night-glow-run-page .frame .element-wrapper,
    .night-glow-run-page .frame .div-wrapper,
    .night-glow-run-page .frame .div-wrapper-2 {
        width: calc(33.33% - 10px); /* Adjust width to fit 3 in a row with some gap */
    }
}