<svg width="1280" height="720" viewBox="0 0 1280 720" 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;
                    --border-color: #e5e6eb;
                    --total-time: 18.5s;
                }

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

                /* --- 1. AI 交互层 --- */
                .ai-input-box {
                    position: absolute; bottom: 50%; left: 50%; 
                    transform: translate(-50%, 50%);
                    width: 480px; height: 64px; background: white; border: 2px solid var(--brand-blue);
                    border-radius: 32px; display: flex; align-items: center; padding: 0 25px;
                    box-shadow: 0 20px 40px rgba(0,82,217,0.15); z-index: 100;
                    opacity: 0; 
                    animation: loopInputBox var(--total-time) infinite;
                }
                .typewriter {
                    font-size: 18px; color: var(--text-main); white-space: nowrap; overflow: hidden; width: 0;
                    border-right: 3px solid var(--brand-blue); 
                    /* 光标闪烁动画 */
                    animation: loopTyping var(--total-time) infinite, cursorBlink 0.8s infinite;
                }

                /* --- AI 状态层 --- */
                .ai-status {
                    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                    opacity: 0; z-index: 110; 
                    animation: loopStatus var(--total-time) infinite;
                    display: flex; justify-content: center; align-items: center;
                }
                .loading-ring {
                    position: absolute;
                    width: 130px; height: 130px; border: 3px dashed var(--brand-blue);
                    border-radius: 50%; animation: rotate 3.5s linear infinite;
                }
                .ai-icon-wrapper {
                    width: 70px; height: 70px;
                    display: flex; justify-content: center; align-items: center;
                    animation: breathingIcon 2s infinite ease-in-out;
                }

                /* --- 2. 浏览器与网页内容 --- */
                .browser {
                    position: absolute;
                    top: 20px; left: 25px; width: 1230px; height: 680px; 
                    background: #fff; border-radius: 12px;
                    overflow: hidden; display: flex; flex-direction: column;
                    border: 1px solid #e5e6eb;
                    box-shadow: 0 10px 50px rgba(0,0,0,0.05);
                    opacity: 0; 
                    animation: loopBrowser var(--total-time) infinite;
                }

                .browser-header { 
                    height: 44px; background: #f7f8fa; 
                    display: flex; align-items: center; padding: 0 20px; 
                    border-bottom: 1px solid var(--border-color);
                }
                .dot { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }

                .web-viewport { flex-grow: 1; overflow: hidden; position: relative; }

                .web-page-content {
                    position: absolute;
                    width: 100%; top: 0; padding: 50px 0 100px 0;
                    display: flex; flex-direction: column; align-items: center;
                    animation: loopPageScroll var(--total-time) infinite;
                }

                /* 表单内部样式 */
                .form-card {
                    width: 500px; background: #ffffff; padding: 40px 50px;
                    border-radius: 20px; border: 1px solid #f0f2f5;
                    box-shadow: 0 8px 30px rgba(0,0,0,0.02);
                }
                .form-hero, .form-item, .btn-mock { opacity: 0; }
                .form-hero h2 { font-size: 26px; color: var(--text-main); margin: 0 0 8px 0; }
                .form-hero p { color: var(--text-second); font-size: 14px; margin: 0; }
                .form-item { margin-bottom: 18px; }
                .label { display: block; font-size: 12px; font-weight: 600; color: var(--text-main); margin-bottom: 8px; text-transform: uppercase; }
                .input-mock { 
                    width: 100%; height: 42px; border: 1px solid var(--border-color); 
                    border-radius: 8px; background: #fafafa; box-sizing: border-box;
                    display: flex; align-items: center; padding: 0 15px; color: #bcc1cb; font-size: 13px;
                }
                .radio-group { display: flex; gap: 24px; padding: 6px 0; }
                .radio-item { display: flex; align-items: center; font-size: 13px; color: var(--text-main); }
                .radio-dot { width: 16px; height: 16px; border: 2px solid var(--brand-blue); border-radius: 50%; margin-right: 8px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
                .radio-dot::after { content: ''; width: 8px; height: 8px; background: var(--brand-blue); border-radius: 50%; display: block; }
                .radio-dot.empty { border-color: var(--border-color); }
                .radio-dot.empty::after { display: none; }
                .textarea-mock { height: 90px; align-items: flex-start; padding-top: 12px; }
                .btn-mock {
                    width: 100%; height: 50px; background: var(--brand-blue); color: white;
                    border-radius: 8px; display: flex; align-items: center; justify-content: center;
                    font-weight: 600; font-size: 15px; margin-top: 15px;
                    box-shadow: 0 6px 20px rgba(0,82,217,0.2);
                }

                /* --- 动画关键帧 --- */

                /* 1. AI输入框盒子：出现与消失 */
                @keyframes loopInputBox {
                    0% { opacity: 0; transform: translate(-50%, 80px); }
                    3% { opacity: 1; transform: translate(-50%, 50%); }
                    21% { opacity: 1; transform: translate(-50%, 50%); }
                    23% { opacity: 0; transform: translate(-50%, 50%); }
                    100% { opacity: 0; }
                }

                /* 打字机修复：使用 steps(12) 模拟逐字跳出 */
                @keyframes loopTyping {
                    0%, 5% { width: 0; }
                    5.1% { width: 0; animation-timing-function: steps(12, end); }
                    16% { width: 220px; } /* 到达最大宽度 */
                    95% { width: 220px; }
                    100% { width: 0; } /* 周期结束重置 */
                }

                @keyframes cursorBlink { 50% { border-color: transparent; } }

                /* 2. AI 加载状态动画 */
                @keyframes loopStatus {
                    0%, 21% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
                    24% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                    40% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                    43% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
                    100% { opacity: 0; }
                }

                /* 3. 浏览器窗口 */
                @keyframes loopBrowser {
                    0%, 45% { opacity: 0; }
                    48% { opacity: 1; }
                    92% { opacity: 1; }
                    95%, 100% { opacity: 0; }
                }

                /* 4. 表单内容进入 */
                @keyframes loopSlideUp {
                    0%, 48% { opacity: 0; transform: translateY(20px); }
                    52%, 92% { opacity: 1; transform: translateY(0); }
                    95%, 100% { opacity: 0; }
                }

                /* 5. 网页滚动过程 */
                @keyframes loopPageScroll {
                    0%, 64% { transform: translateY(0); }
                    89% { transform: translateY(-460px); }
                    92% { transform: translateY(-460px); }
                    95%, 100% { transform: translateY(0); }
                }

                @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
                @keyframes breathingIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

                .form-hero { animation: loopSlideUp var(--total-time) infinite; animation-delay: 0s; }
                .form-item:nth-child(2) { animation: loopSlideUp var(--total-time) infinite; animation-delay: 0.2s; }
                .form-item:nth-child(3) { animation: loopSlideUp var(--total-time) infinite; animation-delay: 0.4s; }
                .form-item:nth-child(4) { animation: loopSlideUp var(--total-time) infinite; animation-delay: 0.6s; }
                .form-item:nth-child(5) { animation: loopSlideUp var(--total-time) infinite; animation-delay: 0.8s; }
                .form-item:nth-child(6) { animation: loopSlideUp var(--total-time) infinite; animation-delay: 1.0s; }
                .form-item:nth-child(7) { animation: loopSlideUp var(--total-time) infinite; animation-delay: 1.2s; }
                .btn-mock { animation: loopSlideUp var(--total-time) infinite; animation-delay: 1.6s; }
            </style>

            <div class="canvas">
                <!-- 1. AI 输入阶段 -->
                <div class="ai-input-box">
                    <svg width="24" height="24" viewBox="0 0 24 24">
                        <path fill="#0052D9" d="M19,12L12.5,9L11,2L9.5,9L3,12L9.5,15L11,22L12.5,15L19,12Z"/>
                    </svg>
                    <div class="typewriter" style="margin-left:15px">请帮我生成一个留言表单</div>
                </div>

                <!-- 2. AI 计算状态 -->
                <div class="ai-status">
                    <div class="loading-ring"></div>
                    <div class="ai-icon-wrapper">
                        <svg width="70" height="70" viewBox="0 0 1038 1024">
                            <path fill="#0052D9" 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"></path>
                            <path fill="#0052D9" 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"></path>
                        </svg>
                    </div>
                </div>

                <!-- 3. 浏览器窗口 -->
                <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:220px; height:12px; background:#eef0f2; border-radius:6px;"></div>
                    </div>

                    <div class="web-viewport">
                        <div class="web-page-content">
                            <div class="form-card">
                                <div class="form-hero">
                                    <h2>联系我们</h2>
                                    <p>请留下您的宝贵建议，我们的团队将尽快联系您</p>
                                </div>
                                
                                <div class="form-item">
                                    <span class="label">姓名</span>
                                    <div class="input-mock">请输入您的真实姓名</div>
                                </div>

                                <div class="form-item">
                                    <span class="label">联系电话</span>
                                    <div class="input-mock">请输入您的手机号码</div>
                                </div>

                                <div class="form-item">
                                    <span class="label">咨询事项</span>
                                    <div class="radio-group">
                                        <div class="radio-item"><div class="radio-dot"></div>商务咨询</div>
                                        <div class="radio-item"><div class="radio-dot empty"></div>技术支持</div>
                                    </div>
                                </div>

                                <div class="form-item">
                                    <span class="label">公司名称</span>
                                    <div class="input-mock">您的企业或单位名称</div>
                                </div>

                                <div class="form-item">
                                    <span class="label">所属领域</span>
                                    <div class="input-mock" style="display:flex; justify-content: space-between;">
                                        <span>请选择您的行业领域</span>
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="#86909c"><path d="M7 10l5 5 5-5z"/></svg>
                                    </div>
                                </div>

                                <div class="form-item">
                                    <span class="label">需求描述</span>
                                    <div class="input-mock textarea-mock">请简要描述您的具体需求或建议...</div>
                                </div>

                                <div class="btn-mock">提交留言</div>
                            </div>
                            
                            <div style="height: 140px; width: 500px; margin-top: 40px; border-top: 1px solid #f0f2f5; padding-top: 30px; text-align: center;">
                                <p style="color: #cfd3d8; font-size: 12px; margin: 0; line-height: 1.8;">
                                    © 2025 AI Intelligent Layout Engine<br/>
                                    由人工智能自动生成的响应式表单页面
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </foreignObject>
</svg>