From 15b38baaca78a21b5db206afc3d08209abd27496 Mon Sep 17 00:00:00 2001
From: Cem Aksoylar <caksoylar@users.noreply.github.com>
Date: Fri, 12 Apr 2024 22:41:18 -0700
Subject: [PATCH] site: Update showcase image

---
 site/showcase.svg | 390 +++++++++++++++++++++++++++++-----------------
 1 file changed, 247 insertions(+), 143 deletions(-)

diff --git a/site/showcase.svg b/site/showcase.svg
index 65870f0..a378443 100755
--- a/site/showcase.svg
+++ b/site/showcase.svg
@@ -1,31 +1,32 @@
-<svg width="788.0" height="386.6530669589464" viewBox="0 0 788.0 386.6530669589464" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="788" height="387" viewBox="0 0 788 387" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>/* start glyphs */
-<svg id="mdi:keyboard-space">
-<svg xmlns="http://www.w3.org/2000/svg" id="mdi-keyboard-space" viewBox="0 0 24 24"><path d="M3 15H5V19H19V15H21V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V15Z" /></svg>
+<svg id="mdi:backspace-outline">
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-backspace-outline" viewBox="0 0 24 24"><path d="M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z" /></svg>
+</svg>
+<svg id="mdi:backspace-reverse-outline">
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-backspace-reverse-outline" viewBox="0 0 24 24"><path d="M5,15.59L6.41,17L10,13.41L13.59,17L15,15.59L11.41,12L15,8.41L13.59,7L10,10.59L6.41,7L5,8.41L8.59,12L5,15.59M2,3A2,2 0 0,0 0,5V19A2,2 0 0,0 2,21H17C17.69,21 18.23,20.64 18.59,20.11L24,12L18.59,3.88C18.23,3.35 17.69,3 17,3H2M2,5H17L21.72,12L17,19H2V5Z" /></svg>
 </svg>
 <svg id="mdi:keyboard-esc">
 <svg xmlns="http://www.w3.org/2000/svg" id="mdi-keyboard-esc" viewBox="0 0 24 24"><path d="M1 7H7V9H3V11H7V13H3V15H7V17H1V7M11 7H15V9H11V11H13C14.11 11 15 11.9 15 13V15C15 16.11 14.11 17 13 17H9V15H13V13H11C9.9 13 9 12.11 9 11V9C9 7.9 9.9 7 11 7M19 7H21C22.11 7 23 7.9 23 9V10H21V9H19V15H21V14H23V15C23 16.11 22.11 17 21 17H19C17.9 17 17 16.11 17 15V9C17 7.9 17.9 7 19 7Z" /></svg>
 </svg>
+<svg id="mdi:keyboard-return">
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-keyboard-return" viewBox="0 0 24 24"><path d="M19,7V11H5.83L9.41,7.41L8,6L2,12L8,18L9.41,16.58L5.83,13H21V7H19Z" /></svg>
+</svg>
+<svg id="mdi:keyboard-space">
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-keyboard-space" viewBox="0 0 24 24"><path d="M3 15H5V19H19V15H21V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V15Z" /></svg>
+</svg>
 <svg id="mdi:keyboard-tab">
 <svg xmlns="http://www.w3.org/2000/svg" id="mdi-keyboard-tab" viewBox="0 0 24 24"><path d="M20,18H22V6H20M11.59,7.41L15.17,11H1V13H15.17L11.59,16.58L13,18L19,12L13,6L11.59,7.41Z" /></svg>
 </svg>
-<svg id="mdi:backspace-reverse-outline">
-<svg xmlns="http://www.w3.org/2000/svg" id="mdi-backspace-reverse-outline" viewBox="0 0 24 24"><path d="M5,15.59L6.41,17L10,13.41L13.59,17L15,15.59L11.41,12L15,8.41L13.59,7L10,10.59L6.41,7L5,8.41L8.59,12L5,15.59M2,3A2,2 0 0,0 0,5V19A2,2 0 0,0 2,21H17C17.69,21 18.23,20.64 18.59,20.11L24,12L18.59,3.88C18.23,3.35 17.69,3 17,3H2M2,5H17L21.72,12L17,19H2V5Z" /></svg>
-</svg>
 <svg id="mdi:play-pause">
 <svg xmlns="http://www.w3.org/2000/svg" id="mdi-play-pause" viewBox="0 0 24 24"><path d="M3,5V19L11,12M13,19H16V5H13M18,5V19H21V5" /></svg>
 </svg>
-<svg id="mdi:backspace-outline">
-<svg xmlns="http://www.w3.org/2000/svg" id="mdi-backspace-outline" viewBox="0 0 24 24"><path d="M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z" /></svg>
-</svg>
-<svg id="mdi:keyboard-return">
-<svg xmlns="http://www.w3.org/2000/svg" id="mdi-keyboard-return" viewBox="0 0 24 24"><path d="M19,7V11H5.83L9.41,7.41L8,6L2,12L8,18L9.41,16.58L5.83,13H21V7H19Z" /></svg>
-</svg>
 </defs>/* end glyphs */
-<style>/* inherit to force styles through use tags*/
+<style>/* inherit to force styles through use tags */
 svg path {
     fill: inherit;
 }
+
 /* font and background color specifications */
 svg.keymap {
     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
@@ -38,12 +39,20 @@ svg.keymap {
 /* default key styling */
 rect.key {
     fill: #f6f8fa;
+}
+
+rect.key, rect.combo {
     stroke: #c9cccf;
     stroke-width: 1;
 }
 
+/* default key side styling, only used is draw_key_sides is set */
+rect.side {
+    filter: brightness(90%);
+}
+
 /* color accent for combo boxes */
-rect.combo {
+rect.combo, rect.combo-separate {
     fill: #cdf;
 }
 
@@ -68,7 +77,16 @@ text.label {
     font-weight: bold;
     text-anchor: start;
     stroke: white;
-    stroke-width: 2;
+    stroke-width: 4;
+    paint-order: stroke;
+}
+
+/* styling for optional footer */
+text.footer {
+    text-anchor: end;
+    dominant-baseline: auto;
+    stroke: white;
+    stroke-width: 4;
     paint-order: stroke;
 }
 
@@ -109,139 +127,225 @@ path.combo {
 .icon-tabler > path {
     fill: inherit;
     stroke: inherit;
+    stroke-width: 2;
 }
 /* hide tabler's default box */
 .icon-tabler > path[stroke="none"][fill="none"] {
-    visibility: collapse;
+    visibility: hidden;
 }
 /* End Tabler Icons Cleanup */
 </style>
-<g class="layer-Base">
-<text x="30.0" y="28.0" class="label">Base:</text>
-<rect rx="6.0" ry="6.0" x="32.0" y="79.0" width="52.0" height="52.0" class="key"/>
-<text x="58.0" y="105.0" class="tap">Q</text>
-<rect rx="6.0" ry="6.0" x="88.0" y="65.0" width="52.0" height="52.0" class="key"/>
-<text x="114.0" y="91.0" class="tap">W</text>
-<rect rx="6.0" ry="6.0" x="144.0" y="58.0" width="52.0" height="52.0" class="key"/>
-<text x="170.0" y="84.0" class="tap">F</text>
-<rect rx="6.0" ry="6.0" x="200.0" y="65.0" width="52.0" height="52.0" class="key"/>
-<text x="226.0" y="91.0" class="tap">P</text>
-<rect rx="6.0" ry="6.0" x="256.0" y="72.0" width="52.0" height="52.0" class="key"/>
-<text x="282.0" y="98.0" class="tap">B</text>
-<rect rx="6.0" ry="6.0" x="480.0" y="72.0" width="52.0" height="52.0" class="key"/>
-<text x="506.0" y="98.0" class="tap">J</text>
-<rect rx="6.0" ry="6.0" x="536.0" y="65.0" width="52.0" height="52.0" class="key"/>
-<text x="562.0" y="91.0" class="tap">L</text>
-<rect rx="6.0" ry="6.0" x="592.0" y="58.0" width="52.0" height="52.0" class="key"/>
-<text x="618.0" y="84.0" class="tap">U</text>
-<rect rx="6.0" ry="6.0" x="648.0" y="65.0" width="52.0" height="52.0" class="key"/>
-<text x="674.0" y="91.0" class="tap">Y</text>
-<rect rx="6.0" ry="6.0" x="704.0" y="79.0" width="52.0" height="52.0" class="key"/>
-<text x="730.0" y="105.0" class="tap">&#x27;</text>
-<rect rx="6.0" ry="6.0" x="32.0" y="135.0" width="52.0" height="52.0" class="key"/>
-<text x="58.0" y="161.0" class="tap">A</text>
-<text x="58.0" y="185.0" class="hold">Ctrl</text>
-<rect rx="6.0" ry="6.0" x="88.0" y="121.0" width="52.0" height="52.0" class="key"/>
-<text x="114.0" y="147.0" class="tap">R</text>
-<text x="114.0" y="171.0" class="hold">Gui</text>
-<rect rx="6.0" ry="6.0" x="144.0" y="114.0" width="52.0" height="52.0" class="key"/>
-<text x="170.0" y="140.0" class="tap">S</text>
-<text x="170.0" y="164.0" class="hold">Alt</text>
-<rect rx="6.0" ry="6.0" x="200.0" y="121.0" width="52.0" height="52.0" class="key"/>
-<text x="226.0" y="147.0" class="tap">T</text>
-<text x="226.0" y="171.0" class="hold">Shift</text>
-<rect rx="6.0" ry="6.0" x="256.0" y="128.0" width="52.0" height="52.0" class="key"/>
-<text x="282.0" y="154.0" class="tap">G</text>
-<rect rx="6.0" ry="6.0" x="480.0" y="128.0" width="52.0" height="52.0" class="key"/>
-<text x="506.0" y="154.0" class="tap">M</text>
-<rect rx="6.0" ry="6.0" x="536.0" y="121.0" width="52.0" height="52.0" class="key"/>
-<text x="562.0" y="147.0" class="tap">N</text>
-<text x="562.0" y="171.0" class="hold">Shift</text>
-<rect rx="6.0" ry="6.0" x="592.0" y="114.0" width="52.0" height="52.0" class="key"/>
-<text x="618.0" y="140.0" class="tap">E</text>
-<text x="618.0" y="164.0" class="hold">Alt</text>
-<rect rx="6.0" ry="6.0" x="648.0" y="121.0" width="52.0" height="52.0" class="key"/>
-<text x="674.0" y="147.0" class="tap">I</text>
-<text x="674.0" y="171.0" class="hold">Gui</text>
-<rect rx="6.0" ry="6.0" x="704.0" y="135.0" width="52.0" height="52.0" class="key"/>
-<text x="730.0" y="161.0" class="tap">O</text>
-<text x="730.0" y="185.0" class="hold">Ctrl</text>
-<rect rx="6.0" ry="6.0" x="32.0" y="191.0" width="52.0" height="52.0" class="key"/>
-<text x="58.0" y="217.0" class="tap">Z</text>
-<rect rx="6.0" ry="6.0" x="88.0" y="177.0" width="52.0" height="52.0" class="key"/>
-<text x="114.0" y="203.0" class="tap">X</text>
-<rect rx="6.0" ry="6.0" x="144.0" y="170.0" width="52.0" height="52.0" class="key"/>
-<text x="170.0" y="196.0" class="tap">C</text>
-<rect rx="6.0" ry="6.0" x="200.0" y="177.0" width="52.0" height="52.0" class="key"/>
-<text x="226.0" y="203.0" class="tap">D</text>
-<rect rx="6.0" ry="6.0" x="256.0" y="184.0" width="52.0" height="52.0" class="key"/>
-<text x="282.0" y="210.0" class="tap">V</text>
-<rect rx="6.0" ry="6.0" x="480.0" y="184.0" width="52.0" height="52.0" class="key"/>
-<text x="506.0" y="210.0" class="tap">K</text>
-<rect rx="6.0" ry="6.0" x="536.0" y="177.0" width="52.0" height="52.0" class="key"/>
-<text x="562.0" y="203.0" class="tap">H</text>
-<rect rx="6.0" ry="6.0" x="592.0" y="170.0" width="52.0" height="52.0" class="key"/>
-<text x="618.0" y="196.0" class="tap">,</text>
-<text x="618.0" y="172.0" class="shifted">&lt;</text>
-<rect rx="6.0" ry="6.0" x="648.0" y="177.0" width="52.0" height="52.0" class="key"/>
-<text x="674.0" y="203.0" class="tap">.</text>
-<text x="674.0" y="179.0" class="shifted">&gt;</text>
-<rect rx="6.0" ry="6.0" x="704.0" y="191.0" width="52.0" height="52.0" class="key"/>
-<text x="730.0" y="217.0" class="tap">/</text>
-<text x="730.0" y="193.0" class="shifted">?</text>
-<rect rx="6.0" ry="6.0" x="172.0" y="234.84799999999996" width="52.0" height="52.0" class="ghost key"/>
-<use href="#mdi:keyboard-tab" xlink:href="#mdi:keyboard-tab" x="189.0" y="251.84799999999996" height="18" width="18.0" class="ghost tap glyph mdi:keyboard-tab"/>
-<text x="198.0" y="284.84799999999996" class="ghost hold">Gui</text>
-<g transform="rotate(15.0, 259.59999999999997, 269.08000000000004)">
-<rect rx="6.0" ry="6.0" x="233.59999999999997" y="243.08000000000004" width="52.0" height="52.0" class="key"/>
-<use href="#mdi:keyboard-esc" xlink:href="#mdi:keyboard-esc" x="250.59999999999997" y="260.08000000000004" height="18" width="18.0" class="tap glyph mdi:keyboard-esc"/>
-<text x="259.59999999999997" y="293.08000000000004" class="hold">Ctrl</text>
-</g>
-<g transform="rotate(30.0, 325.12, 280.28)">
-<rect rx="6.0" ry="6.0" x="299.12" y="240.27999999999997" width="52.0" height="80.0" class="key"/>
-<use href="#mdi:backspace-outline" xlink:href="#mdi:backspace-outline" x="316.12" y="271.28" height="18" width="18.0" class="tap glyph mdi:backspace-outline"/>
-<text x="325.12" y="318.28" class="hold">NAV</text>
-</g>
-<g transform="rotate(-30.0, 462.88, 280.28)">
-<rect rx="6.0" ry="6.0" x="436.88" y="240.27999999999997" width="52.0" height="80.0" class="key"/>
-<use href="#mdi:keyboard-space" xlink:href="#mdi:keyboard-space" x="453.88" y="271.28" height="18" width="18.0" class="tap glyph mdi:keyboard-space"/>
-<text x="462.88" y="318.28" class="hold">SYM</text>
-</g>
-<g transform="rotate(-15.0, 528.4000000000001, 269.08000000000004)">
-<rect rx="6.0" ry="6.0" x="502.4000000000001" y="243.08000000000004" width="52.0" height="52.0" class="key"/>
-<use href="#mdi:keyboard-return" xlink:href="#mdi:keyboard-return" x="519.4000000000001" y="260.08000000000004" height="18" width="18.0" class="tap glyph mdi:keyboard-return"/>
-<text x="528.4000000000001" y="293.08000000000004" class="hold">Shift</text>
-</g>
-<rect rx="6.0" ry="6.0" x="564.0" y="234.84799999999996" width="52.0" height="52.0" class="ghost key"/>
-<use href="#mdi:backspace-reverse-outline" xlink:href="#mdi:backspace-reverse-outline" x="581.0" y="251.84799999999996" height="18" width="18.0" class="ghost tap glyph mdi:backspace-reverse-outline"/>
-<text x="590.0" y="284.84799999999996" class="ghost hold">Alt</text>
-<path d="M29.0,161.0 v-50.0 a6.0,6.0 0 0 1 6.0,-6.0 h4.333333333333332" class="combo"/>
-<path d="M29.0,161.0 l17.8,0.0" class="combo"/>
-<path d="M29.0,161.0 v50.0 a6.0,6.0 0 0 0 6.0,6.0 h4.333333333333332" class="combo"/>
-<rect rx="6.0" ry="6.0" x="15.0" y="148.0" width="28.0" height="26.0" class="combo"/>
-<text x="29.0" y="161.0" class="combo tap">RST</text>
-<path d="M394.0,69.0 h-106.0 a6.0,6.0 0 0 0 -6.0,6.0 v4.333333333333332" class="combo"/>
-<path d="M394.0,69.0 h106.0 a6.0,6.0 0 0 1 6.0,6.0 v4.333333333333332" class="combo"/>
-<rect rx="6.0" ry="6.0" x="380.0" y="56.0" width="28.0" height="26.0" class="combo"/>
-<text x="394.0" y="69.0" class="combo tap">BOOT</text>
-<path d="M394.0,118.0 h-162.0 a6.0,6.0 0 0 0 -6.0,6.0 v4.333333333333332" class="combo"/>
-<path d="M394.0,118.0 h162.0 a6.0,6.0 0 0 1 6.0,6.0 v4.333333333333332" class="combo"/>
-<rect rx="6.0" ry="6.0" x="380.0" y="105.0" width="28.0" height="26.0" class="combo"/>
-<text x="394.0" y="118.0" class="combo tap">
-<tspan x="394.0" dy="-0.6em">Caps</tspan><tspan x="394.0" dy="1.2em">Wrd</tspan></text>
-<path d="M674.0,246.0 h-50.0 a6.0,6.0 0 0 1 -6.0,-6.0 v-25.333333333333332" class="combo"/>
-<path d="M674.0,246.0 h50.0 a6.0,6.0 0 0 0 6.0,-6.0 v-4.333333333333332" class="combo"/>
-<rect rx="6.0" ry="6.0" x="660.0" y="233.0" width="28.0" height="26.0" class="combo"/>
-<text x="674.0" y="246.0" class="combo tap">😬</text>
-<rect rx="6.0" ry="6.0" x="184.0" y="130.5" width="28.0" height="26.0" class="combo"/>
-<text x="198.0" y="143.5" class="combo tap">(</text>
-<rect rx="6.0" ry="6.0" x="576.0" y="130.5" width="28.0" height="26.0" class="combo"/>
-<text x="590.0" y="143.5" class="combo tap">)</text>
-<rect rx="6.0" ry="6.0" x="128.0" y="130.5" width="28.0" height="26.0" class="combo"/>
-<text x="142.0" y="143.5" class="combo tap">[</text>
-<rect rx="6.0" ry="6.0" x="632.0" y="130.5" width="28.0" height="26.0" class="combo"/>
-<text x="646.0" y="143.5" class="combo tap">]</text>
-<rect rx="6.0" ry="6.0" x="268.0" y="169.0" width="28.0" height="26.0" class="combo"/>
-<use href="#mdi:play-pause" xlink:href="#mdi:play-pause" x="273.0" y="173.0" height="18" width="18.0" class="combo tap glyph mdi:play-pause"/>
+<g transform="translate(30, 0)" class="layer-Base">
+<text x="0" y="28" class="label">Base:</text>
+<g transform="translate(0, 56)">
+<g transform="translate(28, 49)" class="key keypos-0">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">Q</text>
+</g>
+<g transform="translate(84, 35)" class="key keypos-1">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">W</text>
+</g>
+<g transform="translate(140, 28)" class="key keypos-2">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">F</text>
+</g>
+<g transform="translate(196, 35)" class="key keypos-3">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">P</text>
+</g>
+<g transform="translate(252, 42)" class="key keypos-4">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">B</text>
+</g>
+<g transform="translate(476, 42)" class="key keypos-5">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">J</text>
+</g>
+<g transform="translate(532, 35)" class="key keypos-6">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">L</text>
+</g>
+<g transform="translate(588, 28)" class="key keypos-7">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">U</text>
+</g>
+<g transform="translate(644, 35)" class="key keypos-8">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">Y</text>
+</g>
+<g transform="translate(700, 49)" class="key keypos-9">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">&#x27;</text>
+</g>
+<g transform="translate(28, 105)" class="key keypos-10">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">A</text>
+<text x="0" y="24" class="key hold">Ctrl</text>
+</g>
+<g transform="translate(84, 91)" class="key keypos-11">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">R</text>
+<text x="0" y="24" class="key hold">Gui</text>
+</g>
+<g transform="translate(140, 84)" class="key keypos-12">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">S</text>
+<text x="0" y="24" class="key hold">Alt</text>
+</g>
+<g transform="translate(196, 91)" class="key keypos-13">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">T</text>
+<text x="0" y="24" class="key hold">Shift</text>
+</g>
+<g transform="translate(252, 98)" class="key keypos-14">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">G</text>
+</g>
+<g transform="translate(476, 98)" class="key keypos-15">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">M</text>
+</g>
+<g transform="translate(532, 91)" class="key keypos-16">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">N</text>
+<text x="0" y="24" class="key hold">Shift</text>
+</g>
+<g transform="translate(588, 84)" class="key keypos-17">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">E</text>
+<text x="0" y="24" class="key hold">Alt</text>
+</g>
+<g transform="translate(644, 91)" class="key keypos-18">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">I</text>
+<text x="0" y="24" class="key hold">Gui</text>
+</g>
+<g transform="translate(700, 105)" class="key keypos-19">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">O</text>
+<text x="0" y="24" class="key hold">Ctrl</text>
+</g>
+<g transform="translate(28, 161)" class="key keypos-20">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">Z</text>
+</g>
+<g transform="translate(84, 147)" class="key keypos-21">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">X</text>
+</g>
+<g transform="translate(140, 140)" class="key keypos-22">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">C</text>
+</g>
+<g transform="translate(196, 147)" class="key keypos-23">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">D</text>
+</g>
+<g transform="translate(252, 154)" class="key keypos-24">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">V</text>
+</g>
+<g transform="translate(476, 154)" class="key keypos-25">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">K</text>
+</g>
+<g transform="translate(532, 147)" class="key keypos-26">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">H</text>
+</g>
+<g transform="translate(588, 140)" class="key keypos-27">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">,</text>
+<text x="0" y="-24" class="key shifted">&lt;</text>
+</g>
+<g transform="translate(644, 147)" class="key keypos-28">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">.</text>
+<text x="0" y="-24" class="key shifted">&gt;</text>
+</g>
+<g transform="translate(700, 161)" class="key keypos-29">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">/</text>
+<text x="0" y="-24" class="key shifted">?</text>
+</g>
+<g transform="translate(168, 205)" class="key ghost keypos-30">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key ghost"/>
+<use href="#mdi:keyboard-tab" xlink:href="#mdi:keyboard-tab" x="-9" y="-9" height="18" width="18.0" class="key ghost tap glyph mdi:keyboard-tab"/>
+<text x="0" y="24" class="key ghost hold">Gui</text>
+</g>
+<g transform="translate(230, 213) rotate(15.0)" class="key keypos-31">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<use href="#mdi:keyboard-esc" xlink:href="#mdi:keyboard-esc" x="-9" y="-9" height="18" width="18.0" class="key tap glyph mdi:keyboard-esc"/>
+<text x="0" y="24" class="key hold">Ctrl</text>
+</g>
+<g transform="translate(295, 224) rotate(30.0)" class="key keypos-32">
+<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key"/>
+<use href="#mdi:backspace-outline" xlink:href="#mdi:backspace-outline" x="-9" y="-9" height="18" width="18.0" class="key tap glyph mdi:backspace-outline"/>
+<text x="0" y="38" class="key hold">NAV</text>
+</g>
+<g transform="translate(433, 224) rotate(-30.0)" class="key keypos-33">
+<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key"/>
+<use href="#mdi:keyboard-space" xlink:href="#mdi:keyboard-space" x="-9" y="-9" height="18" width="18.0" class="key tap glyph mdi:keyboard-space"/>
+<text x="0" y="38" class="key hold">SYM</text>
+</g>
+<g transform="translate(498, 213) rotate(-15.0)" class="key keypos-34">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<use href="#mdi:keyboard-return" xlink:href="#mdi:keyboard-return" x="-9" y="-9" height="18" width="18.0" class="key tap glyph mdi:keyboard-return"/>
+<text x="0" y="24" class="key hold">Shift</text>
+</g>
+<g transform="translate(560, 205)" class="key ghost keypos-35">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key ghost"/>
+<use href="#mdi:backspace-reverse-outline" xlink:href="#mdi:backspace-reverse-outline" x="-9" y="-9" height="18" width="18.0" class="key ghost tap glyph mdi:backspace-reverse-outline"/>
+<text x="0" y="24" class="key ghost hold">Alt</text>
+</g>
+<g class="combo combopos-0">
+<path d="M-1,105 v-50 a6.0,6.0 0 0 1 6.0,-6.0 h4" class="combo"/>
+<path d="M-1,105 l18,0" class="combo"/>
+<path d="M-1,105 v50 a6.0,6.0 0 0 0 6.0,6.0 h4" class="combo"/>
+<rect rx="6" ry="6" x="-15" y="92" width="28" height="26" class="combo"/>
+<text x="-1" y="105" class="combo tap">RST</text>
+</g>
+<g class="combo combopos-1">
+<path d="M364,13 h-106 a6.0,6.0 0 0 0 -6.0,6.0 v4" class="combo"/>
+<path d="M364,13 h106 a6.0,6.0 0 0 1 6.0,6.0 v4" class="combo"/>
+<rect rx="6" ry="6" x="350" y="0" width="28" height="26" class="combo"/>
+<text x="364" y="13" class="combo tap">BOOT</text>
+</g>
+<g class="combo combopos-2">
+<path d="M364,62 h-162 a6.0,6.0 0 0 0 -6.0,6.0 v4" class="combo"/>
+<path d="M364,62 h162 a6.0,6.0 0 0 1 6.0,6.0 v4" class="combo"/>
+<rect rx="6" ry="6" x="350" y="49" width="28" height="26" class="combo"/>
+<text x="364" y="62" class="combo tap">
+<tspan x="364" dy="-0.6em">Caps</tspan><tspan x="364" dy="1.2em">Wrd</tspan>
+</text>
+</g>
+<g class="combo combopos-3">
+<path d="M644,190 h-50 a6.0,6.0 0 0 1 -6.0,-6.0 v-25" class="combo"/>
+<path d="M644,190 h50 a6.0,6.0 0 0 0 6.0,-6.0 v-4" class="combo"/>
+<rect rx="6" ry="6" x="630" y="177" width="28" height="26" class="combo"/>
+<text x="644" y="190" class="combo tap">😬</text>
+</g>
+<g class="combo combopos-4">
+<rect rx="6" ry="6" x="154" y="74" width="28" height="26" class="combo"/>
+<text x="168" y="88" class="combo tap">(</text>
+</g>
+<g class="combo combopos-5">
+<rect rx="6" ry="6" x="546" y="74" width="28" height="26" class="combo"/>
+<text x="560" y="88" class="combo tap">)</text>
+</g>
+<g class="combo combopos-6">
+<rect rx="6" ry="6" x="98" y="74" width="28" height="26" class="combo"/>
+<text x="112" y="88" class="combo tap">[</text>
+</g>
+<g class="combo combopos-7">
+<rect rx="6" ry="6" x="602" y="74" width="28" height="26" class="combo"/>
+<text x="616" y="88" class="combo tap">]</text>
+</g>
+<g class="combo combopos-8">
+<rect rx="6" ry="6" x="238" y="113" width="28" height="26" class="combo"/>
+<use href="#mdi:play-pause" xlink:href="#mdi:play-pause" x="243" y="117" height="18" width="18.0" class="combo tap glyph mdi:play-pause"/>
+</g>
+</g>
 </g>
 </svg>