<svg width="1000" height="600" viewBox="0 0 1000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                :root {
                    --brand-blue: #0052D9;
                    --brand-light: #e8f3ff;
                    --text-main: #1d2129;
                    --text-second: #86909c;
                    /* 总周期：20s (动画) + 2s (停顿) = 22s */
                    --total-duration: 22s;
                }

                .canvas {
                    position: relative;
                    width: 1000px;
                    height: 600px;
                    background: #ffffff;
                    overflow: hidden;
                    font-family: -apple-system, "SF Pro Display", "PingFang SC", sans-serif;
                }

                /* --- 1. 浏览器外框 --- */
                .browser {
                    position: absolute;
                    top: 20px; left: 20px; width: 960px; height: 560px;
                    background: #fff;
                    border-radius: 12px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
                    border: 1px solid #e5e6eb;
                    opacity: 0;
                    /* 在 8.5s (38.6%) 时显示，一直保持到周期结束 */
                    animation: browserFade var(--total-duration) infinite;
                }
                @keyframes browserFade {
                    0%, 38.5% { opacity: 0; }
                    38.6%, 99% { opacity: 1; }
                    100% { opacity: 0; }
                }

                .browser-header { 
                    height: 40px; background: #f1f3f5; 
                    display: flex; align-items: center; padding: 0 16px; 
                    border-bottom: 1px solid #e5e6eb;
                    flex-shrink: 0;
                }
                .dot { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
                
                .web-viewport { 
                    flex-grow: 1; 
                    overflow: hidden; 
                    position: relative; 
                    background: #fff;
                }

                /* 网页内容滚动层 */
                .web-page-content {
                    position: absolute; 
                    width: 100%; 
                    top: 0; 
                    opacity: 0;
                    /* 8s (36.3%) 淡入, 10s (45.4%) 开始滚动, 20s (90.9%) 结束 */
                    animation: pageMaster var(--total-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite;
                }
                @keyframes pageMaster {
                    0%, 36.2% { opacity: 0; transform: translateY(0); }
                    36.3% { opacity: 1; transform: translateY(0); }
                    45.4% { transform: translateY(0); }
                    90.9%, 99% { opacity: 1; transform: translateY(-450px); }
                    100% { opacity: 0; transform: translateY(-450px); }
                }

                /* --- 2. AI 输入框 --- */
                .ai-input-box {
                    position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
                    width: 480px; height: 68px; background: white; border: 2px solid var(--brand-blue);
                    border-radius: 34px; display: flex; align-items: center; padding: 0 30px;
                    box-shadow: 0 25px 50px rgba(0,82,217,0.2); z-index: 100;
                    opacity: 0;
                    /* 0.5s (2.2%) 进，4.5s (20.4%) 出 */
                    animation: inputMaster var(--total-duration) infinite;
                }
                @keyframes inputMaster {
                    0%, 2.1% { opacity: 0; transform: translate(-50%, 50px); }
                    2.2%, 18% { opacity: 1; transform: translate(-50%, 0); }
                    20.4% { opacity: 0; transform: translate(-50%, 0); }
                    100% { opacity: 0; }
                }

                .typewriter {
                    font-size: 20px; color: var(--text-main); white-space: nowrap; overflow: hidden; width: 0;
                    border-right: 3px solid var(--brand-blue);
                    /* 1s (4.5%) 开始打字, 3s (13.6%) 结束 */
                    animation: typingMaster var(--total-duration) steps(15) infinite, blink 0.8s infinite;
                }
                @keyframes typingMaster {
                    0%, 4.4% { width: 0; }
                    13.6%, 100% { width: 220px; }
                }
                @keyframes blink { 50% { border-color: transparent; } }

                /* --- 3. AI 核心状态 --- */
                .ai-status {
                    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                    opacity: 0; z-index: 110;
                    /* 4.5s (20.4%) 显示，8.5s (38.6%) 消失 */
                    animation: statusMaster var(--total-duration) infinite;
                    display: flex; justify-content: center; align-items: center;
                }
                @keyframes statusMaster {
                    0%, 20.3% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
                    23% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                    36% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                    38.6% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
                    100% { opacity: 0; }
                }

                .loading-ring {
                    position: absolute;
                    width: 140px; height: 140px; border: 4px dashed var(--brand-blue);
                    border-radius: 50%; animation: rotate 3.5s linear infinite;
                }
                @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
                
                .ai-icon-wrapper {
                    width: 80px; height: 80px;
                    display: flex; justify-content: center; align-items: center;
                    animation: breathingIcon 2s infinite ease-in-out;
                }
                @keyframes breathingIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

                /* 网页内部装饰样式 */
                .section { padding: 60px 10%; box-sizing: border-box; }
                .hero { background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%); text-align: center; padding: 80px 10%; }
                .hero h1 { font-size: 36px; margin: 0 0 20px 0; color: var(--text-main); }
                .hero p { font-size: 18px; color: var(--text-second); line-height: 1.6; margin: 0; }
                .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
                .adv-card { background: #fff; border: 1px solid #f2f3f5; padding: 30px; border-radius: 16px; text-align: center; }
                .adv-icon { width: 50px; height: 50px; background: var(--brand-light); border-radius: 12px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
                .adv-icon svg { fill: var(--brand-blue); width: 28px; height: 28px; }
                .adv-card h3 { font-size: 18px; margin: 0 0 12px 0; color: var(--text-main); }
                .adv-card p { font-size: 14px; color: var(--text-second); margin: 0; line-height: 1.5; }
                .team-section { background: #fff; padding-bottom: 100px; }
                .team-grid { display: flex; justify-content: space-around; margin-top: 40px; }
                .team-item { text-align: center; width: 20%; }
                .avatar { width: 80px; height: 80px; background: #f2f3f5; border-radius: 50%; margin: 0 auto 15px; }
                .team-item h4 { margin: 0 0 5px 0; font-size: 16px; }
                .team-item p { font-size: 13px; color: var(--text-second); margin: 0; }
            </style>

            <div class="canvas">
                <!-- 1. 浏览器 (生成结果) -->
                <div class="browser">
                    <div class="browser-header">
                        <div class="dot" style="background:#ff5f56"></div>
                        <div class="dot" style="background:#ffbd2e"></div>
                        <div class="dot" style="background:#27c93f"></div>
                        <div style="margin-left:20px; width:200px; height:10px; background:#e5e6eb; border-radius:5px;"></div>
                    </div>
                    <div class="web-viewport">
                        <div class="web-page-content">
                            <div class="section hero">
                                <h1>创新驱动数字未来</h1>
                                <p>利用领先的 AI 技术，为全球企业提供最高效的数字化转型解决方案。</p>
                            </div>
                            <div class="section" style="background: #fafafa;">
                                <div class="grid-3">
                                    <div class="adv-card">
                                        <div class="adv-icon"><svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div>
                                        <h3>极致性能</h3>
                                        <p>分布式架构，毫秒级响应速度。</p>
                                    </div>
                                    <div class="adv-card">
                                        <div class="adv-icon"><svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg></div>
                                        <h3>安全可靠</h3>
                                        <p>银行级加密，全方位保障数据。</p>
                                    </div>
                                    <div class="adv-card">
                                        <div class="adv-icon"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-4v-4h4v4zm0-5h-4V7h4v5z"/></svg></div>
                                        <h3>智能集成</h3>
                                        <p>开放接口，无缝对接办公系统。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="section team-section">
                                <h2 style="text-align:center; color: var(--text-main); margin-bottom: 30px;">专业团队</h2>
                                <div class="team-grid">
                                    <div class="team-item"><div class="avatar"></div><h4>张明远</h4><p>CEO</p></div>
                                    <div class="team-item"><div class="avatar"></div><h4>Sarah Chen</h4><p>CTO</p></div>
                                    <div class="team-item"><div class="avatar"></div><h4>李思睿</h4><p>产品总监</p></div>
                                    <div class="team-item"><div class="avatar"></div><h4>Robert Wang</h4><p>市场负责人</p></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2. AI 输入框 -->
                <div class="ai-input-box">
                    <svg width="28" height="28" viewBox="0 0 24 24" style="margin-right:15px">
                        <path fill="#0052D9" d="M19,12L12.5,9L11,2L9.5,9L3,12L9.5,15L11,22L12.5,15L19,12Z"/>
                    </svg>
                    <div class="typewriter">生成一个关于我们页面</div>
                </div>

                <!-- 3. AI 核心状态 -->
                <div class="ai-status">
                    <div class="loading-ring"></div>
                    <div class="ai-icon-wrapper">
                        <svg width="80" height="80" viewBox="0 0 1038 1024" xmlns="http://www.w3.org/2000/svg">
                            <path d="M178.086957 700.326957m-63.814493 0a63.814493 63.814493 0 1 0 127.628985 0 63.814493 63.814493 0 1 0-127.628985 0Z" fill="#0052D9"></path>
                            <path d="M821.129275 260.006957h103.438841v504.134492h-103.438841zM566.01971 260.006957h-116.053333l-189.068986 504.57971h105.071305l52.980869-135.791305h181.648696l44.521739 135.791305h105.961739z m-117.092174 279.893333l57.136232-159.833044h5.936232l56.987826 159.833044z" fill="#0052D9"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </foreignObject>
</svg>