<svg viewBox="0 0 560 440" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="heroCollabTitle">
  <title id="heroCollabTitle">Hujjat ustida real-time hamkorlik</title>

  <rect x="40" y="36" width="360" height="368" rx="16" fill="#ffffff" stroke="#e5e7eb" stroke-width="2"/>
  <rect x="40" y="36" width="360" height="56" rx="16" fill="#eff6ff"/>
  <rect x="40" y="76" width="360" height="16" fill="#eff6ff"/>
  <circle cx="68" cy="64" r="6" fill="#dc2626"/>
  <circle cx="90" cy="64" r="6" fill="#d97706"/>
  <circle cx="112" cy="64" r="6" fill="#16a34a"/>

  <rect x="72" y="120" width="220" height="14" rx="7" fill="#1f2330"/>
  <rect x="72" y="150" width="288" height="10" rx="5" fill="#d1d5db"/>
  <rect x="72" y="170" width="288" height="10" rx="5" fill="#d1d5db"/>
  <rect x="72" y="190" width="200" height="10" rx="5" fill="#d1d5db"/>

  <rect x="72" y="222" width="288" height="10" rx="5" fill="#d1d5db"/>
  <rect x="72" y="242" width="150" height="10" rx="5" fill="#2563eb" opacity="0.18"/>
  <rect x="72" y="242" width="150" height="10" rx="5" fill="none" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="2 2"/>
  <rect x="72" y="262" width="288" height="10" rx="5" fill="#d1d5db"/>

  <rect x="72" y="300" width="288" height="10" rx="5" fill="#d1d5db"/>
  <rect x="72" y="320" width="230" height="10" rx="5" fill="#d1d5db"/>

  <!-- remote cursor tag: collaborator A -->
  <g>
    <path d="M228 236 L228 258 L236 250 L244 258 L248 254 L240 246 L248 246 Z" fill="#2563eb"/>
    <rect x="230" y="212" width="86" height="24" rx="6" fill="#2563eb"/>
    <text x="273" y="228" font-family="Inter, Arial, sans-serif" font-size="12" fill="#ffffff" text-anchor="middle">Dilnoza R.</text>
  </g>

  <!-- floating collaborator avatars -->
  <circle cx="420" cy="90" r="28" fill="#2563eb"/>
  <text x="420" y="96" font-family="Inter, Arial, sans-serif" font-size="18" fill="#ffffff" text-anchor="middle" font-weight="700">D</text>

  <circle cx="470" cy="150" r="24" fill="#0891b2"/>
  <text x="470" y="156" font-family="Inter, Arial, sans-serif" font-size="15" fill="#ffffff" text-anchor="middle" font-weight="700">A</text>

  <circle cx="445" cy="220" r="20" fill="#d97706"/>
  <text x="445" y="225" font-family="Inter, Arial, sans-serif" font-size="13" fill="#ffffff" text-anchor="middle" font-weight="700">S</text>

  <!-- Kril/Lotin toggle chip -->
  <g>
    <rect x="380" y="300" width="150" height="56" rx="12" fill="#ffffff" stroke="#e5e7eb" stroke-width="2"/>
    <text x="455" y="322" font-family="Inter, Arial, sans-serif" font-size="12" fill="#6b7280" text-anchor="middle">Transliteratsiya</text>
    <rect x="396" y="330" width="52" height="18" rx="9" fill="#2563eb"/>
    <text x="422" y="343" font-family="Inter, Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle" font-weight="700">LOTIN</text>
    <rect x="452" y="330" width="52" height="18" rx="9" fill="#eff6ff"/>
    <text x="478" y="343" font-family="Inter, Arial, sans-serif" font-size="10" fill="#2563eb" text-anchor="middle" font-weight="700">КРИЛЛ</text>
  </g>

  <circle cx="500" cy="390" r="4" fill="#bfdbfe"/>
  <circle cx="40" cy="410" r="4" fill="#bfdbfe"/>
  <circle cx="20" cy="150" r="4" fill="#bfdbfe"/>
</svg>
