:root {
            --primary: #6C5CE7;
            --primary-hover: #5A4BD1;
            --dark: #0f172a;
            --light: #f8fafc;
            --text: #475569;
            --border: #e2e8f0;
            --radius: 16px;
            --code-bg: #1e293b;
        }
        *{margin:0;padding:0;box-sizing:border-box;}
        body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6;}
        header{border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);z-index:100;}
        .nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;}
        .logo a{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;color:var(--primary);text-decoration:none;}
        .logo svg{width:32px;height:32px;fill:var(--primary);}
        .nav-links a{color:var(--text);text-decoration:none;margin-left:25px;font-size:15px;font-weight:500;transition:all 0.2s;padding:6px 12px;border-radius:6px;}
        .nav-links a:hover,.nav-links a.active{color:#fff;background-color:var(--primary);}

        section{padding:80px 20px;}
        .container{max-width:1200px;margin:0 auto;}
        .section-title{font-size:36px;color:var(--dark);font-weight:800;letter-spacing:-0.5px;text-align:center;}
        .section-subtitle{font-size:16px;color:#64748b;text-align:center;max-width:700px;margin:15px auto 50px;}

        /* 英雄头部 */
        .dev-hero{background:radial-gradient(120% 120% at 50% 0%, rgba(108,92,231,0.06) 0%, rgba(255,255,255,0) 100%);text-align:center;}
        .dev-hero .container{display:flex;flex-direction:column;align-items:center;}
        .hero-badge{display:inline-block;background:var(--primary);color:#fff;padding:6px 20px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:20px;}
        .hero-icon{font-size:64px;margin-bottom:20px;}

        /* 快速开始步骤 */
        .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:60px 0;}
        .step-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:40px 24px;text-align:center;position:relative;transition:0.3s;}
        .step-card:hover{transform:translateY(-6px);box-shadow:0 20px 30px -10px rgba(108,92,231,0.06);border-color:#cbd5e1;}
        .step-number{width:40px;height:40px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 20px;font-size:18px;}
        .step-title{font-size:20px;color:var(--dark);margin-bottom:12px;font-weight:700;}
        .step-desc{font-size:14.5px;color:#64748b;}

        /* API特性卡片 */
        .api-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:60px 0;}
        .api-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 20px;text-align:center;transition:0.3s;}
        .api-card:hover{border-color:#cbd5e1;box-shadow:0 10px 25px rgba(0,0,0,0.03);}
        .api-icon{font-size:38px;margin-bottom:16px;}
        .api-card h3{font-size:18px;color:var(--dark);margin-bottom:10px;}
        .api-card p{font-size:13.5px;color:#64748b;}

        /* 机器人展示 */
        .bot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
        .bot-card{background:linear-gradient(135deg, #f8fafc 0%, #fff 100%);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;transition:0.3s;}
        .bot-card:hover{border-color:var(--primary);box-shadow:0 12px 25px rgba(108,92,231,0.04);}
        .bot-name{font-size:20px;font-weight:700;color:var(--dark);margin-bottom:8px;}
        .bot-tag{display:inline-block;background:rgba(108,92,231,0.1);color:var(--primary);padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;margin-bottom:12px;}
        .bot-desc{font-size:14px;color:#64748b;margin-bottom:16px;}
        .bot-link{color:var(--primary);text-decoration:none;font-weight:600;font-size:14px;}

        /* 代码块 */
        .code-section{max-width:800px;margin:60px auto;}
        .code-block{background:var(--code-bg);color:#e2e8f0;border-radius:var(--radius);padding:24px 28px;font-family:'Fira Code','Cascadia Code',Consolas,monospace;font-size:14px;overflow-x:auto;position:relative;margin-bottom:30px;}
        .code-block::before{content:'📄 example.py';display:block;color:#94a3b8;font-size:12px;margin-bottom:14px;font-family:inherit;}
        .code-comment{color:#94a3b8;}
        .code-keyword{color:#c084fc;}
        .code-string{color:#6ee7b7;}
        .code-func{color:#f9a8d4;}

        /* Webhook区域 */
        .webhook-box{background:var(--light);border-radius:var(--radius);padding:40px;border:1px solid var(--border);margin-top:40px;text-align:center;}
        .webhook-box h3{font-size:22px;color:var(--dark);margin-bottom:16px;}
        .webhook-box p{font-size:15px;color:#64748b;margin-bottom:20px;}

        /* 资源链接 */
        .resource-list{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:40px;}
        .resource-link{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:14px 24px;border-radius:50px;text-decoration:none;color:var(--dark);font-weight:500;border:1px solid var(--border);transition:0.2s;}
        .resource-link:hover{background:var(--primary);color:#fff;border-color:var(--primary);}

        footer{background:var(--dark);color:#94a3b8;padding:70px 20px 40px;font-size:14px;border-top:1px solid #1e293b;}
        .footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(4,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid #1e293b;}
        .footer-brand h4{color:#fff;font-size:18px;margin-bottom:12px;}
        .footer-column h5{color:#fff;font-size:15px;margin-bottom:16px;font-weight:600;}
        .footer-column ul{list-style:none;}
        .footer-column li{margin-bottom:10px;}
        .footer-column a{color:#94a3b8;text-decoration:none;transition:color 0.2s;}
        .footer-column a:hover{color:#fff;}
        .footer-bottom{max-width:1200px;margin:30px auto 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;}

        @media(max-width:768px){
            .steps-grid,.api-grid,.bot-grid{grid-template-columns:1fr;}
            .nav-container{flex-direction:column;gap:15px;}
            .nav-links a{margin-left:10px;font-size:14px;}
        }