:root {
            --bg-deep: #060d17;
            --bg-card: rgba(14, 22, 36, 0.75);
            --bg-card-hover: rgba(22, 32, 50, 0.9);
            --border-soft: #1e2d40;
            --border-glow: rgba(12, 230, 181, 0.22);
            --text-primary: #edf2f9;
            --text-secondary: #8899b4;
            --accent-teal: #0ce6b5;
            --accent-amber: #f0a500;
            --accent-purple: #8b5cf6;
            --gradient-hero: linear-gradient(135deg, #0ce6b5 0%, #6dd5ed 50%, #8b5cf6 100%);
            --radius-lg: 20px;
            --radius-xl: 28px;
            --shadow-glow-teal: 0 0 24px rgba(12, 230, 181, 0.25);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-deep);
            color: var(--text-primary);
            line-height: 1.55;
            -webkit-font-smoothing: antialiased;
        }
        .container { max-width: 1240px; margin:0 auto; padding:0 28px; }
        a { text-decoration: none; color:inherit; transition: color 0.2s; }

        /* 导航栏 */
        header {
            background: rgba(6,13,23,0.94); backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-glow);
            position: sticky; top:0; z-index:100;
        }
        .nav-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:14px 0; }
        .brand { display:flex; flex-direction:column; }
        .brand-name {
            font-size:1.7rem; font-weight:800; background:var(--gradient-hero);
            -webkit-background-clip:text; background-clip:text; color:transparent;
            letter-spacing:-0.5px; line-height:1.2;
        }
        .brand-accent { color:var(--accent-teal); -webkit-text-fill-color:var(--accent-teal); }
        .brand-tagline { font-size:0.68rem; color:var(--text-secondary); letter-spacing:0.3px; margin-top:1px; }
        .nav-menu { display:flex; gap:1.8rem; align-items:center; flex-wrap:wrap; }
        .nav-link {
            font-size:0.9rem; font-weight:500; color:#b0c0d4; position:relative;
            padding:4px 0; transition: color 0.25s;
        }
        .nav-link::after {
            content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
            background:var(--accent-teal); transition:width 0.28s; box-shadow:var(--shadow-glow-teal);
        }
        .nav-link:hover, .nav-link.active { color:var(--accent-teal); }
        .nav-link:hover::after, .nav-link.active::after { width:100%; }
        .menu-toggle {
            display:none; flex-direction:column; justify-content:space-between;
            width:26px; height:18px; background:transparent; border:none; cursor:pointer; padding:0;
        }
        .menu-toggle span { width:100%; height:2px; background:#b0c0d4; border-radius:2px; transition:all 0.3s; }
        .menu-toggle--active span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
        .menu-toggle--active span:nth-child(2) { opacity:0; }
        .menu-toggle--active span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

        /* Hero 区 */
        .tutorial-hero { text-align:center; padding:50px 0 30px; }
        .tutorial-hero h1 {
            font-size:2.8rem; font-weight:800;
            background:linear-gradient(to right, #f0f6ff, #8899b4);
            -webkit-background-clip:text; background-clip:text; color:transparent;
            margin-bottom:12px; letter-spacing:-0.5px;
        }
        .tutorial-hero p { color:var(--text-secondary); font-size:1.1rem; max-width:680px; margin:0 auto; }

        /* 什么是 Clash 简介卡 */
        .intro-card {
            background:var(--bg-card); backdrop-filter:blur(8px);
            border:1px solid var(--border-soft); border-radius:var(--radius-xl);
            padding:32px; margin:20px 0 40px; text-align:center;
        }
        .intro-card h2 { font-size:1.8rem; font-weight:700; color:#f0f6ff; margin-bottom:12px; }
        .intro-card p { color:var(--text-secondary); font-size:1rem; max-width:700px; margin:0 auto; line-height:1.65; }

        /* 步骤流程 (时间轴风格) */
        .steps-section { margin:40px 0; }
        .steps-section h2 { font-size:2rem; font-weight:700; color:#f0f6ff; text-align:center; margin-bottom:40px; }
        .step-row { display:flex; gap:24px; margin-bottom:36px; align-items:flex-start; flex-wrap:wrap; }
        .step-number {
            flex:0 0 60px; height:60px; background:var(--gradient-hero);
            border-radius:50%; display:flex; align-items:center; justify-content:center;
            font-size:1.6rem; font-weight:800; color:#061018; box-shadow:var(--shadow-glow-teal);
        }
        .step-content { flex:1; min-width:280px; }
        .step-content h3 { font-size:1.5rem; font-weight:700; color:#f0f6ff; margin-bottom:8px; }
        .step-content p { color:var(--text-secondary); line-height:1.65; margin-bottom:12px; }
        .step-visual {
            flex:0 0 260px; background:#0b1420; border:1px solid var(--border-soft);
            border-radius:16px; padding:20px; font-family:'Fira Code', monospace;
            color:#b0c0d4; font-size:0.78rem; line-height:1.7;
            box-shadow:0 0 20px rgba(12,230,181,0.1);
        }
        .step-visual .cmd { color:var(--accent-teal); }
        .step-visual .highlight { color:#f0f6ff; font-weight:600; }
        .step-tip {
            display:inline-block; background:rgba(12,230,181,0.1);
            border:1px solid rgba(12,230,181,0.25); border-radius:20px;
            padding:5px 14px; font-size:0.8rem; color:var(--accent-teal); margin-top:8px;
        }

        /* 常见问题内嵌 */
        .faq-section { margin:50px 0; }
        .faq-section h2 { font-size:2rem; font-weight:700; color:#f0f6ff; text-align:center; margin-bottom:30px; }
        .faq-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:20px; }
        .faq-item {
            background:var(--bg-card); border:1px solid var(--border-soft);
            border-radius:16px; padding:22px 20px; transition:all 0.3s;
        }
        .faq-item:hover { border-color:var(--accent-teal); background:var(--bg-card-hover); }
        .faq-item h4 { font-size:1rem; color:#f0f6ff; margin-bottom:10px; }
        .faq-item p { font-size:0.85rem; color:var(--text-secondary); line-height:1.6; }

        /* CTA */
        .cta-banner {
            position:relative; background:linear-gradient(135deg, #0a1620 0%, #110d28 100%);
            border-radius:var(--radius-xl); margin:50px 0 36px; overflow:hidden; padding:56px 0;
        }
        .cta-content {
            display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
            gap:26px; position:relative; z-index:2; padding:0 32px;
        }
        .cta-text h2 { font-size:1.9rem; color:#fff; margin-bottom:10px; }
        .cta-text p { color:#c0d0e0; max-width:500px; font-size:0.95rem; line-height:1.6; }
        .cta-buttons { display:flex; gap:14px; flex-wrap:wrap; }
        .btn-glow {
            background:var(--gradient-hero); border:none; padding:14px 36px; border-radius:50px;
            font-weight:700; color:#061018; transition:transform 0.2s, box-shadow 0.3s;
            font-size:1.05rem; box-shadow:0 8px 22px rgba(12,230,181,0.3);
            display:inline-block; text-align:center;
        }
        .btn-glow:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(12,230,181,0.5); }
        .btn-ghost-light {
            background:transparent; border:1px solid rgba(255,255,255,0.3);
            padding:14px 36px; border-radius:50px; font-weight:600; color:#fff;
            transition:all 0.3s; font-size:1rem; display:inline-block;
        }
        .btn-ghost-light:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); }
        .cta-decoration { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
        .cta-dot { position:absolute; border-radius:50%; opacity:0.15; filter:blur(35px); }
        .cta-dot-1 { width:180px; height:180px; top:-40px; right:-30px; background:var(--accent-teal); }
        .cta-dot-2 { width:140px; height:140px; bottom:-25px; left:8%; background:var(--accent-amber); }
        .cta-dot-3 { width:90px; height:90px; top:45%; left:58%; background:var(--accent-purple); }

        /* 页脚 */
        footer { background:#030a12; border-top:1px solid #1a2a3a; padding:50px 0 24px; margin-top:36px; }
        .footer-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:36px; }
        .footer-col h4 { color:#f1f5f9; margin-bottom:16px; font-size:0.95rem; font-weight:700; }
        .footer-col p { color:var(--text-secondary); font-size:0.82rem; line-height:1.6; }
        .footer-col a { display:block; color:#8899b4; font-size:0.85rem; margin-bottom:7px; transition:color 0.2s; }
        .footer-col a:hover { color:var(--accent-teal); }
        .footer-brand {
            font-size:1.3rem; font-weight:800; background:var(--gradient-hero);
            -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px;
        }
        .footer-bottom { text-align:center; padding-top:36px; color:#4a5568; font-size:0.75rem; border-top:1px solid #1a2a3a; margin-top:32px; }

        @media (max-width: 768px) {
            .container { padding:0 18px; }
            .nav-menu { display:none; flex-direction:column; width:100%; background:rgba(6,13,23,0.98); backdrop-filter:blur(20px); margin-top:14px; padding:14px 0; gap:10px; border-radius:14px; }
            .nav-menu--open { display:flex; }
            .menu-toggle { display:flex; }
            .tutorial-hero h1 { font-size:2rem; }
            .step-row { flex-direction:column; }
            .step-number { margin-bottom:12px; }
            .footer-grid { grid-template-columns:1fr 1fr; gap:26px; }
        }