/* 由 ks100\quick-start.html 内联 <style> 整体外置（步骤⑩方案A，2026-08-06）
   规则原样迁移，零改写，视觉零回归。 */



        /* 修复页眉菜单上方空白 */
        .ks100-nav a {
            line-height: 56px !important;
        }

        @media (max-width: 768px) {
            html, body { margin: 0; padding: 0; }
            body > header {
            position: relative;
            z-index: var(--z-toast);
        }

        header { display: block !important; height: 64px !important; margin: 0 !important; padding: 0 !important; align-items: center; }
            body > main { margin: 0; padding: 0; }
            body > main > * { margin: 0; padding: 0; }
            .mobile-content {
                display: block;
                width: 100%;
                margin: 0;
                padding: 0;
                background: #FFFFFF;
            }
            .mobile-content > * {
                margin-top: 0;
                margin-bottom: 0;
            }
            /* page-bg-gradient 移动端隐藏（fixed 全屏会盖正文）；
               hex-stage 在移动端作为全屏淡蓝粒子背景层 */
            .page-bg-gradient {
                display: none !important;
            }
            .hex-stage {
                display: none !important;
            }
            /* 消除 mibao-guide hero 顶部 16px padding 造成的「header 与 Mibao — guide 之间 26px 空白带」 */
            .qs-hero {
                padding-top: 20px !important;
                line-height: 1 !important;
            }
            .qs-hero .eyebrow {
                display: block !important;
                margin-top: 0 !important;
                line-height: 1 !important;
            }
        }

        /* ===== 桌面端六边形背景 ===== */
        @media (min-width: 769px) {
            .page-bg-gradient {
                position: fixed;
                inset: 0;
                z-index: var(--z-base);
                background: var(--bg-page-gradient);
                pointer-events: none;
            }
            .page-bg-gradient::before {
                display: none;
            }
            .page-bg-gradient::after {
                display: none;
            }
            /* 全屏淡蓝粒子舞台（置于内容之下，仅作背景装饰） */
            .hex-stage {
                position: fixed;
                inset: 0;
                z-index: var(--z-base);
                pointer-events: none;
            }
            .hex-svg-wrap {
                display: none;
            }
            #hex-canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
            }
            .hex-floor {
                display: none;
            }
        }

        /* ===== 桌面端 ===== */
        @media (min-width: 769px) {
            body {
                margin: 0 !important;
                padding: 0 !important;
                font-family: var(--font-sans);
                color: var(--guide-ink);
                -webkit-font-smoothing: antialiased;
                background: var(--color-bg);
            }
            header {
                position: relative;
                z-index: var(--z-toast);
                height: 64px !important;
                margin-bottom: 0 !important;
                box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
                padding: 0 !important;
                background: rgba(255,255,255,0.85) !important;
                backdrop-filter: saturate(180%) blur(20px);
            }
            main {
                position: relative;
                z-index: var(--z-content-high);
                padding-top: 0 !important;
            }

            .ks100-nav ul li a {
                line-height: 56px !important;
                font-size: 15px;
                color: #333;
                text-decoration: none;
                transition: color 0.2s ease;
            }
            .ks100-nav ul li a:hover {
                color: var(--guide-blue);
            }

            /* ===== 桌面端 Hero ===== */
            .guide-hero {
                position: relative;
                z-index: 0;
                padding: 80px 60px 70px;
                background: transparent;
                overflow: hidden;
            }
            .guide-hero::before {
                display: none;
            }
            .guide-hero::after {
                display: none;
            }
            .guide-hero-grid {
                display: none;
            }
            .guide-hero-inner {
                max-width: 1200px;
                margin: 0 auto;
                position: relative;
                z-index: var(--z-content-high);
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 60px;
                align-items: center;
            }
            .guide-hero-meta {
                display: flex;
                align-items: center;
                gap: 14px;
                margin-bottom: 20px;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: 4px;
                color: var(--guide-blue);
                text-transform: uppercase;
            }
            .guide-hero-meta-line {
                flex: 0 0 40px;
                height: 2px;
                background: var(--guide-blue);
                opacity: 0.3;
            }
            .guide-hero-eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-family: var(--font-mono);
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 2px;
                color: var(--guide-blue);
                text-transform: none;
            }
            .guide-hero-eyebrow::before {
                content: "";
                width: 18px;
                height: 1px;
                background: var(--guide-blue);
            }
            .guide-hero h1 {
                font-size: clamp(40px, 5vw, 56px);
                font-weight: 800;
                line-height: 1.15;
                color: var(--guide-ink);
                margin: 0 0 18px;
                letter-spacing: -1px;
            }
            .guide-hero h1 em {
                font-style: normal;
                font-weight: 800;
                background: linear-gradient(135deg, #1976D2 0%, #4285F4 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            .guide-hero-lead {
                font-size: 17px;
                line-height: 1.75;
                color: var(--guide-muted);
                max-width: 560px;
                margin: 0;
                font-weight: 400;
            }
            .guide-hero-aside {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
            .guide-hero-aside-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 18px 22px;
                background: rgba(255, 255, 255, 0.7);
                border: 1px solid rgba(25, 118, 210, 0.1);
                border-radius: 12px;
                backdrop-filter: blur(10px);
            }
            .guide-hero-aside-row:last-child {
                border-bottom: 1px solid rgba(25, 118, 210, 0.1);
            }
            .guide-hero-aside-label {
                font-size: 13px;
                color: var(--guide-muted);
                font-weight: 500;
            }
            .guide-hero-aside-value {
                font-size: 24px;
                font-weight: 800;
                color: var(--guide-ink);
                line-height: 1;
            }
            .guide-hero-aside-value em {
                font-style: normal;
                color: var(--guide-blue);
                font-weight: 800;
            }

            /* ===== 设备切换器 ===== */
            .guide-toggle-wrap {
                max-width: 1800px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 24px 60px;
                background: rgba(255, 255, 255, 0.75);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                border-bottom: 1px solid rgba(25, 118, 210, 0.06);
            }
            .guide-toggle-crumbs {
                font-size: 13px;
                font-weight: 500;
                color: var(--guide-muted);
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .guide-toggle-crumbs .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--guide-blue);
                box-shadow: 0 0 0 4px var(--guide-blue-light);
            }
            .guide-device-toggle {
                display: inline-flex;
                align-items: center;
                background: var(--guide-surface-card);
                border: 1px solid var(--guide-line);
                border-radius: 999px;
                padding: 4px;
                position: relative;
                cursor: pointer;
                user-select: none;
                gap: 0;
                box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            }
            .guide-device-option {
                position: relative;
                z-index: var(--z-content-high);
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 9px 22px;
                font-size: 13px;
                font-weight: 500;
                color: var(--guide-muted);
                border-radius: 999px;
                transition: color 0.3s ease;
                cursor: pointer;
            }
            .guide-device-option.active {
                color: var(--guide-ink);
                font-weight: 600;
            }
            .guide-device-thumb {
                position: absolute;
                top: 4px;
                left: 4px;
                height: calc(100% - 8px);
                background: linear-gradient(135deg, #1976D2, #4285F4);
                border-radius: 999px;
                transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
                z-index: var(--z-content);
                box-shadow: 0 4px 14px rgba(25, 118, 210, 0.3);
            }
            .guide-device-thumb ~ .guide-device-option {
                color: var(--guide-muted);
            }
            .guide-device-option.active {
                color: #FFFFFF !important;
            }
            .guide-device-option svg {
                width: 16px;
                height: 16px;
                flex-shrink: 0;
            }

            /* ===== 桌面端内容容器 ===== */
            .guide-content {
                position: relative;
                z-index: 0;
                padding: 96px 60px 100px;
                background: transparent;
                overflow: hidden;
            }
            .guide-content::before {
                display: none;
            }
            .guide-content::after {
                display: none;
            }
            .guide-content > .guide-single {
                max-width: 1200px;
                margin: 0 auto;
                position: relative;
                z-index: var(--z-content-high);
            }
            .guide-single {
                display: flex;
                flex-direction: column;
                gap: 28px;
            }

            /* ===== 步骤卡片 ===== */
            .qs-step-card {
                position: relative;
                background: #F8FAFF;
                border-radius: 16px;
                padding: 28px 24px;
                border: 1px solid var(--guide-line);
                box-shadow: 0 4px 20px rgba(25, 118, 210, 0.04);
                transition: box-shadow 0.3s ease, transform 0.3s ease;
                margin-bottom: 24px;
            }
            .qs-step-card:last-child {
                margin-bottom: 0;
            }
            #qs-step-2.qs-step-card {
                padding: 0 0 28px;
            }
            .qs-step-card:hover {
                box-shadow: 0 8px 30px rgba(25, 118, 210, 0.1);
                transform: translateY(-2px);
            }
            .qs-step-card-num {
                font-size: 42px;
                font-weight: 800;
                color: var(--guide-blue);
                opacity: 0.15;
                line-height: 1;
                margin-bottom: 12px;
                font-variant-numeric: tabular-nums;
            }
            .qs-step-card-title {
                font-size: 20px;
                font-weight: 700;
                color: var(--guide-ink);
                margin: 0 0 12px;
                letter-spacing: -0.3px;
            }
            .qs-step-card-desc {
                font-size: 14px;
                color: var(--guide-muted);
                line-height: 1.65;
                margin: 0 0 20px;
            }
            .qs-step-card-desc a {
                color: #1976D2;
                text-decoration: none;
                font-weight: 500;
                transition: text-decoration 0.2s ease;
            }
            .qs-step-card-desc a:hover {
                text-decoration: underline;
            }
            .qs-step-card-media {
                position: relative;
                width: 100%;
                border-radius: 12px;
                overflow: hidden;
                background: var(--guide-blue-light);
            }
            .qs-step-card-media.qs-step-card-media-split {
                background: transparent;
                border-radius: 0;
                overflow: visible;
            }
            .qs-step-card-media-image {
                width: 100%;
                height: 600px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            .qs-step-card-media-image img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                user-select: none;
            }

            /* ===== use-cases 同款 macOS 窗口（02 对码连接）===== */
            .desktop-carousel-frame {
                position: relative;
                border-radius: 20px;
                overflow: hidden;
                /* 背景卡片已删除：保留窗口内容，仅移除白底与投影 */
                /* box-shadow: 0 30px 80px rgba(26, 35, 126, 0.18), 0 8px 24px rgba(26, 35, 126, 0.08); */
                /* background: #FFFFFF; */
                aspect-ratio: 16 / 10;
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }
            .desktop-carousel-frame::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 36px;
                background: linear-gradient(180deg, #F5F5F7, #ECECEE);
                z-index: var(--z-content-high);
                border-bottom: 1px solid #DCDCE0;
            }
            .desktop-carousel-dots {
                position: absolute;
                top: 12px;
                left: 14px;
                display: flex;
                gap: 8px;
                z-index: var(--z-content-overlay);
            }
            .desktop-carousel-dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: #D0D0D5;
            }
            .desktop-carousel-dot.red { background: #FF5F56; }
            .desktop-carousel-dot.yellow { background: #FFBD2E; }
            .desktop-carousel-dot.green { background: #27C93F; }
            .desktop-carousel-title {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 17px;
                font-weight: 600;
                color: var(--guide-ink);
                letter-spacing: 0.3px;
                z-index: var(--z-content-overlay);
            }
            .desktop-carousel-inner {
                display: flex;
                width: 100%;
                height: 100%;
                padding-top: 36px;
                box-sizing: border-box;
            }
            .desktop-carousel-img-col {
                flex: 0 0 60%;
                height: 100%;
                background: #F8FAFC;
                position: relative;
                overflow: hidden;
            }
            .desktop-carousel-tutorial-col {
                flex: 0 0 40%;
                height: 100%;
                background: #F8FAFC;
                border-left: 1px solid #E8ECF1;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
            }
            .desktop-carousel-slides {
                display: flex;
                width: 100%;
                height: 100%;
                transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }
            .desktop-carousel-slide {
                min-width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #F8FAFC;
            }
            .desktop-carousel-slide img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                padding: 16px;
                box-sizing: border-box;
            }
            .desktop-tutorial-display {
                flex: 1 1 auto;
                padding: 32px 36px;
                box-sizing: border-box;
                overflow: hidden;
                position: relative;
            }
            .desktop-tutorial-item {
                position: absolute;
                top: 32px;
                left: 36px;
                width: calc(100% - 72px);
                padding: 28px 30px;
                background: #F8FAFC;
                border-radius: 19px;
                border: 2px solid #1976D2;
                box-shadow: 0 8px 28px rgba(25, 118, 210, 0.15);
                box-sizing: border-box;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.25s ease;
            }
            .desktop-tutorial-item.active {
                opacity: 1;
                pointer-events: auto;
            }
            .desktop-tutorial-item .tutorial-num {
                font-size: 12px;
                font-weight: 700;
                color: #1976D2;
                letter-spacing: 2.5px;
                margin-bottom: 12px;
            }
            .desktop-tutorial-item .tutorial-title {
                font-size: 20px;
                font-weight: 700;
                color: #454F5E;
                margin: 0 0 12px;
                line-height: 1.3;
            }
            .desktop-tutorial-item .tutorial-desc {
                font-size: 15px;
                color: #556675;
                line-height: 1.7;
                margin: 0;
            }
            .desktop-tutorial-actions {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 24px;
                padding: 20px 36px;
                box-sizing: border-box;
                border-top: 1px solid #E8ECF1;
                background: #FAFBFC;
                position: relative;
            }
            .desktop-tutorial-action-btn {
                width: 52px;
                height: 52px;
                flex-shrink: 0;
                background: #FFFFFF;
                color: #454F5E;
                border: 1px solid #E2E8F0;
                border-radius: 50%;
                font-size: 22px;
                font-weight: 300;
                line-height: 1;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
            }
            .desktop-tutorial-action-btn:hover {
                background: #1976D2;
                color: #FFFFFF;
                border-color: #1976D2;
                box-shadow: 0 6px 18px rgba(25, 118, 210, 0.3);
            }
            .desktop-tutorial-action-btn.disabled,
            .desktop-tutorial-action-btn.disabled:hover {
                color: #B0BEC5;
                border-color: #E2E8F0;
                background: #F4F6F8;
                box-shadow: none;
                cursor: not-allowed;
            }
            .desktop-tutorial-toast {
                position: absolute;
                bottom: calc(100% + 30px);
                left: 50%;
                transform: translateX(-50%) translateY(0) scale(1);
                padding: 7px 16px;
                background: rgba(25, 118, 210, 0.14);
                color: #1565C0;
                font-size: 14px;
                font-weight: 600;
                border-radius: 18px;
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
                z-index: var(--z-content-overlay);
                box-shadow: 0 8px 22px rgba(25, 118, 210, 0.28);
            }
            .desktop-tutorial-toast.to-top {
                animation: qsSmokeUp 1.3s ease-out forwards;
            }
            .desktop-tutorial-toast.to-bottom {
                animation: qsSmokeDown 1.3s ease-out forwards;
            }
            @keyframes qsSmokeUp {
                0% {
                    opacity: 0;
                    transform: translateX(-50%) translateY(12px) scale(0.8);
                }
                18% {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0) scale(1);
                }
                68% {
                    opacity: 1;
                    transform: translateX(-50%) translateY(-22px) scale(1);
                }
                100% {
                    opacity: 0;
                    transform: translateX(-50%) translateY(-34px) scale(0.92);
                }
            }
            @keyframes qsSmokeDown {
                0% {
                    opacity: 0;
                    transform: translateX(-50%) translateY(-12px) scale(0.8);
                }
                18% {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0) scale(1);
                }
                68% {
                    opacity: 1;
                    transform: translateX(-50%) translateY(22px) scale(1);
                }
                100% {
                    opacity: 0;
                    transform: translateX(-50%) translateY(34px) scale(0.92);
                }
            }
            .desktop-tutorial-step-indicator {
                font-size: 14px;
                color: #94A3B8;
                font-weight: 500;
                min-width: 50px;
                text-align: center;
            }
            .desktop-tutorial-step-indicator span {
                color: #1976D2;
                font-weight: 700;
                font-size: 16px;
            }
            .desktop-carousel-indicators {
                display: flex;
                justify-content: center;
                gap: 8px;
                padding: 12px 0 16px;
                background: #FAFBFC;
            }
            .desktop-carousel-indicator {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #CBD5E1;
                border: none;
                cursor: pointer;
                padding: 0;
                transition: all 0.3s ease;
            }
            .desktop-carousel-indicator.active {
                background: #1976D2;
                width: 28px;
                border-radius: 999px;
            }

            /* 单张图片显示样式 */
            .qs-step-card-media-image {
                width: 100%;
                height: 600px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            .qs-step-card-media-image img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                user-select: none;
            }

            /* ===== 温馨提示卡片 ===== */
            .qs-tip-card {
                background: var(--guide-surface);
                border-radius: 20px;
                padding: 32px;
                border: 1px solid var(--guide-line);
                box-shadow: 0 4px 24px rgba(25, 118, 210, 0.04);
                margin-top: 32px;
            }
            .qs-tip-card-title {
                font-size: 16px;
                font-weight: 700;
                color: var(--guide-ink);
                margin: 0 0 12px;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .qs-tip-card-title::before {
                content: "💡";
            }
            .qs-tip-card-text {
                font-size: 14px;
                color: var(--guide-muted);
                line-height: 1.7;
                margin: 0 0 16px;
            }
            .qs-tip-card-link {
                color: var(--guide-blue);
                text-decoration: none;
                font-weight: 600;
            }
            .qs-tip-card-link:hover {
                text-decoration: underline;
            }

            /* ===== 入场动画 ===== */
            .guide-reveal {
                opacity: 0;
                transform: translateY(28px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }
            .guide-reveal.is-visible {
                opacity: 1;
                transform: translateY(0);
            }
            .guide-reveal.delay-1 { transition-delay: 0.1s; }
            .guide-reveal.delay-2 { transition-delay: 0.2s; }
            .guide-reveal.delay-3 { transition-delay: 0.3s; }
            .guide-reveal.delay-4 { transition-delay: 0.4s; }

        }

        /* ===== 移动端快速入门样式 ===== */
        @media (max-width: 768px) {
            .qs-hero {
                padding: 16px 22px 12px;
                text-align: center;
                background: transparent;
            }
            .qs-hero .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-family: var(--font-mono);
                font-size: 11px;
                letter-spacing: 2px;
                color: #1976D2;
                font-weight: 500;
                margin-bottom: 10px;
            }
            .qs-hero .eyebrow::before {
                content: "";
                width: 14px;
                height: 1px;
                background: #1976D2;
            }
            .qs-hero h1 {
                font-size: 30px;
                font-weight: 800;
                color: #454F5E;
                margin: 0 0 10px;
                line-height: 1.3;
                letter-spacing: -0.5px;
            }
            .qs-hero p {
                font-size: 14px;
                color: #556675;
                line-height: 1.7;
                margin: 0 auto;
                max-width: 340px;
            }

            /* 步骤概览 */
            .qs-steps {
                padding: 10px 16px 8px;
            }
            .qs-step-item {
                background: #F8FAFF;
                border-radius: 14px;
                padding: 14px 16px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                gap: 14px;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
                cursor: pointer;
            }
            .qs-step-item:active {
                transform: scale(0.98);
                background: #EAF2FC;
            }
            .qs-step-num {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: #1976D2;
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .qs-step-content {
                flex: 1;
            }
            .qs-step-title {
                font-size: 16px;
                font-weight: 700;
                color: #454F5E;
                margin: 0 0 4px;
            }
            .qs-step-desc {
                font-size: 12px;
                color: #6B7A89;
                margin: 0;
            }
            .qs-step-arrow {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: #FFFFFF;
                color: #1976D2;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 6px rgba(25,118,210,0.12);
            }

            /* 详情区块 */
            .qs-detail {
                padding: 24px 0 8px;
                background: #fff;
            }
            .qs-detail-block {
                padding: 0 22px 40px;
            }
            .qs-detail-block.alt {
                background: #F8FAFF;
                padding: 36px 22px 40px;
            }
            .qs-detail-num {
                font-size: 12px;
                color: #1976D2;
                font-weight: 700;
                letter-spacing: 2px;
                margin-bottom: 10px;
                display: inline-block;
            }
            .qs-detail-title {
                font-size: 20px;
                font-weight: 800;
                color: #454F5E;
                margin: 0 0 10px;
                letter-spacing: -0.5px;
                line-height: 1.3;
            }
            .qs-detail-text {
                font-size: 14px;
                color: #556675;
                line-height: 1.75;
                margin: 0 0 16px;
            }
            .qs-detail-media {
                position: relative;
                width: 100%;
                border-radius: 16px;
                overflow: hidden;
                box-shadow: 0 10px 26px rgba(26,35,126,0.1);
                background: #EBF3FF;
                aspect-ratio: 4 / 3;
                margin-bottom: 12px;
                margin-top: 8px;
            }
            .qs-carousel {
                position: relative;
                width: 100%;
                height: 100%;
                overflow: hidden;
                background: #f5f9ff;
            }
            .qs-carousel-track {
                display: flex;
                width: 100%;
                height: 100%;
                transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
                touch-action: pan-y;
            }
            .qs-carousel-track img {
                min-width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                user-select: none;
                -webkit-user-drag: none;
            }
            .qs-carousel-prev,
            .qs-carousel-next {
                position: absolute;
                top: 50%;
                width: 36px;
                height: 36px;
                background: rgba(255,255,255,0.85);
                border: none;
                border-radius: 50%;
                font-size: 18px;
                font-weight: bold;
                color: #1976D2;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 8px rgba(25,118,210,0.25);
                z-index: var(--z-content-overlay);
                transform: translateY(-50%);
                padding: 0;
                line-height: 1;
            }
            .qs-carousel-prev { left: 10px; }
            .qs-carousel-next { right: 10px; }
            .qs-carousel-prev:active,
            .qs-carousel-next:active {
                background: #1976D2;
                color: #fff;
            }

            /* 移动端单张图片显示样式 */
            .qs-detail-image {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                background: #f5f9ff;
            }
            .qs-detail-image img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                user-select: none;
                -webkit-user-drag: none;
            }

            /* 提示区块 */
            .qs-tip {
                padding: 20px 22px 20px;
                background: #F6F9FD;
                border-radius: 14px;
                margin: 0 22px 0;
                min-height: 160px;
            }
            .qs-tip-title {
                font-size: 14px;
                font-weight: 700;
                color: #454F5E;
                margin: 0 0 8px;
            }
            .qs-tip-text {
                font-size: 13px;
                color: #556675;
                line-height: 1.6;
                margin: 0;
            }
            .qs-tip-link {
                color: #1976D2;
                text-decoration: none;
                font-weight: 600;
                position: relative;
            }
            .qs-tip-link[data-tooltip]::after {
                content: attr(data-tooltip);
                position: absolute;
                bottom: calc(100% + 8px);
                left: 50%;
                transform: translateX(-50%);
                background: #1E2229;
                color: #fff;
                font-size: 12px;
                font-weight: 400;
                padding: 6px 12px;
                border-radius: 8px;
                white-space: nowrap;
                pointer-events: none;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.2s ease, visibility 0.2s ease;
                z-index: 10;
            }
            .qs-tip-link[data-tooltip]::before {
                content: '';
                position: absolute;
                bottom: calc(100% + 2px);
                left: 50%;
                transform: translateX(-50%);
                border: 5px solid transparent;
                border-top-color: #1E2229;
                pointer-events: none;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.2s ease, visibility 0.2s ease;
                z-index: 10;
            }
            .qs-tip-link[data-tooltip]:hover::after,
            .qs-tip-link[data-tooltip]:active::after,
            .qs-tip-link[data-tooltip]:focus::after {
                opacity: 1;
                visibility: visible;
            }
            .qs-tip-link[data-tooltip]:hover::before,
            .qs-tip-link[data-tooltip]:active::before,
            .qs-tip-link[data-tooltip]:focus::before {
                opacity: 1;
                visibility: visible;
            }
            .qs-tip-content {
                animation: fadeIn 0.3s ease;
            }
            /* 步骤01选中时：提示区块保留占位尺寸、透明同背景，避免切到02/03高度突变 */
            .qs-tip.qs-tip-empty {
                background: transparent;
                min-height: 160px;
            }
            .qs-tip.qs-tip-empty .qs-tip-title {
                display: none;
            }
            .qs-video-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin-top: 12px;
                padding: 10px 20px;
                background: linear-gradient(135deg, #FB7299 0%, #FF6B81 100%);
                color: #FFFFFF;
                text-decoration: none;
                border-radius: 999px;
                font-size: 14px;
                font-weight: 600;
                box-shadow: 0 4px 12px rgba(251, 114, 153, 0.3);
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }
            .qs-video-btn:active {
                transform: scale(0.96);
                box-shadow: 0 2px 8px rgba(251, 114, 153, 0.25);
            }
            .qs-video-icon {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
            }

            /* 入场动画 */
            .qs-reveal {
                opacity: 0;
                transform: translateY(22px);
                transition: opacity 0.7s ease, transform 0.7s ease;
            }
            .qs-reveal.is-visible {
                opacity: 1;
                transform: translateY(0);
            }
            .qs-reveal.delay-1 { transition-delay: 0.1s; }
            .qs-reveal.delay-2 { transition-delay: 0.2s; }
            .qs-reveal.delay-3 { transition-delay: 0.3s; }

            /* 卡片激活状态 */
            .qs-step-item.active {
                background: #E8F0FC;
                border: 1px solid #1976D2;
            }
            .qs-step-item.active .qs-step-arrow {
                background: #1976D2;
                color: #fff;
            }

            /* 统一展示区域 */
            .qs-showcase {
                padding: 6px 0 14px;
                background: transparent;
            }
            .qs-showcase-item {
                padding: 0 22px;
                animation: fadeIn 0.3s ease;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(8px); }
                to { opacity: 1; transform: translateY(0); }
            }

            /* 分隔线标题 */
            .qs-divider {
                padding: 18px 22px 6px;
                font-size: 12px;
                letter-spacing: 3px;
                color: #9AA6B2;
                font-weight: 700;
            }
        }

        /* 客户端下载按钮 */
        .client-download-wrap {
            position: relative;
            margin-left: auto;
            line-height: 56px;
            list-style: none;
        }
        .client-download-btn {
            display: inline-block;
            text-decoration: none;
            padding: 6px 14px;
            background: transparent;
            color: #333;
            font-size: 13px;
            font-weight: 500;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s ease;
            font-family: inherit;
        }
        .client-download-btn:hover {
            background: transparent;
            color: #1976D2;
            transform: translateY(-1px);
        }
        .client-download-popup {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 164px;
            padding: 12px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: all 0.25s ease;
            z-index: var(--z-nav-header);
            pointer-events: none;
            line-height: normal;
        }
        .client-download-popup::before {
            content: "";
            position: absolute;
            top: -6px;
            right: 20px;
            width: 12px;
            height: 12px;
            background: #fff;
            transform: rotate(45deg);
            border-radius: 2px;
        }
        .client-download-wrap:hover .client-download-popup,
        .client-download-popup:hover {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }
        .client-download-popup img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 4px;
        }
        .client-download-popup .popup-title {
            font-size: 14px;
            color: #333;
            text-align: center;
            margin-top: 8px;
            margin-bottom: 4px;
            font-weight: 500;
        }
        .client-download-popup .popup-desc {
            font-size: 12px;
            color: #999;
            text-align: center;
            margin: 0;
        }

        .client-download-wrap {
            display: none;
        }

        @media (min-width: 769px) {
            .client-download-wrap {
                display: flex;
                align-items: center;
            }
        }
    

        /* 统一页眉菜单层级：确保在弹出菜单遮罩之上（不被半透明遮罩压暗） */
        @media (max-width: 768px) {
            header {
                position: relative !important;
                z-index: var(--z-nav-header) !important;
            }
        }

        /* ============================================================
           深色模式对比度优化（WCAG 4.5:1 标准）
           仅在用户手机端开启深色模式 (prefers-color-scheme: dark)
           且视口 ≤768px 时生效
           ============================================================ */
        @media (prefers-color-scheme: dark) and (max-width: 768px) {
            /* ===== 本页专属：套用中性灰深色配色（参考 product-intro 同款）
               覆盖 theme-toggle.css 真源（蓝调 #121418/#1E2229 → 中性灰 #121212/#1E1E1E），
               仅作用于 quick-start.html 本页；其它 ks100 页不受影响 ===== */
            :root {
                color-scheme: dark !important;            /* 覆盖 tokens.css 的 light only，允许本页进入深色模式 */
                --surface-page: #121212 !important;       /* 页面大背景，深邃灰 */
                --surface-card: #1E1E1E !important;       /* 卡片/面板背景，微亮 */
                --surface-body: #171717 !important;       /* 次级面 */
                --text-primary: #FFFFFF !important;       /* 主文字，纯白 */
                --text-secondary: #E5E7EB !important;     /* 次文字，灰白 */
                --text-faint: #9CA3AF !important;         /* 辅助文字，舒适灰 */
                --line-default: rgba(255,255,255,0.1) !important;   /* 极淡白分割线 */
                --line-subtle: rgba(255,255,255,0.08) !important;
                --disabled-arrow: rgba(255,255,255,0.25) !important;
                --bg-page-gradient: #121212 !important;               /* 覆盖 tokens.css 蓝白渐变，防止 hex-stage 顶部装饰带露浅色 */
                /* 中性白柔光（替换蓝调光晕，参考 product-intro 同款） */
                --qs-glow-dark:
                    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.07), transparent 55%),
                    radial-gradient(circle at 85% 90%, rgba(255,255,255,0.05), transparent 55%);
            }
            /* 移动端整页背景：中性灰 + 柔光（覆盖 .mobile-content 写死的 #FFFFFF） */
            .mobile-content {
                background: var(--qs-glow-dark), #121212 !important;
            }
            /* 顶部栏与顶部装饰带统一为页面背景色 #121212 */
            .header-menu-2 { background-color: #121212 !important; }
            body .hex-stage { background: var(--qs-glow-dark), #121212 !important; }
            /* tooltip 小卡：蓝调 #1E2229 → 中性灰 #1E1E1E，文字灰白 */
            .qs-tip-link[data-tooltip]::after {
                background: #1E1E1E !important;
                color: #E5E7EB !important;
            }
            .qs-tip-link[data-tooltip]::before {
                border-top-color: #1E1E1E !important;
            }

            /* 1. 说明文字：提亮到 --text-secondary (#E5E7EB) */
            .qs-detail-text { color: var(--text-secondary); }
            .qs-tip-text { color: var(--text-secondary); }
            .qs-step-desc { color: var(--text-secondary); }

            /* 2. 右箭头（禁用态/边界态） */
            .qs-next-btn { color: var(--disabled-arrow); border-color: var(--line-subtle); }
            .qs-prev-btn { color: var(--text-primary); border-color: var(--line-default); }

            /* 3. 分隔线 */
            .qs-divider { color: var(--text-faint); border-color: var(--line-default); }

            /* 4. 底部备案信息 */
            .guide-footer { color: var(--text-faint); }
            .footer-text, .filing-info { color: var(--text-faint); }

            /* 5. 提示卡柔光（图框去发光，避免深色下出现明显边框） */
            .qs-tip {
                box-shadow: 0 0 6px var(--card-glow-soft);
            }

            /* ===== 本页专属：主基调套中性灰黑（参考 product-intro）
               覆盖各区块写死的浅色 hex，使移动端深色整体走灰黑风 ===== */
            /* 主背景区：灰黑 + 柔光（hero / 展示区 / 详情区 / 交替详情块） */
            body .qs-hero,
            body .qs-showcase,
            body .qs-detail,
            body .qs-detail-block.alt {
                background-color: #121212 !important;
                background-image: var(--qs-glow-dark) !important;
            }
            /* 卡片 / 面板：微亮灰 + 极淡白边 */
            .qs-step-item,
            .qs-tip {
                background: #1E1E1E !important;
                border: 1px solid rgba(255,255,255,0.1) !important;
            }
            .qs-detail-media {
                background: #1E1E1E !important;
            }
            .qs-step-item:active { background: #252525 !important; }
            /* 图框内底：更深的灰，与卡片区隔 */
            .qs-carousel,
            .qs-detail-image {
                background: #171717 !important;
            }
            /* 文字：主白 / 次灰白（覆盖写死的深灰 #454F5E / #556675 等标题） */
            .qs-hero h1 { color: #FFFFFF !important; }
            .qs-hero p { color: #9CA3AF !important; }
            .qs-hero .eyebrow { color: #6BA5F7 !important; }
            .qs-step-title { color: #FFFFFF !important; }
            .qs-detail-title { color: #FFFFFF !important; }
            .qs-tip-title { color: #FFFFFF !important; }
            /* 小箭头 / 轮播按钮：深底蓝字或白字，保证深色下可辨 */
            .qs-step-arrow { background: #1E1E1E !important; color: #6BA5F7 !important; }
            .qs-carousel-prev,
            .qs-carousel-next { background: rgba(18,18,18,0.85) !important; color: #FFFFFF !important; }
        }