<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1051 886" width="1051">
  <path fill="#a5d6a7" stroke="#444" d="M50 80h424.4v30H50zm10 0v30m404.4-30v30"/>
  <text x="75" y="100" font-family="monospace" font-size="13" fill="#222">
    <tspan x="75" y="100">containerQuery = (selector, test, stylesheet) =&gt;</tspan>
  </text>
  <rect x="87" y="128.5" width="139.2" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="102" y="148.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="102" y="148.5">let style = &apos;&apos;</tspan>
  </text>
  <rect x="87" y="177" width="131.4" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="102" y="197" font-family="monospace" font-size="13" fill="#222">
    <tspan x="102" y="197">let count = 0</tspan>
  </text>
  <rect x="87" y="225.5" width="303" height="30" rx="2" ry="2" fill="#C5E1A5" stroke="#444"/>
  <text x="102" y="245.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="102" y="245.5">document.querySelectorAll(selector)</tspan>
  </text>
  <rect x="87" y="274" width="131.4" height="30" rx="2" ry="2" fill="#C5E1A5" stroke="#444"/>
  <text x="102" y="294" font-family="monospace" font-size="13" fill="#222">
    <tspan x="102" y="294">.forEach(*())</tspan>
  </text>
  <circle cx="93" cy="298" r="4" fill="#ede7f6" stroke="#444"/>
  <path fill="#a5d6a7" stroke="#444" d="M124 322.5h112.4v30H124zm10 0v30m92.4-30v30"/>
  <text x="149" y="342.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="149" y="342.5">(tag) =&gt;</tspan>
  </text>
  <rect x="161" y="371" width="404.4" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="176" y="391" font-family="monospace" font-size="13" fill="#222">
    <tspan x="176" y="391">let attr = (selector + test).replace(/\W+/g, &apos;&apos;)</tspan>
  </text>
  <rect x="191" y="434.5" width="145.8" height="30" rx="3" ry="3" fill="#ce93d8" stroke="#444"/>
  <path fill="#ce93d8" stroke="#444" d="M161 449.5l30-30 30 30-30 30z"/>
  <text x="236" y="454.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="236" y="454.5">(test(tag))</tspan>
  </text>
  <text x="183.2" y="454.5" font-family="monospace" font-size="13" fill="#222">
    if
  </text>
  <text x="198.8" y="481.45" font-family="monospace" font-size="13" fill="#222">
    +
  </text>
  <text x="340.7" y="447.55" font-family="monospace" font-size="13" fill="#222">
    -
  </text>
  <rect x="211" y="489.5" width="443.4" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="226" y="509.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="226" y="509.5">let css = stylesheet.replace(/\$this/g, `[data-${a...</tspan>
  </text>
  <rect x="248" y="538" width="61.2" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="263" y="558" font-family="monospace" font-size="13" fill="#222">
    <tspan x="263" y="558">attr</tspan>
  </text>
  <rect x="248" y="586.5" width="69" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="263" y="606.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="263" y="606.5">count</tspan>
  </text>
  <rect x="211" y="635" width="61.2" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="226" y="655" font-family="monospace" font-size="13" fill="#222">
    <tspan x="226" y="655">attr</tspan>
  </text>
  <rect x="211" y="683.5" width="334.2" height="30" rx="2" ry="2" fill="#C5E1A5" stroke="#444"/>
  <text x="226" y="703.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="226" y="703.5">tag.setAttribute(`data-${attr}`, count)</tspan>
  </text>
  <rect x="211" y="732" width="123.6" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="226" y="752" font-family="monospace" font-size="13" fill="#222">
    <tspan x="226" y="752">style += css</tspan>
  </text>
  <rect x="211" y="780.5" width="84.6" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="226" y="800.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="226" y="800.5">count++</tspan>
  </text>
  <rect x="714.4" y="489.5" width="61.2" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <text x="729.4" y="509.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="729.4" y="509.5">attr</tspan>
  </text>
  <rect x="714.4" y="538" width="310.8" height="30" rx="2" ry="2" fill="#C5E1A5" stroke="#444"/>
  <text x="729.4" y="558" font-family="monospace" font-size="13" fill="#222">
    <tspan x="729.4" y="558">tag.setAttribute(`data-${attr}`, &apos;&apos;)</tspan>
  </text>
  <rect x="87" y="830.5" width="123.6" height="30" rx="3" ry="3" fill="#90caf9" stroke="#444"/>
  <path fill="#a5d6a7" stroke="#444" d="M210.6 840.5h5m-5 10h5m0-16l16 11-16 11z"/>
  <text x="102" y="850.5" font-family="monospace" font-size="13" fill="#222">
    <tspan x="102" y="850.5">return style</tspan>
  </text>
  <path fill="#fff59d" stroke="#444" d="M25 13.75h216.6v24H25z"/>
  <circle cx="25" cy="25" r="15" fill="#fff59d" stroke="#444"/>
  <text x="55" y="30" font-family="monospace" font-size="13" fill="#222">
    <tspan x="55" y="30">Program: source module</tspan>
  </text>
  <path d="M25 40v51q0 4 4 4h13" fill="none" stroke="#444"/>
  <path d="M42 92l8 3-8 3z" fill="#333"/>
  <path d="M68.5 110v29.5q0 4 4 4H79" fill="none" stroke="#444"/>
  <path d="M79 140.5l8 3-8 3z" fill="#333"/>
  <path d="M68.5 110v78q0 4 4 4H79" fill="none" stroke="#444"/>
  <path d="M79 189l8 3-8 3z" fill="#333"/>
  <path d="M68.5 110v126.5q0 4 4 4H79" fill="none" stroke="#444"/>
  <path d="M79 237.5l8 3-8 3z" fill="#333"/>
  <path d="M68.5 110v175q0 4 4 4H79" fill="none" stroke="#444"/>
  <path d="M79 286l8 3-8 3z" fill="#333"/>
  <path d="M105.5 304v29.5q0 4 4 4H124" fill="none" stroke="#444"/>
  false
  <path d="M142.5 352.5V382q0 4 4 4h6.5" fill="none" stroke="#444"/>
  <path d="M153 383l8 3-8 3z" fill="#333"/>
  <path d="M142.5 352.5v93q0 4 4 4h6.5" fill="none" stroke="#444"/>
  <path d="M153 446.5l8 3-8 3z" fill="#333"/>
  <path d="M191 479.5v21q0 4 4 4h8" fill="none" stroke="#444"/>
  <path d="M203 501.5l8 3-8 3z" fill="#333"/>
  <path d="M229.5 519.5V549q0 4 4 4h6.5" fill="none" stroke="#444"/>
  <path d="M240 550l8 3-8 3z" fill="#333"/>
  <path d="M229.5 519.5v78q0 4 4 4h6.5" fill="none" stroke="#444"/>
  <path d="M240 598.5l8 3-8 3z" fill="#333"/>
  <path d="M191 479.5V646q0 4 4 4h8" fill="none" stroke="#444"/>
  <path d="M203 647l8 3-8 3z" fill="#333"/>
  <path d="M191 479.5v215q0 4 4 4h8" fill="none" stroke="#444"/>
  <path d="M203 695.5l8 3-8 3z" fill="#333"/>
  <path d="M191 479.5V743q0 4 4 4h8" fill="none" stroke="#444"/>
  <path d="M203 744l8 3-8 3z" fill="#333"/>
  <path d="M191 479.5v312q0 4 4 4h8" fill="none" stroke="#444"/>
  <path d="M203 792.5l8 3-8 3z" fill="#333"/>
  <path d="M336.8 449.5h353.6q4 0 4 4v43q0 8 4 8h8" fill="none" stroke="#444"/>
  <path d="M706.4 501.5l8 3-8 3z" fill="#333"/>
  <path d="M336.8 449.5h353.6q4 0 4 4V545q0 8 4 8h8" fill="none" stroke="#444"/>
  <path d="M706.4 550l8 3-8 3z" fill="#333"/>
  <path d="M68.5 110v731.5q0 4 4 4H79" fill="none" stroke="#444"/>
  <path d="M79 842.5l8 3-8 3z" fill="#333"/>
</svg>