<svg xmlns="http://www.w3.org/2000/svg" viewBox="70 55 1000 425" 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>

        <!-- HCA 黄色斑马纹平铺模式 -->
        <pattern id="hcaPattern" width="16" height="30" patternUnits="userSpaceOnUse">
            <rect width="15" height="30" fill="#fef9c3" stroke="none"/>
            <line x1="15.5" y1="0" x2="15.5" y2="30" stroke="#fde047" stroke-width="1"/>
        </pattern>
    </defs>

    <!-- 背景 -->
    <rect x="70" y="55" width="1000" height="425" 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. ① HCA ==================== -->
    <g transform="translate(0, 30)">
        <text x="100" y="150" class="label-bold" fill="#b45309">① HCA</text>
        <text x="100" y="167" class="label-sub" fill="#d97706">压缩率 m'=128</text>
        <text x="100" y="181" class="label-sub" fill="#d97706">≈ 7,812 entries</text>
        <text x="100" y="195" class="label-sub" fill="#d97706">全部 dense 访问</text>

        <!-- HCA 条形图 -->
        <rect x="230" y="140" width="770" height="30" fill="url(#hcaPattern)" stroke="#eab308" stroke-width="1"/>
        <text x="615" y="159" class="annot-bold" fill="#854d0e" text-anchor="middle">每个块 = 128 token 的摘要</text>

        <!-- 范围箭头 -->
        <line x1="230" y1="185" x2="1000" y2="185" stroke="#1f2937" stroke-width="1.2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
        <text x="615" y="200" class="annot-normal" text-anchor="middle">覆盖整段 1M(全局), 但每点位的精度严重打折</text>
    </g>

    <!-- ==================== 3. ② CSA ==================== -->
    <g transform="translate(0, 50)">
        <text x="100" y="240" class="label-bold" fill="#1d4ed8">② CSA</text>
        <text x="100" y="257" class="label-sub" fill="#2563eb">压缩率 m=4</text>
        <text x="100" y="271" class="label-sub" fill="#2563eb">≈ 250K entries</text>
        <text x="100" y="285" class="label-sub" fill="#2563eb">indexer top-k=1024</text>
        <text x="100" y="299" class="label-sub" fill="#2563eb">→ 实际访问 1024 块</text>

        <!-- CSA 背景框 -->
        <rect x="230" y="230" width="770" height="30" fill="#f0f7ff" stroke="#3b82f6" stroke-width="1"/>

        <!-- 离散的高亮色块 (已恢复为原始矩形) -->
        <g fill="#bfdbfe" stroke="#3b82f6" stroke-width="1.2">
            <rect x="250" y="233" width="10" height="24"/>
            <rect x="310" y="233" width="10" height="24"/>
            <rect x="370" y="233" width="10" height="24"/>
            <rect x="440" y="233" width="10" height="24"/>
            <rect x="500" y="233" width="10" height="24"/>
            <rect x="560" y="233" width="10" height="24"/>
            <rect x="630" y="233" width="10" height="24"/>
            <rect x="710" y="233" width="10" height="24"/>
            <rect x="780" y="233" width="10" height="24"/>
            <rect x="850" y="233" width="10" height="24"/>
            <rect x="910" y="233" width="10" height="24"/>
            <rect x="960" y="233" width="10" height="24"/>
        </g>
        <text x="615" y="275" class="annot-bold" fill="#1e40af" text-anchor="middle">Lightning Indexer 选出的 1,024 个最相关块摘要</text>

        <!-- 范围说明 -->
        <line x1="230" y1="290" x2="1000" y2="290" stroke="#1f2937" stroke-width="1.2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
        <text x="615" y="305" class="annot-normal" text-anchor="middle">覆盖范围 = 整段 1M</text>
    </g>

    <!-- ==================== 4. ③ SWA ==================== -->
    <g transform="translate(0, 70)">
        <text x="100" y="340" class="label-bold" fill="#047857">③ SWA</text>
        <text x="100" y="357" class="label-sub" fill="#059669">不压缩</text>
        <text x="100" y="371" class="label-sub" fill="#059669">最近 128 token</text>
        <text x="100" y="385" class="label-sub" fill="#059669">全精度 K/V</text>

        <!-- SWA 区域 -->
        <rect x="955" y="330" width="45" height="30" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
        <text x="977.5" y="349" class="annot-bold" fill="#15803d" text-anchor="middle">128 tok</text>

        <text x="615" y="349" class="annot-bold" fill="#15803d" text-anchor="middle">最近 128 token, 无损 →</text>
        <line x1="955" y1="375" x2="1000" y2="375" stroke="#1f2937" stroke-width="1.2" marker-end="url(#arrow)"/>
    </g>

    <!-- ==================== 5. 红线连接导向 ==================== -->
    <g>
        <!-- HCA 连接 -->
        <path d="M 1000 100 C 1040 120, 1040 150, 1003 185" fill="none" stroke="#ef4444" stroke-width="1.5"/>
        <!-- CSA 连接 -->
        <path d="M 1000 100 C 1060 160, 1060 230, 1003 295" fill="none" stroke="#ef4444" stroke-width="1.5"/>
        <!-- SWA 连接 -->
        <path d="M 1000 100 C 1080 200, 1060 330, 985 410" fill="none" stroke="#ef4444" stroke-width="1.5"/>
    </g>
</svg>