:root {
    --page-bg-top: #a50900;
    --page-bg-mid: #7e0600;
    --page-bg-bottom: #4e0200;
    --card-glow: rgba(255, 214, 139, 0.45);
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 50% 60%, rgba(255, 238, 169, 0.38) 0, rgba(255, 238, 169, 0) 20%),
        linear-gradient(180deg, var(--page-bg-top) 0%, var(--page-bg-mid) 58%, var(--page-bg-bottom) 100%);
    color: #fff8d2;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Serif SC", sans-serif;
}

#md-app {
    min-height: 100vh;
}

.landing-page {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 7.5rem;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 0.44rem 0.72rem;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(84, 0, 0, 0) 0%, rgba(84, 0, 0, 0.12) 48%, rgba(63, 0, 0, 0.92) 100%),
        url("../img/bg.png") top center / 100% auto no-repeat,
        linear-gradient(180deg, #9d0900 0%, #7f0500 55%, #530100 100%);
}

.landing-page::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3rem;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 220, 147, 0.22) 0, rgba(255, 220, 147, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(53, 0, 0, 0.38) 100%);
    pointer-events: none;
}

.hero-spacer {
    height: 8.95rem;
}

.download-sections {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.download-group+.download-group {
    margin-top: 0.34rem;
}

.section-title {
    display: block;
    width: 6.82rem;
    margin: 0 auto 0.18rem;
}

.download-button {
    display: block;
    width: 5.28rem;
    margin: 0 auto 0.28rem;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.download-button img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0.08rem 0.22rem var(--card-glow));
}

.download-button:active {
    transform: scale(0.985);
}

.download-button.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

@media (min-width: 751px) {
    html {
        font-size: 60px !important;
        height: 100%;
        overflow: hidden;
    }

    body {
        height: 100%;
        overflow: hidden;
    }

    #md-app {
        height: 100vh;
        overflow: hidden;
    }

    .landing-page {
        width: 100%;
        max-width: 450px;
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        background:
            linear-gradient(180deg, rgba(84, 0, 0, 0) 0%, rgba(84, 0, 0, 0.12) 48%, rgba(63, 0, 0, 0.92) 100%),
            url("../img/bg.png") top center / auto 100% no-repeat,
            linear-gradient(180deg, #9d0900 0%, #7f0500 55%, #530100 100%);
        box-shadow: 0 0.12rem 0.48rem rgba(0, 0, 0, 0.26);
    }

    .hero-spacer {
        height: calc(100vh - 7rem);
        min-height: 4.2rem;
        max-height: 8.95rem;
    }
}