/*          登入遮罩           */
#login-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    pointer-events: none;
}




#star-container {
    top: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    width: 100%;
    border-radius: 0 0 15px 15px;
    background-image: url('../img/pro/navbar/tileable_starfield_fixed.svg'), radial-gradient( ellipse at 0% 94%, rgba(234, 174, 104, 1) 5%, rgba(119, 131, 184, 1) 25%, rgba(60, 97, 199, 1) 45%, rgba(27, 35, 196, 1) 64%, rgba(79, 155, 179, 1) 100% );
    background-repeat: repeat;
    background-size: 904px 742px, cover;
    background-blend-mode: normal;
    animation: star-bg-fill linear both;
    animation-timeline: scroll();
    animation-range: 0vh 10vh;
    z-index: 1002;
    opacity: 0;
}

.star-gradient-overlay2 {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../img/pro/navbar/tileable_starfield_fixed.svg');
    background-repeat: repeat;
    background-size: 904px 742px, cover;
    background-blend-mode: normal;
    z-index: 1003;
}

.star-gradient-overlay2 {
    transition: color 0.3s ease;
}

    .star-gradient-overlay2.scrolled {
        color: white; /* 捲動後變白 */
    }

.star-gradient-overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1001;
    opacity: 0;
    animation: star-bg-fill2 linear both;
    animation-timeline: scroll();
    animation-range: 0vh 10vh;
}



@keyframes star-bg-fill {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.7;
    }
}

@keyframes star-bg-fill2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* 主體內容 */
/*main {
    padding: 2rem;
    line-height: 1.8;
}*/









.tailored-theme-toggle input[type="checkbox"]:checked ~ .tailored-theme-toggle-sun {
    opacity: 1;
}

.tailored-theme-toggle input[type="checkbox"]:checked ~ .tailored-theme-toggle-moon {
    opacity: 0;
}

.tailored-theme-toggle {
    display: inline-block;
}

    .tailored-theme-toggle input[type="checkbox"] {
        display: none;
    }

    .tailored-theme-toggle label {
        position: relative;
        width: 36px;
        height: 36px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .tailored-theme-toggle .icon {
        position: absolute;
        font-size: 20px;
        transition: opacity 0.3s ease;
        color: currentColor;
    }


.tailored-theme-toggle-sun {
    opacity: 0;
}

.tailored-theme-toggle-moon {
    opacity: 1;
}
















ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-columns {
    display: block;
}

.nav-item {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding: 1rem 0;
    position: relative;
    transition: margin 0.3s ease;
}

.nav-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0;
}

.sub {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(20px);
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
    padding-left: 1.5rem;
    list-style: none;
}

.nav-item.active .sub {
    max-height: 300px;
    opacity: 1;
    transform: translateX(0);
}

.sub li {
    margin: 0.3rem 0;
}

.sub a {
    color: white;
    text-decoration: none;
}

    .sub a:hover {
        text-decoration: underline;
    }

@media (min-width: 768px) {
    .nav-columns {
        display: flex;
        gap: 2rem;
        padding: 2rem 3rem;
    }

    .nav-item {
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.25);
        padding-right: 2rem;
    }

        .nav-item:last-child {
            border-right: none;
        }

    .nav-btn {
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: .15em;
        font-size: 1.3rem;
        transition: transform .3s;
        text-align: center;
        width: auto;
        padding: 0;
    }

        .nav-btn:hover {
            transform: translateY(-6px);
        }


    .sub {
        position: absolute;
        top: 0;
        left: calc(100% + 2.5rem);
        max-height: none;
        display: flex;
        flex-direction: row;
        gap: 1.2rem;
        padding-left: 0;
        overflow: visible;
    }

        .sub a {
            writing-mode: horizontal-tb;
            font-size: 1rem;
            letter-spacing: .05em;
            transition: transform .3s;
        }

            .sub a:hover {
                transform: translateY(-4px);
            }
}



/* 滑動顯示 */
.tailored-reveal-section {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    .tailored-reveal-section.visible {
        opacity: 1;
        transform: translateY(0);
    }





.tailored-light-switch {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 6px; /* 這裡改成小圓角 */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    font-size: 0.9em;
    font-weight: 700;
    border: 2px solid rgb(126, 126, 126);
    box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s;
}

    .tailored-light-switch input {
        display: none;
    }

    .tailored-light-switch svg {
        width: 50%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .tailored-light-switch svg path {
            fill: rgb(37, 37, 37);
        }

    .tailored-light-switch:has(input:checked) {
        background-color: rgb(34, 197, 94);
        color: white;
        border: 2px solid white;
        box-shadow: 0px 0px 1px rgb(34, 197, 94) inset, 0px 0px 2px rgb(34, 197, 94) inset, 0px 0px 10px rgb(34, 197, 94) inset, 0px 0px 40px rgb(34, 197, 94), 0px 0px 100px rgb(34, 197, 94), 0px 0px 5px rgb(34, 197, 94);
    }

        .tailored-light-switch:has(input:checked) svg path {
            fill: white;
        }

        .tailored-light-switch:has(input:checked) svg {
            filter: drop-shadow(0px 0px 3px rgb(34, 197, 94));
        }








.tailored-hamburger-button {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 50px;
    cursor: pointer;
}

    .tailored-hamburger-button input {
        display: none;
    }

    .tailored-hamburger-button div {
        width: 70px;
        height: 10px;
        background-color: darkgray;
        border-radius: 3px;
        position: absolute;
        transition: 0.4s;
    }

.tailored-hamburger-line1 {
    top: 0;
}

.tailored-hamburger-line2 {
    top: calc(40%);
}

.tailored-hamburger-line3 {
    top: calc(80%);
}

.tailored-hamburger-button:hover div {
    width: 54.2857143%;
}

.tailored-hamburger-button:hover .tailored-hamburger-line1 {
    transform: translate(31.5px, 12px) rotate(35deg);
    border-radius: 7px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.tailored-hamburger-button:hover .tailored-hamburger-line3 {
    transform: translate(31.5px, -12px) rotate(-35deg);
    border-radius: 7px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.tailored-hamburger-button:has(input:checked):hover .tailored-hamburger-line1 {
    transform: translate(0, 12px) rotate(-35deg);
    border-radius: 7px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.tailored-hamburger-button:has(input:checked):hover .tailored-hamburger-line3 {
    transform: translate(0, -12px) rotate(35deg);
    border-radius: 7px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.tailored-hamburger-button:has(input:checked):hover .tailored-hamburger-line2 {
    margin-left: 32px;
}


















.user-menu-dropbtn {
}

.user-menu-dropup {
    position: relative;
    display: inline-block;
}

.user-menu-dropup-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 60px;
    right: 0px;
    min-width: 330px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}



    .user-menu-dropup-content.show {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.3s ease, visibility 0s;
    }

    .user-menu-dropup-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .user-menu-dropup-content a:hover {
            background-color: #ddd;
        }

/*.user-menu-dropup:hover .user-menu-dropup-content {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s 0s;
}*/

.user-menu-dropup:hover .user-menu-dropbtn {
}

/* 小螢幕下改為全螢幕（模仿 Bootstrap modal-fullscreen-sm-down） */
@media (max-width: 768px) {
    .user-menu-dropup-content {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 100vw;
        height: 100vh;
        border-radius: 0 !important;
        overflow-y: auto;
        z-index: 1055; /* 比 modal backdrop 高一點 */
    }

        /* 可加上關閉按鈕樣式 */
        .user-menu-dropup-content .close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 1.5rem;
            color: #000;
            background: transparent;
            border: none;
        }
}















.hot-stamping-card {
    width: 80%;
    height: 80%;
    background: #243137;
    position: relative;
    display: grid;
    place-content: center;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.hot-stamping-card-border {
    position: absolute;
    inset: 0px;
    border: 2px solid #bd9f67;
    opacity: 0;
    transform: rotate(10deg);
    transition: all 0.5s ease-in-out;
}

.hot-stamping-card-bottom-text {
    position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translateX(-50%);
    font-size: 6px;
    text-transform: uppercase;
    padding: 0px 5px 0px 8px;
    color: #bd9f67;
    background: #243137;
    opacity: 0;
    letter-spacing: 7px;
    transition: all 0.5s ease-in-out;
}

.hot-stamping-card-content {
    transition: all 0.5s ease-in-out;
}

    .hot-stamping-card-content .hot-stamping-card-logo-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-top: 30px;
        color: #bd9f67;
        padding-left: 8px;
        font-size: 11px;
        opacity: 0;
        letter-spacing: none;
        transition: all 0.5s ease-in-out 0.5s;
    }

.hot-stamping-card:hover {
    border-radius: 0;
    transform: scale(1.1);
}

    .hot-stamping-card:hover .hot-stamping-card-border {
        inset: 15px;
        opacity: 1;
        transform: rotate(0);
    }

    .hot-stamping-card:hover .hot-stamping-card-bottom-text {
        letter-spacing: 3px;
        opacity: 1;
        transform: translateX(-50%);
    }

    .hot-stamping-card:hover .hot-stamping-card-content .hot-stamping-card-logo-text {
        opacity: 1;
        letter-spacing: 9.5px;
    }












.loader-animation {
    --ANIMATION-DELAY-MULTIPLIER: 70ms;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .loader-animation span {
        padding: 0;
        margin: 0;
        letter-spacing: -5rem;
        animation-delay: 0s;
        transform: translateY(4rem);
        animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    }

    .loader-animation .l {
        animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 0);
    }

    .loader-animation .o {
        animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 1);
    }

    .loader-animation .a {
        animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 2);
    }

    .loader-animation .d {
        animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 3);
    }

    .loader-animation .ispan {
        animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 4);
    }

    .loader-animation .n {
        animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 5);
    }

    .loader-animation .g {
        animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 6);
    }

    .loader-animation .letter {
        width: fit-content;
        height: 3rem;
    }

    .loader-animation .i {
        margin-inline: 5px;
    }

@keyframes hideAndSeek {
    0% {
        transform: translateY(4rem);
    }

    100% {
        transform: translateY(0rem);
    }
}

















/*             cat loader             */
.cat-loader {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-wrapper {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cat-container {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cat-body {
    width: 80px;
}

.cat-tail {
    position: absolute;
    width: 17px;
    top: 70%;
    animation: cat-tail 0.5s ease-in infinite alternate-reverse;
    transform-origin: top;
}

@keyframes cat-tail {
    0% {
        transform: rotateZ(60deg);
    }

    50% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-20deg);
    }
}

.wall {
    width: 300px;
}

.cat-text {
    display: flex;
    flex-direction: column;
    width: 50px;
    position: absolute;
    margin: 0px 0px 100px 120px;
}

.zzz {
    color: black;
    font-weight: 700;
    font-size: 15px;
    animation: zzz 2s linear infinite;
}

.bigzzz {
    color: black;
    font-weight: 700;
    font-size: 25px;
    margin-left: 10px;
    animation: zzz 2.3s linear infinite;
}

@keyframes zzz {
    0% {
        color: transparent;
    }

    50% {
        color: black;
    }

    100% {
        color: transparent;
    }
}









/*           上拉div                */
.pull-up-div {
    transition: transform 0.3s ease; /* 添加平滑過渡效果 */
}

    .pull-up-div:hover {
        transform: translateY(-10px); /* 上拉 10px */
    }

















/*                          旋轉邊框                       */
.rotate-border-card {
    overflow: visible;
    width: 190px;
    height: 254px;
}

.rotate-border-card-content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 300ms;
    box-shadow: 0px 0px 10px 1px #000000ee;
    border-radius: 5px;
}



.rotate-border-card-back {
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: #151515;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 5px;
    overflow: hidden;
}

    .rotate-border-card-back::before {
        position: absolute;
        content: ' ';
        display: block;
        width: 160px;
        height: 160%;
        background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
        animation: _rotation 5000ms infinite linear;
    }

.rotate-border-card-back-content {
    position: absolute;
    width: 98%;
    height: 98%;
    background-color: #151515;
    border-radius: 5px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

@keyframes _rotation {
    0% {
        transform: rotateZ(0deg);
    }

    0% {
        transform: rotateZ(360deg);
    }
}
















.wh-number-24 {
    --wh-number: 24;
}

.dinosaur-loader {
    --zoom: 0.3;
    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    --wh: calc(var(--wh-number) * 1px);
    --wh-n: calc(var(--wh-number) * -1px);
    width: calc(var(--wh-number) * var(--wh));
    height: calc(var(--wh-number) * var(--wh));
    --color: #fff;
    --blur: 0;
    filter: drop-shadow(var(--wh-n) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh-n) var(--blur) var(--color)) drop-shadow(var(--wh) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh) var(--blur) var(--color));
    image-rendering: pixelated;
    zoom: var(--zoom);
    animation: mover 0.3s linear infinite;

    .dinosaur-loader-pixel{
    width: var(--wh);
    height: var(--wh);
    box-shadow: var(--shadow);
    }

}

@keyframes mover {
    0%, 100% {
        --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px #535353, 336px 0px #535353, 360px 0px #535353, 384px 0px #535353, 408px 0px #535353, 432px 0px #535353, 456px 0px #535353, 480px 0px #535353, 504px 0px #535353, 528px 0px #535353, 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px #535353, 312px 24px #535353, 336px 24px #535353, 360px 24px #535353, 384px 24px #535353, 408px 24px #535353, 432px 24px #535353, 456px 24px #535353, 480px 24px #535353, 504px 24px #535353, 528px 24px #535353, 552px 24px #535353, 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px #535353, 312px 48px #535353, 336px 48px transparent, 360px 48px transparent, 384px 48px #535353, 408px 48px #535353, 432px 48px #535353, 456px 48px #535353, 480px 48px #535353, 504px 48px #535353, 528px 48px #535353, 552px 48px #535353, 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px #535353, 312px 72px #535353, 336px 72px transparent, 360px 72px transparent, 384px 72px #535353, 408px 72px #535353, 432px 72px #535353, 456px 72px #535353, 480px 72px #535353, 504px 72px #535353, 528px 72px #535353, 552px 72px #535353, 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px #535353, 312px 96px #535353, 336px 96px #535353, 360px 96px #535353, 384px 96px #535353, 408px 96px #535353, 432px 96px #535353, 456px 96px #535353, 480px 96px #535353, 504px 96px #535353, 528px 96px #535353, 552px 96px #535353, 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px #535353, 312px 120px #535353, 336px 120px #535353, 360px 120px #535353, 384px 120px #535353, 408px 120px #535353, 432px 120px #535353, 456px 120px #535353, 480px 120px #535353, 504px 120px #535353, 528px 120px #535353, 552px 120px #535353, 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px #535353, 312px 144px #535353, 336px 144px #535353, 360px 144px #535353, 384px 144px #535353, 408px 144px #535353, 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px #535353, 312px 168px #535353, 336px 168px #535353, 360px 168px #535353, 384px 168px #535353, 408px 168px #535353, 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px #535353, 312px 192px #535353, 336px 192px #535353, 360px 192px #535353, 384px 192px #535353, 408px 192px #535353, 432px 192px #535353, 456px 192px #535353, 480px 192px #535353, 504px 192px #535353, 528px 192px transparent, 552px 192px transparent, 0px 216px #535353, 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px #535353, 264px 216px #535353, 288px 216px #535353, 312px 216px #535353, 336px 216px #535353, 360px 216px #535353, 384px 216px #535353, 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px #535353, 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px #535353, 216px 240px #535353, 240px 240px #535353, 264px 240px #535353, 288px 240px #535353, 312px 240px #535353, 336px 240px #535353, 360px 240px #535353, 384px 240px #535353, 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px #535353, 24px 264px #535353, 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px #535353, 192px 264px #535353, 216px 264px #535353, 240px 264px #535353, 264px 264px #535353, 288px 264px #535353, 312px 264px #535353, 336px 264px #535353, 360px 264px #535353, 384px 264px #535353, 408px 264px #535353, 432px 264px #535353, 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px #535353, 24px 288px #535353, 48px 288px #535353, 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px #535353, 168px 288px #535353, 192px 288px #535353, 216px 288px #535353, 240px 288px #535353, 264px 288px #535353, 288px 288px #535353, 312px 288px #535353, 336px 288px #535353, 360px 288px #535353, 384px 288px #535353, 408px 288px transparent, 432px 288px #535353, 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px #535353, 24px 312px #535353, 48px 312px #535353, 72px 312px #535353, 96px 312px #535353, 120px 312px #535353, 144px 312px #535353, 168px 312px #535353, 192px 312px #535353, 216px 312px #535353, 240px 312px #535353, 264px 312px #535353, 288px 312px #535353, 312px 312px #535353, 336px 312px #535353, 360px 312px #535353, 384px 312px #535353, 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px #535353, 24px 336px #535353, 48px 336px #535353, 72px 336px #535353, 96px 336px #535353, 120px 336px #535353, 144px 336px #535353, 168px 336px #535353, 192px 336px #535353, 216px 336px #535353, 240px 336px #535353, 264px 336px #535353, 288px 336px #535353, 312px 336px #535353, 336px 336px #535353, 360px 336px #535353, 384px 336px #535353, 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px #535353, 48px 360px #535353, 72px 360px #535353, 96px 360px #535353, 120px 360px #535353, 144px 360px #535353, 168px 360px #535353, 192px 360px #535353, 216px 360px #535353, 240px 360px #535353, 264px 360px #535353, 288px 360px #535353, 312px 360px #535353, 336px 360px #535353, 360px 360px #535353, 384px 360px #535353, 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px #535353, 72px 384px #535353, 96px 384px #535353, 120px 384px #535353, 144px 384px #535353, 168px 384px #535353, 192px 384px #535353, 216px 384px #535353, 240px 384px #535353, 264px 384px #535353, 288px 384px #535353, 312px 384px #535353, 336px 384px #535353, 360px 384px #535353, 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px #535353, 96px 408px #535353, 120px 408px #535353, 144px 408px #535353, 168px 408px #535353, 192px 408px #535353, 216px 408px #535353, 240px 408px #535353, 264px 408px #535353, 288px 408px #535353, 312px 408px #535353, 336px 408px #535353, 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px #535353, 120px 432px #535353, 144px 432px #535353, 168px 432px #535353, 192px 432px #535353, 216px 432px #535353, 240px 432px #535353, 264px 432px #535353, 288px 432px #535353, 312px 432px #535353, 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px #535353, 144px 456px #535353, 168px 456px #535353, 192px 456px #535353, 216px 456px #535353, 240px 456px #535353, 264px 456px #535353, 288px 456px #535353, 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px #535353, 168px 480px #535353, 192px 480px #535353, 216px 480px transparent, 240px 480px transparent, 264px 480px #535353, 288px 480px #535353, 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px #535353, 168px 504px #535353, 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px #535353, 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px #535353, 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px #535353, 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px #535353, 168px 552px #535353, 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px #535353, 312px 552px #535353, 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
    }

    33% {
        --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px #535353, 336px 0px #535353, 360px 0px #535353, 384px 0px #535353, 408px 0px #535353, 432px 0px #535353, 456px 0px #535353, 480px 0px #535353, 504px 0px #535353, 528px 0px #535353, 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px #535353, 312px 24px #535353, 336px 24px #535353, 360px 24px #535353, 384px 24px #535353, 408px 24px #535353, 432px 24px #535353, 456px 24px #535353, 480px 24px #535353, 504px 24px #535353, 528px 24px #535353, 552px 24px #535353, 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px #535353, 312px 48px #535353, 336px 48px transparent, 360px 48px transparent, 384px 48px #535353, 408px 48px #535353, 432px 48px #535353, 456px 48px #535353, 480px 48px #535353, 504px 48px #535353, 528px 48px #535353, 552px 48px #535353, 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px #535353, 312px 72px #535353, 336px 72px transparent, 360px 72px transparent, 384px 72px #535353, 408px 72px #535353, 432px 72px #535353, 456px 72px #535353, 480px 72px #535353, 504px 72px #535353, 528px 72px #535353, 552px 72px #535353, 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px #535353, 312px 96px #535353, 336px 96px #535353, 360px 96px #535353, 384px 96px #535353, 408px 96px #535353, 432px 96px #535353, 456px 96px #535353, 480px 96px #535353, 504px 96px #535353, 528px 96px #535353, 552px 96px #535353, 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px #535353, 312px 120px #535353, 336px 120px #535353, 360px 120px #535353, 384px 120px #535353, 408px 120px #535353, 432px 120px #535353, 456px 120px #535353, 480px 120px #535353, 504px 120px #535353, 528px 120px #535353, 552px 120px #535353, 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px #535353, 312px 144px #535353, 336px 144px #535353, 360px 144px #535353, 384px 144px #535353, 408px 144px #535353, 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px #535353, 312px 168px #535353, 336px 168px #535353, 360px 168px #535353, 384px 168px #535353, 408px 168px #535353, 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px #535353, 312px 192px #535353, 336px 192px #535353, 360px 192px #535353, 384px 192px #535353, 408px 192px #535353, 432px 192px #535353, 456px 192px #535353, 480px 192px #535353, 504px 192px #535353, 528px 192px transparent, 552px 192px transparent, 0px 216px #535353, 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px #535353, 264px 216px #535353, 288px 216px #535353, 312px 216px #535353, 336px 216px #535353, 360px 216px #535353, 384px 216px #535353, 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px #535353, 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px #535353, 216px 240px #535353, 240px 240px #535353, 264px 240px #535353, 288px 240px #535353, 312px 240px #535353, 336px 240px #535353, 360px 240px #535353, 384px 240px #535353, 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px #535353, 24px 264px #535353, 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px #535353, 192px 264px #535353, 216px 264px #535353, 240px 264px #535353, 264px 264px #535353, 288px 264px #535353, 312px 264px #535353, 336px 264px #535353, 360px 264px #535353, 384px 264px #535353, 408px 264px #535353, 432px 264px #535353, 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px #535353, 24px 288px #535353, 48px 288px #535353, 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px #535353, 168px 288px #535353, 192px 288px #535353, 216px 288px #535353, 240px 288px #535353, 264px 288px #535353, 288px 288px #535353, 312px 288px #535353, 336px 288px #535353, 360px 288px #535353, 384px 288px #535353, 408px 288px transparent, 432px 288px #535353, 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px #535353, 24px 312px #535353, 48px 312px #535353, 72px 312px #535353, 96px 312px #535353, 120px 312px #535353, 144px 312px #535353, 168px 312px #535353, 192px 312px #535353, 216px 312px #535353, 240px 312px #535353, 264px 312px #535353, 288px 312px #535353, 312px 312px #535353, 336px 312px #535353, 360px 312px #535353, 384px 312px #535353, 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px #535353, 24px 336px #535353, 48px 336px #535353, 72px 336px #535353, 96px 336px #535353, 120px 336px #535353, 144px 336px #535353, 168px 336px #535353, 192px 336px #535353, 216px 336px #535353, 240px 336px #535353, 264px 336px #535353, 288px 336px #535353, 312px 336px #535353, 336px 336px #535353, 360px 336px #535353, 384px 336px #535353, 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px #535353, 48px 360px #535353, 72px 360px #535353, 96px 360px #535353, 120px 360px #535353, 144px 360px #535353, 168px 360px #535353, 192px 360px #535353, 216px 360px #535353, 240px 360px #535353, 264px 360px #535353, 288px 360px #535353, 312px 360px #535353, 336px 360px #535353, 360px 360px #535353, 384px 360px #535353, 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px #535353, 72px 384px #535353, 96px 384px #535353, 120px 384px #535353, 144px 384px #535353, 168px 384px #535353, 192px 384px #535353, 216px 384px #535353, 240px 384px #535353, 264px 384px #535353, 288px 384px #535353, 312px 384px #535353, 336px 384px #535353, 360px 384px #535353, 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px #535353, 96px 408px #535353, 120px 408px #535353, 144px 408px #535353, 168px 408px #535353, 192px 408px #535353, 216px 408px #535353, 240px 408px #535353, 264px 408px #535353, 288px 408px #535353, 312px 408px #535353, 336px 408px #535353, 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px #535353, 120px 432px #535353, 144px 432px #535353, 168px 432px #535353, 192px 432px #535353, 216px 432px #535353, 240px 432px #535353, 264px 432px #535353, 288px 432px #535353, 312px 432px #535353, 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px #535353, 144px 456px #535353, 168px 456px #535353, 192px 456px #535353, 216px 456px #535353, 240px 456px #535353, 264px 456px #535353, 288px 456px #535353, 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px #535353, 168px 480px #535353, 192px 480px #535353, 216px 480px transparent, 240px 480px transparent, 264px 480px #535353, 288px 480px #535353, 312px 480px #535353, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px #535353, 168px 504px #535353, 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px transparent, 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px #535353, 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px transparent, 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px #535353, 168px 552px #535353, 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px transparent, 312px 552px transparent, 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
    }

    66% {
        --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px #535353, 336px 0px #535353, 360px 0px #535353, 384px 0px #535353, 408px 0px #535353, 432px 0px #535353, 456px 0px #535353, 480px 0px #535353, 504px 0px #535353, 528px 0px #535353, 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px #535353, 312px 24px #535353, 336px 24px #535353, 360px 24px #535353, 384px 24px #535353, 408px 24px #535353, 432px 24px #535353, 456px 24px #535353, 480px 24px #535353, 504px 24px #535353, 528px 24px #535353, 552px 24px #535353, 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px #535353, 312px 48px #535353, 336px 48px transparent, 360px 48px transparent, 384px 48px #535353, 408px 48px #535353, 432px 48px #535353, 456px 48px #535353, 480px 48px #535353, 504px 48px #535353, 528px 48px #535353, 552px 48px #535353, 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px #535353, 312px 72px #535353, 336px 72px transparent, 360px 72px transparent, 384px 72px #535353, 408px 72px #535353, 432px 72px #535353, 456px 72px #535353, 480px 72px #535353, 504px 72px #535353, 528px 72px #535353, 552px 72px #535353, 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px #535353, 312px 96px #535353, 336px 96px #535353, 360px 96px #535353, 384px 96px #535353, 408px 96px #535353, 432px 96px #535353, 456px 96px #535353, 480px 96px #535353, 504px 96px #535353, 528px 96px #535353, 552px 96px #535353, 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px #535353, 312px 120px #535353, 336px 120px #535353, 360px 120px #535353, 384px 120px #535353, 408px 120px #535353, 432px 120px #535353, 456px 120px #535353, 480px 120px #535353, 504px 120px #535353, 528px 120px #535353, 552px 120px #535353, 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px #535353, 312px 144px #535353, 336px 144px #535353, 360px 144px #535353, 384px 144px #535353, 408px 144px #535353, 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px #535353, 312px 168px #535353, 336px 168px #535353, 360px 168px #535353, 384px 168px #535353, 408px 168px #535353, 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px #535353, 312px 192px #535353, 336px 192px #535353, 360px 192px #535353, 384px 192px #535353, 408px 192px #535353, 432px 192px #535353, 456px 192px #535353, 480px 192px #535353, 504px 192px #535353, 528px 192px transparent, 552px 192px transparent, 0px 216px #535353, 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px #535353, 264px 216px #535353, 288px 216px #535353, 312px 216px #535353, 336px 216px #535353, 360px 216px #535353, 384px 216px #535353, 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px #535353, 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px #535353, 216px 240px #535353, 240px 240px #535353, 264px 240px #535353, 288px 240px #535353, 312px 240px #535353, 336px 240px #535353, 360px 240px #535353, 384px 240px #535353, 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px #535353, 24px 264px #535353, 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px #535353, 192px 264px #535353, 216px 264px #535353, 240px 264px #535353, 264px 264px #535353, 288px 264px #535353, 312px 264px #535353, 336px 264px #535353, 360px 264px #535353, 384px 264px #535353, 408px 264px #535353, 432px 264px #535353, 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px #535353, 24px 288px #535353, 48px 288px #535353, 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px #535353, 168px 288px #535353, 192px 288px #535353, 216px 288px #535353, 240px 288px #535353, 264px 288px #535353, 288px 288px #535353, 312px 288px #535353, 336px 288px #535353, 360px 288px #535353, 384px 288px #535353, 408px 288px transparent, 432px 288px #535353, 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px #535353, 24px 312px #535353, 48px 312px #535353, 72px 312px #535353, 96px 312px #535353, 120px 312px #535353, 144px 312px #535353, 168px 312px #535353, 192px 312px #535353, 216px 312px #535353, 240px 312px #535353, 264px 312px #535353, 288px 312px #535353, 312px 312px #535353, 336px 312px #535353, 360px 312px #535353, 384px 312px #535353, 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px #535353, 24px 336px #535353, 48px 336px #535353, 72px 336px #535353, 96px 336px #535353, 120px 336px #535353, 144px 336px #535353, 168px 336px #535353, 192px 336px #535353, 216px 336px #535353, 240px 336px #535353, 264px 336px #535353, 288px 336px #535353, 312px 336px #535353, 336px 336px #535353, 360px 336px #535353, 384px 336px #535353, 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px #535353, 48px 360px #535353, 72px 360px #535353, 96px 360px #535353, 120px 360px #535353, 144px 360px #535353, 168px 360px #535353, 192px 360px #535353, 216px 360px #535353, 240px 360px #535353, 264px 360px #535353, 288px 360px #535353, 312px 360px #535353, 336px 360px #535353, 360px 360px #535353, 384px 360px #535353, 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px #535353, 72px 384px #535353, 96px 384px #535353, 120px 384px #535353, 144px 384px #535353, 168px 384px #535353, 192px 384px #535353, 216px 384px #535353, 240px 384px #535353, 264px 384px #535353, 288px 384px #535353, 312px 384px #535353, 336px 384px #535353, 360px 384px #535353, 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px #535353, 96px 408px #535353, 120px 408px #535353, 144px 408px #535353, 168px 408px #535353, 192px 408px #535353, 216px 408px #535353, 240px 408px #535353, 264px 408px #535353, 288px 408px #535353, 312px 408px #535353, 336px 408px #535353, 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px #535353, 120px 432px #535353, 144px 432px #535353, 168px 432px #535353, 192px 432px #535353, 216px 432px #535353, 240px 432px #535353, 264px 432px #535353, 288px 432px #535353, 312px 432px #535353, 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px #535353, 144px 456px #535353, 168px 456px #535353, 192px 456px #535353, 216px 456px #535353, 240px 456px #535353, 264px 456px #535353, 288px 456px #535353, 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px #535353, 168px 480px #535353, 192px 480px #535353, 216px 480px transparent, 240px 480px transparent, 264px 480px #535353, 288px 480px #535353, 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px transparent, 168px 504px #535353, 192px 504px #535353, 216px 504px #535353, 240px 504px transparent, 264px 504px transparent, 288px 504px #535353, 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px transparent, 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px #535353, 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px transparent, 168px 552px transparent, 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px #535353, 312px 552px #535353, 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
    }
}


























/* 背景容器 */
.dashboard-wrapper {
    width: 100%;
    background-size: cover; /* 完全覆蓋容器 */
    background-position: center; /* 置中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
    /* 背景圖片 */
    .dashboard-wrapper .dashboard-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0; /* 放在最底層 */
    }






/* 主容器：降低白度，增加通透感 */
.frosted-glassd-dashboard {
    height: 100%;
    padding: 2rem;
    /* 改用更低透明度的白色，並混入一點點背景的深藍感(視情況調整) */
    background-color: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px); /* 稍微增加模糊度增加質感 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 20px;
}

.frosted-glassd-card-group {
    display: flex;
    gap: 1.5rem; /* 增加間距讓畫面不擁擠 */
    margin-bottom: 1.5rem;
}

/* 卡片：強化邊框質感，降低背景亮度 */
.frosted-glassd-card {
    flex: 1 1 calc(50% - 0.75rem);
    background-color: rgba(255, 255, 255, 0.08); /* 稍微比底層亮一點點就好 */
    border: 1px solid rgba(255, 255, 255, 0.15); /* 邊框調淡，不要太白 */
    border-radius: 15px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

    .frosted-glassd-card p {
        font-size: 1.2rem;
        font-weight: bold;
        letter-spacing: 0.5px; /* 增加一點字距更有商務感 */
    }

/* 按鈕：增加對比度，讓它看起來像個可點擊的元件 */
.frosted-glassd-link-watch {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .frosted-glassd-link-watch:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px); /* 增加動態回饋 */
    }

.frosted-glassd-list {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

    .frosted-glassd-list li {
        /* 分隔線改用更淡的顏色 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        font-weight: 500;
        padding-bottom: 0.1rem;
        padding-top: 0.1rem;
    }

        .frosted-glassd-list li .frosted-glassd-list-link {
            display: block;
            padding: 0.5rem 1rem;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.8); /* 預設文字稍微帶點透明 */
            transition: 0.3s ease;
            border-radius: 8px;
        }

            /* Hover 效果：點亮感 */
            .frosted-glassd-list li .frosted-glassd-list-link:hover {
                background-color: rgba(255, 255, 255, 0.15);
                color: #fff; /* Hover 時才全白 */
                transform: translateX(8px);
            }









/* ===== 毛玻璃卡片 ===== */
.glass {
    padding: 24px;
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.08) );
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    /* Hover 效果 */
    .glass:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 14px 45px rgba(0, 0, 0, 0.35);
    }

    .glass h2 {
        margin-top: 0;
        font-weight: 600;
    }

    .glass p {
        opacity: 0.9;
        line-height: 1.6;
    }

    .glass button {
        margin-top: 16px;
        padding: 10px 20px;
        border-radius: 999px;
        border: none;
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        cursor: pointer;
        transition: background 0.3s ease;
    }

        .glass button:hover {
            background: rgba(255, 255, 255, 0.4);
        }
















#cropImgPreview {
    width: 100%;
    height: 200px;
    margin: auto;
    overflow: hidden;
}

#sureCut {
    margin-top: 10px;
    padding: 6px 12px;
    font-size: 16px;
}

.crop-image-result {
    display: none;
    margin-top: 20px;
}

    .crop-image-result img {
        max-width: 100%;
        height: auto;
        display: block;
        margin-top: 10px;
    }




#LoadingWrapper {
  position: fixed;
  inset: 0;
  z-index: 1050; /* 比 modal-backdrop 高 */
  display: flex;
  align-items: center;
  justify-content: center;
}

    #LoadingWrapper > .modal-backdrop {
        z-index: 0;
    }

.Loading1Wrapper {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.25ch;
  color: white;
}

.Loading1WrapperText {
  position: relative;
  z-index: 1;
}

.Loading1WrapperInvertbox {
  position: absolute;
  height: 100%;
  aspect-ratio: 1 / 1;
  left: 0;
  top: 0;
  border-radius: 20%;
  background-color: white;
  mix-blend-mode: difference;
  z-index: 2;
  animation: Loading1WrapperMove 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes Loading1WrapperMove {
  50% {
    left: calc(100% - 3rem);
  }
}



.bottomBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1); /* 半透明白色 */
    backdrop-filter: blur(10px); /* 毛玻璃模糊 */
    -webkit-backdrop-filter: blur(10px); /* Safari 支援 */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 可選邊框增加質感 */
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: 10; /* 底部 box */
}

    .bottomBox.show {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }


.small-grid-container {
    width: 100%;
    height: 100%;
    --color: #E1E1E1;
    background-color: #F3F3F3;
    background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent), linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
    background-size: 55px 55px;
}












.animated-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* ⭐ 水平置中 */
    gap: 4px;
    padding: 16px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 16px;
    background-color: inherit;
    font-weight: 600;
    color: #f0c674;
    box-shadow: 0 0 0 2px #f0c674;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100%;
    height: 100%;
    border-radius: 0; /* 如果你要整條 */
}


    .animated-button svg {
        position: absolute;
        width: 24px;
        fill: #f0c674;
        z-index: 9;
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button .arr-1 {
        right: 44%;
    }

    .animated-button .arr-2 {
        left: -25%;
    }

    .animated-button .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        background-color: #f0c674;
        border-radius: 50%;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button .text {
        position: relative;
        z-index: 1;
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button:hover {
        box-shadow: 0 0 0 12px transparent;
        color: white;
        border-radius: 12px;
    }

        .animated-button:hover .arr-1 {
            right: -25%;
        }

        .animated-button:hover .arr-2 {
            left: 44%;
        }

        .animated-button:hover .text {
            transform: translateX(12px);
        }

        .animated-button:hover svg {
            fill: white;
        }

    .animated-button:active {
        scale: 0.95;
        box-shadow: 0 0 0 4px #f0c674;
    }

    .animated-button:hover .circle {
        width: 200vmax;
        height: 200vmax;
        opacity: 1;
    }






.float-color-card {
    border-radius: 20px;
    position: relative;
    padding: 1.8rem;
    border: 2px solid #c3c6ce;
    transition: 0.5s ease-out;
    overflow: visible;
}

.float-color-card-button {
    transform: translate(-50%, 125%);
    width: 60%;
    border-radius: 1rem;
    border: none;
    color: #fff;
    font-size: 1rem;
    padding: .5rem 1rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;
    transition: 0.3s ease-out;
}


/*Hover*/
.float-color-card:hover {
    border-color: #f0c674 !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1);
}

    .float-color-card:hover .card-button {
        transform: translate(-50%, 50%);
        opacity: 1;
    }














.modal-lightyellow {
    background: linear-gradient(180deg, #f0c674 0%, #FFF 30.21%);
    box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    color: black;
}



.aurora-wrapper {
    position: relative;
    width: 100%;
    min-height: calc(100vh);
    overflow: hidden;
}


.dark-t-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: radial-gradient( ellipse at 20% 30%, rgba(138, 43, 226, 0.8) 0%, rgba(138, 43, 226, 0) 60% ), radial-gradient( ellipse at 80% 50%, rgba(0, 191, 255, 0.7) 0%, rgba(0, 191, 255, 0) 70% ), radial-gradient( ellipse at 50% 80%, rgba(50, 205, 50, 0.6) 0%, rgba(50, 205, 50, 0) 65% ), linear-gradient(135deg, #000000 0%, #0a0520 100%);
    background-blend-mode: overlay, screen, hard-light;
    overflow: hidden;
    animation: aurora-drift 25s infinite alternate ease-in-out;
}

    .dark-t-container::before {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 40px ), repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 60px );
        animation: grid-shift 20s linear infinite;
    }

    .dark-t-container::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: radial-gradient( circle at center, transparent 70%, rgba(10, 5, 32, 0.9) 100% );
        animation: aurora-pulse 8s infinite alternate;
    }

@keyframes aurora-drift {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
        filter: hue-rotate(0deg) brightness(1);
    }

    50% {
        background-position: -10% -5%, 5% 10%, 0% 15%;
        filter: hue-rotate(30deg) brightness(1.2);
    }

    100% {
        background-position: 5% 10%, -10% -5%, 15% 0%;
        filter: hue-rotate(60deg) brightness(1);
    }
}

@keyframes grid-shift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes aurora-pulse {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}





















.deep-warm-gray-container {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.deep-warm-gray-container ::selection {
    background-color: gray;
}

.deep-warm-gray-container > .form {
    width: 400px;
    height: 400px;
    background-image: linear-gradient(to bottom, #424242, #212121);
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 0.5rem;
}

    .deep-warm-gray-container > .form .title {
        color: wheat;
        margin: 3rem 0;
        font-size: 2rem;
    }

    .deep-warm-gray-container > .form .input {
        margin: 0.5rem 0;
        padding: 1rem 0.5rem;
        width: 20rem;
        background-color: inherit;
        color: wheat;
        border: none;
        outline: none;
        border-bottom: 1px solid wheat;
        transition: all 400ms;
    }

        .deep-warm-gray-container > .form .input:hover {
            background-color: #424242;
            border: none;
            border-radius: 0.5rem;
        }

    .deep-warm-gray-container > .form .btn {
        height: 3rem;
        width: 20rem;
        margin-top: 3rem;
        background-color: wheat;
        border-radius: 0.5rem;
        border: none;
        font-size: 1.2rem;
        transition: all 400ms;
        cursor: pointer;
        box-shadow: 0 0 10px antiquewhite, 0 0 10px antiquewhite;
    }

        .deep-warm-gray-container > .form .btn:hover {
            background-color: antiquewhite;
            box-shadow: none;
        }













/* 隱藏預設的 Radio 樣式，使用卡片作為觸發器 */
.address-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #f1f3f5;
    border-radius: 12px;
}

    /* 調整文字陰影與質感 */
    .address-card .info .fw-bold {
        color: #333;
    }

    .address-card:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }



/* 選取狀態的樣式控制 */
.address-item .check-icon {
    display: none; /* 預設隱藏打勾圖示 */
    color: #0d6efd;
}

.address-item input:checked + .address-card {
    border-color: #0d6efd;
    background-color: #f0f7ff;
}

    .address-item input:checked + .address-card .check-icon {
        display: block; /* 選中時顯示打勾圖示 */
        color: #dee2e6 !important;
    }













/* 隱藏預設的 Radio 樣式，使用卡片作為觸發器 */
.address-card-lightyellow {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #f1f3f5;
    border-radius: 12px;
}
    /* 調整文字陰影與質感 */
    .address-card-lightyellow .info .fw-bold {
        color: #333;
    }

    .address-card-lightyellow:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

/* 選取狀態的樣式控制 */
.address-item-lightyellow .check-icon {
    display: none; /* 預設隱藏打勾圖示 */
}

.address-item-lightyellow input:checked + .address-card-lightyellow {
    border-color: rgb(232, 186, 96);
    background-color: rgb(255, 247, 229);
}

    .address-item-lightyellow input:checked + .address-card-lightyellow .check-icon {
        display: block; /* 選中時顯示打勾圖示 */
        color: rgb(232, 186, 96) !important;
    }