assets/how_it_should_work.drawio 1.svg

<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="302px" height="312px" viewBox="-0.5 -0.5 302 312" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2022-05-13T11:47:49.927Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/18.0.1 Chrome/100.0.4896.143 Electron/18.2.0 Safari/537.36&quot; version=&quot;18.0.1&quot; etag=&quot;q2MWe_jpCXLmVTWDKOaD&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;wR6W-IkKO1q8U9AS_w4q&quot;&gt;7ZpNl5owFIZ/jcv2QACF5ahju+k5c84s2i4zECWnSGiII86vbwLhI8SvUXB0qi4MN/Emue9DCBcG1mSZfaMwCX+QAEUDYATZwJoOADCBC/iPsGykxbaGhWVBcSBtteEZvyFpNKR1hQOUKg0ZIRHDiWr0SRwjnyk2SClZq83mJFJ7TeACaYZnH0a69ScOWFhYXceo7d8RXoRlz6Yha5awbCwNaQgDsm6YrMeBNaGEsKK0zCYoEtEr41L8b7ajthoYRTE75g9SiVcYreTc5LjYppwsioMHETN+FJOYG8chW0b8yOTFlFHypwoCH/6YklUcIOHeqOonJCI092YZ+YfXFP2gQIt0PXSzCghHCZElYnTDm6zrkJcRDxvRLm0URZDhV9U9lMovKndVD08E846BUWJqDaUjSSlwvK9e4+OqHlOyoj6STpoRP+TXNlRHDNIFYpojXmhEoTblgm4X17qLu0sE2+5H3Lbf/sS1P0zcOYnZTYpuAVUcExinyjw84Kk7nZ27zmfr7Kkn92jUlewHHHdHwfBdFPgRTFPs5+pCynRzgw+VhpbmI1d891Ki8mVKH3LPZpq3wIvt7V+0j+fDu9iyMLoDcTkgultAvHdtO7rDxb3jcrnrDRj1c6dwwG93tHhd0KJvRfpHJR/ADIuJTW9iq2JvQccBRvUBpy407fubS6FTpmjet1+9hmWmyY445qM8TFIhSHmVuDq62guIe/LOxv0onkyNp7EGFEMZU3GBEV7EgiWuBOIsjF8RZdiH0YOsWOIgEH8fU5TiN/iSuxJCJ2LQ+TSc8cCZCl8rRlIJisaYBHjOSWmbar6EQjuZlfPj40OZIvQRHFUp1faGxZW3jQ3QrC2gWcZuphTR9ikENIUe7godVMi4oEJ6InByV6itkGU7ikIX1EfP5U3v+rT1scGH6bMtBzeMmJywotPw74qUFV+KiPLV0DCdJMvjUNbz0kL8MpLIFqVLPprCa9Hg5kDg0dJAmM2U3OF5IDimCsLI0EjYtqlq52JOImFbHk4hwa8mXSttzef59BumM4h5IYyRZdHI+DpyPjM3rZzzmQtIO/kCdHCqJ7Wdk6Mn7CI0Z6WMzqeQq9PT3DJbcnn6ij/sSy09X0aLHgq5wF0v/fQ6Qi+3L72OyFilIUxE0ackTV+gEGQdYoaeE5jfwa8pTHblHNr5gt5jqaVv9KUK9BTL0sd/ksEpUhUqRlecwekotazlc9qZoe4yOEDP4BzBUwDTsDr19lJ0zDmpUdXirUkVyjD71Sj/ln2J8jRrHmwaB0+IYh4Usc7fbr7Q0p57dfaCxMWelJd03QpuO0C5Hii0a9Gwn1el+noWyg/r9ymL5vVrqdbjPw==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><path d="M 70 255 L 70 35" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 150 255 L 150 35" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 30 115 L 170 115" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 30 195 L 170 195" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 200 41.37 L 200 108.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 200 36.12 L 203.5 43.12 L 200 41.37 L 196.5 43.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 200 113.88 L 196.5 106.88 L 200 108.63 L 203.5 106.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 200 201.37 L 200 248.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 200 196.12 L 203.5 203.12 L 200 201.37 L 196.5 203.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 200 253.88 L 196.5 246.88 L 200 248.63 L 203.5 246.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 36.37 275 L 63.63 275" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 31.12 275 L 38.12 271.5 L 36.37 275 L 38.12 278.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 68.88 275 L 61.88 278.5 L 63.63 275 L 61.88 271.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 130 274.52 L 143.63 274.85" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 148.88 274.97 L 141.8 278.3 L 143.63 274.85 L 141.97 271.31 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 176.37 275 L 190 275" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 171.12 275 L 178.12 271.5 L 176.37 275 L 178.12 278.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="0" y="180" width="30" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 195px; margin-left: 15px;"><div data-drawio-colors="color: #787878; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 22px; font-family: Helvetica; color: rgb(120, 120, 120); line-height: 1.2; pointer-events: all; white-space: nowrap;">B</div></div></div></foreignObject><text x="15" y="202" fill="#787878" font-family="Helvetica" font-size="22px" text-anchor="middle">B</text></switch></g><rect x="0" y="100" width="30" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 115px; margin-left: 15px;"><div data-drawio-colors="color: #787878; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 22px; font-family: Helvetica; color: rgb(120, 120, 120); line-height: 1.2; pointer-events: all; white-space: nowrap;">A</div></div></div></foreignObject><text x="15" y="122" fill="#787878" font-family="Helvetica" font-size="22px" text-anchor="middle">A</text></switch></g><rect x="55" y="0" width="30" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 15px; margin-left: 70px;"><div data-drawio-colors="color: #787878; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 22px; font-family: Helvetica; color: rgb(120, 120, 120); line-height: 1.2; pointer-events: all; white-space: nowrap;">C</div></div></div></foreignObject><text x="70" y="22" fill="#787878" font-family="Helvetica" font-size="22px" text-anchor="middle">C</text></switch></g><rect x="135" y="0" width="30" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 15px; margin-left: 150px;"><div data-drawio-colors="color: #787878; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 22px; font-family: Helvetica; color: rgb(120, 120, 120); line-height: 1.2; pointer-events: all; white-space: nowrap;">D</div></div></div></foreignObject><text x="150" y="22" fill="#787878" font-family="Helvetica" font-size="22px" text-anchor="middle">D</text></switch></g><rect x="225" y="65" width="50" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 75px; margin-left: 250px;"><div data-drawio-colors="color: #FF0000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(255, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;"><font style="font-size: 15px;">top: 1</font></div></div></div></foreignObject><text x="250" y="80" fill="#FF0000" font-family="Helvetica" font-size="15px" text-anchor="middle">top: 1</text></switch></g><rect x="200" y="215" width="100" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 225px; margin-left: 250px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;"><font style="font-size: 15px;" color="#ff0000">bottom: 0.75</font></div></div></div></foreignObject><text x="250" y="229" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">bottom: 0.75</text></switch></g><rect x="20" y="290" width="60" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 300px; margin-left: 50px;"><div data-drawio-colors="color: #FF0000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(255, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">left: 0.5</div></div></div></foreignObject><text x="50" y="304" fill="#FF0000" font-family="Helvetica" font-size="15px" text-anchor="middle">left: 0.5</text></switch></g><rect x="120" y="290" width="80" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 300px; margin-left: 160px;"><div data-drawio-colors="color: #FF0000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(255, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">right: 0.25</div></div></div></foreignObject><text x="160" y="304" fill="#FF0000" font-family="Helvetica" font-size="15px" text-anchor="middle">right: 0.25</text></switch></g><path d="M 150 265 L 150 285 M 170 265 L 170 285 M 150 275 L 170 275" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 170 265 L 170 195" fill="none" stroke="#787878" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/><path d="M 150 265 L 150 255" fill="none" stroke="#787878" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>