better layout diagram (#2)

README.md

@@ -1,21 +1,25 @@
-Selenium
+Selenium33
 ================================================================================
 
-A [Miryoku](https://github.com/manna-harbour/miryoku)-like approach to minimize
-finger movements without changing the keyboard layout:
-
-![base layer on a 33-key keyboard](img/base.svg)
+A basic [Miryoku](https://github.com/manna-harbour/miryoku)-like approach to
+minimize finger movements on any keyboard:
 
 - 3 home-row mods per hand for <kbd>Ctrl</kbd>, <kbd>Alt</kbd>, <kbd>Super</kbd>
-- 3 layer-tap keys under the thumbs
-    - left: <kbd>Shift</kbd> / <kbd>Backspace</kbd>
-    - center: <kbd>Navigation</kbd> / <kbd>Space</kbd>
-    - right: <kbd>Symbols</kbd> / <kbd>Return</kbd>
+- 3 layer-tap keys under the thumbs: <kbd>Shift</kbd>/<kbd>Backspace</kbd>, <kbd>Navigation</kbd>/<kbd>Space</kbd>, <kbd>Prog</kbd>/<kbd>Return</kbd>
+
+![base, navigation and prog layers on a 33-key keyboard](img/all.svg)
+
+A long press on the <kbd>Return</kbd> key brings up the Prog layer, where all
+programming symbols are arranged for comfort.
+
+A long press on the <kbd>Space</kbd> bar brings up the Navigation layer, with
+easy one-hand shortcuts (<kbd>Ctrl</kbd>-<kbd>WASZXCV</kbd>), Vim-like
+navigation (<kbd>HJKL</kbd>) and more…
 
-The idea behind these layers is to **bring the characters under the fingers,
-rather than moving the fingers over the keys**. This approach is what makes
-those 34-key keyboards so comfortable, and the goal here is to get a comparable
-experience with any other keyboard — including your laptop’s.
+The idea behind these layers is to **bring the characters to the fingers, rather
+than moving the fingers to the keys**. This approach is what makes those 34-key
+keyboards so comfortable, and the goal here is to get a comparable experience
+with any other keyboard — including your laptop’s.
 
 
 Main Benefits
@@ -46,34 +50,10 @@ Of course, Selenium can be implemented in programmable keyboards with QMK, ZMK,
 Kaleidoscope, etc.
 
 
-Navigation Layer
---------------------------------------------------------------------------------
-
-A long press on the <kbd>Space</kbd> bar brings up the Navigation layer:
-
-![navigation layer on a 33-key keyboard](img/navigation.svg)
-
-- left: one-hand shortcuts (<kbd>Ctrl</kbd>-<kbd>WASZXCV</kbd>),
-<kbd>Tab</kbd>/<kbd>Shift</kbd>-<kbd>Tab</kbd>, prev/next
-- right: Vim-like arrows on <kbd>HJKL</kbd>, home/end page up/down, mouse scroll
-- bottom: <kbd>Delete</kbd> and <kbd>Escape</kbd>
-
-
-Symbols Layer
---------------------------------------------------------------------------------
-
-A long press on the <kbd>Return</kbd> key brings up the Symbols layer:
-
-![symbols layer on a 33-key keyboard](img/symbols.svg)
-
-- all symbols are on the same layer, arranged for comfort
-- the <kbd>Shift</kbd> key becomes a <kbd>Num</kbd> layer key
-
-
-NumRow Layer
+No numbers? No problem.
 --------------------------------------------------------------------------------
 
-If your keyboard has no number row, we got you covered! From <kbd>Symbols</kbd>
+If your keyboard has no number row, we got you covered! From <kbd>Prog</kbd>
 mode, pressing the <kbd>Num</kbd> key brings up the NumRow layer:
 
 ![NumRow layer on a 33-key keyboard](img/numrow.svg)

img/all.svg

@@ -0,0 +1,288 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
+
+  <style>
+    rect {
+      fill: #f8f8f8;
+      stroke: #666;
+      stroke-width: .5px;
+    }
+    text {
+      fill: #999;
+      font: normal 20px sans-serif;
+      text-align: center;
+      text-anchor: middle;
+    }
+    .dualKey { fill: #ddd; transform: translateY(26px); }
+
+    #row_AD { transform: translate(64px,  64px); }
+    #row_AC { transform: translate(64px, 124px); }
+    #row_AB { transform: translate(64px, 184px); }
+    #row_AA { transform: translate(64px, 244px); }
+    .left   { transform: translate(-15px, 0); }
+    .right  { transform: translate(+15px, 0); }
+
+    .shortcut { font-size: smaller; }
+    .layerSym { font-weight: normal; }
+    .layerMod { font-weight: bold; font-size: 14px; }
+    .layerNav { font-weight: bold; transform: translateY(-22.6px); }
+
+    .layerMod, .colorMod { fill: #333; }
+    .layerSym, .colorSym { fill: blue; }
+    .layerNav, .colorNav { fill: #e83; }
+
+    @media (prefers-color-scheme: dark) {
+      text                 { fill: #888; }
+      rect                 { fill: #444; }
+      .dualKey             { fill: #666; }
+      .layerMod, .colorMod { fill: #eee; }
+      .layerSym, .colorSym { fill: #99f; }
+    }
+  </style>
+
+  <g id="row_AD">
+    <g class="left">
+      <g transform="translate(90)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">Q</text>
+        <text x="38.0" y="43.4" class="layerSym">1</text>
+      </g>
+      <g transform="translate(150)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">W</text>
+        <text x="38.0" y="43.4" class="layerNav shortcut">^w</text>
+        <text x="38.0" y="43.4" class="layerSym">[</text>
+      </g>
+      <g transform="translate(210)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">E</text>
+        <text x="38.0" y="43.4" class="layerNav">⎗</text>
+        <text x="38.0" y="43.4" class="layerSym">]</text>
+      </g>
+      <g transform="translate(270)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">R</text>
+        <text x="38.0" y="43.4" class="layerNav">⎘</text>
+        <text x="38.0" y="43.4" class="layerSym">$</text>
+      </g>
+      <g transform="translate(330)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">T</text>
+        <text x="38.0" y="43.4" class="layerSym">%</text>
+      </g>
+    </g>
+    <g class="right">
+      <g transform="translate(390)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">Y</text>
+        <text x="38.0" y="43.4" class="layerNav">⇱</text>
+        <text x="38.0" y="43.4" class="layerSym">^</text>
+      </g>
+      <g transform="translate(450)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">U</text>
+        <text x="38.0" y="43.4" class="layerNav">⇟</text>
+        <text x="38.0" y="43.4" class="layerSym">&amp;</text>
+      </g>
+      <g transform="translate(510)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">I</text>
+        <text x="38.0" y="43.4" class="layerNav">⇞</text>
+        <text x="38.0" y="43.4" class="layerSym">*</text>
+      </g>
+      <g transform="translate(570)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">O</text>
+        <text x="38.0" y="43.4" class="layerNav">⇲</text>
+        <text x="38.0" y="43.4" class="layerSym">'</text>
+      </g>
+      <g transform="translate(630)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">P</text>
+        <text x="38.0" y="43.4" class="layerSym">0</text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AC">
+    <g class="left">
+      <g transform="translate(90)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">A</text>
+        <text x="38.0" y="43.4" class="layerNav shortcut">^a</text>
+        <text x="38.0" y="43.4" class="layerSym">{</text>
+      </g>
+      <g transform="translate(150)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
+        <text x="12.8" y="20.6" class="level2">S</text>
+        <text x="12.8" y="43.4" class="layerMod">⌘</text>
+        <text x="38.0" y="43.4" class="layerNav shortcut">^s</text>
+        <text x="38.0" y="43.4" class="layerSym">(</text>
+      </g>
+      <g transform="translate(210)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
+        <text x="12.8" y="20.6" class="level2">D</text>
+        <text x="12.8" y="43.4" class="layerMod">⌥</text>
+        <text x="38.0" y="43.4" class="layerNav">⇤</text>
+        <text x="38.0" y="43.4" class="layerSym">)</text>
+      </g>
+      <g transform="translate(270)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
+        <text x="12.8" y="20.6" class="level2">F</text>
+        <text x="12.8" y="43.4" class="layerMod">⌃</text>
+        <text x="38.0" y="43.4" class="layerNav">⇥</text>
+        <text x="38.0" y="43.4" class="layerSym">}</text>
+      </g>
+      <g transform="translate(330)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">G</text>
+        <text x="38.0" y="43.4" class="layerSym">=</text>
+      </g>
+    </g>
+    <g class="right">
+      <g transform="translate(390)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">H</text>
+        <text x="38.0" y="43.4" class="layerNav">←</text>
+        <text x="38.0" y="43.4" class="layerSym">+</text>
+      </g>
+      <g transform="translate(450)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
+        <text x="12.8" y="20.6" class="level2">J</text>
+        <text x="12.8" y="43.4" class="layerMod">⌃</text>
+        <text x="38.0" y="43.4" class="layerNav">↓</text>
+        <text x="38.0" y="43.4" class="layerSym">-</text>
+      </g>
+      <g transform="translate(510)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
+        <text x="12.8" y="20.6" class="level2">K</text>
+        <text x="12.8" y="43.4" class="layerMod">⌥</text>
+        <text x="38.0" y="43.4" class="layerNav">↑</text>
+        <text x="38.0" y="43.4" class="layerSym">&lt;</text>
+      </g>
+      <g transform="translate(570)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
+        <text x="12.8" y="20.6" class="level2">L</text>
+        <text x="12.8" y="43.4" class="layerMod">⌘</text>
+        <text x="38.0" y="43.4" class="layerNav">→</text>
+        <text x="38.0" y="43.4" class="layerSym">&gt;</text>
+      </g>
+      <g transform="translate(630)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="43.4" class="level1">;</text>
+        <text x="12.8" y="20.6" class="level2">:</text>
+        <text x="38.0" y="43.4" class="layerSym">"</text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AB">
+    <g class="left">
+      <g transform="translate(90)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <g>
+          <text x="12.8" y="20.6" class="level2">Z</text>
+          <text x="38.0" y="43.4" class="layerNav shortcut">^z</text>
+          <text x="38.0" y="43.4" class="layerSym">~</text>
+        </g>
+      </g>
+      <g transform="translate(150)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <g>
+          <text x="12.8" y="20.6" class="level2">X</text>
+          <text x="38.0" y="43.4" class="layerNav shortcut">^x</text>
+          <text x="38.0" y="43.4" class="layerSym">`</text>
+        </g>
+      </g>
+      <g transform="translate(210)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <g>
+          <text x="12.8" y="20.6" class="level2">C</text>
+          <text x="38.0" y="43.4" class="layerNav shortcut">^c</text>
+          <text x="38.0" y="43.4" class="layerSym">|</text>
+        </g>
+      </g>
+      <g transform="translate(270)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <g>
+          <text x="12.8" y="20.6" class="level2">V</text>
+          <text x="38.0" y="43.4" class="layerNav shortcut">^v</text>
+          <text x="38.0" y="43.4" class="layerSym">_</text>
+        </g>
+      </g>
+      <g transform="translate(330)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <g>
+          <text x="12.8" y="20.6" class="level2">B</text>
+          <text x="38.0" y="43.4" class="layerSym">/</text>
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g transform="translate(390)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">N</text>
+        <text x="30.0" y="43.4" class="layerNav">🖰</text>
+        <text x="38.0" y="43.4" class="layerNav">←</text>
+        <text x="38.0" y="43.4" class="layerSym">\</text>
+      </g>
+      <g transform="translate(450)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">M</text>
+        <text x="30.0" y="43.4" class="layerNav">🖰</text>
+        <text x="42.0" y="43.4" class="layerNav">↓</text>
+        <text x="38.0" y="43.4" class="layerSym">@</text>
+      </g>
+      <g transform="translate(510)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="43.4" class="level1">,</text>
+        <text x="12.8" y="20.6" class="level2">&lt;</text>
+        <text x="30.0" y="43.4" class="layerNav">🖰</text>
+        <text x="42.0" y="43.4" class="layerNav">↑</text>
+        <text x="38.0" y="43.4" class="layerSym">#</text>
+      </g>
+      <g transform="translate(570)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="43.4" class="level1">.</text>
+        <text x="12.8" y="20.6" class="level2">&gt;</text>
+        <text x="30.0" y="43.4" class="layerNav">🖰</text>
+        <text x="38.0" y="43.4" class="layerNav">→</text>
+        <text x="38.0" y="43.4" class="layerSym">!</text>
+      </g>
+      <g transform="translate(630)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">?</text>
+        <text x="38.0" y="43.4" class="layerSym">?</text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AA">
+    <g transform="translate(180)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <rect width="41" height="26" rx="2" ry="2" class="dualKey"/>
+      <text x="20.5" y="42.8" class="layerMod shortcut">shift</text>
+      <text x="61.5" y="42.8" class="layerMod shortcut colorSym">num</text>
+      <text x="61.5" y="42.8" class="layerNav" style="font-size: 14px;">⌦</text>
+      <text x="20.5" y="20.6" class="level2" style="font-size: 14px;">⌫</text>
+    </g>
+    <g transform="translate(270)">
+      <rect width="232" height="52" rx="5" ry="5"/>
+      <rect width="116" height="26" rx="2" ry="2" class="dualKey"/>
+      <text x="58.0" y="42.8" class="layerMod colorNav shortcut">navigation</text>
+    </g>
+    <g transform="translate(510)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <rect width="41" height="26" rx="2" ry="2" class="dualKey"/>
+      <text x="20.5" y="42.8" class="layerMod colorSym shortcut">prog</text>
+      <text x="61.5" y="42.8" class="layerNav">⎋</text>
+      <text x="20.5" y="22.6" class="level2">⏎</text>
+    </g>
+  </g>
+
+</svg>

img/base.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="gnu" viewBox="0 60 900 240">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
     rect, path {
@@ -6,50 +6,29 @@
       stroke-width: .5px;
       fill: #fff;
     }
-    .specialKey,
-    .specialKey rect {
-      fill: #e4e4e4;
-    }
-    .specialKey text {
-      fill: #333;
-    }
     text {
-      fill: #333;
       fill: #ccc;
       font: normal 20px sans-serif;
       text-align: center;
     }
-    .shortcut {
-      font-size: 12px;
-      font-weight: normal;
-      text-anchor: end;
-      transform: translateX(10px);
+    .layer {
+      font-size: 14px;
+      font-weight: bold;
+      text-anchor: middle;
+      fill: #333;
     }
 
     #row_AD { transform: translate(64px,  64px); }
     #row_AC { transform: translate(64px, 124px); }
     #row_AB { transform: translate(64px, 184px); }
     #row_AA { transform: translate(64px, 244px); }
+    .left   { transform: translate(-15px, 0); }
+    .right  { transform: translate(+15px, 0); }
 
-    #row_AA .homeKey text,
-    .specialKey .win,
-    .specialKey .gnu {
-      font-size: 14px;
-    }
-    .specialKey .win,
-    .specialKey .mac,
-    .specialKey .gnu {
-      display: none;
-    }
-    .mac .specialKey .mac,
-    .gnu .specialKey .gnu,
-    .win .specialKey .win { display: block; }
-
-    .level3 { fill: #333; }
     @media (prefers-color-scheme: dark) {
       text       { fill: #888; }
       rect, path { fill: #555; }
-      .level3    { fill: #ccc; }
+      .layer     { fill: #eee; }
     }
   </style>
 
@@ -132,21 +111,21 @@
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">S</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">super</text>
+          <text x="26.0" y="43.4" class="layer">Super</text>
         </g>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">D</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">alt</text>
+          <text x="26.0" y="43.4" class="layer">Alt</text>
         </g>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">F</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">ctrl</text>
+          <text x="26.0" y="43.4" class="layer">Ctrl</text>
         </g>
       </g>
       <g transform="translate(330)">
@@ -167,21 +146,21 @@
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">J</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">ctrl</text>
+          <text x="26.0" y="43.4" class="layer">Ctrl</text>
         </g>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">K</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">alt</text>
+          <text x="26.0" y="43.4" class="layer">Alt</text>
         </g>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">L</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">super</text>
+          <text x="26.0" y="43.4" class="layer">Super</text>
         </g>
       </g>
       <g transform="translate(630)">
@@ -265,25 +244,19 @@
   </g>
 
   <g id="row_AA">
-    <g class="left">
-      <g class="specialKey" transform="translate(180)">
-        <rect width="82" height="52" rx="5" ry="5"/>
-        <text x="64.8" y="18.6" text-anchor="middle" style="font-size: 12px;">⌫</text>
-        <text x="11.0" y="42.8" class="win gnu">Shift</text>
-        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
-      </g>
+    <g transform="translate(180)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="12.8" y="20.6" class="level2" style="font-size: 14px;">⌫</text>
+      <text x="41.0" y="42.8" class="layer">Shift</text>
     </g>
     <g class="homeKey" transform="translate(270)">
       <rect width="232" height="52" rx="5" ry="5"/>
-      <text x="11.0" y="42.8" class="win gnu" style="fill: red;">Navigation</text>
+      <text x="116.0" y="42.8" class="layer" style="fill: #e83;">Navigation</text>
     </g>
-    <g class="right">
-      <g class="specialKey" transform="translate(510)">
-        <rect width="82" height="52" rx="5" ry="5"/>
-        <text x="64.8" y="20.6" text-anchor="middle">⏎</text>
-        <text x="11.0" y="42.8" class="win gnu" style="fill: blue;">Symbols</text>
-        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
-      </g>
+    <g transform="translate(510)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="12.8" y="23.6" class="level2">⏎</text>
+      <text x="41.0" y="42.8" class="layer" style="fill: #66d;">Symbols</text>
     </g>
   </g>
 

img/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head>
+  <style>
+    body {
+      width: 51em;
+      margin: 0 auto;
+      border-left: 1px solid #8883;
+      border-right: 1px solid #8883;
+      font-family: sans-serif;
+      text-align: center;
+    }
+    @media (prefers-color-scheme: dark) {
+      html { background-color: #222; color: #ddd; }
+    }
+  </style>
+</head>
+<body>
+	<h1> Selenium33
+  <img src="all.svg">
+  <h2> Base Layer
+  <img src="base.svg">
+  <h2> Prog Layer
+  <img src="symbols.svg">
+  <h2> Navigation Layer
+  <img src="navigation.svg">
+  <h2> NumRow Layer
+  <img src="numrow.svg">
+</body>
+</html>

img/navigation.svg

@@ -1,52 +1,34 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="gnu" viewBox="0 60 900 240">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
     rect, path {
+      fill: #f8f8f8;
       stroke: #666;
       stroke-width: .5px;
-      fill: #fff;
-    }
-    .specialKey,
-    .specialKey rect {
-      fill: #e4e4e4;
-    }
-    .specialKey text {
-      fill: #333;
     }
     text {
-      fill: #333;
-      fill: #ccc;
+      fill: #999;
       font: normal 20px sans-serif;
       text-align: center;
-    }
-    .shortcut {
-      font-size: smaller;
+      text-anchor: middle;
     }
 
     #row_AD { transform: translate(64px,  64px); }
     #row_AC { transform: translate(64px, 124px); }
     #row_AB { transform: translate(64px, 184px); }
     #row_AA { transform: translate(64px, 244px); }
+    .left   { transform: translate(-15px, 0); }
+    .right  { transform: translate(+15px, 0); }
 
-    #row_AA .homeKey text,
-    .specialKey .win,
-    .specialKey .win,
-    .specialKey .gnu {
-      font-size: 14px;
-    }
-    .specialKey .win,
-    .specialKey .mac,
-    .specialKey .gnu {
-      display: none;
-    }
-    .mac .specialKey .mac,
-    .gnu .specialKey .gnu,
-    .win .specialKey .win { display: block; }
-
+    .layer    { font-size: 14px; }
+    .shortcut { font-size: smaller; }
     .level3 { fill: #e83; font-weight: bold; }
+    .active { fill: #ddd; }
+
     @media (prefers-color-scheme: dark) {
-      text       { fill: #888; }
-      rect, path { fill: #555; }
+      text    { fill: #888; }
+      rect    { fill: #444; }
+      .active { fill: #666; }
     }
   </style>
 
@@ -54,72 +36,52 @@
     <g class="left">
       <g transform="translate(90)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">Q</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Q</text>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">W</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">^w</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">W</text>
+        <text x="38.0" y="43.4" class="level3 shortcut">^w</text>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">E</text>
-          <text x="38.0" y="43.4" class="level3">⎗</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">E</text>
+        <text x="38.0" y="43.4" class="level3">⎗</text>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">R</text>
-          <text x="38.0" y="43.4" class="level3">⎘</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">R</text>
+        <text x="38.0" y="43.4" class="level3">⎘</text>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">T</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">T</text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">Y</text>
-          <text x="38.0" y="43.4" class="level3">⇱</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Y</text>
+        <text x="38.0" y="43.4" class="level3">⇱</text>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">U</text>
-          <text x="38.0" y="43.4" class="level3">⇟</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">U</text>
+        <text x="38.0" y="43.4" class="level3">⇟</text>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">I</text>
-          <text x="38.0" y="43.4" class="level3">⇞</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">I</text>
+        <text x="38.0" y="43.4" class="level3">⇞</text>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">O</text>
-          <text x="38.0" y="43.4" class="level3">⇲</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">O</text>
+        <text x="38.0" y="43.4" class="level3">⇲</text>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">P</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">P</text>
       </g>
     </g>
   </g>
@@ -128,74 +90,54 @@
     <g class="left">
       <g transform="translate(90)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">A</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">^a</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">A</text>
+        <text x="38.0" y="43.4" class="level3 shortcut">^a</text>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">S</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">^s</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">S</text>
+        <text x="38.0" y="43.4" class="level3 shortcut">^s</text>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">D</text>
-          <text x="38.0" y="43.4" class="level3">⇤</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">D</text>
+        <text x="38.0" y="43.4" class="level3">⇤</text>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">F</text>
-          <text x="38.0" y="43.4" class="level3">⇥</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">F</text>
+        <text x="38.0" y="43.4" class="level3">⇥</text>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">G</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">G</text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">H</text>
-          <text x="38.0" y="43.4" class="level3">←</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">H</text>
+        <text x="38.0" y="43.4" class="level3">←</text>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">J</text>
-          <text x="38.0" y="43.4" class="level3">↓</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">J</text>
+        <text x="38.0" y="43.4" class="level3">↓</text>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">K</text>
-          <text x="38.0" y="43.4" class="level3">↑</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">K</text>
+        <text x="38.0" y="43.4" class="level3">↑</text>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">L</text>
-          <text x="38.0" y="43.4" class="level3">→</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">L</text>
+        <text x="38.0" y="43.4" class="level3">→</text>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="43.4" class="level1">;</text>
-          <text x="12.8" y="20.6" class="level2">:</text>
-        </g>
+        <text x="12.8" y="43.4" class="level1">;</text>
+        <text x="12.8" y="20.6" class="level2">:</text>
       </g>
     </g>
   </g>
@@ -204,104 +146,78 @@
     <g class="left">
       <g transform="translate(90)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">Z</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">^z</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Z</text>
+        <text x="38.0" y="43.4" class="level3 shortcut">^z</text>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">X</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">^x</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">X</text>
+        <text x="38.0" y="43.4" class="level3 shortcut">^x</text>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">C</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">^c</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">C</text>
+        <text x="38.0" y="43.4" class="level3 shortcut">^c</text>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">V</text>
-          <text x="38.0" y="43.4" class="level3 shortcut">^v</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">V</text>
+        <text x="38.0" y="43.4" class="level3 shortcut">^v</text>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">B</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">B</text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">N</text>
-          <text x="30.0" y="43.4" class="level3">🖰</text>
-          <text x="38.0" y="43.4" class="level3">←</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">N</text>
+        <text x="30.0" y="43.4" class="level3">🖰</text>
+        <text x="38.0" y="43.4" class="level3">←</text>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">M</text>
-          <text x="30.0" y="43.4" class="level3">🖰</text>
-          <text x="42.0" y="43.4" class="level3">↓</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">M</text>
+        <text x="30.0" y="43.4" class="level3">🖰</text>
+        <text x="42.0" y="43.4" class="level3">↓</text>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="43.4" class="level1">,</text>
-          <text x="12.8" y="20.6" class="level2">&lt;</text>
-          <text x="30.0" y="43.4" class="level3">🖰</text>
-          <text x="42.0" y="43.4" class="level3">↑</text>
-        </g>
+        <text x="12.8" y="43.4" class="level1">,</text>
+        <text x="12.8" y="20.6" class="level2">&lt;</text>
+        <text x="30.0" y="43.4" class="level3">🖰</text>
+        <text x="42.0" y="43.4" class="level3">↑</text>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="43.4" class="level1">.</text>
-          <text x="12.8" y="20.6" class="level2">&gt;</text>
-          <text x="30.0" y="43.4" class="level3">🖰</text>
-          <text x="38.0" y="43.4" class="level3">→</text>
-        </g>
+        <text x="12.8" y="43.4" class="level1">.</text>
+        <text x="12.8" y="20.6" class="level2">&gt;</text>
+        <text x="30.0" y="43.4" class="level3">🖰</text>
+        <text x="38.0" y="43.4" class="level3">→</text>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="43.4" class="level1">/</text>
-          <text x="12.8" y="20.6" class="level2">?</text>
-        </g>
+        <text x="12.8" y="43.4" class="level1">/</text>
+        <text x="12.8" y="20.6" class="level2">?</text>
       </g>
     </g>
   </g>
 
   <g id="row_AA">
-    <g class="left">
-      <g class="specialKey" transform="translate(180)">
-        <rect width="82" height="52" rx="5" ry="5"/>
-        <text x="64.8" y="18.6" text-anchor="middle" style="fill: red; font-size: 12px;">⌦</text>
-        <text x="11.0" y="42.8" class="win gnu">Shift</text>
-        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
-      </g>
+    <g transform="translate(180)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="12.8" y="20.6" class="level2" style="font-size: 14px;">⌫</text>
+      <text x="64.8" y="42.8" class="level3" style="font-size: 14px;">⌦</text>
     </g>
     <g class="homeKey" transform="translate(270)">
-      <rect width="232" height="52" rx="5" ry="5" style="fill: #fd7;"/>
-      <text x="11.0" y="42.8" class="win gnu" style="fill: red;">Navigation</text>
+      <rect width="232" height="52" rx="5" ry="5" class="active"/>
+      <text x="58.0" y="42.8" class="layer level3">navigation</text>
     </g>
-    <g class="right">
-      <g class="specialKey" transform="translate(510)">
-        <rect width="82" height="52" rx="5" ry="5"/>
-        <text x="64.8" y="20.6" style="fill: red;" text-anchor="middle">⎋</text>
-        <text x="11.0" y="42.8" class="win gnu" style="fill: blue;">Symbols</text>
-        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
-      </g>
+    <g transform="translate(510)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="12.8" y="23.6" class="level2">⏎</text>
+      <text x="64.8" y="42.8" class="level3">⎋</text>
     </g>
   </g>
 

img/numrow.svg

@@ -1,62 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="gnu"
-    viewBox="0 60 900 240">
-    <!-- viewBox="60 60 780 240"> -->
-
-<!--
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
-      href="42_style.css" type="text/css"/>
--->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
     rect, path {
+      fill: #f8f8f8;
       stroke: #666;
       stroke-width: .5px;
-      fill: #fff;
-    }
-    .specialKey,
-    .specialKey rect {
-      fill: #e4e4e4;
-    }
-    .specialKey text {
-      fill: #333;
     }
     text {
-      fill: #333;
-      fill: #ccc;
+      fill: #999;
       font: normal 20px sans-serif;
       text-align: center;
+      text-anchor: middle;
     }
 
     #row_AD { transform: translate(64px,  64px); }
     #row_AC { transform: translate(64px, 124px); }
     #row_AB { transform: translate(64px, 184px); }
     #row_AA { transform: translate(64px, 244px); }
-
-    /*
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
-    */
 
-    #row_AA .homeKey text,
-    .specialKey .win,
-    .specialKey .win,
-    .specialKey .gnu {
-      font-size: 14px;
-    }
-    .specialKey .win,
-    .specialKey .mac,
-    .specialKey .gnu {
-      display: none;
-    }
-    .mac .specialKey .mac,
-    .gnu .specialKey .gnu,
-    .win .specialKey .win { display: block; }
+    .layer  { font-size: 14px; font-weight: bold; }
+    .layerNum { fill: green; }
+    .layerSym { fill: blue; }
+    .active   { fill: #ddd; }
 
-    .level3 { fill: green; }
     @media (prefers-color-scheme: dark) {
-      text       { fill: #888; }
-      .level3    { fill: #6d6; }
-      rect, path { fill: #555; }
+      text      { fill: #888; }
+      rect      { fill: #444; }
+      .active   { fill: #666; }
+      .layerNum { fill: #6d6; }
+      .layerSym { fill: #99f; }
     }
   </style>
 
@@ -64,75 +38,55 @@
     <g class="left">
       <g transform="translate(90)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">Q</text>
-          <text x="38.0" y="43.4" class="level3">!</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Q</text>
+        <text x="38.0" y="43.4" class="layerNum">!</text>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">W</text>
-          <text x="38.0" y="43.4" class="level3">@</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">W</text>
+        <text x="38.0" y="43.4" class="layerNum">@</text>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">E</text>
-          <text x="38.0" y="43.4" class="level3">#</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">E</text>
+        <text x="38.0" y="43.4" class="layerNum">#</text>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">R</text>
-          <text x="38.0" y="43.4" class="level3">$</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">R</text>
+        <text x="38.0" y="43.4" class="layerNum">$</text>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">T</text>
-          <text x="38.0" y="43.4" class="level3">%</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">T</text>
+        <text x="38.0" y="43.4" class="layerNum">%</text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">Y</text>
-          <text x="38.0" y="43.4" class="level3">^</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Y</text>
+        <text x="38.0" y="43.4" class="layerNum">^</text>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">U</text>
-          <text x="38.0" y="43.4" class="level3">&amp;</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">U</text>
+        <text x="38.0" y="43.4" class="layerNum">&amp;</text>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">I</text>
-          <text x="38.0" y="43.4" class="level3">*</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">I</text>
+        <text x="38.0" y="43.4" class="layerNum">*</text>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">O</text>
-          <text x="38.0" y="43.4" class="level3">(</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">O</text>
+        <text x="38.0" y="43.4" class="layerNum">(</text>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">P</text>
-          <text x="38.0" y="43.4" class="level3">)</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">P</text>
+        <text x="38.0" y="43.4" class="layerNum">)</text>
       </g>
     </g>
   </g>
@@ -141,76 +95,56 @@
     <g class="left">
       <g transform="translate(90)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">A</text>
-          <text x="38.0" y="43.4" class="level3">1</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">A</text>
+        <text x="38.0" y="43.4" class="layerNum">1</text>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">S</text>
-          <text x="38.0" y="43.4" class="level3">2</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">S</text>
+        <text x="38.0" y="43.4" class="layerNum">2</text>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">D</text>
-          <text x="38.0" y="43.4" class="level3">3</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">D</text>
+        <text x="38.0" y="43.4" class="layerNum">3</text>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">F</text>
-          <text x="38.0" y="43.4" class="level3">4</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">F</text>
+        <text x="38.0" y="43.4" class="layerNum">4</text>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">G</text>
-          <text x="38.0" y="43.4" class="level3">5</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">G</text>
+        <text x="38.0" y="43.4" class="layerNum">5</text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">H</text>
-          <text x="38.0" y="43.4" class="level3">6</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">H</text>
+        <text x="38.0" y="43.4" class="layerNum">6</text>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">J</text>
-          <text x="38.0" y="43.4" class="level3">7</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">J</text>
+        <text x="38.0" y="43.4" class="layerNum">7</text>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">K</text>
-          <text x="38.0" y="43.4" class="level3">8</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">K</text>
+        <text x="38.0" y="43.4" class="layerNum">8</text>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">L</text>
-          <text x="38.0" y="43.4" class="level3">9</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">L</text>
+        <text x="38.0" y="43.4" class="layerNum">9</text>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="43.4" class="level1">;</text>
-          <text x="12.8" y="20.6" class="level2">:</text>
-          <text x="38.0" y="43.4" class="level3">0</text>
-        </g>
+        <text x="12.8" y="43.4" class="level1">;</text>
+        <text x="12.8" y="20.6" class="level2">:</text>
+        <text x="38.0" y="43.4" class="layerNum">0</text>
       </g>
     </g>
   </g>
@@ -219,96 +153,69 @@
     <g class="left">
       <g transform="translate(90)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">Z</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Z</text>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">X</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">X</text>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">C</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">C</text>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">V</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">V</text>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">B</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">B</text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">N</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">N</text>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="20.6" class="level2">M</text>
-          <text x="38.0" y="43.4" class="level3">-</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">M</text>
+        <text x="38.0" y="43.4" class="layerNum">-</text>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="43.4" class="level1">,</text>
-          <text x="12.8" y="20.6" class="level2">&lt;</text>
-          <text x="38.0" y="43.4" class="level3">,</text>
-        </g>
+        <text x="12.8" y="43.4" class="level1">,</text>
+        <text x="12.8" y="20.6" class="level2">&lt;</text>
+        <text x="38.0" y="43.4" class="layerNum">,</text>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="43.4" class="level1">.</text>
-          <text x="12.8" y="20.6" class="level2">&gt;</text>
-          <text x="38.0" y="43.4" class="level3">.</text>
-        </g>
+        <text x="12.8" y="43.4" class="level1">.</text>
+        <text x="12.8" y="20.6" class="level2">&gt;</text>
+        <text x="38.0" y="43.4" class="layerNum">.</text>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="12.8" y="43.4" class="level1">/</text>
-          <text x="12.8" y="20.6" class="level2">?</text>
-          <text x="38.0" y="43.4" class="level3">/</text>
-        </g>
+        <text x="12.8" y="43.4" class="level1">/</text>
+        <text x="12.8" y="20.6" class="level2">?</text>
+        <text x="38.0" y="43.4" class="layerNum">/</text>
       </g>
     </g>
   </g>
 
   <g id="row_AA">
-    <g class="left">
-      <g class="specialKey" transform="translate(180)">
-        <rect width="82" height="52" rx="5" ry="5" style="fill: #ada;"/>
-        <!-- <text x="64.8" y="18.6" text-anchor="middle" style="font-size: 12px;">⌫</text> -->
-        <text x="11.0" y="42.8" class="win gnu">Num</text>
-        <!-- <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text> -->
-      </g>
+    <g transform="translate(180)">
+      <rect width="82" height="52" rx="5" ry="5" class="active"/>
+      <text x="20.5" y="20.6" class="level2" style="font-size: 14px;">⌫</text>
+      <text x="20.5" y="42.8" class="layer layerNum">num</text>
     </g>
-    <g class="homeKey" transform="translate(270)">
+    <g transform="translate(270)">
       <rect width="232" height="52" rx="5" ry="5"/>
-      <!-- <text x="11.0" y="42.8" class="win gnu">Nav</text> -->
     </g>
-    <g class="right">
-      <g class="specialKey" transform="translate(510)">
-        <rect width="82" height="52" rx="5" ry="5"/>
-        <text x="64.8" y="20.6" text-anchor="middle">⏎</text>
-        <text x="11.0" y="42.8" class="win gnu" style="fill: blue;">Symbols</text>
-        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
-      </g>
+    <g transform="translate(510)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="20.5" y="23.6" class="level2">⏎</text>
+      <text x="20.5" y="42.8" class="layer layerSym">prog</text>
     </g>
   </g>
 

img/symbols.svg

@@ -1,62 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="gnu"
-    viewBox="0 60 900 240">
-    <!-- viewBox="60 60 780 240"> -->
-
-<!--
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
-      href="42_style.css" type="text/css"/>
--->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
     rect, path {
+      fill: #f8f8f8;
       stroke: #666;
       stroke-width: .5px;
-      fill: #fff;
-    }
-    .specialKey,
-    .specialKey rect {
-      fill: #e4e4e4;
-    }
-    .specialKey text {
-      fill: #333;
     }
     text {
-      fill: #333;
-      fill: #ccc;
+      fill: #999;
       font: normal 20px sans-serif;
       text-align: center;
+      text-anchor: middle;
     }
 
     #row_AD { transform: translate(64px,  64px); }
     #row_AC { transform: translate(64px, 124px); }
     #row_AB { transform: translate(64px, 184px); }
     #row_AA { transform: translate(64px, 244px); }
-
-    /*
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
-    */
 
-    #row_AA .homeKey text,
-    .specialKey .win,
-    .specialKey .win,
-    .specialKey .gnu {
-      font-size: 14px;
-    }
-    .specialKey .win,
-    .specialKey .mac,
-    .specialKey .gnu {
-      display: none;
-    }
-    .mac .specialKey .mac,
-    .gnu .specialKey .gnu,
-    .win .specialKey .win { display: block; }
+    .layer  { font-size: 14px; font-weight: bold; }
+    .layerNum { fill: green; }
+    .layerSym { fill: blue; }
+    .active   { fill: #ddd; }
 
-    .level3 { fill: blue; }
     @media (prefers-color-scheme: dark) {
-      text       { fill: #888; }
-      .level3    { fill: #66d; }
-      rect, path { fill: #555; }
+      text      { fill: #888; }
+      rect      { fill: #444; }
+      .active   { fill: #666; }
+      .layerNum { fill: #6d6; }
+      .layerSym { fill: #99f; }
     }
   </style>
 
@@ -66,35 +40,35 @@
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">Q</text>
-          <text x="38.0" y="43.4" class="level3">1</text>
+          <text x="38.0" y="43.4" class="layerSym">1</text>
         </g>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">W</text>
-          <text x="38.0" y="43.4" class="level3">[</text>
+          <text x="38.0" y="43.4" class="layerSym">[</text>
         </g>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">E</text>
-          <text x="38.0" y="43.4" class="level3">]</text>
+          <text x="38.0" y="43.4" class="layerSym">]</text>
         </g>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">R</text>
-          <text x="38.0" y="43.4" class="level3">$</text>
+          <text x="38.0" y="43.4" class="layerSym">$</text>
         </g>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">T</text>
-          <text x="38.0" y="43.4" class="level3">%</text>
+          <text x="38.0" y="43.4" class="layerSym">%</text>
         </g>
       </g>
     </g>
@@ -103,35 +77,35 @@
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">Y</text>
-          <text x="38.0" y="43.4" class="level3">^</text>
+          <text x="38.0" y="43.4" class="layerSym">^</text>
         </g>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">U</text>
-          <text x="38.0" y="43.4" class="level3">&amp;</text>
+          <text x="38.0" y="43.4" class="layerSym">&amp;</text>
         </g>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">I</text>
-          <text x="38.0" y="43.4" class="level3">*</text>
+          <text x="38.0" y="43.4" class="layerSym">*</text>
         </g>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">O</text>
-          <text x="38.0" y="43.4" class="level3">'</text>
+          <text x="38.0" y="43.4" class="layerSym">'</text>
         </g>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">P</text>
-          <text x="38.0" y="43.4" class="level3">0</text>
+          <text x="38.0" y="43.4" class="layerSym">0</text>
         </g>
       </g>
     </g>
@@ -143,35 +117,35 @@
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">A</text>
-          <text x="38.0" y="43.4" class="level3">{</text>
+          <text x="38.0" y="43.4" class="layerSym">{</text>
         </g>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">S</text>
-          <text x="38.0" y="43.4" class="level3">(</text>
+          <text x="38.0" y="43.4" class="layerSym">(</text>
         </g>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">D</text>
-          <text x="38.0" y="43.4" class="level3">)</text>
+          <text x="38.0" y="43.4" class="layerSym">)</text>
         </g>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">F</text>
-          <text x="38.0" y="43.4" class="level3">}</text>
+          <text x="38.0" y="43.4" class="layerSym">}</text>
         </g>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">G</text>
-          <text x="38.0" y="43.4" class="level3">=</text>
+          <text x="38.0" y="43.4" class="layerSym">=</text>
         </g>
       </g>
     </g>
@@ -180,28 +154,28 @@
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">H</text>
-          <text x="38.0" y="43.4" class="level3">+</text>
+          <text x="38.0" y="43.4" class="layerSym">+</text>
         </g>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">J</text>
-          <text x="38.0" y="43.4" class="level3">-</text>
+          <text x="38.0" y="43.4" class="layerSym">-</text>
         </g>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">K</text>
-          <text x="38.0" y="43.4" class="level3">&lt;</text>
+          <text x="38.0" y="43.4" class="layerSym">&lt;</text>
         </g>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">L</text>
-          <text x="38.0" y="43.4" class="level3">&gt;</text>
+          <text x="38.0" y="43.4" class="layerSym">&gt;</text>
         </g>
       </g>
       <g transform="translate(630)">
@@ -209,7 +183,7 @@
         <g class="key" text-anchor="middle">
           <text x="12.8" y="43.4" class="level1">;</text>
           <text x="12.8" y="20.6" class="level2">:</text>
-          <text x="38.0" y="43.4" class="level3">"</text>
+          <text x="38.0" y="43.4" class="layerSym">"</text>
         </g>
       </g>
     </g>
@@ -221,35 +195,35 @@
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">Z</text>
-          <text x="38.0" y="43.4" class="level3">~</text>
+          <text x="38.0" y="43.4" class="layerSym">~</text>
         </g>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">X</text>
-          <text x="38.0" y="43.4" class="level3">`</text>
+          <text x="38.0" y="43.4" class="layerSym">`</text>
         </g>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">C</text>
-          <text x="38.0" y="43.4" class="level3">|</text>
+          <text x="38.0" y="43.4" class="layerSym">|</text>
         </g>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">V</text>
-          <text x="38.0" y="43.4" class="level3">_</text>
+          <text x="38.0" y="43.4" class="layerSym">_</text>
         </g>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">B</text>
-          <text x="38.0" y="43.4" class="level3">/</text>
+          <text x="38.0" y="43.4" class="layerSym">/</text>
         </g>
       </g>
     </g>
@@ -258,14 +232,14 @@
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">N</text>
-          <text x="38.0" y="43.4" class="level3">\</text>
+          <text x="38.0" y="43.4" class="layerSym">\</text>
         </g>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g class="key" text-anchor="middle">
           <text x="12.8" y="20.6" class="level2">M</text>
-          <text x="38.0" y="43.4" class="level3">@</text>
+          <text x="38.0" y="43.4" class="layerSym">@</text>
         </g>
       </g>
       <g transform="translate(510)">
@@ -273,7 +247,7 @@
         <g class="key" text-anchor="middle">
           <text x="12.8" y="43.4" class="level1">,</text>
           <text x="12.8" y="20.6" class="level2">&lt;</text>
-          <text x="38.0" y="43.4" class="level3">#</text>
+          <text x="38.0" y="43.4" class="layerSym">#</text>
         </g>
       </g>
       <g transform="translate(570)">
@@ -281,7 +255,7 @@
         <g class="key" text-anchor="middle">
           <text x="12.8" y="43.4" class="level1">.</text>
           <text x="12.8" y="20.6" class="level2">&gt;</text>
-          <text x="38.0" y="43.4" class="level3">!</text>
+          <text x="38.0" y="43.4" class="layerSym">!</text>
         </g>
       </g>
       <g transform="translate(630)">
@@ -289,32 +263,25 @@
         <g class="key" text-anchor="middle">
           <text x="12.8" y="43.4" class="level1">/</text>
           <text x="12.8" y="20.6" class="level2">?</text>
-          <text x="38.0" y="43.4" class="level3">?</text>
+          <text x="38.0" y="43.4" class="layerSym">?</text>
         </g>
       </g>
     </g>
   </g>
 
   <g id="row_AA">
-    <g class="left">
-      <g class="specialKey" transform="translate(180)">
-        <rect width="82" height="52" rx="5" ry="5"/>
-        <!-- <text x="64.8" y="18.6" text-anchor="middle" style="font-size: 12px;">⌫</text> -->
-        <text x="11.0" y="42.8" class="win gnu">Num</text>
-        <!-- <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text> -->
-      </g>
+    <g transform="translate(180)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="20.5" y="20.6" class="level2" style="font-size: 14px;">⌫</text>
+      <text x="20.5" y="42.8" class="layer layerNum">num</text>
     </g>
-    <g class="homeKey" transform="translate(270)">
+    <g transform="translate(270)">
       <rect width="232" height="52" rx="5" ry="5"/>
-      <!-- <text x="11.0" y="42.8" class="win gnu">Nav</text> -->
     </g>
-    <g class="right">
-      <g class="specialKey" transform="translate(510)">
-        <rect width="82" height="52" rx="5" ry="5" style="fill: #aad;"/>
-        <!-- <text x="64.8" y="20.6" text-anchor="middle">⏎</text> -->
-        <text x="11.0" y="42.8" class="win gnu" style="fill: blue;">Symbols</text>
-        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
-      </g>
+    <g transform="translate(510)">
+      <rect width="82" height="52" rx="5" ry="5" class="active"/>
+      <text x="20.5" y="23.6" class="level2">⏎</text>
+      <text x="20.5" y="42.8" class="layer layerSym">prog</text>
     </g>
   </g>
 

img/symbols39.svg

@@ -1,11 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="gnu"
-    viewBox="0 60 900 240">
-    <!-- viewBox="60 60 780 240"> -->
-
-<!--
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
-      href="42_style.css" type="text/css"/>
--->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
     rect, path {