{{-- Vault schematic — platform mechanics. viewBox 800x500 (16:10) --}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid meet" style="width:100%;height:100%;display:block;">
    <defs>
        <linearGradient id="bp-vault-bg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#ffffff"/>
            <stop offset="100%" stop-color="#fff7ed"/>
        </linearGradient>
        <pattern id="bp-vault-grid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
            <path d="M 24 0 L 0 0 0 24" fill="none" stroke="#f97316" stroke-width="0.4" opacity="0.15"/>
        </pattern>
    </defs>
    <rect width="800" height="500" fill="url(#bp-vault-bg)"/>
    <rect width="800" height="500" fill="url(#bp-vault-grid)"/>

    {{-- corner tick marks --}}
    <g stroke="#f97316" stroke-width="1" fill="none" opacity="0.6">
        <path d="M 20 32 L 20 20 L 32 20"/>
        <path d="M 768 20 L 780 20 L 780 32"/>
        <path d="M 780 468 L 780 480 L 768 480"/>
        <path d="M 32 480 L 20 480 L 20 468"/>
    </g>

    <text x="20" y="470" font-family="'IBM Plex Mono', monospace" font-size="11" fill="#94a3b8" letter-spacing="2">FIG_01 · RESERVE VAULT · REV 3.2</text>
    <line x1="20" y1="446" x2="780" y2="446" stroke="#94a3b8" stroke-width="0.4"/>

    {{-- Vault body --}}
    <g transform="translate(280, 100)">
        <rect x="0" y="0" width="240" height="260" rx="8" fill="none" stroke="#0f172a" stroke-width="2"/>
        <rect x="0" y="0" width="240" height="260" rx="8" fill="#f97316" opacity="0.08"/>
        <circle cx="120" cy="130" r="90" fill="none" stroke="#0f172a" stroke-width="2"/>
        <circle cx="120" cy="130" r="72" fill="none" stroke="#f97316" stroke-width="1" stroke-dasharray="3 3"/>
        <circle cx="120" cy="130" r="14" fill="#f97316"/>
        <circle cx="120" cy="130" r="14" fill="none" stroke="#0f172a" stroke-width="1.5"/>
        <line x1="120" y1="56" x2="120" y2="82" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
        <line x1="120" y1="178" x2="120" y2="204" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
        <line x1="46" y1="130" x2="72" y2="130" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
        <line x1="168" y1="130" x2="194" y2="130" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
    </g>

    {{-- Dimension line top --}}
    <line x1="280" y1="80" x2="520" y2="80" stroke="#94a3b8" stroke-width="0.6"/>
    <line x1="280" y1="75" x2="280" y2="85" stroke="#94a3b8" stroke-width="0.6"/>
    <line x1="520" y1="75" x2="520" y2="85" stroke="#94a3b8" stroke-width="0.6"/>
    <text x="400" y="72" font-family="'IBM Plex Mono', monospace" font-size="11" fill="#94a3b8" text-anchor="middle">RESERVE FLOAT</text>

    {{-- Callout: buyback --}}
    <line x1="520" y1="230" x2="600" y2="140" stroke="#f97316" stroke-width="0.8"/>
    <circle cx="520" cy="230" r="2.5" fill="#f97316"/>
    <text x="605" y="136" font-family="'IBM Plex Mono', monospace" font-size="12" fill="#f97316" font-weight="500">BUYBACK</text>
    <text x="605" y="152" font-family="'IBM Plex Mono', monospace" font-size="10" fill="#94a3b8">reclaim →</text>

    {{-- Callout: reserve --}}
    <line x1="280" y1="290" x2="200" y2="360" stroke="#f97316" stroke-width="0.8"/>
    <circle cx="280" cy="290" r="2.5" fill="#f97316"/>
    <text x="130" y="380" font-family="'IBM Plex Mono', monospace" font-size="12" fill="#f97316" font-weight="500">RESERVE</text>

    {{-- Reclaim arrows above vault --}}
    <path d="M 310 100 Q 340 60 370 100" fill="none" stroke="#f97316" stroke-width="1.2" stroke-dasharray="3 2"/>
    <path d="M 430 100 Q 460 60 490 100" fill="none" stroke="#f97316" stroke-width="1.2" stroke-dasharray="3 2"/>
    <polygon points="368,98 374,102 368,106" fill="#f97316"/>
    <polygon points="488,98 494,102 488,106" fill="#f97316"/>
</svg>