/* 自动跟随设备/浏览器浅色主题，无需 JavaScript 或手动配置。 */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg: #f5f8fc;
        --bg-deep: #edf3f9;
        --surface: rgba(255, 255, 255, 0.78);
        --surface-strong: rgba(255, 255, 255, 0.94);
        --surface-soft: rgba(15, 42, 68, 0.04);
        --line: rgba(35, 104, 148, 0.14);
        --line-strong: rgba(35, 104, 148, 0.27);
        --text: #0d2033;
        --text-soft: #3c5268;
        --muted: #6d8297;
        --primary: #0788bf;
        --primary-strong: #006fa5;
        --secondary: #5c69dc;
        --cyan: #0b998c;
        --warning: #b66f00;
        --danger: #c64058;
        --shadow: 0 28px 76px rgba(37, 78, 108, 0.14);
    }

    body {
        background:
            radial-gradient(circle at 12% -8%, rgba(39, 158, 220, 0.16), transparent 31rem),
            radial-gradient(circle at 88% 5%, rgba(92, 105, 220, 0.14), transparent 34rem),
            radial-gradient(circle at 52% 64%, rgba(11, 153, 140, 0.07), transparent 30rem),
            linear-gradient(180deg, #fbfdff 0%, var(--bg) 48%, var(--bg-deep) 100%);
    }

    body::before {
        opacity: 0.55;
        background-image:
            linear-gradient(rgba(20, 95, 138, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(20, 95, 138, 0.035) 1px, transparent 1px);
    }

    body::after {
        opacity: 0.035;
        mix-blend-mode: multiply;
    }

    ::selection {
        color: #ffffff;
        background: var(--primary);
    }

    .ambient-one {
        border-color: rgba(7, 136, 191, 0.1);
        box-shadow: 0 0 130px 30px rgba(7, 136, 191, 0.08);
    }

    .ambient-two {
        border-color: rgba(92, 105, 220, 0.1);
        box-shadow: 0 0 160px 40px rgba(92, 105, 220, 0.07);
    }

    .site-header.is-scrolled,
    .site-header.is-menu-open {
        border-color: rgba(35, 104, 148, 0.12);
        background: rgba(249, 252, 255, 0.82);
        box-shadow: 0 12px 42px rgba(37, 78, 108, 0.09);
    }

    .brand-logo {
        border-color: rgba(24, 76, 111, 0.14);
        box-shadow:
            0 10px 28px rgba(34, 76, 106, 0.16),
            0 0 0 5px rgba(7, 136, 191, 0.045);
    }

    .nav-link:hover,
    .nav-link:focus-visible {
        background: rgba(7, 136, 191, 0.075);
    }

    .mobile-menu-button {
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 8px 24px rgba(37, 78, 108, 0.08);
    }

    .btn-primary {
        color: #ffffff;
        background: linear-gradient(135deg, #0788bf 0%, #2e9ed2 42%, #6571e3 100%);
        box-shadow:
            0 18px 42px rgba(7, 136, 191, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.32);
    }

    .btn-primary:hover {
        box-shadow:
            0 22px 52px rgba(7, 136, 191, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .btn-secondary {
        border-color: var(--line);
        color: var(--text);
        background: rgba(255, 255, 255, 0.76);
        box-shadow:
            0 10px 28px rgba(37, 78, 108, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .btn-secondary:hover {
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.96);
    }

    .hero::after {
        background: linear-gradient(90deg, transparent, rgba(7, 136, 191, 0.2), transparent);
    }

    .eyebrow {
        color: #075f8c;
        background: rgba(255, 255, 255, 0.72);
        box-shadow:
            0 10px 30px rgba(37, 78, 108, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .hero-title-soft {
        color: #122c43;
    }

    .gradient-text {
        background-image: linear-gradient(110deg, #056c9e 5%, #0c8fc5 40%, #5866d8 76%, #0b998c 108%);
    }

    .hero-orbit {
        border-color: rgba(7, 136, 191, 0.12);
        box-shadow:
            inset 0 0 70px rgba(7, 136, 191, 0.045),
            0 0 70px rgba(7, 136, 191, 0.045);
    }

    .hero-glow {
        background: radial-gradient(circle, rgba(7, 136, 191, 0.2), rgba(92, 105, 220, 0.07) 55%, transparent 72%);
    }

    .logo-stage {
        border-color: rgba(24, 76, 111, 0.16);
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 252, 0.78)),
            rgba(255, 255, 255, 0.78);
        box-shadow:
            0 38px 90px rgba(34, 76, 106, 0.2),
            0 0 80px rgba(7, 136, 191, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .logo-stage::before {
        background: linear-gradient(135deg, rgba(7, 136, 191, 0.35), transparent 32%, transparent 68%, rgba(92, 105, 220, 0.28));
    }

    .logo-stage img {
        box-shadow: inset 0 0 0 1px rgba(24, 76, 111, 0.09);
    }

    .stage-chip,
    .stage-player {
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 22px 58px rgba(37, 78, 108, 0.16);
    }

    .mini-progress {
        background: rgba(24, 76, 111, 0.1);
    }

    .feature-card,
    .loop-step,
    .platform-main,
    .platform-card {
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 252, 0.78)),
            rgba(255, 255, 255, 0.82);
        box-shadow:
            0 18px 54px rgba(37, 78, 108, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .feature-card:hover {
        box-shadow:
            0 28px 70px rgba(37, 78, 108, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
    }

    .feature-number {
        color: rgba(13, 32, 51, 0.11);
    }

    .feature-icon,
    .platform-icon {
        border-color: rgba(7, 136, 191, 0.18);
        background: rgba(7, 136, 191, 0.075);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .tag {
        border-color: rgba(24, 76, 111, 0.1);
        background: rgba(255, 255, 255, 0.68);
    }

    .loop-section {
        background:
            radial-gradient(circle at 10% 30%, rgba(7, 136, 191, 0.07), transparent 28rem),
            radial-gradient(circle at 88% 72%, rgba(92, 105, 220, 0.065), transparent 30rem);
    }

    .loop-intro-card {
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0 16px 44px rgba(37, 78, 108, 0.07);
    }

    .loop-track::before {
        background: linear-gradient(var(--primary), rgba(92, 105, 220, 0.42), rgba(11, 153, 140, 0.16));
    }

    .product-showcase {
        background:
            radial-gradient(circle at 12% 8%, rgba(7, 136, 191, 0.1), transparent 27rem),
            radial-gradient(circle at 95% 92%, rgba(92, 105, 220, 0.09), transparent 29rem),
            rgba(255, 255, 255, 0.72);
    }

    .product-showcase::before {
        background: linear-gradient(115deg, rgba(255, 255, 255, 0.7), transparent 35%, transparent 70%, rgba(255, 255, 255, 0.28));
    }

    .player-preview {
        --text: #10253a;
        --text-soft: #405a70;
        --muted: #6c8093;
        --primary: #1678b5;
        --secondary: #5867ce;
        --cyan: #087d72;
        color: var(--text);
        border-color: rgba(32, 98, 147, 0.16);
        background:
            radial-gradient(circle at 92% 4%, rgba(88, 103, 206, 0.11), transparent 20rem),
            radial-gradient(circle at 8% 96%, rgba(8, 125, 114, 0.08), transparent 19rem),
            linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(232, 241, 249, 0.96));
        box-shadow:
            0 30px 66px rgba(35, 73, 103, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
    }

    .player-preview .preview-back,
    .player-preview .preview-more,
    .player-preview .accent-switch,
    .player-preview .player-button,
    .player-preview .player-action {
        border-color: rgba(32, 98, 147, 0.13);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .player-preview .preview-cover {
        border-color: rgba(32, 98, 147, 0.14);
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0 22px 48px rgba(35, 73, 103, 0.18);
    }

    .player-preview .lyric-line {
        color: #708599;
    }

    .player-preview .player-progress-bar {
        background: rgba(32, 98, 147, 0.12);
    }

    .player-preview .player-progress-bar span::after {
        border-color: #ffffff;
        box-shadow: 0 4px 14px rgba(35, 73, 103, 0.2);
    }

    .mini-program-code {
        border-color: rgba(24, 76, 111, 0.13);
        background:
            radial-gradient(circle at 30% 20%, rgba(7, 136, 191, 0.11), transparent 48%),
            rgba(255, 255, 255, 0.68);
        box-shadow:
            0 16px 42px rgba(37, 78, 108, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .mini-program-code-label {
        border-color: rgba(32, 98, 147, 0.13);
        color: #405a70;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 8px 22px rgba(35, 73, 103, 0.1);
    }

    .platform-main::after {
        background: rgba(11, 153, 140, 0.075);
    }

    .platform-badge {
        border-color: rgba(11, 153, 140, 0.18);
        background: rgba(11, 153, 140, 0.07);
    }

    .download-button {
        border-color: rgba(var(--download-rgb), 0.24);
        background:
            linear-gradient(135deg, rgba(var(--download-rgb), 0.11), rgba(var(--download-rgb), 0.03) 58%, transparent 100%),
            rgba(255, 255, 255, 0.88);
        box-shadow:
            0 16px 34px rgba(37, 78, 108, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .download-button:hover {
        border-color: rgba(var(--download-rgb), 0.43);
        box-shadow:
            0 22px 46px rgba(var(--download-rgb), 0.11),
            0 18px 40px rgba(37, 78, 108, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .download-button::before {
        background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.72) 46%, transparent 72%);
    }

    .download-button-icon {
        border-color: rgba(var(--download-rgb), 0.22);
        background: rgba(var(--download-rgb), 0.09);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .download-button-copy small {
        color: #60758a;
    }

    .download-button-arrow {
        border-color: rgba(var(--download-rgb), 0.18);
        background: rgba(var(--download-rgb), 0.065);
    }

    .cta-panel {
        --text: #10253a;
        --text-soft: #405a70;
        --muted: #6c8093;
        color: var(--text);
        border-color: rgba(32, 98, 147, 0.17);
        background:
            radial-gradient(circle at 0 0, rgba(22, 120, 181, 0.12), transparent 26rem),
            radial-gradient(circle at 100% 100%, rgba(88, 103, 206, 0.11), transparent 27rem),
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(234, 242, 249, 0.94));
        box-shadow:
            0 28px 70px rgba(35, 73, 103, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
    }

    .cta-panel .btn-secondary {
        border-color: rgba(32, 98, 147, 0.16);
        color: var(--text);
        background: rgba(255, 255, 255, 0.78);
        box-shadow:
            0 10px 28px rgba(35, 73, 103, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .cta-panel .btn-secondary:hover {
        border-color: rgba(32, 98, 147, 0.28);
        background: rgba(255, 255, 255, 0.98);
    }

    .site-footer {
        border-top-color: rgba(35, 104, 148, 0.12);
        background: rgba(239, 245, 250, 0.78);
    }

    .footer-logo {
        border-color: rgba(24, 76, 111, 0.14);
        box-shadow: 0 10px 28px rgba(37, 78, 108, 0.11);
    }

    .footer-bottom {
        border-top-color: rgba(35, 104, 148, 0.1);
        color: #60758a;
    }

    .footer-copyright {
        color: #526a80;
    }

    .toast {
        color: var(--text);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 48px rgba(37, 78, 108, 0.18);
    }

}