<!-- 404 ASCII Art -->
<div style="margin: 2rem 0;">
  <pre style="font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 1.4rem; color: #e74c3c; margin: 0; text-shadow: 1px 1px 0 rgba(0,0,0,0.1);">
 ██╗  ██╗ ██████╗ ██╗  ██╗
 ██║  ██║██╔═══██╗██║  ██║
 ███████║██║   ██║███████║
 ╚════██║██║   ██║╚════██║
      ██║╚██████╔╝     ██║
      ╚═╝ ╚═════╝      ╚═╝
  </pre>
</div>

<h1 style="font-size: 2.8rem; margin: 1.5rem 0 0.5rem; color: #2c3e50; font-weight: 700;">
  哎呀！页面未找到
</h1>

<p style="font-size: 1.2rem; color: #7f8c8d; margin: 1rem 0 3rem; line-height: 1.6; max-width: 500px; margin-left: auto; margin-right: auto;">
  您要查找的页面似乎已从沙盒中逃脱了！
  让我们通过这些有用的链接帮您回到正轨。
</p>

<!-- Quick Actions -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 3rem 0; max-width: 600px; margin-left: auto; margin-right: auto;">
  <a href="/sandbox/"
     style="display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3498db, #2980b9); color: white; padding: 1rem 1.5rem; text-decoration: none; border-radius: 10px; font-weight: 600; transition: transform 0.2s; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);"
     onmouseover="this.style.transform='translateY(-2px)'"
     onmouseout="this.style.transform='translateY(0)'">
    <span style="font-size: 1.5rem; margin-right: 0.5rem;">🏠</span>
    返回首页
  </a>

  <a href="/sandbox/guide/"
     style="display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2ecc71, #27ae60); color: white; padding: 1rem 1.5rem; text-decoration: none; border-radius: 10px; font-weight: 600; transition: transform 0.2s; box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);"
     onmouseover="this.style.transform='translateY(-2px)'"
     onmouseout="this.style.transform='translateY(0)'">
    <span style="font-size: 1.5rem; margin-right: 0.5rem;">📖</span>
    文档
  </a>

  <a href="/sandbox/api/"
     style="display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e67e22, #d35400); color: white; padding: 1rem 1.5rem; text-decoration: none; border-radius: 10px; font-weight: 600; transition: transform 0.2s; box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);"
     onmouseover="this.style.transform='translateY(-2px)'"
     onmouseout="this.style.transform='translateY(0)'">
    <span style="font-size: 1.5rem; margin-right: 0.5rem;">🔧</span>
    API 参考
  </a>
</div>

<!-- Popular Pages -->
<div style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 15px; padding: 2.5rem; margin: 3rem 0; border: 1px solid #dee2e6; box-shadow: 0 8px 25px rgba(0,0,0,0.1);">
  <h3 style="margin-top: 0; margin-bottom: 1.5rem; color: #2c3e50; font-size: 1.3rem; font-weight: 600;">
    🔍 热门页面
  </h3>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: left;">
    <div>
      <h4 style="color: #3498db; margin: 0 0 0.5rem; font-size: 1rem;">入门指南</h4>
      <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="margin: 0.3rem 0;">
          <a href="/sandbox/guide/quick-start" style="color: #555; text-decoration: none; font-size: 0.9rem; display: flex; align-items: center;">
            <span style="margin-right: 0.5rem;">⚡</span>快速开始指南
          </a>
        </li>
        <li style="margin: 0.3rem 0;">
          <a href="/sandbox/guide/features" style="color: #555; text-decoration: none; font-size: 0.9rem; display: flex; align-items: center;">
            <span style="margin-right: 0.5rem;">✨</span>功能概览
          </a>
        </li>
      </ul>
    </div>
    <div>
      <h4 style="color: #e67e22; margin: 0 0 0.5rem; font-size: 1rem;">API 文档</h4>
      <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="margin: 0.3rem 0;">
          <a href="/sandbox/api/shell" style="color: #555; text-decoration: none; font-size: 0.9rem; display: flex; align-items: center;">
            <span style="margin-right: 0.5rem;">🐚</span>Shell WebSocket API
          </a>
        </li>
        <li style="margin: 0.3rem 0;">
          <a href="/sandbox/api/file" style="color: #555; text-decoration: none; font-size: 0.9rem; display: flex; align-items: center;">
            <span style="margin-right: 0.5rem;">📁</span>文件操作 API
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<!-- Quick Search -->
<div style="margin: 3rem 0;">
  <div style="position: relative; max-width: 400px; margin: 0 auto;">
    <input type="text" id="quickSearch" placeholder="🔍 搜索文档..."
           style="width: 100%; padding: 1rem 1.5rem; border: 2px solid #e9ecef; border-radius: 25px; font-size: 1rem; outline: none; transition: border-color 0.3s;"
           onfocus="this.style.borderColor='#3498db'"
           onblur="this.style.borderColor='#e9ecef'">
  </div>
  <p style="font-size: 0.85rem; color: #999; margin-top: 0.5rem;">
    尝试搜索 "终端"、"文件操作"、"浏览器" 或 "API"
  </p>
</div>

<!-- Sandbox Architecture -->
<div style="margin: 4rem 0; opacity: 0.6;">
  <h4 style="color: #666; margin-bottom: 1rem; font-size: 1rem;">AIO Sandbox 架构</h4>
  <pre style="font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.75rem; color: #666; line-height: 1.2; background: #f8f9fa; padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 0;">

┌─────────────────────────────────────────────────────────────┐ │ 🌐 浏览器 + VNC │ ├─────────────────────────────────────────────────────────────┤ │ 💻 VSCode 服务器 │ 🐚 Shell 终端 │ 📁 文件操作 │ ├─────────────────────────────────────────────────────────────┤ │ 🔗 MCP 中心 + 🔒 沙盒融合 │ ├─────────────────────────────────────────────────────────────┤ │ 🚀 预览 Agent + 📊 服务监控 │ └─────────────────────────────────────────────────────────────┘