From 39f0ec8f53a75d1137117b4638e06f66617b1161 Mon Sep 17 00:00:00 2001
From: prescientmoon <git@moonythm.dev>
Date: Wed, 21 Feb 2024 08:32:04 +0100
Subject: [PATCH] Vizualise chords

---
 keyboards/kanata/laptop/README.md             |    7 +
 keyboards/kanata/laptop/lens.json             |   89 ++
 keyboards/kanata/laptop/lens.svg              | 1015 ++++++++++------
 keyboards/qmk/ferris-sweep/lens.json          |   89 ++
 keyboards/qmk/ferris-sweep/lens.svg           | 1045 +++++++++++------
 layout-lens/README.md                         |    6 +-
 layout-lens/src/config.ts                     |   37 +-
 layout-lens/src/layout.ts                     |   33 +-
 .../layouts/alpha_staggered_double_switch.ts  |    2 +-
 layout-lens/src/render.ts                     |  381 ++++--
 layout-lens/src/svg.ts                        |    4 +
 layout-lens/src/types.ts                      |   35 +-
 12 files changed, 1977 insertions(+), 766 deletions(-)
 create mode 100644 keyboards/kanata/laptop/README.md

diff --git a/keyboards/kanata/laptop/README.md b/keyboards/kanata/laptop/README.md
new file mode 100644
index 0000000..f4ec992
--- /dev/null
+++ b/keyboards/kanata/laptop/README.md
@@ -0,0 +1,7 @@
+# My laptop layout!
+
+![layout preview](./lens.svg)
+
+## Layout philosophy
+
+This is pretty much a port of my [ferris sweep layout](../../qmk/ferris-sweep).
diff --git a/keyboards/kanata/laptop/lens.json b/keyboards/kanata/laptop/lens.json
index 0b342d6..6bc0511 100644
--- a/keyboards/kanata/laptop/lens.json
+++ b/keyboards/kanata/laptop/lens.json
@@ -1,5 +1,11 @@
 {
   "layout": "alpha_staggered_double_switch",
+  "measurements": {
+    "keySize": 60,
+    "keyPadding": 2,
+    "keyCornerRadius": 5,
+    "keyStrokeWidth": 1.5
+  },
   "keys": [
     ["Q", "!", "1", "f1"],
     ["A", "&lt;", "6", "f6"],
@@ -34,5 +40,88 @@
     [":", "`", "🗑️", "🔆"],
     ["O", ";", "", "🔅"],
     ["'", "\"", ""]
+  ],
+  "chords": [
+    [
+      {
+        "input": ["Q", "W"],
+        "output": "⎋",
+        "fill": "#9ccaff"
+      },
+      {
+        "input": ["A", "R"],
+        "output": "⌥",
+        "fill": "#39f785"
+      },
+      {
+        "input": ["S", "T"],
+        "output": "⭾",
+        "fill": "#fdff80",
+        "fontSizeModifier": 0.8
+      },
+      {
+        "input": ["G", "M"],
+        "output": "⌫",
+        "fill": "#f9adff"
+      },
+      {
+        "input": ["N", "E"],
+        "output": "⊥",
+        "fill": "#f58e8e"
+      },
+      {
+        "input": ["I", "O"],
+        "output": "⌥",
+        "fill": "#39f785"
+      }
+    ],
+    [
+      {
+        "input": ["R", "S"],
+        "output": "⇧",
+        "fill": "#f9adff"
+      },
+      {
+        "input": ["E", "I"],
+        "output": "⇧",
+        "fill": "#f9adff"
+      }
+    ],
+    [
+      {
+        "input": ["R", "T"],
+        "output": "ctrl",
+        "fill": "#fdff80"
+      },
+      {
+        "input": ["N", "I"],
+        "output": "ctrl",
+        "fill": "#fdff80"
+      }
+    ],
+    [
+      {
+        "input": ["C", "P"],
+        "output": "📋",
+        "fill": "#fdff80"
+      },
+      {
+        "input": ["K", "I"],
+        "output": "❖",
+        "fill": "#f58e8e"
+      }
+    ],
+    [
+      {
+        "input": ["F", "T"],
+        "output": "↵",
+        "fill": "#9ccaff"
+      },
+      {
+        "input": ["N", "U"],
+        "output": "💾",
+        "fill": "#9ccaff"
+      }
+    ]
   ]
 }
diff --git a/keyboards/kanata/laptop/lens.svg b/keyboards/kanata/laptop/lens.svg
index 580ed36..32f5605 100644
--- a/keyboards/kanata/laptop/lens.svg
+++ b/keyboards/kanata/laptop/lens.svg
@@ -1,505 +1,862 @@
-<svg viewBox="-20 -20 688 280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="-20 -20 688 687.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g transform="">
     <rect width="56px" height="56px" x="2" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="30" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="30" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       Q
-    </text>
-    <text x="11.333333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="11.333333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       !
-    </text>
-    <text x="52.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="52.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       1
-    </text>
-    <text x="7.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="7.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f1
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="17" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="45" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="45" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       A
-    </text>
-    <text x="26.333333333333336" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="26.333333333333336" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       &lt;
-    </text>
-    <text x="67.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="67.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       6
-    </text>
-    <text x="22.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="22.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f6
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="47" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="75" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="75" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       X
-    </text>
-    <text x="56.333333333333336" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="56.333333333333336" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       &gt;
-    </text>
-    <text x="97.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="52.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="97.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="52.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f11
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="62" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="90" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="90" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       W
-    </text>
-    <text x="71.33333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="71.33333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       @
-    </text>
-    <text x="112.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="112.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       2
-    </text>
-    <text x="67.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="67.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f2
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="77" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="105" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="105" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       R
-    </text>
-    <text x="86.33333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="86.33333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       {
-    </text>
-    <text x="127.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="127.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       7
-    </text>
-    <text x="82.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="82.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f7
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="107" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="135" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="135" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       C
-    </text>
-    <text x="116.33333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="116.33333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       }
-    </text>
-    <text x="157.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="112.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="157.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="112.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f12
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="122" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="150" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="150" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       F
-    </text>
-    <text x="131.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="131.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       #
-    </text>
-    <text x="172.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="172.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       3
-    </text>
-    <text x="127.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="127.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f3
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="137" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="165" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="165" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       S
-    </text>
-    <text x="146.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="146.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       [
-    </text>
-    <text x="187.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="187.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       8
-    </text>
-    <text x="142.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="142.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f8
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="167" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="195" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="195" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       D
-    </text>
-    <text x="176.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="176.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ]
+    </text>\n<text x="217.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="172.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="217.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="172.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="182" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="210" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="210" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       P
-    </text>
-    <text x="191.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="191.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       $
-    </text>
-    <text x="232.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="232.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       4
-    </text>
-    <text x="187.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="187.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f4
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="197" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="225" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="225" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       T
-    </text>
-    <text x="206.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="206.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       (
-    </text>
-    <text x="247.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="247.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       9
-    </text>
-    <text x="202.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="202.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f9
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="227" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="255" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="255" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       V
-    </text>
-    <text x="236.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="236.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       )
+    </text>\n<text x="277.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="232.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="277.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="232.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="242" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="270" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="270" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       B
-    </text>
-    <text x="251.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="251.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       %
-    </text>
-    <text x="292.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="292.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       5
-    </text>
-    <text x="247.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="247.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f5
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="257" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="285" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="285" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       G
-    </text>
-    <text x="266.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="266.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ?
-    </text>
-    <text x="307.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="307.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       0
-    </text>
-    <text x="262.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="262.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f10
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="287" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="315" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="315" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       Z
+    </text>\n<text x="296.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="337.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="292.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="296.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="337.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="292.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="107" y="197" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="135" y="225" textLength="28px" fill="red" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="135" y="225" textLength="28px" fill="red" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ■
+    </text>\n<text x="116.33333333333333" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="157.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="112.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="116.33333333333333" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="157.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="112.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="296px" height="56px" x="167" y="197" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="315" y="225" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="315" y="225" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ␣
+    </text>\n<text x="216.33333333333334" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="433.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="196.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="216.33333333333334" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="433.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="196.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="467" y="197" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="495" y="225" textLength="28px" fill="blue" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="495" y="225" textLength="28px" fill="blue" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ■
+    </text>\n<text x="476.3333333333333" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="517.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="472.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="476.3333333333333" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="517.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="472.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="302" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="330" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="330" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       J
-    </text>
-    <text x="311.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="311.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ^
-    </text>
-    <text x="352.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="352.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       🏠
-    </text>
-    <text x="307.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="307.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       😱
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="317" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="345" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="345" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       M
-    </text>
-    <text x="326.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="326.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       -
-    </text>
-    <text x="367.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="367.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ◄
-    </text>
-    <text x="322.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="322.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ↩️
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="347" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="375" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="375" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       K
-    </text>
-    <text x="356.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="356.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       —
-    </text>
-    <text x="397.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="352.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="397.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="352.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🎮
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="362" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="390" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="390" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       L
-    </text>
-    <text x="371.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="371.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       &amp;
-    </text>
-    <text x="412.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="412.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ⏬
-    </text>
-    <text x="367.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="367.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       copy
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="377" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="405" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="405" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       N
-    </text>
-    <text x="386.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="386.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       _
-    </text>
-    <text x="427.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="427.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ▼
-    </text>
-    <text x="382.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="382.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       📋
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="407" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="435" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="435" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       H
-    </text>
-    <text x="416.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="416.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       |
-    </text>
-    <text x="457.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="412.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="457.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="412.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ✂️
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="422" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="450" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="450" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       U
-    </text>
-    <text x="431.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="431.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       *
-    </text>
-    <text x="472.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="472.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ⏫
-    </text>
-    <text x="427.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="427.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ⏩
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="437" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="465" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="465" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       E
-    </text>
-    <text x="446.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="446.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       /
-    </text>
-    <text x="487.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="487.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ▲
-    </text>
-    <text x="442.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="442.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ⏯️
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="467" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="495" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="495" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ,
-    </text>
-    <text x="476.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="476.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       \
-    </text>
-    <text x="517.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="472.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="517.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="472.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ⏪
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="482" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="510" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="510" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       Y
-    </text>
-    <text x="491.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="491.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ~
-    </text>
-    <text x="532.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="532.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       end
-    </text>
-    <text x="487.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="487.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔊
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="497" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="525" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="525" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       I
-    </text>
-    <text x="506.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="506.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       =
-    </text>
-    <text x="547.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="547.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ►
-    </text>
-    <text x="502.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="502.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔉
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="527" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="555" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="555" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       .
-    </text>
-    <text x="536.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="536.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       +
-    </text>
-    <text x="577.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="532.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="577.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="532.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔇
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="542" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="570" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="570" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       :
-    </text>
-    <text x="551.3333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="551.3333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       `
-    </text>
-    <text x="592.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="592.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       🗑️
-    </text>
-    <text x="547.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="547.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔆
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="557" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="585" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="585" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       O
-    </text>
-    <text x="566.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="566.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ;
-    </text>
-    <text x="607.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="562.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="607.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="562.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔅
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="587" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="615" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="615" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       '
-    </text>
-    <text x="596.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="596.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       "
+    </text>\n<text x="637.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="592.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="637.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="592.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
+  </g>\n<g transform="translate(0 265)">
+    <g transform="translate(20 20)">
+      \n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="20.598765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="53.46913580246914" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="73.19135802469137" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="79.76543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="99.48765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="106.06172839506173" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="125.78395061728396" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="129.7283950617284px" height="24.543209876543212px" x="73.19135802469137" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="132.35802469135803" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="152.08024691358025" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="158.6543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="178.37654320987653" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="184.9506172839506" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="211.2469135802469" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="230.96913580246914" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="237.54320987654322" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="257.2654320987655" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#9ccaff" stroke="undefined" stroke-width="0.6574074074074074px" d="M 0.8765432098765432 0.8765432098765432 L 27.172839506172842 0.8765432098765432 L 51.71604938271605 0.8765432098765432 L 51.71604938271605 25.419753086419757 L 25.419753086419757 25.419753086419757 L 0.8765432098765432 25.419753086419757 Z">
+        </path>\n<circle cx="13.148148148148149" cy="13.148148148148149" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="39.44444444444444" cy="13.148148148148149" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="26.296296296296298" y="13.148148148148149" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⎋
+        </text>
+      </g>\n<g>
+        <path fill="#39f785" stroke="undefined" stroke-width="0.6574074074074074px" d="M 7.450617283950618 27.172839506172842 L 33.74691358024692 27.172839506172842 L 58.29012345679013 27.172839506172842 L 58.29012345679013 51.71604938271605 L 31.99382716049383 51.71604938271605 L 7.450617283950618 51.71604938271605 Z">
+        </path>\n<circle cx="19.72222222222222" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="46.01851851851852" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="32.87037037037037" y="39.44444444444444" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⌥
+        </text>
+      </g>\n<g>
+        <path fill="#fdff80" stroke="undefined" stroke-width="0.6574074074074074px" d="M 60.043209876543216 27.172839506172842 L 86.3395061728395 27.172839506172842 L 110.88271604938272 27.172839506172842 L 110.88271604938272 51.71604938271605 L 84.58641975308643 51.71604938271605 L 60.043209876543216 51.71604938271605 Z">
+        </path>\n<circle cx="72.31481481481482" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="98.61111111111111" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="85.46296296296296" y="39.44444444444444" font-size="56%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⭾
+        </text>
+      </g>\n<g>
+        <path fill="#f9adff" stroke="undefined" stroke-width="0.6574074074074074px" d="M 112.63580246913581 27.172839506172842 L 138.9320987654321 27.172839506172842 L 163.47530864197532 27.172839506172842 L 163.47530864197532 51.71604938271605 L 137.179012345679 51.71604938271605 L 112.63580246913581 51.71604938271605 Z">
+        </path>\n<circle cx="124.90740740740742" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="151.20370370370372" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="138.05555555555557" y="39.44444444444444" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⌫
+        </text>
+      </g>\n<g>
+        <path fill="#f58e8e" stroke="undefined" stroke-width="0.6574074074074074px" d="M 165.22839506172838 27.172839506172842 L 191.52469135802468 27.172839506172842 L 216.0679012345679 27.172839506172842 L 216.0679012345679 51.71604938271605 L 189.7716049382716 51.71604938271605 L 165.22839506172838 51.71604938271605 Z">
+        </path>\n<circle cx="177.5" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="203.7962962962963" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="190.64814814814815" y="39.44444444444444" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⊥
+        </text>
+      </g>\n<g>
+        <path fill="#39f785" stroke="undefined" stroke-width="0.6574074074074074px" d="M 217.820987654321 27.172839506172842 L 244.1172839506173 27.172839506172842 L 268.6604938271605 27.172839506172842 L 268.6604938271605 51.71604938271605 L 242.3641975308642 51.71604938271605 L 217.820987654321 51.71604938271605 Z">
+        </path>\n<circle cx="230.0925925925926" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="256.3888888888889" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="243.24074074074076" y="39.44444444444444" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⌥
+        </text>
+      </g>
+    </g>\n<g transform="translate(344 20)">
+      <g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="0.8765432098765432" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="7.450617283950618" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="20.598765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="27.172839506172842" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="53.46913580246914" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="73.19135802469137" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="79.76543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="86.3395061728395" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="99.48765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="106.06172839506173" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="112.63580246913581" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="125.78395061728396" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="129.7283950617284px" height="24.543209876543212px" x="73.19135802469137" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="132.35802469135803" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="138.9320987654321" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="152.08024691358025" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="158.6543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="165.22839506172838" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="178.37654320987653" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="184.9506172839506" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="211.2469135802469" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="230.96913580246914" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="237.54320987654322" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="244.1172839506173" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="257.2654320987655" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#f9adff" stroke="undefined" stroke-width="0.6574074074074074px" d="M 33.74691358024692 27.172839506172842 L 60.043209876543216 27.172839506172842 L 84.58641975308643 27.172839506172842 L 84.58641975308643 51.71604938271605 L 58.29012345679013 51.71604938271605 L 33.74691358024692 51.71604938271605 Z">
+        </path>\n<circle cx="46.01851851851852" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="72.31481481481482" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="59.16666666666667" y="39.44444444444444" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⇧
+        </text>
+      </g>\n<g>
+        <path fill="#f9adff" stroke="undefined" stroke-width="0.6574074074074074px" d="M 191.52469135802468 27.172839506172842 L 217.820987654321 27.172839506172842 L 242.3641975308642 27.172839506172842 L 242.3641975308642 51.71604938271605 L 216.0679012345679 51.71604938271605 L 191.52469135802468 51.71604938271605 Z">
+        </path>\n<circle cx="203.7962962962963" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="230.0925925925926" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="216.94444444444446" y="39.44444444444444" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⇧
+        </text>
+      </g>
+    </g>\n<g transform="translate(20 147.5)">
+      <g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="0.8765432098765432" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="7.450617283950618" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="20.598765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="27.172839506172842" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="53.46913580246914" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="60.043209876543216" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="73.19135802469137" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="79.76543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="99.48765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="106.06172839506173" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="112.63580246913581" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="125.78395061728396" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="129.7283950617284px" height="24.543209876543212px" x="73.19135802469137" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="132.35802469135803" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="138.9320987654321" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="152.08024691358025" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="158.6543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="178.37654320987653" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="184.9506172839506" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="191.52469135802468" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="211.2469135802469" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="230.96913580246914" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="237.54320987654322" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="244.1172839506173" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="257.2654320987655" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#fdff80" stroke="undefined" stroke-width="0.6574074074074074px" d="M 33.74691358024692 27.172839506172842 L 86.3395061728395 27.172839506172842 L 110.88271604938272 27.172839506172842 L 110.88271604938272 51.71604938271605 L 58.29012345679013 51.71604938271605 L 33.74691358024692 51.71604938271605 Z">
+        </path>\n<circle cx="46.01851851851852" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="98.61111111111111" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="72.31481481481481" y="39.44444444444444" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ctrl
+        </text>
+      </g>\n<g>
+        <path fill="#fdff80" stroke="undefined" stroke-width="0.6574074074074074px" d="M 165.22839506172838 27.172839506172842 L 217.820987654321 27.172839506172842 L 242.3641975308642 27.172839506172842 L 242.3641975308642 51.71604938271605 L 189.7716049382716 51.71604938271605 L 165.22839506172838 51.71604938271605 Z">
+        </path>\n<circle cx="177.5" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="230.0925925925926" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="203.7962962962963" y="39.44444444444444" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ctrl
+        </text>
+      </g>
+    </g>\n<g transform="translate(344 147.5)">
+      <g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="0.8765432098765432" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="7.450617283950618" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="20.598765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="27.172839506172842" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="33.74691358024692" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="53.46913580246914" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="60.043209876543216" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="73.19135802469137" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="86.3395061728395" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="99.48765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="106.06172839506173" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="112.63580246913581" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="125.78395061728396" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="129.7283950617284px" height="24.543209876543212px" x="73.19135802469137" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="132.35802469135803" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="138.9320987654321" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="158.6543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="165.22839506172838" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="178.37654320987653" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="184.9506172839506" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="191.52469135802468" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="211.2469135802469" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="230.96913580246914" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="237.54320987654322" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="244.1172839506173" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="257.2654320987655" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#fdff80" stroke="undefined" stroke-width="0.6574074074074074px" d="M 46.89506172839506 53.46913580246914 L 79.76543209876543 0.8765432098765432 L 104.30864197530865 0.8765432098765432 L 104.30864197530865 25.419753086419757 L 71.43827160493828 78.01234567901236 L 46.89506172839506 78.01234567901236 Z">
+        </path>\n<circle cx="59.16666666666667" cy="65.74074074074075" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="92.03703703703704" cy="13.148148148148149" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="75.60185185185185" y="39.44444444444445" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          📋
+        </text>
+      </g>\n<g>
+        <path fill="#f58e8e" stroke="undefined" stroke-width="0.6574074074074074px" d="M 152.08024691358025 53.46913580246914 L 217.820987654321 27.172839506172842 L 242.3641975308642 27.172839506172842 L 242.3641975308642 51.71604938271605 L 176.62345679012347 78.01234567901236 L 152.08024691358025 78.01234567901236 Z">
+        </path>\n<circle cx="164.35185185185188" cy="65.74074074074075" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="230.0925925925926" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="197.22222222222223" y="52.592592592592595" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ❖
+        </text>
+      </g>
+    </g>\n<g transform="translate(182 275)">
+      <g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="0.8765432098765432" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="7.450617283950618" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="20.598765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="27.172839506172842" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="33.74691358024692" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="60.043209876543216" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="73.19135802469137" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="79.76543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="99.48765432098766" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="106.06172839506173" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="112.63580246913581" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="125.78395061728396" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="46.89506172839506" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="129.7283950617284px" height="24.543209876543212px" x="73.19135802469137" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="86.3395061728395" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="132.35802469135803" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="138.9320987654321" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="152.08024691358025" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="158.6543209876543" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="178.37654320987653" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="191.52469135802468" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="204.67283950617283" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="211.2469135802469" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="217.820987654321" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="230.96913580246914" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="237.54320987654322" y="0.8765432098765432" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="244.1172839506173" y="27.172839506172842" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.543209876543212px" height="24.543209876543212px" x="257.2654320987655" y="53.46913580246914" rx="2.191358024691358" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#9ccaff" stroke="undefined" stroke-width="0.6574074074074074px" d="M 53.46913580246914 0.8765432098765432 L 78.01234567901236 0.8765432098765432 L 110.88271604938272 27.172839506172842 L 110.88271604938272 51.71604938271605 L 86.3395061728395 51.71604938271605 L 53.46913580246914 25.419753086419757 Z">
+        </path>\n<circle cx="65.74074074074075" cy="13.148148148148149" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="98.61111111111111" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="82.17592592592592" y="26.296296296296298" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ↵
+        </text>
+      </g>\n<g>
+        <path fill="#9ccaff" stroke="undefined" stroke-width="0.6574074074074074px" d="M 165.22839506172838 27.172839506172842 L 184.9506172839506 0.8765432098765432 L 209.49382716049382 0.8765432098765432 L 209.49382716049382 25.419753086419757 L 189.7716049382716 51.71604938271605 L 165.22839506172838 51.71604938271605 Z">
+        </path>\n<circle cx="177.5" cy="39.44444444444444" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<circle cx="197.22222222222223" cy="13.148148148148149" r="3.272427983539095" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6574074074074074px" stroke-dasharray="1.7134392854146803">
+        </circle>\n<text x="187.36111111111111" y="26.296296296296298" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          💾
+        </text>
+      </g>
+    </g>
   </g>
 </svg>
\ No newline at end of file
diff --git a/keyboards/qmk/ferris-sweep/lens.json b/keyboards/qmk/ferris-sweep/lens.json
index 9231e9f..66e7b7a 100644
--- a/keyboards/qmk/ferris-sweep/lens.json
+++ b/keyboards/qmk/ferris-sweep/lens.json
@@ -1,5 +1,11 @@
 {
   "layout": "split_3x5_2",
+  "measurements": {
+    "keySize": 60,
+    "keyPadding": 2,
+    "keyCornerRadius": 5,
+    "keyStrokeWidth": 1.5
+  },
   "keys": [
     ["Q", "!", "1", "f1"],
     ["A", "&lt;", "6", "f6"],
@@ -35,5 +41,88 @@
     [":", "`", "🗑️", "🔆"],
     ["O", ";", "", "🔅"],
     ["'", "\"", ""]
+  ],
+  "chords": [
+    [
+      {
+        "input": ["Q", "W"],
+        "output": "⎋",
+        "fill": "#9ccaff"
+      },
+      {
+        "input": ["A", "R"],
+        "output": "⌥",
+        "fill": "#39f785"
+      },
+      {
+        "input": ["S", "T"],
+        "output": "⭾",
+        "fill": "#fdff80",
+        "fontSizeModifier": 0.8
+      },
+      {
+        "input": ["G", "M"],
+        "output": "⌫",
+        "fill": "#f9adff"
+      },
+      {
+        "input": ["N", "E"],
+        "output": "⊥",
+        "fill": "#f58e8e"
+      },
+      {
+        "input": ["I", "O"],
+        "output": "⌥",
+        "fill": "#39f785"
+      }
+    ],
+    [
+      {
+        "input": ["R", "S"],
+        "output": "⇧",
+        "fill": "#f9adff"
+      },
+      {
+        "input": ["E", "I"],
+        "output": "⇧",
+        "fill": "#f9adff"
+      }
+    ],
+    [
+      {
+        "input": ["R", "T"],
+        "output": "ctrl",
+        "fill": "#fdff80"
+      },
+      {
+        "input": ["N", "I"],
+        "output": "ctrl",
+        "fill": "#fdff80"
+      }
+    ],
+    [
+      {
+        "input": ["C", "P"],
+        "output": "📋",
+        "fill": "#fdff80"
+      },
+      {
+        "input": ["K", "I"],
+        "output": "❖",
+        "fill": "#f58e8e"
+      }
+    ],
+    [
+      {
+        "input": ["F", "T"],
+        "output": "↵",
+        "fill": "#9ccaff"
+      },
+      {
+        "input": ["N", "U"],
+        "output": "💾",
+        "fill": "#9ccaff"
+      }
+    ]
   ]
 }
diff --git a/keyboards/qmk/ferris-sweep/lens.svg b/keyboards/qmk/ferris-sweep/lens.svg
index aff835b..1e4aa62 100644
--- a/keyboards/qmk/ferris-sweep/lens.svg
+++ b/keyboards/qmk/ferris-sweep/lens.svg
@@ -1,518 +1,885 @@
-<svg viewBox="-20 -20 760 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="-20 -20 760 950" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g transform="">
     <rect width="56px" height="56px" x="2" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="30" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="30" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       Q
-    </text>
-    <text x="11.333333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="11.333333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       !
-    </text>
-    <text x="52.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="52.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       1
-    </text>
-    <text x="7.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="7.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f1
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="2" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="30" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="30" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       A
-    </text>
-    <text x="11.333333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="11.333333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       &lt;
-    </text>
-    <text x="52.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="52.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       6
-    </text>
-    <text x="7.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="7.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f6
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="2" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="30" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="30" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       X
-    </text>
-    <text x="11.333333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="11.333333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       &gt;
-    </text>
-    <text x="52.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="7.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="52.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="7.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f11
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="62" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="90" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="90" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       W
-    </text>
-    <text x="71.33333333333333" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="71.33333333333333" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       @
-    </text>
-    <text x="112.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="112.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       2
-    </text>
-    <text x="67.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="67.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f2
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="62" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="90" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="90" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       R
-    </text>
-    <text x="71.33333333333333" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="71.33333333333333" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       {
-    </text>
-    <text x="112.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="112.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       7
-    </text>
-    <text x="67.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="67.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f7
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="62" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="90" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="90" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       C
-    </text>
-    <text x="71.33333333333333" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="71.33333333333333" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       }
-    </text>
-    <text x="112.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="67.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="112.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="67.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f12
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="122" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="150" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="150" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       F
-    </text>
-    <text x="131.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="131.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       #
-    </text>
-    <text x="172.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="172.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       3
-    </text>
-    <text x="127.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="127.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f3
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="122" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="150" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="150" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       S
-    </text>
-    <text x="131.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="131.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       [
-    </text>
-    <text x="172.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="172.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       8
-    </text>
-    <text x="127.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="127.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f8
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="122" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="150" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="150" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       D
-    </text>
-    <text x="131.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="131.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ]
+    </text>\n<text x="172.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="127.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="172.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="127.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="182" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="210" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="210" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       P
-    </text>
-    <text x="191.33333333333334" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="191.33333333333334" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       $
-    </text>
-    <text x="232.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="232.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       4
-    </text>
-    <text x="187.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="187.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f4
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="182" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="210" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="210" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       T
-    </text>
-    <text x="191.33333333333334" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="191.33333333333334" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       (
-    </text>
-    <text x="232.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="232.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       9
-    </text>
-    <text x="187.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="187.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f9
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="182" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="210" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="210" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       V
-    </text>
-    <text x="191.33333333333334" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="191.33333333333334" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       )
+    </text>\n<text x="232.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="187.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="232.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="187.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="242" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="270" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="270" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       B
-    </text>
-    <text x="251.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="251.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       %
-    </text>
-    <text x="292.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="292.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       5
-    </text>
-    <text x="247.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="247.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f5
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="242" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="270" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="270" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       G
-    </text>
-    <text x="251.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="251.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ?
-    </text>
-    <text x="292.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="292.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       0
-    </text>
-    <text x="247.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="247.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       f10
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="242" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="270" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="270" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       Z
+    </text>\n<text x="251.33333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="292.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="247.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="251.33333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="292.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="247.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="rotate(15, 240, 300)">
+  </g>\n<g transform="rotate(15, 240, 300)">
     <rect width="56px" height="56px" x="212" y="272" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="240" y="300" textLength="28px" fill="red" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="240" y="300" textLength="28px" fill="red" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ■
+    </text>\n<text x="221.33333333333334" y="281.3333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="262.4" y="281.3333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="217.6" y="318.6666666666667" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="221.33333333333334" y="281.3333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="262.4" y="281.3333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="217.6" y="318.6666666666667" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="rotate(15, 297.95554957734413, 315.5291427061512)">
+  </g>\n<g transform="rotate(15, 297.95554957734413, 315.5291427061512)">
     <rect width="56px" height="56px" x="269.95554957734413" y="287.5291427061512" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="297.95554957734413" y="315.5291427061512" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="297.95554957734413" y="315.5291427061512" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ␣
+    </text>\n<text x="279.28888291067744" y="296.86247603948453" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="320.3555495773441" y="296.86247603948453" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="275.55554957734415" y="334.1958093728179" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="279.28888291067744" y="296.86247603948453" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="320.3555495773441" y="296.86247603948453" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="275.55554957734415" y="334.1958093728179" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="rotate(-15, 422.04445042265587, 315.5291427061512)">
+  </g>\n<g transform="rotate(-15, 422.04445042265587, 315.5291427061512)">
     <rect width="56px" height="56px" x="394.04445042265587" y="287.5291427061512" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="422.04445042265587" y="315.5291427061512" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="422.04445042265587" y="315.5291427061512" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ⇧
+    </text>\n<text x="403.3777837559892" y="296.86247603948453" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="444.44445042265585" y="296.86247603948453" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="399.6444504226559" y="334.1958093728179" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="403.3777837559892" y="296.86247603948453" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="444.44445042265585" y="296.86247603948453" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="399.6444504226559" y="334.1958093728179" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="rotate(-15, 480, 300)">
+  </g>\n<g transform="rotate(-15, 480, 300)">
     <rect width="56px" height="56px" x="452" y="272" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="480" y="300" textLength="28px" fill="blue" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="480" y="300" textLength="28px" fill="blue" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ■
+    </text>\n<text x="461.3333333333333" y="281.3333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="502.4" y="281.3333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="457.6" y="318.6666666666667" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="461.3333333333333" y="281.3333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="502.4" y="281.3333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="457.6" y="318.6666666666667" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="422" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="450" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="450" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       J
-    </text>
-    <text x="431.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="431.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ^
-    </text>
-    <text x="472.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="472.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       🏠
-    </text>
-    <text x="427.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="427.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       😱
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="422" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="450" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="450" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       M
-    </text>
-    <text x="431.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="431.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       -
-    </text>
-    <text x="472.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="472.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ◄
-    </text>
-    <text x="427.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="427.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ↩️
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="422" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="450" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="450" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       K
-    </text>
-    <text x="431.3333333333333" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="431.3333333333333" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       —
-    </text>
-    <text x="472.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="427.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="472.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="427.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🎮
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="482" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="510" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="510" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       L
-    </text>
-    <text x="491.3333333333333" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="491.3333333333333" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       &amp;
-    </text>
-    <text x="532.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="532.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ⏬
-    </text>
-    <text x="487.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="487.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       copy
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="482" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="510" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="510" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       N
-    </text>
-    <text x="491.3333333333333" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="491.3333333333333" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       _
-    </text>
-    <text x="532.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="532.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ▼
-    </text>
-    <text x="487.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="487.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       📋
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="482" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="510" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="510" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       H
-    </text>
-    <text x="491.3333333333333" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="491.3333333333333" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       |
-    </text>
-    <text x="532.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="487.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="532.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="487.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ✂️
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="542" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="570" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="570" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       U
-    </text>
-    <text x="551.3333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="551.3333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       *
-    </text>
-    <text x="592.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="592.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ⏫
-    </text>
-    <text x="547.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="547.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ⏩
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="542" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="570" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="570" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       E
-    </text>
-    <text x="551.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="551.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       /
-    </text>
-    <text x="592.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="592.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ▲
-    </text>
-    <text x="547.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="547.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ⏯️
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="542" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="570" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="570" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       ,
-    </text>
-    <text x="551.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="551.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       \
-    </text>
-    <text x="592.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="547.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="592.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="547.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ⏪
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="602" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="630" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="630" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       Y
-    </text>
-    <text x="611.3333333333334" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="611.3333333333334" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ~
-    </text>
-    <text x="652.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="652.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       end
-    </text>
-    <text x="607.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="607.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔊
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="602" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="630" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="630" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       I
-    </text>
-    <text x="611.3333333333334" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="611.3333333333334" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       =
-    </text>
-    <text x="652.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="652.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       ►
-    </text>
-    <text x="607.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="607.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔉
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="602" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="630" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="630" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       .
-    </text>
-    <text x="611.3333333333334" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="611.3333333333334" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       +
-    </text>
-    <text x="652.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="607.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="652.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="607.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔇
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="662" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="690" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="690" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       :
-    </text>
-    <text x="671.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="671.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       `
-    </text>
-    <text x="712.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="712.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
       🗑️
-    </text>
-    <text x="667.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="667.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔆
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="662" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="690" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="690" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       O
-    </text>
-    <text x="671.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="671.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       ;
-    </text>
-    <text x="712.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="667.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="712.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="667.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       🔅
     </text>
-  </g>
-  <g transform="">
+  </g>\n<g transform="">
     <rect width="56px" height="56px" x="662" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
-    </rect>
-    <text x="690" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
+    </rect>\n<text x="690" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
       '
-    </text>
-    <text x="671.3333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="671.3333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
       "
+    </text>\n<text x="712.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
+    </text>\n<text x="667.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
     </text>
-    <text x="712.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
-    </text>
-    <text x="667.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-    </text>
+  </g>\n<g transform="translate(0 370)">
+    <g transform="translate(20 20)">
+      \n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="0.8888888888888888" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 106.66666666666666, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="94.22222222222221" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 132.42468870104182, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="119.98024425659737" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 187.57531129895816, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="175.1308668545137" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 213.33333333333331, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="200.88888888888886" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="0.8888888888888888" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#9ccaff" stroke="undefined" stroke-width="0.6666666666666666px" d="M 0.8888888888888888 27.555555555555554 L 27.555555555555554 14.222222222222221 L 52.44444444444444 14.222222222222221 L 52.44444444444444 39.11111111111111 L 25.777777777777775 52.44444444444444 L 0.8888888888888888 52.44444444444444 Z">
+        </path>\n<circle cx="13.333333333333332" cy="40" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="40" cy="26.666666666666664" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="26.666666666666664" y="33.33333333333333" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⎋
+        </text>
+      </g>\n<g>
+        <path fill="#39f785" stroke="undefined" stroke-width="0.6666666666666666px" d="M 0.8888888888888888 54.222222222222214 L 27.555555555555554 40.888888888888886 L 52.44444444444444 40.888888888888886 L 52.44444444444444 65.77777777777777 L 25.777777777777775 79.1111111111111 L 0.8888888888888888 79.1111111111111 Z">
+        </path>\n<circle cx="13.333333333333332" cy="66.66666666666666" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="40" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="26.666666666666664" y="59.99999999999999" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⌥
+        </text>
+      </g>\n<g>
+        <path fill="#fdff80" stroke="undefined" stroke-width="0.6666666666666666px" d="M 54.222222222222214 27.555555555555554 L 79.1111111111111 27.555555555555554 L 105.77777777777777 40.888888888888886 L 105.77777777777777 65.77777777777777 L 80.88888888888889 65.77777777777777 L 54.222222222222214 52.44444444444444 Z">
+        </path>\n<circle cx="66.66666666666666" cy="40" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="93.33333333333333" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="80" y="46.666666666666664" font-size="56%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⭾
+        </text>
+      </g>\n<g>
+        <path fill="#f9adff" stroke="undefined" stroke-width="0.6666666666666666px" d="M 107.55555555555554 54.222222222222214 L 187.55555555555554 54.222222222222214 L 212.44444444444443 54.222222222222214 L 212.44444444444443 79.1111111111111 L 132.44444444444443 79.1111111111111 L 107.55555555555554 79.1111111111111 Z">
+        </path>\n<circle cx="119.99999999999999" cy="66.66666666666666" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="200" cy="66.66666666666666" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="160" y="66.66666666666666" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⌫
+        </text>
+      </g>\n<g>
+        <path fill="#f58e8e" stroke="undefined" stroke-width="0.6666666666666666px" d="M 214.2222222222222 40.888888888888886 L 240.88888888888886 27.555555555555554 L 265.7777777777777 27.555555555555554 L 265.7777777777777 52.44444444444444 L 239.1111111111111 65.77777777777777 L 214.2222222222222 65.77777777777777 Z">
+        </path>\n<circle cx="226.66666666666666" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="253.33333333333331" cy="40" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="240" y="46.666666666666664" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⊥
+        </text>
+      </g>\n<g>
+        <path fill="#39f785" stroke="undefined" stroke-width="0.6666666666666666px" d="M 267.55555555555554 40.888888888888886 L 292.44444444444446 40.888888888888886 L 319.1111111111111 54.222222222222214 L 319.1111111111111 79.1111111111111 L 294.22222222222223 79.1111111111111 L 267.55555555555554 65.77777777777777 Z">
+        </path>\n<circle cx="279.99999999999994" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="306.66666666666663" cy="66.66666666666666" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="293.33333333333326" y="59.99999999999999" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⌥
+        </text>
+      </g>
+    </g>\n<g transform="translate(380 20)">
+      <g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="0.8888888888888888" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="40.888888888888886" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 106.66666666666666, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="94.22222222222221" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 132.42468870104182, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="119.98024425659737" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 187.57531129895816, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="175.1308668545137" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 213.33333333333331, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="200.88888888888886" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="40.888888888888886" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="0.8888888888888888" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#f9adff" stroke="undefined" stroke-width="0.6666666666666666px" d="M 27.555555555555554 40.888888888888886 L 54.222222222222214 27.555555555555554 L 79.1111111111111 27.555555555555554 L 79.1111111111111 52.44444444444444 L 52.44444444444444 65.77777777777777 L 27.555555555555554 65.77777777777777 Z">
+        </path>\n<circle cx="40" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="66.66666666666666" cy="40" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="53.33333333333333" y="46.666666666666664" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⇧
+        </text>
+      </g>\n<g>
+        <path fill="#f9adff" stroke="undefined" stroke-width="0.6666666666666666px" d="M 240.88888888888886 27.555555555555554 L 265.7777777777777 27.555555555555554 L 292.44444444444446 40.888888888888886 L 292.44444444444446 65.77777777777777 L 267.55555555555554 65.77777777777777 L 240.88888888888886 52.44444444444444 Z">
+        </path>\n<circle cx="253.33333333333331" cy="40" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="279.99999999999994" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="266.66666666666663" y="46.666666666666664" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ⇧
+        </text>
+      </g>
+    </g>\n<g transform="translate(20 200)">
+      <g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="0.8888888888888888" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 106.66666666666666, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="94.22222222222221" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 132.42468870104182, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="119.98024425659737" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 187.57531129895816, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="175.1308668545137" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 213.33333333333331, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="200.88888888888886" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="0.8888888888888888" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#fdff80" stroke="undefined" stroke-width="0.6666666666666666px" d="M 27.555555555555554 40.888888888888886 L 80.88888888888889 40.888888888888886 L 105.77777777777777 40.888888888888886 L 105.77777777777777 65.77777777777777 L 52.44444444444444 65.77777777777777 L 27.555555555555554 65.77777777777777 Z">
+        </path>\n<circle cx="40" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="93.33333333333333" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="66.66666666666666" y="53.33333333333333" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ctrl
+        </text>
+      </g>\n<g>
+        <path fill="#fdff80" stroke="undefined" stroke-width="0.6666666666666666px" d="M 214.2222222222222 40.888888888888886 L 267.55555555555554 40.888888888888886 L 292.44444444444446 40.888888888888886 L 292.44444444444446 65.77777777777777 L 239.1111111111111 65.77777777777777 L 214.2222222222222 65.77777777777777 Z">
+        </path>\n<circle cx="226.66666666666666" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="279.99999999999994" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="253.33333333333331" y="53.33333333333333" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ctrl
+        </text>
+      </g>
+    </g>\n<g transform="translate(380 200)">
+      <g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="40.888888888888886" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="0.8888888888888888" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="40.888888888888886" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 106.66666666666666, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="94.22222222222221" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 132.42468870104182, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="119.98024425659737" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 187.57531129895816, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="175.1308668545137" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 213.33333333333331, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="200.88888888888886" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="40.888888888888886" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="0.8888888888888888" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#fdff80" stroke="undefined" stroke-width="0.6666666666666666px" d="M 27.555555555555554 67.55555555555554 L 80.88888888888889 14.222222222222221 L 105.77777777777777 14.222222222222221 L 105.77777777777777 39.11111111111111 L 52.44444444444444 92.44444444444443 L 27.555555555555554 92.44444444444443 Z">
+        </path>\n<circle cx="40" cy="79.99999999999999" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="93.33333333333333" cy="26.666666666666664" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="66.66666666666666" y="53.33333333333333" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          📋
+        </text>
+      </g>\n<g>
+        <path fill="#f58e8e" stroke="undefined" stroke-width="0.6666666666666666px" d="M 187.55555555555554 80.88888888888889 L 267.55555555555554 40.888888888888886 L 292.44444444444446 40.888888888888886 L 292.44444444444446 65.77777777777777 L 212.44444444444443 105.77777777777777 L 187.55555555555554 105.77777777777777 Z">
+        </path>\n<circle cx="200" cy="93.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="279.99999999999994" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="239.99999999999997" y="73.33333333333333" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ❖
+        </text>
+      </g>
+    </g>\n<g transform="translate(200 380)">
+      <g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="0.8888888888888888" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="40.888888888888886" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="27.555555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="54.222222222222214" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="80.88888888888889" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="107.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 106.66666666666666, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="94.22222222222221" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(15, 132.42468870104182, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="119.98024425659737" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 187.57531129895816, 140.2351745360672)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="175.1308668545137" y="127.79073009162276" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="rotate(-15, 213.33333333333331, 133.33333333333331)">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="200.88888888888886" y="120.88888888888887" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="187.55555555555554" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="214.2222222222222" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="240.88888888888886" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="14.222222222222221" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="40.888888888888886" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="267.55555555555554" y="67.55555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="27.555555555555554" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="54.222222222222214" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g transform="">
+        <rect width="24.888888888888886px" height="24.888888888888886px" x="294.22222222222223" y="80.88888888888889" rx="2.2222222222222223" fill="gray" stroke="#000000" stroke-width="0px">
+        </rect>
+      </g>\n<g>
+        <path fill="#9ccaff" stroke="undefined" stroke-width="0.6666666666666666px" d="M 54.222222222222214 0.8888888888888888 L 79.1111111111111 0.8888888888888888 L 105.77777777777777 40.888888888888886 L 105.77777777777777 65.77777777777777 L 80.88888888888889 65.77777777777777 L 54.222222222222214 25.777777777777775 Z">
+        </path>\n<circle cx="66.66666666666666" cy="13.333333333333332" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="93.33333333333333" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="80" y="33.33333333333333" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          ↵
+        </text>
+      </g>\n<g>
+        <path fill="#9ccaff" stroke="undefined" stroke-width="0.6666666666666666px" d="M 214.2222222222222 40.888888888888886 L 240.88888888888886 0.8888888888888888 L 265.7777777777777 0.8888888888888888 L 265.7777777777777 25.777777777777775 L 239.1111111111111 65.77777777777777 L 214.2222222222222 65.77777777777777 Z">
+        </path>\n<circle cx="226.66666666666666" cy="53.33333333333333" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<circle cx="253.33333333333331" cy="13.333333333333332" r="3.318518518518518" fill="gray" stroke="gray" fill-opacity="0.1" stroke-opacity="0.6" stroke-width="0.6666666666666666px" stroke-dasharray="1.7375722330965766">
+        </circle>\n<text x="240" y="33.33333333333333" font-size="70%" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+          💾
+        </text>
+      </g>
+    </g>
   </g>
 </svg>
\ No newline at end of file
diff --git a/layout-lens/README.md b/layout-lens/README.md
index 1633d30..b626e51 100644
--- a/layout-lens/README.md
+++ b/layout-lens/README.md
@@ -1,13 +1,15 @@
 # Layout-lens
 
-> NOTE: this project cannot yet render combos, which will change soon
-
 This is a quickly-thrown-together set of scripts for generating SVG previews of keyboard layouts. For example configurations check out any config in the `keyboards` directory of this repository. To run this on your config simply do
 
 ```sh
 nix run github:mateiadrielrafael/keyswirl#layout-lens my-config.json out.svg
 ```
 
+## Future improvements
+
+This project does not render chords involving rotated keys properly. Moreover, chord definitions in general can be a little verboose.
+
 ## Technical details
 
 The code isn't very well written (i.e.: no error handling, only contains the features I needed myself, etc). I'd rewrite this in a better language given the motivation, but the current version does the job just fine. If you want to contribute a layout preset, add it to [./src/layouts](./src/layouts) and then modify the enum in [./src/types.ts](./src/types.ts) to know about it's existence.
diff --git a/layout-lens/src/config.ts b/layout-lens/src/config.ts
index 09b12eb..7b569a3 100644
--- a/layout-lens/src/config.ts
+++ b/layout-lens/src/config.ts
@@ -9,12 +9,13 @@ import {
   SpecialSymbols,
   LayoutMeasurements,
   LayoutColorscheme,
+  ChordConfig,
+  ElementLayout,
 } from "./types";
 import split_3x5_2 from "./layouts/split_3x5_2";
 import alpha_staggered_double_switch from "./layouts/alpha_staggered_double_switch";
 
 const defaultMeasurements: LayoutMeasurements = {
-  imagePadding: 20,
   keySize: 60,
   keyPadding: 2,
   keyCornerRadius: 5,
@@ -30,6 +31,20 @@ const defaultColorscheme: LayoutColorscheme = {
   blLayerColor: "purple",
 };
 
+const defaultElementLayout: ElementLayout = {
+  mainToChordsGap: 10,
+  imagePadding: 20,
+  groupsPerRow: 2,
+  groupPadding: 20,
+};
+
+function parseSymbol(s: string) {
+  const special = SpecialSymbols[s];
+  const isNumber = String(parseInt(s)) == s;
+  if (isNumber || special === undefined) return s;
+  return special as SpecialSymbols;
+}
+
 export function parseConfig(input: string): Config {
   const parsed = JSON.parse(input);
 
@@ -42,16 +57,20 @@ export function parseConfig(input: string): Config {
   }
 
   return {
-    keys: (parsed.keys as string[][]).map((k) =>
-      k.map((s) => {
-        const special = SpecialSymbols[s];
-        const isNumber = String(parseInt(s)) == s;
-        if (isNumber || special === undefined) return s;
-        return special as SpecialSymbols;
-      }),
+    keys: (parsed.keys as string[][]).map((k) => k.map(parseSymbol)),
+    chords: ((parsed.chords as ChordConfig[][]) || []).map((group) =>
+      group.map((chord) => ({
+        ...chord,
+        input: chord.input.map((k) => parseSymbol(k as string)),
+        output: parseSymbol(chord.output as string),
+      })),
     ),
     colorscheme: { ...defaultColorscheme, ...parsed.colorscheme },
     measurements: { ...defaultMeasurements, ...parsed.measurements },
+    elementLayout: {
+      ...defaultElementLayout,
+      ...parsed.elementLayout,
+    },
     layout,
   };
 }
@@ -77,6 +96,8 @@ export function makeLayout(config: Config): Layout {
     keys: config.keys.map((k) => key(...(k as Arguments<typeof key>))),
     colorscheme: config.colorscheme,
     measurements: config.measurements,
+    elementLayout: config.elementLayout,
+    chords: config.chords,
     visual: predefined.visual,
     size: predefined.size,
   };
diff --git a/layout-lens/src/layout.ts b/layout-lens/src/layout.ts
index 75df055..ac34a46 100644
--- a/layout-lens/src/layout.ts
+++ b/layout-lens/src/layout.ts
@@ -1,4 +1,10 @@
-import { VisualKey, VisualLayout } from "./types";
+import type {
+  KeySymbol,
+  Layout,
+  LayoutMeasurements,
+  VisualKey,
+  VisualLayout,
+} from "./types";
 import * as V from "./vec2";
 
 export function visualKey(
@@ -70,3 +76,28 @@ export function scaleVisual(visual: VisualKey, amount: number): VisualKey {
     size: V.scale(visual.size, amount),
   };
 }
+
+export function scaleMeasurements(
+  measurements: LayoutMeasurements,
+  amount: number,
+): LayoutMeasurements {
+  return {
+    imagePadding: measurements.imagePadding * amount,
+    keySize: measurements.keySize * amount,
+    keyPadding: measurements.keyPadding * amount,
+    keyCornerRadius: measurements.keyCornerRadius * amount,
+    keyStrokeWidth: measurements.keyStrokeWidth * amount,
+    mainToChordsGap: measurements.mainToChordsGap * amount,
+  };
+}
+
+export function findKeyByLabel(
+  layout: Layout,
+  label: KeySymbol,
+): VisualKey | null {
+  for (let i = 0; i < layout.keys.length; i++) {
+    if (layout.keys[i].main === label) return layout.visual[i];
+  }
+
+  return null;
+}
diff --git a/layout-lens/src/layouts/alpha_staggered_double_switch.ts b/layout-lens/src/layouts/alpha_staggered_double_switch.ts
index 37e8d8d..d9128e9 100644
--- a/layout-lens/src/layouts/alpha_staggered_double_switch.ts
+++ b/layout-lens/src/layouts/alpha_staggered_double_switch.ts
@@ -26,7 +26,7 @@ const layout: PredefinedLayout = {
     L.visualKey([7.75, 3.25]),
     L.cols([5, 0], block, offsets),
   ].flat(),
-  size: [10.8, 4],
+  size: [10.8, 4.25],
 };
 
 export default layout;
diff --git a/layout-lens/src/render.ts b/layout-lens/src/render.ts
index 6c78761..e4e5745 100644
--- a/layout-lens/src/render.ts
+++ b/layout-lens/src/render.ts
@@ -1,7 +1,8 @@
-import { tag, px } from "./svg";
+import { children, tag, px } from "./svg";
 import * as L from "./layout";
 import * as V from "./vec2";
 import {
+  ChordConfig,
   KeyboardKey,
   KeySymbol,
   Layout,
@@ -17,40 +18,115 @@ function textContents(input: KeySymbol): string {
   return input;
 }
 
+interface KeyRenderingFlags {
+  stroke: boolean;
+  text: boolean;
+}
+
+function applyKeyPadding(
+  key: VisualKey,
+  measurements: LayoutMeasurements,
+): { position: V.Vec2; size: V.Vec2 } {
+  return {
+    position: V.add(key.position, measurements.keyPadding),
+    size: V.add(key.size, -2 * measurements.keyPadding),
+  };
+}
+
+function keyCenter(key: VisualKey): V.Vec2 {
+  const centerX = key.position[0] + key.size[0] / 2;
+  const centerY = key.position[1] + key.size[1] / 2;
+
+  return [centerX, centerY];
+}
+
+const textAttribs = {
+  "text-anchor": "middle",
+  "dominant-baseline": "central",
+  "font-family": "Helvetica",
+};
+
+function textColor(
+  colorscheme: LayoutColorscheme,
+  input: KeySymbol,
+  _default: string,
+): string {
+  if (input === SpecialSymbols.TL) return colorscheme.tlLayerColor;
+  if (input === SpecialSymbols.TR) return colorscheme.trLayerColor;
+  return _default;
+}
+
 function renderKey(
   visual: VisualKey,
   key: KeyboardKey,
   colorscheme: LayoutColorscheme,
   measurements: LayoutMeasurements,
+  flags: KeyRenderingFlags,
 ) {
-  const withPadding = {
-    position: V.add(visual.position, measurements.keyPadding),
-    size: V.add(visual.size, -2 * measurements.keyPadding),
-  };
+  const withPadding = applyKeyPadding(visual, measurements);
+  const center = keyCenter(visual);
 
-  const centerX = visual.position[0] + visual.size[0] / 2;
-  const centerY = visual.position[1] + visual.size[1] / 2;
-  const textAttribs = {
-    "text-anchor": "middle",
-    "dominant-baseline": "central",
-    "font-family": "Helvetica",
-  };
-
-  const textColor = (input: KeySymbol, _default: string): string => {
-    if (input === SpecialSymbols.TL) return colorscheme.tlLayerColor;
-    if (input === SpecialSymbols.TR) return colorscheme.trLayerColor;
-    return _default;
-  };
+  const textOverlays = flags.text
+    ? [
+        tag(
+          "text",
+          {
+            x: center[0],
+            y: center[1],
+            textLength: px(withPadding.size[1] / 2),
+            fill: textColor(colorscheme, key.main, colorscheme.mainLayerColor),
+            ...textAttribs,
+          },
+          textContents(key.main),
+        ),
+        tag(
+          "text",
+          {
+            x: withPadding.position[0] + withPadding.size[0] / 6,
+            y: withPadding.position[1] + withPadding.size[1] / 6,
+            fill: textColor(colorscheme, key.tlLayer, colorscheme.tlLayerColor),
+            "font-size": "66%",
+            ...textAttribs,
+            "text-anchor": "start",
+          },
+          textContents(key.tlLayer),
+        ),
+        tag(
+          "text",
+          {
+            x: withPadding.position[0] + (9 * withPadding.size[0]) / 10,
+            y: withPadding.position[1] + withPadding.size[1] / 6,
+            fill: textColor(colorscheme, key.trLayer, colorscheme.trLayerColor),
+            "font-size": "66%",
+            ...textAttribs,
+            "text-anchor": "end",
+          },
+          textContents(key.trLayer),
+        ),
+        tag(
+          "text",
+          {
+            x: withPadding.position[0] + withPadding.size[0] / 10,
+            y: withPadding.position[1] + (5 * withPadding.size[1]) / 6,
+            fill: textColor(colorscheme, key.blLayer, colorscheme.blLayerColor),
+            "font-size": "66%",
+            ...textAttribs,
+            "text-anchor": "start",
+          },
+          textContents(key.blLayer),
+        ),
+      ]
+    : [];
 
   return tag(
     "g",
     {
       transform:
         visual.angle && visual.angle !== 0
-          ? `rotate(${visual.angle}, ${centerX}, ${centerY})`
+          ? `rotate(${visual.angle}, ${center[0]}, ${center[1]})`
           : "",
     },
-    [
+    children(
       tag("rect", {
         width: px(withPadding.size[0]),
         height: px(withPadding.size[1]),
@@ -59,83 +135,230 @@ function renderKey(
         rx: measurements.keyCornerRadius,
         fill: colorscheme.keyFill,
         stroke: colorscheme.keyStroke,
-        "stroke-width": px(measurements.keyStrokeWidth),
+        "stroke-width": px(flags.stroke ? measurements.keyStrokeWidth : 0),
       }),
+      ...textOverlays,
+    ),
+  );
+}
+
+function keyCorners(
+  key: VisualKey,
+  measurements: LayoutMeasurements,
+): V.Vec2[] {
+  const withPadding = applyKeyPadding(key, measurements);
+  return [
+    withPadding.position,
+    V.add(withPadding.position, [withPadding.size[0], 0]),
+    V.add(withPadding.position, withPadding.size),
+    V.add(withPadding.position, [0, withPadding.size[1]]),
+  ];
+}
+
+function renderChordShape(
+  first: VisualKey,
+  second: VisualKey,
+  chord: ChordConfig,
+  measurements: LayoutMeasurements,
+  colorscheme: LayoutColorscheme,
+) {
+  if (first.position[0] > second.position[0])
+    return renderChordShape(second, first, chord, measurements, colorscheme);
+
+  const multi = (...steps: string[]) => steps.join(" ");
+  const moveTo = (to: V.Vec2) => `M ${to.join(" ")}`;
+  const lineTo = (to: V.Vec2) => `L ${to.join(" ")}`;
+
+  const firstCorners = keyCorners(first, measurements);
+  const secondCorners = keyCorners(second, measurements);
+  const firstCenter = keyCenter(first);
+  const secondCenter = keyCenter(second);
+  const middle = V.scale(V.add(firstCenter, secondCenter), 0.5);
+
+  const halfPath = (b: V.Vec2, c: V.Vec2, d: V.Vec2) => {
+    if ((b[1] - c[1]) * (b[0] - d[0]) > 0) return multi(lineTo(b), lineTo(d));
+    else return multi(lineTo(c), lineTo(d));
+  };
+
+  const dottedIndicator = (key: VisualKey) => {
+    const withPadding = applyKeyPadding(key, measurements);
+    const center = keyCenter(key);
+    const radius = Math.min(...withPadding.size) / 7.5;
+    return tag("circle", {
+      cx: center[0],
+      cy: center[1],
+      r: radius,
+      fill: "gray",
+      stroke: "gray",
+      "fill-opacity": 0.1,
+      "stroke-opacity": 0.6,
+      "stroke-width": px(measurements.keyStrokeWidth),
+      "stroke-dasharray": (radius * 2 * Math.PI) / 12,
+    });
+  };
+
+  return tag(
+    "g",
+    {},
+    children(
+      tag("path", {
+        fill: chord.fill,
+        stroke: chord.stroke,
+        "stroke-width": px(measurements.keyStrokeWidth),
+        d: multi(
+          moveTo(firstCorners[0]),
+          halfPath(firstCorners[1], secondCorners[0], secondCorners[1]),
+          lineTo(secondCorners[2]),
+          halfPath(secondCorners[3], firstCorners[2], firstCorners[3]),
+          "Z", // close path
+        ),
+      }),
+      dottedIndicator(first),
+      dottedIndicator(second),
       tag(
         "text",
         {
-          x: centerX,
-          y: centerY,
-          textLength: px(withPadding.size[1] / 2),
-          fill: textColor(key.main, colorscheme.mainLayerColor),
+          x: middle[0],
+          y: middle[1],
+          "font-size": `${(chord.fontSizeModifier || 1) * 70}%`,
+          fill: textColor(
+            colorscheme,
+            chord.output,
+            colorscheme.mainLayerColor,
+          ),
           ...textAttribs,
+          "dominant-baseline": "middle",
         },
-        textContents(key.main),
+        textContents(chord.output),
       ),
-      tag(
-        "text",
-        {
-          x: withPadding.position[0] + withPadding.size[0] / 6,
-          y: withPadding.position[1] + withPadding.size[1] / 6,
-          fill: textColor(key.tlLayer, colorscheme.tlLayerColor),
-          "font-size": "66%",
-          ...textAttribs,
-          "text-anchor": "start",
-        },
-        textContents(key.tlLayer),
-      ),
-      tag(
-        "text",
-        {
-          x: withPadding.position[0] + (9 * withPadding.size[0]) / 10,
-          y: withPadding.position[1] + withPadding.size[1] / 6,
-          fill: textColor(key.trLayer, colorscheme.trLayerColor),
-          "font-size": "66%",
-          ...textAttribs,
-          "text-anchor": "end",
-        },
-        textContents(key.trLayer),
-      ),
-      tag(
-        "text",
-        {
-          x: withPadding.position[0] + withPadding.size[0] / 10,
-          y: withPadding.position[1] + (5 * withPadding.size[1]) / 6,
-          fill: textColor(key.blLayer, colorscheme.blLayerColor),
-          "font-size": "66%",
-          ...textAttribs,
-          "text-anchor": "start",
-        },
-        textContents(key.blLayer),
-      ),
-    ].join("\n"),
+    ),
   );
 }
 
 export function renderLayout(layout: Layout) {
+  const totalWidth = layout.size[0] * layout.measurements.keySize;
+  const chordKeyScalingFactor =
+    (totalWidth / layout.elementLayout.groupsPerRow -
+      layout.elementLayout.groupPadding * 2) /
+    totalWidth;
+
+  const chordRowCount = Math.ceil(
+    layout.chords.length / layout.elementLayout.groupsPerRow,
+  );
+
+  const totalHeight =
+    layout.elementLayout.mainToChordsGap +
+    layout.measurements.keySize *
+      layout.size[1] *
+      (1 + chordRowCount / layout.elementLayout.groupsPerRow);
+
+  const widthPerChord = totalWidth / layout.elementLayout.groupsPerRow;
+
+  // {{{ Render main keys
+  const mainKeys = layout.visual.map((key, index) =>
+    renderKey(
+      L.scaleVisual(key, layout.measurements.keySize),
+      layout.keys[index],
+      layout.colorscheme,
+      layout.measurements,
+      {
+        text: true,
+        stroke: true,
+      },
+    ),
+  );
+  // }}}
+  // {{{ Render chord groups
+  const chordMeasurements = L.scaleMeasurements(
+    layout.measurements,
+    chordKeyScalingFactor,
+  );
+  const chords = layout.chords.map((group, index) => {
+    const normalKeys = layout.visual.map((key, index) => {
+      const keyLabels = layout.keys[index];
+
+      if (group.findIndex((c) => c.input.includes(keyLabels.main)) !== -1)
+        return "";
+
+      return renderKey(
+        L.scaleVisual(key, chordMeasurements.keySize),
+        keyLabels,
+        { ...layout.colorscheme, keyFill: "gray" },
+        chordMeasurements,
+        {
+          text: false,
+          stroke: false,
+        },
+      );
+    });
+
+    const chordShapes = group.map((chord) => {
+      return renderChordShape(
+        L.scaleVisual(
+          L.findKeyByLabel(layout, chord.input[0])!,
+          chordMeasurements.keySize,
+        ),
+        L.scaleVisual(
+          L.findKeyByLabel(layout, chord.input[1])!,
+          chordMeasurements.keySize,
+        ),
+        chord,
+        chordMeasurements,
+        layout.colorscheme,
+      );
+    });
+
+    return tag(
+      "g",
+      {
+        transform: `translate(${
+          (index % layout.elementLayout.groupsPerRow) * widthPerChord +
+          layout.elementLayout.groupPadding +
+          (index + layout.elementLayout.groupsPerRow > layout.chords.length
+            ? ((layout.elementLayout.groupsPerRow -
+                (layout.chords.length % layout.elementLayout.groupsPerRow)) *
+                widthPerChord) /
+              2
+            : 0)
+        } ${
+          (Math.floor(index / layout.elementLayout.groupsPerRow) *
+            layout.measurements.keySize *
+            layout.size[1]) /
+            layout.elementLayout.groupsPerRow +
+          layout.elementLayout.groupPadding
+        })`,
+      },
+      children(...normalKeys, ...chordShapes),
+    );
+  });
+  // }}}
+  // {{{ Put everything together
   return tag(
     "svg",
     {
       viewBox: [
-        -layout.measurements.imagePadding,
-        -layout.measurements.imagePadding,
-        2 * layout.measurements.imagePadding +
-          layout.size[0] * layout.measurements.keySize,
-        2 * layout.measurements.imagePadding +
-          layout.size[1] * layout.measurements.keySize,
+        -layout.elementLayout.imagePadding,
+        -layout.elementLayout.imagePadding,
+        2 * layout.elementLayout.imagePadding + totalWidth,
+
+        2 * layout.elementLayout.imagePadding + totalHeight,
       ].join(" "),
       xmlns: "http://www.w3.org/2000/svg",
       "xmlns:xlink": "http://www.w3.org/1999/xlink",
     },
-    layout.visual
-      .map((key, index) =>
-        renderKey(
-          L.scaleVisual(key, layout.measurements.keySize),
-          layout.keys[index],
-          layout.colorscheme,
-          layout.measurements,
-        ),
-      )
-      .join("\n"),
+    children(
+      ...mainKeys,
+      tag(
+        "g",
+        {
+          transform: `translate(0 ${
+            layout.size[1] * layout.measurements.keySize +
+            layout.elementLayout.mainToChordsGap
+          })`,
+        },
+        children(...chords),
+      ),
+    ),
   );
+  // }}}
 }
diff --git a/layout-lens/src/svg.ts b/layout-lens/src/svg.ts
index 4a0eab5..8ede490 100644
--- a/layout-lens/src/svg.ts
+++ b/layout-lens/src/svg.ts
@@ -5,6 +5,10 @@ function indent(amount: number, text: string) {
     .join("\n");
 }
 
+export function children(...many: string[]): string {
+  return many.join("\\n");
+}
+
 export function tag(
   name: string,
   attributes: Record<string, string | number | undefined>,
diff --git a/layout-lens/src/types.ts b/layout-lens/src/types.ts
index 691123e..2d60aa4 100644
--- a/layout-lens/src/types.ts
+++ b/layout-lens/src/types.ts
@@ -38,24 +38,42 @@ export interface LayoutColorscheme {
   blLayerColor: string;
 }
 
-export enum PredefinedLayoutName {
-  split_3x5_2,
-  alpha_staggered_double_switch,
-}
-
 export interface LayoutMeasurements {
-  imagePadding: number;
   keySize: number;
   keyPadding: number;
   keyCornerRadius: number;
   keyStrokeWidth: number;
 }
 
+export enum PredefinedLayoutName {
+  split_3x5_2,
+  alpha_staggered_double_switch,
+}
+
+export type ChordName = string;
+
+export interface ChordConfig {
+  input: KeySymbol[];
+  output: KeySymbol;
+  fill: string;
+  stroke?: string;
+  fontSizeModifier?: number;
+}
+
+export interface ElementLayout {
+  groupsPerRow: number;
+  groupPadding: number;
+  imagePadding: number;
+  mainToChordsGap: number;
+}
+
 export interface Config {
   keys: KeySymbol[][];
+  chords: ChordConfig[][];
   layout: PredefinedLayoutName;
   colorscheme: LayoutColorscheme;
   measurements: LayoutMeasurements;
+  elementLayout: ElementLayout;
 }
 
 export type PredefinedLayout = {
@@ -64,7 +82,10 @@ export type PredefinedLayout = {
 };
 
 export interface Layout extends PredefinedLayout {
-  keys: KeyboardKey[];
   colorscheme: LayoutColorscheme;
   measurements: LayoutMeasurements;
+  elementLayout: ElementLayout;
+
+  keys: KeyboardKey[];
+  chords: ChordConfig[][];
 }