<svg xmlns="http://www.w3.org/2000/svg" viewBox="70 55 1000 325" width="100%" height="100%">
    <defs>
        <!-- 基础样式 -->
        <style>
            .title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 20px; font-weight: bold; fill: #111827; }
            .label-bold { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: bold; }
            .label-sub { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; fill: #4b5563; }
            .annot-bold { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; font-weight: bold; }
            .annot-normal { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; fill: #374151; }
            .watermark { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; font-weight: bold; fill: #d1d5db; }
        </style>
        <!-- 箭头定义 -->
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#1f2937"/>
        </marker>
        <!-- DSA 稀疏高亮 (蓝色斑马纹) -->
        <pattern id="dsaPattern" width="16" height="30" >
                              
        </pattern>
        <!-- MLA 压缩纹理 (浅紫) -->
        <pattern id="mlaPattern" width="12" height="25" patternUnits="userSpaceOnUse">
            <rect width="12" height="25" fill="#f3e8ff" stroke="none"/>
        </pattern>
    </defs>
    <!-- 背景 -->
    <rect x="70" y="55" width="1000" height="325" fill="#ffffff"/>
    <!-- ==================== 1. 原始 TOKEN 序列 ==================== -->
    <g transform="translate(0, 10) rotate(0)">
        <text x="100" y="85" class="label-bold" fill="#374151">原始 token 序列</text>
        <text x="100" y="102" class="label-sub">长度 = 1,000,000</text>
       
        <!-- 序列主体 -->
        <rect x="230" y="75" width="770" height="30" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/>
       
        <!-- 刻度线 -->
        <line x1="230" y1="110" x2="230" y2="114" stroke="#94a3b8" stroke-width="1"/>
        <text x="230" y="125" class="label-sub" text-anchor="middle">0</text>
        <line x1="422.5" y1="110" x2="422.5" y2="114" stroke="#94a3b8" stroke-width="1"/>
        <text x="422.5" y="125" class="label-sub" text-anchor="middle">250K</text>
        <line x1="615" y1="110" x2="615" y2="114" stroke="#94a3b8" stroke-width="1"/>
        <text x="615" y="125" class="label-sub" text-anchor="middle">500K</text>
        <line x1="807.5" y1="110" x2="807.5" y2="114" stroke="#94a3b8" stroke-width="1"/>
        <text x="807.5" y="125" class="label-sub" text-anchor="middle">750K</text>
        <line x1="1000" y1="110" x2="1000" y2="114" stroke="#94a3b8" stroke-width="1"/>
        <text x="1000" y="125" class="label-sub" text-anchor="middle">1M</text>
        <!-- Query 红色端点 -->
        <circle cx="1000" cy="90" r="7" fill="#ef4444"/>
        <text x="1000" y="70" class="label-bold" fill="#ef4444" text-anchor="middle">query</text>
    </g>
    <!-- ==================== 2. ① DSA + IndexShare (主要稀疏注意力) ==================== -->
    <g transform="translate(0, 30)">
        <text x="100" y="155" class="label-bold" fill="#1d4ed8">① DSA</text>
        <text x="100" y="172" class="label-sub" fill="#2563eb">Sparse Attention</text>
        <text x="100" y="186" class="label-sub" fill="#2563eb">top-k ≈ 2,048 tokens / query</text>
        <text x="100" y="200" class="label-sub" fill="#2563eb">IndexShare: 每4层复用 indexer</text>
        <!-- DSA 背景 -->
        <rect x="230" y="145" width="770" height="30" fill="#f0f7ff" stroke="#3b82f6" stroke-width="1"/>
        <!-- 离散高亮线 -->
        <g stroke="#2563eb" stroke-width="2.5" stroke-linecap="round">
            <line x1="245" y1="148" x2="245" y2="172"/>
            <line x1="290" y1="148" x2="290" y2="172"/>
            <line x1="350" y1="148" x2="350" y2="172"/>
            <line x1="410" y1="148" x2="410" y2="172"/>
            <line x1="480" y1="148" x2="480" y2="172"/>
            <line x1="540" y1="148" x2="540" y2="172"/>
            <line x1="600" y1="148" x2="600" y2="172"/>
            <line x1="670" y1="148" x2="670" y2="172"/>
            <line x1="730" y1="148" x2="730" y2="172"/>
            <line x1="790" y1="148" x2="790" y2="172"/>
            <line x1="850" y1="148" x2="850" y2="172"/>
            <line x1="910" y1="148" x2="910" y2="172"/>
            <line x1="950" y1="148" x2="950" y2="172"/>
            <line x1="980" y1="148" x2="980" y2="172"/>
        </g>
        <text x="615" y="190" class="annot-bold" fill="#1e40af" text-anchor="middle">动态稀疏选择 (2048 tokens)</text>
        <!-- 范围箭头 -->
        <line x1="230" y1="205" x2="1000" y2="205" stroke="#1f2937" stroke-width="1.2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
        <text x="615" y="220" class="annot-normal" text-anchor="middle">覆盖整段 1M，内容依赖的高相关原始 token (无损)</text>
    </g>
    <!-- ==================== 3. ② Local / SWA (最近窗口) ==================== -->
    <g transform="translate(0, 55)">
        <text x="100" y="270" class="label-bold" fill="#047857">② Local Window </text>
        <text x="100" y="287" class="label-sub" fill="#059669">最近几千 token 全精度</text>
        <text x="100" y="301" class="label-sub" fill="#059669">无损局部注意力</text>
        <!-- Local 区域 -->
        <rect x="880" y="255" width="120" height="30" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
        <text x="940" y="274" class="annot-bold" fill="#15803d" text-anchor="middle">4096 tok</text>
        <text x="615" y="274" class="annot-bold" fill="#15803d" text-anchor="middle">最近局部窗口，无损 →</text>
    </g>
  
    <!-- ==================== 5. 红线连接导向 ==================== -->
    <g>
        <!-- DSA 连接 -->
        <path d="M 1000 100 C 1050 140, 1060 180, 1003 210" fill="none" stroke="#ef4444" stroke-width="1.5"/>
        <!-- Local 连接 -->
        <path d="M 1000 100 C 1070 180, 1070 260, 990 290" fill="none" stroke="#ef4444" stroke-width="1.5"/>
    </g>
</svg>