.download-page {
    --dl-bg: #070813;
    --dl-panel: rgba(17, 19, 32, 0.72);
    --dl-panel-strong: rgba(22, 24, 38, 0.9);
    --dl-line: rgba(255, 255, 255, 0.12);
    --dl-text: #f8fbff;
    --dl-muted: rgba(248, 251, 255, 0.68);
    --dl-soft: rgba(255, 255, 255, 0.055);
    --dl-accent: #ff1e55;
    --dl-accent-2: #2f72ff;
    --dl-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
    position: relative;
    isolation: isolate;
    width: min(calc(100% - 32px), 1370px);
    min-height: calc(100vh - 84px);
    margin: 0 auto;
    padding: 18px 0 24px;
    color: var(--dl-text);
}

.download-page::before {
    content: "";
    position: fixed;
    inset: 68px 0 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 22%, rgba(255, 30, 85, 0.24), transparent 24rem),
        radial-gradient(circle at 14% 12%, rgba(86, 54, 255, 0.14), transparent 24rem),
        linear-gradient(180deg, #090a18 0%, #070813 68%, #05060e 100%);
}

html[data-theme="light"] .download-page,
html[data-theme="light_japan"] .download-page {
    --dl-bg: #f7f3ec;
    --dl-panel: rgba(255, 255, 255, 0.78);
    --dl-panel-strong: rgba(255, 255, 255, 0.95);
    --dl-line: rgba(120, 32, 44, 0.16);
    --dl-text: #171814;
    --dl-muted: rgba(23, 24, 20, 0.68);
    --dl-soft: rgba(120, 32, 44, 0.065);
    --dl-accent: #c9182b;
    --dl-accent-2: #2f65c8;
    --dl-shadow: 0 16px 42px rgba(84, 47, 56, 0.11);
}

html[data-theme="light"] .download-page::before,
html[data-theme="light_japan"] .download-page::before {
    background:
        radial-gradient(circle at 82% 22%, rgba(201, 24, 43, 0.12), transparent 24rem),
        radial-gradient(circle at 10% 14%, rgba(184, 132, 36, 0.1), transparent 22rem),
        linear-gradient(180deg, #fbf8f1 0%, #f7f3ec 100%);
}

.download-page *,
.download-page *::before,
.download-page *::after {
    box-sizing: border-box;
}

.download-page h1,
.download-page h2,
.download-page h3,
.download-page p {
    margin: 0;
    color: inherit;
}

.download-hero {
    display: grid;
    grid-template-columns: minmax(410px, 0.78fr) minmax(560px, 1.22fr);
    gap: 28px;
    align-items: center;
    min-height: 360px;
}

.download-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--dl-accent) 46%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dl-accent) 11%, transparent);
    color: var(--dl-accent);
    font-size: 12px;
    font-weight: 950;
}

.download-hero h1 {
    max-width: 13ch;
    margin-top: 16px;
    color: var(--dl-text);
    font-size: clamp(46px, 5.4vw, 76px);
    line-height: 0.97;
    font-weight: 950;
    letter-spacing: 0;
}

.download-hero p {
    max-width: 56ch;
    margin-top: 16px;
    color: var(--dl-muted);
    font-size: 17px;
    line-height: 1.5;
}

.download-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.download-btn,
.download-trust {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.1;
    text-decoration: none !important;
}

.download-btn {
    padding: 0 22px;
    border: 1px solid transparent;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.download-btn:hover {
    transform: translateY(-2px);
}

.download-btn--primary {
    background: linear-gradient(135deg, var(--dl-accent), #ff416d);
    color: #ffffff !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--dl-accent) 28%, transparent);
}

.download-btn--secondary,
.download-trust {
    border: 1px solid var(--dl-line);
    background: rgba(255, 255, 255, 0.045);
    color: var(--dl-text);
}

html[data-theme="light"] .download-btn--secondary,
html[data-theme="light_japan"] .download-btn--secondary,
html[data-theme="light"] .download-trust,
html[data-theme="light_japan"] .download-trust {
    background: rgba(255, 255, 255, 0.74);
}

.download-btn small,
.download-trust small,
.download-trust b {
    display: block;
}

.download-btn small {
    opacity: 0.82;
    font-size: 12px;
}

.download-trust {
    min-width: 230px;
    justify-content: flex-start;
    padding: 0 18px;
}

.download-trust i {
    color: var(--dl-muted);
    font-size: 22px;
}

.download-trust b {
    color: var(--dl-text);
}

.download-trust small {
    margin-top: 3px;
    color: var(--dl-muted);
    font-size: 12px;
}

.download-visual {
    position: relative;
    min-height: 350px;
}

.download-visual::before {
    content: "";
    position: absolute;
    inset: 10% 3% 3%;
    background: radial-gradient(circle, rgba(255, 30, 85, 0.34), transparent 62%);
    filter: blur(36px);
}

.download-device {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #070813;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
}

.download-device img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-device--desktop {
    top: 8px;
    right: 52px;
    width: min(58vw, 600px);
    height: 285px;
    border-radius: 6px;
}

.download-device--desktop::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 8, 19, 0.82), rgba(7, 8, 19, 0.1) 62%, rgba(7, 8, 19, 0.26)),
        linear-gradient(180deg, rgba(7, 8, 19, 0.08), rgba(7, 8, 19, 0.62));
}

.download-device--desktop::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: -13px;
    height: 13px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #363944, #141620);
}

.download-device--phone {
    left: 6px;
    bottom: 36px;
    width: 122px;
    height: 205px;
    padding: 15px 10px;
    border: 5px solid #191b25;
    border-radius: 22px;
}

.download-device--phone::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 34px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    transform: translateX(-50%);
}

.download-device--phone img {
    height: 98px;
    border-radius: 10px;
}

.download-device--phone strong {
    display: block;
    margin-top: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
}

.download-device--laptop {
    right: 0;
    bottom: 22px;
    width: 260px;
    height: 140px;
    border-radius: 8px 8px 3px 3px;
}

.download-platforms,
.download-install,
.download-features {
    margin-top: 14px;
}

.download-platforms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.download-card,
.download-install,
.download-features article {
    border: 1px solid var(--dl-line);
    border-radius: 8px;
    background: var(--dl-panel);
    box-shadow: var(--dl-shadow);
    backdrop-filter: blur(16px);
}

.download-card {
    display: grid;
    gap: 12px;
    min-height: 170px;
    padding: 18px;
}

.download-card.is-current-device {
    border-color: color-mix(in srgb, var(--dl-accent) 64%, var(--dl-line));
}

.download-card__head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.download-card__head > i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--dl-accent) 13%, transparent);
    color: var(--dl-accent);
    font-size: 28px;
}

.download-card h2 {
    color: var(--dl-text);
    font-size: 25px;
    font-weight: 950;
}

.download-card span {
    color: var(--dl-muted);
    font-size: 13px;
}

.download-card .download-btn {
    width: 100%;
    min-height: 42px;
}

.download-rustore {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dl-accent-2);
    color: #ffffff;
    font-size: 11px;
    font-weight: 950;
}

.download-install {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 14px 18px;
}

.download-install article {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 56px;
}

.download-install article + article::before {
    content: "\f061";
    position: absolute;
    left: -22px;
    top: 50%;
    color: var(--dl-muted);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    transform: translateY(-50%);
}

.download-install i,
.download-features i {
    color: var(--dl-accent);
}

.download-install i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--dl-line);
    border-radius: 8px;
    background: var(--dl-soft);
    font-size: 18px;
}

.download-install strong,
.download-install span {
    display: block;
}

.download-install strong {
    color: var(--dl-text);
    font-size: 14px;
    font-weight: 950;
}

.download-install span {
    margin-top: 3px;
    color: var(--dl-muted);
    font-size: 12px;
}

.download-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.035));
}

.download-features article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 14px 18px;
    border-radius: 0;
    border-width: 0 1px 0 0;
    background: transparent;
    box-shadow: none;
}

.download-features article:last-child {
    border-right: 0;
}

.download-features strong,
.download-features span {
    display: block;
}

.download-features strong {
    color: var(--dl-text);
    font-size: 14px;
    font-weight: 950;
}

.download-features span {
    margin-top: 4px;
    color: var(--dl-muted);
    font-size: 12px;
    line-height: 1.25;
}

.download-features i {
    grid-row: span 2;
    font-size: 30px;
}

.download-features strong,
.download-features span {
    grid-column: 2;
}

@media (max-width: 1180px) {
    .download-page {
        min-height: auto;
    }

    .download-hero {
        grid-template-columns: 1fr;
    }

    .download-visual {
        min-height: 320px;
    }

    .download-platforms,
    .download-install,
    .download-features {
        grid-template-columns: 1fr;
    }

    .download-install article + article::before {
        display: none;
    }

    .download-features article {
        border-right: 0;
        border-bottom: 1px solid var(--dl-line);
    }

    .download-features article:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 700px) {
    .download-page {
        width: min(calc(100% - 20px), 1370px);
        padding-top: 14px;
    }

    .download-hero h1 {
        font-size: clamp(38px, 12vw, 52px);
    }

    .download-hero p {
        font-size: 15px;
    }

    .download-hero__actions,
    .download-btn,
    .download-trust {
        width: 100%;
    }

    .download-visual {
        min-height: 250px;
    }

    .download-device--desktop {
        right: 0;
        width: 88%;
        height: 170px;
    }

    .download-device--phone {
        width: 92px;
        height: 150px;
    }

    .download-device--laptop {
        width: 210px;
        height: 114px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .download-page *,
    .download-page *::before,
    .download-page *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

.download-page .download-hero {
    grid-template-columns: minmax(410px, 0.78fr) minmax(560px, 1.22fr) !important;
    min-height: 360px !important;
}

.download-page .download-hero h1 {
    font-size: clamp(46px, 5.4vw, 76px) !important;
}

.download-page .download-hero p {
    font-size: 17px !important;
}

@media (max-width: 1180px) {
    .download-page .download-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
}

@media (max-width: 700px) {
    .download-page .download-hero h1 {
        font-size: clamp(38px, 12vw, 52px) !important;
    }

    .download-page .download-hero p {
        font-size: 15px !important;
    }
}