docs: readme and images matching actual Arsenik (#26)

* docs: readme and images matching actual Arsenik

* docs: Kazé PR review

Co-authored-by: Fabien Cazenave <fabi1cazenave@users.noreply.github.com>

* docs: meaningful links

* docs: Discord PR review

* docs: all images in ortho layout except on home

* docs: one page explanation

* docs: Kazé PR review

Co-authored-by: Fabien Cazenave <fabi1cazenave@users.noreply.github.com>

* docs: Kazé PR review

* docs: Lafayette layer instead of 1dk layer

---------

Co-authored-by: Fabien Cazenave <fabi1cazenave@users.noreply.github.com>

README.md

@@ -1,210 +1,320 @@
-Arsenik
-================================================================================
+<h1 align="center">Arsenik</h1>
 
-Configure your keyboard (even if it is not programmable) with a
-beginner-friendly, [Miryoku][1]-like approach to minimize finger movements!
+<div align="center">
+  ★ <strong>Ergonomics for any keyboard!</strong> ★
+</div>
 
-You can choose your options:
-- [angle-mod](https://colemakmods.github.io/ergonomic-mods/angle.html) (by
-default the only option activated)
-- 3 home-row mods (HRM) per hand for <kbd>Ctrl</kbd>, <kbd>Alt</kbd>, <kbd>Super</kbd>
-- 3 layer-tap keys under the thumbs: <kbd>Alt</kbd> (or <kbd>Shift</kbd> in 
-HRM)/<kbd>Backspace</kbd>, <kbd>Navigation</kbd>/<kbd>Space</kbd>,
-<kbd>Symbol</kbd>/<kbd>Return</kbd>
+<br>
+
+<div align="center">
+  Configure your keyboard — even if it is not programmable — with a
+  beginner-friendly approach to minimize finger movements!
+</div>
+
+<br>
 
 ![base, navigation and sym layers on a 33-key keyboard](img/all.svg)
 
-**Bring the keys to your fingers, rather than moving your fingers to the keys!**
+*Note: The keyboard layout presented here in the illustration is Qwerty but it
+works with other layouts as well — e.g. Azerty, Qwertz, Ergo‑L, Bépo…*
+
+--------------------------------------------------------------------------------
 
-- A long press on the <kbd>Return</kbd> key brings up the <kbd>Symbol</kbd>
-layer, where all programming symbols are arranged for comfort and efficiency.
-- A long press on the <kbd>Space</kbd> bar brings up the <kbd>Navigation</kbd>
-layer, with a numpad, cursor navigation (<kbd>ESDF</kbd>) and one-hand shortcuts.
 
-This is how modern ergonomic keyboards work — e.g. [Planck][47], [Atreus][44],
-[Corne][42], [Ferris][34]… The goal here is to propose an approach that works
-with any keyboard, including your laptop’s.
+Table of contents
+--------------------------------------------------------------------------------
 
-[47]: https://olkb.com/collections/planck
-[44]: https://atreus.technomancy.us
-[42]: https://github.com/foostan/crkbd
-[34]: https://github.com/pierrechevalier83/ferris
+- [Philosophy](#philosophy)
+- [Features](#pick-your-poison)
+  1. [Angle mod](#1-angle-mod)
+  2. [Mod-taps](#2-supercharge-your-thumbs-with-mod-taps)
+  3. [Symbols layer](#3-symbols-layer)
+  4. [Navigation layer](#4-navigation-layer)
+  5. [Keyboard layout](#5-keyboard-layout)
+  6. [Extra customization](#bonus-spice-it-up)
+- [Installation](#installation)
+- [Why “Arsenik”?](#why-arsenik)
+- [Join the community](#join-the-community)
 
 
-Main Benefits
+Philosophy
 --------------------------------------------------------------------------------
 
-- <kbd>Shift</kbd>, <kbd>Backspace</kbd>, <kbd>Return</kbd> under the thumbs!
-- all numbers and programming symbols in the comfortable 3×10 zone
-- symmetrical modifiers on the home row
-- easier left-hand shortcuts
-- works with any keyboard
+**Bring the keys to your fingers, rather than moving your fingers to the keys.**
 
-Unlike Miryoku which requires 6 thumb keys, Arsenik has been designed to work
-with standard ANSI/ISO/laptop keyboards, leveraging the spacebar and the two
-Alt/Cmd keys.
+Not sure if you should buy that expensive ergonomic keyboard?
+
+Download a ready-to-use Arsenik configuration for [Kanata], and enjoy on your
+regular keyboard features that were normally only accessible to programmable
+keyboard.
+
+*Note: You might benefit the most of Arsenik if you are [touch typing].*
 
 
 Pick Your Poison!
 --------------------------------------------------------------------------------
 
-Adjusting to compact keyboard layouts isn’t easy, but Arsenik is designed for
-a step-by-step approach.
+Choose which Arsenik features to use from the following options:
+
+
+### 1. Angle mod
+
+On an ISO keyboard, it permutes the extra down-left key to ease the angle on
+your left wrist when typing.
+
+![Angle mod](./img/angle_mod.svg)
 
-### 1. Supercharge Your Thumbs
+
+### 2. Supercharge your thumbs with mod-taps
+
+#### First: layer-taps
 
 If you’re new to mod-taps, we suggest to start by adding the “layer-tap” option
 where only the thumbs are affected:
 
 - the left thumb key remains a <kbd>Cmd</kbd> or <kbd>Alt</kbd> key when held,
 but emits a <kbd>Backspace</kbd> when tapped;
-- the right thumb key brings the <kbd>Symbols</kbd> layer when held (similar to
-an <kbd>AltGr</kbd> key), and emits <kbd>Return</kbd> when tapped;
-- the spacebar brings the <kbd>Navigation</kbd> layer when held.
+- the right thumb key brings the <kbd>Symbols</kbd> layer when held (in blue)
+— where all programming symbols are arranged for comfort and efficiency — and
+emits <kbd>Return</kbd> when tapped;
+- the spacebar brings the <kbd>Navigation</kbd> layer when held (in orange).
 
-![alt, navigation and sym layers under the thumbs](img/base_easy.svg)
+![alt, navigation and sym layers under the thumbs](./img/layer_taps.svg)
 
 Having <kbd>Backspace</kbd> and <kbd>Enter</kbd> under the thumbs is enough to
-reduce the pinky fatigue very significantly. And using the <kbd>Symbol</kbd>
-and <kbd>Navigation</kbd> layer further reduces hand and finger movements.
+reduce the pinky fatigue very significantly. And using the <kbd>Symbols</kbd>
+and <kbd>Navigation</kbd> layers further reduces hand and finger movements.
 
-### 2. Enable the Home-Row Mods
 
-When you are familiar with mod-taps, it’s time to enable them on the homerow
-with the “hrm” variants:
+#### Next level: enable the Home Row Mods
+
+When you are familiar with mod-taps, it’s time to enable them on the home row
+with the “HRM” variants:
 
 - <kbd>FDS</kbd> and <kbd>JKL</kbd> become <kbd>Ctrl</kbd>, <kbd>Alt</kbd>,
 <kbd>Super</kbd> when held long enough;
 - the left thumb key can now emit a <kbd>Shift</kbd> rather than <kbd>Alt</kbd>
 when held.
 
-![homerow mods on SDF keys](img/base_hrm.svg)
+![home row mods on SDF keys](./img/hrm.svg)
+
+This is a very basic variant of the [Miryoku] principle: one layer on each
+thumb key, and symmetrical modifiers on the home row.
+
+
+### 3. Symbols layer
+
+For the <kbd>Symbols</kbd> layer you can keep <kbd>AltGr</kbd> as-is. It is
+useful for keyboard layouts that rely heavily on the <kbd>AltGr</kbd> key.
+
+But the real fun (especially for programmers) happens when we enable the 
+“Lafayette” programmation layer!
 
-This is a very basic variant of the [Miryoku][1] principle: one layer on each
-thumb key, and symmetrical modifiers on the homerow.
+![Lafayette symbols layer on a 33-key keyboard](./img/symbols.svg)
 
-### 3. Spice It Up
 
-- the 300 ms delay before a key becomes a modifier has been chosen to be easy
-for beginners. Once used to mod-taps, you may want to reduce it so keyboard
-shortcuts can be done more quickly;
-- more layers available to enable (Vim-navigation, num-row, etc).
+#### Num row >> Num pad
+
+If enabled, in <kbd>Symbols</kbd> mode, pressing the left thumb key brings up
+the <kbd>NumRow</kbd> layer:
+
+- all digits are on the home row, in the order you already know
+- the upper row helps with <kbd>Shift</kbd>-digit shortcuts
+- the lower row has dash, comma, dot and slash signs to help with number / date
+inputs
+- <kbd>Space</kbd> becomes a narrow no-break space for layouts that supports it
+
+![NumRow layer on a 33-key keyboard](./img/numrow.svg)
 
-#### A Vim-friendly mod:
+Even on keyboards that *do* have a physical number row, this `NumRow`layer can
+be interesting to use in order to minimize finger movements furthermore.
 
-- 3 home-row mods per hand for <kbd>Ctrl</kbd>, <kbd>Alt</kbd>, <kbd>Super</kbd>
-- 3 layer-tap keys under the thumbs: <kbd>Shift</kbd>/<kbd>Backspace</kbd>,
-<kbd>Navigation</kbd>/<kbd>Space</kbd>, <kbd>Symbol</kbd>/<kbd>Return</kbd>
 
-![base, navigation and sym layers on a 33-key keyboard](img/selenium33/all.svg)
+### 4. Navigation layer
 
-It uses 4 layers (instead of 3 for Arsenik), which makes it a natural fit
-for 34-key keyboards like the [Ferris][34].
+A basic <kbd>Navigation</kbd> layer has an arrow cluster on the left hand to
+move around and a num pad on the right hand.
 
-- Vim-like navigation in all apps, with any OS layout
+![navigation layer on a 33-key keyboard](./img/navigation.svg)
+
+#### A superpowered Vim-friendly mod
+
+For those who like to move the cursor with <kbd>HJKL</kbd> in all apps with any
+keyboard layout, it is possible to enable a Vim-like <kbd>Navigation</kbd>
+layer.
+
+It also has:
 - super-comfortable <kbd>Tab</kbd> and <kbd>Shift</kbd>-<kbd>Tab</kbd>
 - mouse emulation: previous / next and mouse scroll
-- easy left-hand shortcuts
 
-![Vim navigation layer on a 33-key keyboard](img/selenium33/navigation.svg)
+![Vim navigation layer on a 33-key keyboard](./img/vim_navigation.svg)
 
 This <kbd>Navigation</kbd> layer has a few empty slots on purpose, so you can
 add our own keys or layers.
 
+<kbd>NumPad</kbd> and <kbd>Fn</kbd> lock these layers: they remain active
+without holding the key until escaped with <kbd>Alt</kbd> or <kbd>AltGr</kbd>.
 
-#### NumRow >> NumPad
+![NumPad layer on a 33-key keyboard](./img/numpad.svg)
+<p align="center">
+  <em>NumPad layer toggled</em>
+</p>
 
-In <kbd>Symbol</kbd> mode, pressing the left thumb key brings up the
-<kbd>NumRow</kbd> layer:
+![Fn layer on a 33-key keyboard](./img/fn.svg)
+<p align="center">
+  <em>Fn layer toggled</em>
+</p>
 
-- all digits are on the home row, in the order you already know
-- the upper row helps with <kbd>Shift</kbd>-digit shortcuts
-- the lower row has dash, comma, dot and slash signs to help with number / date
-inputs
+### 5. Keyboard layout
 
-![NumRow layer on a 33-key keyboard](img/selenium33/numrow.svg)
+Choose your keyboard layout among the available ones for Arsenik to work
+properly.
 
-Even on keyboards that *do* have a physical number row, this <kbd>NumRow</kbd>
-layer can be interesting to use in order to minimize finger movements further
-more. And it makes it easier to mix symbols with numbers (e.g. `[0]`).
+If your layout is not on this list, feel free to open an issue or upvote an
+existing one.
 
+Here are some caveats for some specific layouts:
 
-Downloads
---------------------------------------------------------------------------------
+<details>
+<summary>Ergo‑L/Qwerty‑Lafayette/other Lafayette layouts</summary>
 
-### kanata
+Arsenik works out-of-the-box with Lafayette layouts because their
+<kbd>AltGr</kbd> layer already matches Arsenik’s <kbd>Symbols</kbd> layer.
+</details>
 
-[Non-programmable keyboards are supported through kanata.](kanata)
+<details>
+<summary>Qwerty/Colemak</summary>
 
-### QMK
+Qwerty/Colemak works out-of-the-box with the Lafayette <kbd>Symbols</kbd> layer
+because there isn’t other characters in <kbd>AltGr</kbd>.
+</details>
 
-The QMK implementation is a bit different:
+<details>
+<summary>Azerty</summary>
 
-- it takes advantage of the 4 thumb keys
-- the Navigation layer uses a mouse emulation on the left hand
+By using the Lafayette <kbd>Symbols</kbd> layer, you won’t have access to the
+<kbd>€</kbd> sign in <kbd>AltGr</kbd>. You might want to remap it elsewhere, or
+not using the Lafayette <kbd>Symbols</kbd> layer.
+</details>
 
-In fact, this is what I ended up with for my beloved Ferris in the first place,
-and Arsenik/Selenium is an attempt to fit most of this magic into my laptop keyboard.
+<details>
+<summary>Bépo</summary>
 
-![QMK code](qmk/selenium33/keyoards/ferris/keymaps/1dk)
+By using the Lafayette <kbd>Symbols</kbd> layer, you won’t have access to the
+characters in <kbd>AltGr</kbd>. You might want to remap some of them elsewhere,
+or not using the Lafayette <kbd>Symbols</kbd> layer.
+</details>
 
-```bash
-# from the `qmk_firmware` root:
-make ferris/0_2/bling:1dk:flash
-```
+<details>
+<summary>Optimot</summary>
 
-### Others
+Do not enable angle mod for Optimot as it is already in angle mod with its
+driver.
 
-Other desktop implementations (kmonad, keyd…) would be nice to see as well.
+By using the Lafayette <kbd>Symbols</kbd> layer, you won’t have access to the
+characters in <kbd>AltGr</kbd>. You might want to remap some of them elsewhere,
+or not using the Lafayette <kbd>Symbols</kbd> layer.
+</details>
 
-Programmable keyboards should be trivial to configure with QMK, ZMK,
-Kaleidoscope, etc.
 
+### Bonus: Spice It Up
 
-Related Projects
+From there, you can edit the configuration to match your liking, even contribute
+to Arsenik!
+
+The 300 ms delay before a key becomes a modifier has been chosen to be easy for
+beginners. Once used to mod-taps, you may want to reduce it so keyboard
+shortcuts can be done more quickly.
+
+In the <kbd>NumRow</kbd> layer, you can edit the <kbd>dk1</kbd> to 
+<kbd>dk5</kbd> shortcuts to put whatever seams useful to you, a lot of available
+keys are defined in [Kanata source code][Kanata keys].
+
+In the <kbd>Navigation</kbd> layer, you can put a command on top of the
+<kbd>P</kbd> key (in Qwerty), e.g. for an application launcher.
+
+Note that Kanata can also use the laptop’s trackpoint buttons (e.g. ThinkPad)
+as two additional thumb keys. :-)
+
+
+Installation
 --------------------------------------------------------------------------------
 
+Adjusting to compact keyboard layouts isn’t easy, but Arsenik is designed for
+a step-by-step approach:
+
+- load `kanata.kbd` with Kanata ([installation instructions](kanata))
+- enable each feature by un-commenting the related line (a commented line starts
+with `;;`), you must enable one and only one line per feature
+- live-reload the configuration with <kbd>Space</kbd>+<kbd>Backspace</kbd>
+(requires the layer-taps feature enabled)
+
+If you have a programmable keyboard you might want to take a look at the
+[QMK](qmk) version of Arsenik (work in progress).
+
+Other desktop implementations (kmonad, keyd, Karabiner…) would be nice to see as
+well.
+
+
+Why “Arsenik”?
+--------------------------------------------------------------------------------
+
+33 keys layout: the 33rd element of the periodic table.
+
+Unlike Miryoku which requires 6 thumb keys, Arsenik has been designed to work
+with standard ANSI/ISO/laptop keyboards, leveraging the spacebar and the two
+Alt/Cmd keys.
+
 ### Inspiration
 
-- [Miryoku][1] for the main idea of using modifiers on the homerow and layer
+- [Miryoku] for the main idea of using modifiers on the home row and layer
 shifters under the thumbs;
-- [Lafayette][2] and [Ergo-L][3] for the <kbd>Symbol</kbd> layer, which has been
-blatantly taken *as is*;
-- [Extend][4], [Neo][5], [Shaka34][6] for the <kbd>Navigation</kbd> layer.
+- [Lafayette] and [Ergo-L] for the <kbd>Symbol</kbd> layer, which has been
+shamelessly taken *as is*;
+- [Extend], [Neo], [Shaka34] for the <kbd>Navigation</kbd> layer.
 
 ### Alternative Symbol Layers
 
-- [Neo][5]
-- [Seniply][7]
-- [Pascal Getreuer’s][8]
+- [Neo]
+- [Seniply]
+- [Pascal Getreuer’s]
 
 ### Non-Goals
 
-- being the most efficient 3×5 layout — [Miryoku][1] is probably the most
+- being the most efficient 3×5 layout — [Miryoku] is probably the most
 advanced approach for that, at least on custom 36-key keyboards;
+- suiting every user out-of-the-box — Arsenik is proposed as a reasonable
+default configuration, but users are encouraged to customize it to suit their
+personal needs and preferences;
 - fitting any OS layout — Arsenik works best if your OS layout has either no
 AltGr layer at all (e.g. QWERTY, Colemak, Workman…), or an optimized AltGr layer
-([Lafayette][2], [Ergo-L][3]…).
+([Lafayette], [Ergo-L]…).
 
 ### Similar Projects
 
-- [Miryoku][1]: 36 keys, 6 layers
-- [Seniply][7]: 34 keys, 6 layers, no layer-taps (“Callum-style”)
-
-<!-- https://jasoncarloscox.com/writing/combo-mods/ -->
-
-[1]: https://github.com/manna-harbour/miryoku
-[2]: https://qwerty-lafayette.org/42
-[3]: https://ergol.org
-[4]: https://dreymar.colemak.org/layers-extend.html
-[5]: https://neo-layout.org
-[6]: https://github.com/lobre/shaka34
-[7]: https://stevep99.github.io/seniply/
-[8]: https://getreuer.info/posts/keyboards/symbol-layer/#my-symbol-layer
+- [Miryoku]: 36 keys, 6 layers
+- [Seniply]: 34 keys, 6 layers, no layer-taps (“Callum-style”)
 
 
-TODO
+Join the community
 --------------------------------------------------------------------------------
 
-- KMonad / Karabiner support
-- sample QMK / ZMK implementations for common keyboards
+French-speaking users may join the [Ergo-L Discord server] which hosts a
+channel to talk about Arsenik, keyboard, layouts and many more.
+
+Feel free to open an issue and/or a pull request if you encounter a bug or want
+to enhance the Arsenik experience!
+
+
+[Kanata]: https://github.com/jtroo/kanata
+[Miryoku]: https://github.com/manna-harbour/miryoku
+[touch typing]: https://en.wikipedia.org/wiki/Touch_typing
+[Lafayette]: https://qwerty-lafayette.org/42
+[Ergo-L]: https://ergol.org
+[Kanata keys]: https://github.com/jtroo/kanata/blob/main/parser/src/keys/mod.rs#L159
+[Extend]: https://dreymar.colemak.org/layers-extend.html
+[Neo]: https://neo-layout.org
+[Shaka34]: https://github.com/lobre/shaka34
+[Seniply]: https://stevep99.github.io/seniply/
+[Pascal Getreuer’s]: https://getreuer.info/posts/keyboards/symbol-layer/#my-symbol-layer
+[Ergo-L Discord server]: https://discord.gg/5xR5K3nAFX

img/all.svg

@@ -1,6 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
+    :root {
+      color-scheme: light dark;
+    }
     rect {
       fill: #f8f8f8;
       stroke: #666;
@@ -14,18 +17,15 @@
     }
     .dualKey { fill: #ddd; transform: translateY(26px); }
 
-    #row_AD { transform: translate(64px,  64px); }
+    #row_AD { transform: translate(48px,  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_AB { transform: translate(32px, 184px); }
+    #row_AA { transform: translate(62px, 244px); }
 
     .shortcut { font-size: 10px; transform: translate(-3px,  -1px); }
     .layerSym { font-weight: normal; }
     .layerMod { font-weight: bold; font-size: 14px; }
     .layerNav { font-weight: bold; }
-    .layerNav { font-weight: bold; }
     .right .layerNav { font-weight: normal; }
 
     .layerMod, .colorMod { fill: #333; }
@@ -50,7 +50,7 @@
         <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="20.6" class="layerNav">↹</text>
-        <text x="38.0" y="43.4" class="layerSym">@</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"/>
@@ -82,7 +82,7 @@
         <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="20.6" class="layerNav">/</text>
-        <text x="38.0" y="43.4" class="layerSym">^</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"/>
@@ -146,7 +146,7 @@
         <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="20.6" class="layerNav">⇟</text>
-        <text x="38.0" y="43.4" class="layerSym"> = </text>
+        <text x="38.0" y="43.4" class="layerSym">=</text>
       </g>
     </g>
     <g class="right">
@@ -192,7 +192,7 @@
 
   <g id="row_AB">
     <g class="left">
-      <g transform="translate(90)">
+      <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g>
           <text x="12.8" y="20.6" class="level2">Z</text>
@@ -200,7 +200,7 @@
           <text x="38.0" y="43.4" class="layerSym">~</text>
         </g>
       </g>
-      <g transform="translate(150)">
+      <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g>
           <text x="12.8" y="20.6" class="level2">X</text>
@@ -208,7 +208,7 @@
           <text x="38.0" y="43.4" class="layerSym">[</text>
         </g>
       </g>
-      <g transform="translate(210)">
+      <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g>
           <text x="12.8" y="20.6" class="level2">C</text>
@@ -216,7 +216,7 @@
           <text x="38.0" y="43.4" class="layerSym">]</text>
         </g>
       </g>
-      <g transform="translate(270)">
+      <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <g>
           <text x="12.8" y="20.6" class="level2">V</text>
@@ -224,44 +224,45 @@
           <text x="38.0" y="43.4" class="layerSym">_</text>
         </g>
       </g>
-      <g transform="translate(330)">
+      <g transform="translate(390)">
         <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="20.6" class="layerNav">⇤</text>
+          <text x="38.0" y="20.6" class="layerNav">⇤</text>
           <text x="38.0" y="43.4" class="layerSym">#</text>
         </g>
       </g>
     </g>
     <g class="right">
-      <g transform="translate(390)">
+      <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">N</text>
         <text x="38.0" y="20.6" class="layerNav">,</text>
         <text x="38.0" y="43.4" class="layerSym">|</text>
       </g>
-      <g transform="translate(450)">
+      <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">M</text>
         <text x="38.0" y="20.6" class="layerNav">1</text>
         <text x="38.0" y="43.4" class="layerSym">!</text>
       </g>
-      <g transform="translate(510)">
+      <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">&lt;</text>
         <text x="38.0" y="20.6" class="layerNav">2</text>
         <text x="38.0" y="43.4" class="layerSym">;</text>
       </g>
-      <g transform="translate(570)">
+      <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">&gt;</text>
         <text x="38.0" y="20.6" class="layerNav">3</text>
         <text x="38.0" y="43.4" class="layerSym">:</text>
       </g>
-      <g transform="translate(630)">
+      <g transform="translate(690)">
         <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="20.6" class="layerNav">.</text>
         <text x="38.0" y="43.4" class="layerSym">?</text>

img/angle_mod.svg

@@ -0,0 +1,138 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 180">
+
+  <style>
+    :root {
+      color-scheme: light dark;
+    }
+    rect {
+      fill: #fff;
+      stroke: #666;
+      stroke-width: .5px;
+    }
+    text {
+      fill: #666;
+      font: normal 20px sans-serif;
+      text-align: center;
+      text-anchor: middle;
+    }
+
+    #row_AD text,
+    #row_AC text,
+
+    /* 'hints' theme */
+    .m1 rect { fill: hsl(  0, 100%, 95%); }
+    .l2 rect { fill: hsl( 42, 100%, 85%); }
+    .r2 rect { fill: hsl( 61, 100%, 85%); }
+    .l3 rect,
+    .r3 rect { fill: hsl(136, 100%, 85%); }
+    .l4 rect,
+    .r4 rect { fill: hsl(200, 100%, 85%); }
+    .l5 rect,
+    .r5 rect { fill: hsl(230, 100%, 85%); }
+
+    @media (prefers-color-scheme: dark) {
+      text                 { fill: #aaa; }
+      rect                 { fill: #444; }
+      /* 'hints' theme */
+      .m1 rect { fill: hsl(  0, 25%, 30%); }
+      .l2 rect { fill: hsl( 31, 30%, 30%); }
+      .r2 rect { fill: hsl( 61, 30%, 30%); }
+      .l3 rect,
+      .r3 rect { fill: hsl(136, 30%, 30%); }
+      .l4 rect,
+      .r4 rect { fill: hsl(200, 30%, 30%); }
+      .l5 rect,
+      .r5 rect { fill: hsl(230, 30%, 30%); }
+      .dimmed rect { fill: #4444; }
+    }
+  </style>
+
+  <defs>
+    <g id="row_AD">
+      <g transform="translate(0)" class="l5">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+      <g transform="translate(60)" class="l4">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+      <g transform="translate(120)" class="l3">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+      <g transform="translate(180)" class="l2">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+      <g transform="translate(240)" class="l2">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+    </g>
+
+    <g id="row_AC">
+      <g transform="translate(0)" class="l5">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+      <g transform="translate(60)" class="l4">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+      <g transform="translate(120)" class="l3">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+      <g transform="translate(180)" class="l2">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+      <g transform="translate(240)" class="l2">
+        <rect width="52" height="52" rx="5" ry="5"/>
+      </g>
+    </g>
+
+    <g id="row_AB">
+      <g transform="translate(0)" class="l5">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">Z</text>
+      </g>
+      <g transform="translate(60)" class="l4">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">X</text>
+      </g>
+      <g transform="translate(120)" class="l3">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">C</text>
+      </g>
+      <g transform="translate(180)" class="l2">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">V</text>
+      </g>
+      <g transform="translate(240)" class="l2">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">B</text>
+      </g>
+    </g>
+  </defs>
+
+  <g transform="translate(8)">
+    <use x="16" y="0" href="#row_AD" />
+    <use x="32" y="60" href="#row_AC" />
+    <use x="60" y="120" href="#row_AB" />
+    <use x="0" y="120" href="#iso" class="l5" />
+    <g transform="translate(0 120)" class="l5">
+      <rect width="52" height="52" rx="5" ry="5"/>
+      <text x="12.8" y="43.4" class="level1">&lt;</text>
+      <text x="12.8" y="20.6" class="level2">&gt;</text>
+    </g>
+  </g>
+
+  <g transform="translate(400 92)">
+    <text style="font-size: 92px; dominant-baseline: middle; fill: brown;">➤</text>
+  </g>
+
+  <g transform="translate(440)">
+    <use x="16" y="0" href="#row_AD" />
+    <use x="32" y="60" href="#row_AC" />
+    <use x="0" y="120" href="#row_AB" />
+    <g transform="translate(300 120)" opacity="0.7">
+      <rect width="52" height="52" rx="5" ry="5"/>
+      <text x="12.8" y="43.4" class="level1">&lt;</text>
+      <text x="12.8" y="20.6" class="level2">&gt;</text>
+    </g>
+  </g>
+
+</svg>

img/selenium33/navigation.svg

@@ -1,17 +1,21 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
-    rect, path {
+    :root {
+      color-scheme: light dark;
+    }
+    rect {
       fill: #f8f8f8;
       stroke: #666;
       stroke-width: .5px;
     }
     text {
-      fill: #999;
+      fill: #bbb;
       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); }
@@ -20,13 +24,25 @@
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
 
-    .layer    { font-size: 14px; font-weight: bold; }
-    .layerNav { fill: #e83; font-weight: bold; }
-    .shortcut { font-size: smaller; }
+    .shortcut { font-size: 10px; transform: translate(-3px,  -1px); }
+    .layerSym { font-weight: normal; }
+    .layerMod { font-weight: bold; font-size: 14px; }
+    .layerNav { font-weight: bold; }
+    .right .layerNav { font-weight: normal; }
+
+    .layerMod, .colorMod { fill: #333; }
+    .layerSym, .colorSym { fill: blue; }
+    .layerNav, .colorNav { fill: #e83; }
+    #row_AA    .level2   { fill: #333; }
 
     @media (prefers-color-scheme: dark) {
-      text    { fill: #888; }
-      rect    { fill: #444; }
+      text                 { fill: #666; }
+      rect                 { fill: #444; }
+      .dualKey             { fill: #666; }
+      .layerMod, .colorMod { fill: #eee; }
+      .layerSym, .colorSym { fill: #99f; }
+      .layerNav, .colorNav { fill: #e83; }
+      #row_AA .level2      { fill: #ccc; }
     }
   </style>
 
@@ -35,21 +51,22 @@
       <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="20.6" class="layerNav shortcut">F1</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="20.6" class="layerNav shortcut">F2</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="20.6" class="layerNav shortcut">F3</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="20.6" class="layerNav shortcut">F4</text>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
@@ -60,22 +77,18 @@
       <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>
       </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>
       </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>
       </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>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
@@ -89,22 +102,22 @@
       <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="20.6" class="layerNav shortcut">F5</text>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">S</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^s</text>
+        <text x="38.0" y="20.6" class="layerNav shortcut">F6</text>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">D</text>
-        <text x="38.0" y="43.4" class="layerNav">⇤</text>
+        <text x="38.0" y="20.6" class="layerNav shortcut">F7</text>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">F</text>
-        <text x="38.0" y="43.4" class="layerNav">⇥</text>
+        <text x="38.0" y="20.6" class="layerNav shortcut">F8</text>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
@@ -115,22 +128,21 @@
       <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>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">J</text>
-        <text x="38.0" y="43.4" class="layerNav">↓</text>
+        <text x="38.0" y="20.6" class="layerNav">⌃</text>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">K</text>
-        <text x="38.0" y="43.4" class="layerNav">↑</text>
+        <text x="38.0" y="20.6" class="layerNav">⌥</text>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">L</text>
-        <text x="38.0" y="43.4" class="layerNav">→</text>
+        <text x="38.0" y="20.6" class="layerNav">⌘</text>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
@@ -144,55 +156,57 @@
     <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">Z</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^z</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">Z</text>
+          <text x="38.0" y="20.6" class="layerNav shortcut">F9</text>
+        </g>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <text x="12.8" y="20.6" class="level2">X</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^x</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">X</text>
+          <text x="38.0" y="20.6" class="layerNav shortcut">F10</text>
+        </g>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <text x="12.8" y="20.6" class="level2">C</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^c</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">C</text>
+          <text x="38.0" y="20.6" class="layerNav shortcut">F11</text>
+        </g>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <text x="12.8" y="20.6" class="level2">V</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^v</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">V</text>
+          <text x="38.0" y="20.6" class="layerNav shortcut">F12</text>
+        </g>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <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>
     <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>
       </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>
       </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>
       </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>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
@@ -205,17 +219,16 @@
   <g id="row_AA">
     <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="layerNav" style="font-size: 14px;">⌦</text>
+      <text x="41" y="42.8" class="layerMod layerNav"
+          style="font-weight: normal;">esc to base</text>
     </g>
-    <g class="homeKey" transform="translate(270)">
-      <rect width="232" height="52" rx="5" ry="5" class="layerNav"/>
-      <text x="58.0" y="42.8" class="layer">navigation</text>
+    <g transform="translate(270)">
+      <rect width="232" height="52" rx="5" ry="5"/>
     </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="layerNav">⎋</text>
+      <text x="41" y="42.8" class="layerMod layerNav"
+          style="font-weight: normal;">esc to base</text>
     </g>
   </g>
 

img/index.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html>
+
 <head>
   <style>
     body {
@@ -10,28 +11,49 @@
       font-family: sans-serif;
       text-align: center;
     }
+
     @media (prefers-color-scheme: dark) {
-      html { background-color: #222; color: #ddd; }
+      html {
+        background-color: #222;
+        color: #ddd;
+      }
     }
   </style>
 </head>
+
 <body>
-  <h1> Arsenik </h1>
+  <h1>Arsenik Kanata</h1>
   <img src="all.svg">
-  <h2> Base </h2>
-  <img src="base.svg">
-  <br>
-  <img src="base_easy.svg">
-  <br>
-  <img src="base_hrm.svg">
-  <h2> Symbols </h2>
+
+  <h2>Angle mod</h2>
+  <img src="angle_mod.svg">
+
+  <h2>Layer-taps</h2>
+  <img src="layer_taps.svg">
+
+  <h2>HRM</h2>
+  <img src="hrm.svg">
+
+  <h2>Lafayette Symbols</h2>
   <img src="symbols.svg">
 
-  <h1> Selenium33 </h1>
-  <img src="../mods/selenium33/img/all.svg">
-  <h2> Navigation </h2>
+  <h2>NumRow</h2>
+  <img src="numrow.svg">
+
+  <h2>Navigation</h2>
   <img src="navigation.svg">
-  <h2> NumRow </h2>
-  <img src="../mods/selenium33/img/numrow.svg">
+
+  <h2>Vim Navigation</h2>
+  <img src="vim_navigation.svg">
+
+  <h2>Vim NumPad</h2>
+  <img src="numpad.svg">
+
+  <h2>Vim Fn</h2>
+  <img src="fn.svg">
+
+  <h1>QMK</h1>
+  <img src="qmk/all.svg">
 </body>
-</html>
+
+</html>

img/navigation.svg

@@ -1,17 +1,21 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
-    rect, path {
+    :root {
+      color-scheme: light dark;
+    }
+    rect {
       fill: #f8f8f8;
       stroke: #666;
       stroke-width: .5px;
     }
     text {
-      fill: #999;
+      fill: #bbb;
       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); }
@@ -20,13 +24,25 @@
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
 
-    .layer    { font-size: 14px; font-weight: bold; }
-    .layerNav { fill: #e83; font-weight: bold; }
-    .shortcut { font-size: smaller; }
+    .shortcut { font-size: 10px; transform: translate(-3px,  -1px); }
+    .layerSym { font-weight: normal; }
+    .layerMod { font-weight: bold; font-size: 14px; }
+    .layerNav { font-weight: bold; }
+    .right .layerNav { font-weight: normal; }
+
+    .layerMod, .colorMod { fill: #333; }
+    .layerSym, .colorSym { fill: blue; }
+    .layerNav, .colorNav { fill: #e83; }
+    #row_AA    .level2   { fill: #333; }
 
     @media (prefers-color-scheme: dark) {
-      text    { fill: #888; }
-      rect    { fill: #444; }
+      text                 { fill: #666; }
+      rect                 { fill: #444; }
+      .dualKey             { fill: #666; }
+      .layerMod, .colorMod { fill: #eee; }
+      .layerSym, .colorSym { fill: #99f; }
+      .layerNav, .colorNav { fill: #e83; }
+      #row_AA .level2      { fill: #ccc; }
     }
   </style>
 
@@ -35,47 +51,49 @@
       <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="20.6" class="layerNav">↹</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="20.6" class="layerNav">⇱</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="20.6" class="layerNav">↑</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="20.6" class="layerNav">⇲</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="20.6" class="layerNav">⇞</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="20.6" class="layerNav">/</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="20.6" class="layerNav">7</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="20.6" class="layerNav">8</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="20.6" class="layerNav">9</text>
       </g>
       <g transform="translate(630)">
         <rect width="52" height="52" rx="5" ry="5"/>
@@ -89,53 +107,55 @@
       <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="20.6" class="layerNav shortcut">all</text>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">S</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^s</text>
+        <text x="38.0" y="20.6" class="layerNav">←</text>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">D</text>
-        <text x="38.0" y="43.4" class="layerNav">⇤</text>
+        <text x="38.0" y="20.6" class="layerNav">↓</text>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">F</text>
-        <text x="38.0" y="43.4" class="layerNav">↹</text>
+        <text x="38.0" y="20.6" class="layerNav">→</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="20.6" class="layerNav">⇟</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="20.6" class="layerNav">-</text>
       </g>
       <g transform="translate(450)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">J</text>
-        <text x="38.0" y="43.4" class="layerNav">↓</text>
+        <text x="38.0" y="20.6" class="layerNav">4</text>
       </g>
       <g transform="translate(510)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">K</text>
-        <text x="38.0" y="43.4" class="layerNav">↑</text>
+        <text x="38.0" y="20.6" class="layerNav">5</text>
       </g>
       <g transform="translate(570)">
         <rect width="52" height="52" rx="5" ry="5"/>
         <text x="12.8" y="20.6" class="level2">L</text>
-        <text x="38.0" y="43.4" class="layerNav">→</text>
+        <text x="38.0" y="20.6" class="layerNav">6</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="20.6" class="layerNav">0</text>
       </g>
     </g>
   </g>
@@ -144,60 +164,68 @@
     <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">Z</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^z</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">Z</text>
+          <text x="38.0" y="20.6" class="layerNav shortcut">undo</text>
+        </g>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <text x="12.8" y="20.6" class="level2">X</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^x</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">X</text>
+          <text x="38.0" y="20.6" class="layerNav shortcut">cut</text>
+        </g>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <text x="12.8" y="20.6" class="level2">C</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^c</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">C</text>
+          <text x="38.0" y="20.6" class="layerNav shortcut">copy</text>
+        </g>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <text x="12.8" y="20.6" class="level2">V</text>
-        <text x="38.0" y="43.4" class="layerNav shortcut">^v</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">V</text>
+          <text x="38.0" y="20.6" class="layerNav shortcut">paste</text>
+        </g>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <text x="12.8" y="20.6" class="level2">B</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">B</text>
+          <text x="38.0" y="20.6" class="layerNav">⇤</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="20.6" class="layerNav">,</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="20.6" class="layerNav">1</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="20.6" class="layerNav">2</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="20.6" class="layerNav">3</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="20.6" class="layerNav">.</text>
       </g>
     </g>
   </g>
@@ -205,17 +233,15 @@
   <g id="row_AA">
     <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="61.5" y="42.8" class="layerNav" style="font-size: 14px;">⌦</text>
+      <text x="61.5" y="20.6" class="layerNav" style="font-size: 14px;">⌦</text>
     </g>
-    <g class="homeKey" transform="translate(270)">
-      <rect width="232" height="52" rx="5" ry="5" class="layerNav"/>
-      <text x="58.0" y="42.8" class="layer">navigation</text>
+    <g transform="translate(270)">
+      <rect width="232" height="52" rx="5" ry="5" class="colorNav"/>
+      <text x="20.5" y="42.8" class="layerMod">nav</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="61.5" y="42.8" class="layerNav">⎋</text>
+      <text x="61.5" y="20.6" class="layerNav" style="font-weight: normal;">⎋</text>
     </g>
   </g>
 

img/base.svg

@@ -1,22 +1,21 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
-    rect, path {
+    :root {
+      color-scheme: light dark;
+    }
+    rect {
       fill: #f8f8f8;
       stroke: #666;
       stroke-width: .5px;
     }
     text {
-      fill: #999;
+      fill: #bbb;
       font: normal 20px sans-serif;
       text-align: center;
-    }
-    .layer {
-      font-size: 14px;
-      font-weight: bold;
       text-anchor: middle;
-      fill: #333;
     }
+    .dualKey { fill: #ddd; transform: translateY(26px); }
 
     #row_AD { transform: translate(64px,  64px); }
     #row_AC { transform: translate(64px, 124px); }
@@ -25,10 +24,25 @@
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
 
+    .shortcut { font-size: 10px; transform: translate(-3px,  -1px); }
+    .layerSym { font-weight: normal; }
+    .layerMod { font-weight: bold; font-size: 14px; }
+    .layerNav { font-weight: bold; }
+    .right .layerNav { font-weight: normal; }
+
+    .layerMod, .colorMod { fill: #333; }
+    .layerSym, .colorSym { fill: blue; }
+    .layerNav, .colorNav { fill: #e83; }
+    #row_AA    .level2   { fill: #333; }
+
     @media (prefers-color-scheme: dark) {
-      text       { fill: #888; }
-      rect, path { fill: #444; }
-      .layer     { fill: #eee; }
+      text                 { fill: #666; }
+      rect                 { fill: #444; }
+      .dualKey             { fill: #666; }
+      .layerMod, .colorMod { fill: #eee; }
+      .layerSym, .colorSym { fill: #99f; }
+      .layerNav, .colorNav { fill: #e83; }
+      #row_AA .level2      { fill: #ccc; }
     }
   </style>
 
@@ -36,65 +50,53 @@
     <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>
-        </g>
+        <text x="12.8" y="20.6" class="level2">W</text>
+        <text x="38.0" y="20.6" class="layerNav">⇱</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>
-        </g>
+        <text x="12.8" y="20.6" class="level2">E</text>
+        <text x="38.0" y="20.6" class="layerNav">↑</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>
-        </g>
+        <text x="12.8" y="20.6" class="level2">R</text>
+        <text x="38.0" y="20.6" class="layerNav">⇲</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>
+        <text x="38.0" y="20.6" class="layerNav">⇞</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>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Y</text>
+        <text x="38.0" y="20.6" class="layerNav">/</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>
-        </g>
+        <text x="12.8" y="20.6" class="level2">U</text>
+        <text x="38.0" y="20.6" class="layerNav">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">I</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">I</text>
+        <text x="38.0" y="20.6" class="layerNav">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">O</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">O</text>
+        <text x="38.0" y="20.6" class="layerNav">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="20.6" class="level2">P</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">P</text>
       </g>
     </g>
   </g>
@@ -103,72 +105,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">A</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">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="26.0" y="43.4" class="layer">Super</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">S</text>
+        <text x="38.0" y="20.6" class="layerNav">←</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="26.0" y="43.4" class="layer">Alt</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">D</text>
+        <text x="38.0" y="20.6" class="layerNav">↓</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="26.0" y="43.4" class="layer">Ctrl</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">F</text>
+        <text x="38.0" y="20.6" class="layerNav">→</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>
+        <text x="38.0" y="20.6" class="layerNav">⇟</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>
-        </g>
+        <text x="12.8" y="20.6" class="level2">H</text>
+        <text x="38.0" y="20.6" class="layerNav">-</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="26.0" y="43.4" class="layer">Ctrl</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">J</text>
+        <text x="38.0" y="20.6" class="layerNav">4</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="26.0" y="43.4" class="layer">Alt</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">K</text>
+        <text x="38.0" y="20.6" class="layerNav">5</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="26.0" y="43.4" class="layer">Super</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">L</text>
+        <text x="38.0" y="20.6" class="layerNav">6</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>
+        <text x="38.0" y="20.6" class="layerNav">0</text>
       </g>
     </g>
   </g>
@@ -177,31 +162,31 @@
     <g class="left">
       <g transform="translate(90)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">Z</text>
         </g>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">X</text>
         </g>
       </g>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">C</text>
         </g>
       </g>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">V</text>
         </g>
       </g>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">B</text>
         </g>
       </g>
@@ -209,36 +194,31 @@
     <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>
+        <text x="38.0" y="20.6" class="layerNav">,</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>
-        </g>
+        <text x="12.8" y="20.6" class="level2">M</text>
+        <text x="38.0" y="20.6" class="layerNav">1</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>
-        </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="20.6" class="layerNav">2</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>
-        </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="20.6" class="layerNav">3</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>
+        <text x="38.0" y="20.6" class="layerNav">.</text>
       </g>
     </g>
   </g>
@@ -246,17 +226,17 @@
   <g id="row_AA">
     <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>
+      <text x="41" y="42.8" class="layerMod layerNav"
+          style="font-weight: normal;">esc to base</text>
     </g>
-    <g class="homeKey" transform="translate(270)">
+    <g transform="translate(270)">
       <rect width="232" height="52" rx="5" ry="5"/>
-      <text x="116.0" y="42.8" class="layer" style="fill: #e83;">Navigation</text>
+      <text x="20.5" y="42.8" class="layerMod colorNav">⍽</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>
+      <text x="41" y="42.8" class="layerMod layerNav"
+          style="font-weight: normal;">esc to base</text>
     </g>
   </g>
 

img/selenium33/numrow.svg

@@ -1,17 +1,21 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
-    rect, path {
+    :root {
+      color-scheme: light dark;
+    }
+    rect {
       fill: #f8f8f8;
       stroke: #666;
       stroke-width: .5px;
     }
     text {
-      fill: #999;
+      fill: #bbb;
       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); }
@@ -20,15 +24,20 @@
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
 
-    .layer  { font-size: 14px; font-weight: bold; }
+    .layer  { font-size: 14px; font-weight: bold; fill: #f8f8f8; }
     .layerNum { fill: green; }
-    .layerSym { fill: blue; }
+    .layerSym { font-weight: normal; }
+    .layerMod { font-weight: bold; font-size: 14px; }
+
+    .layerSym, .colorSym { fill: blue; }
 
     @media (prefers-color-scheme: dark) {
-      text      { fill: #888; }
-      rect      { fill: #444; }
-      .layerNum { fill: #6d6; }
-      .layerSym { fill: #99f; }
+      text                 { fill: #666; }
+      rect                 { fill: #444; }
+      .dualKey             { fill: #666; }
+      .layerMod            { fill: #eee; }
+      .layerNum            { fill: #6d6; }
+      .layerSym, .colorSym { fill: #99f; }
     }
   </style>
 
@@ -151,23 +160,33 @@
     <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">Z</text>
+        <g>
+          <text x="12.8" y="20.6" class="level2">Z</text>
+        </g>
       </g>
       <g transform="translate(150)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <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>
       <g transform="translate(210)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <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>
       <g transform="translate(270)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <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>
       <g transform="translate(330)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <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>
     <g class="right">
@@ -204,16 +223,15 @@
   <g id="row_AA">
     <g transform="translate(180)">
       <rect width="82" height="52" rx="5" ry="5" class="layerNum"/>
-      <!-- <text x="20.5" y="20.6" class="level2" style="font-size: 14px;">⌫</text> -->
       <text x="20.5" y="42.8" class="layer">num</text>
     </g>
     <g transform="translate(270)">
       <rect width="232" height="52" rx="5" ry="5"/>
+      <text x="20.5" y="42.8" class="layer layerNum">⍽</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">sym</text>
+      <rect width="82" height="52" rx="5" ry="5" class="layerSym"/>
+      <text x="20.5" y="42.8" class="layer">sym</text>
     </g>
   </g>
 

img/selenium33/index.html

@@ -1,30 +0,0 @@
-<!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 </h1>
-  <img src="all.svg">
-  <h2> Base </h2>
-  <img src="../../../img/base.svg">
-  <h2> Symbols </h2>
-  <img src="../../../img/symbols.svg">
-  <h2> Navigation </h2>
-  <img src="navigation.svg">
-  <h2> NumRow </h2>
-  <img src="numrow.svg">
-</body>
-</html>

img/symbols.svg

@@ -1,17 +1,21 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
-    rect, path {
+    :root {
+      color-scheme: light dark;
+    }
+    rect {
       fill: #f8f8f8;
       stroke: #666;
       stroke-width: .5px;
     }
     text {
-      fill: #999;
+      fill: #bbb;
       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); }
@@ -20,15 +24,18 @@
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
 
-    .layer  { font-size: 14px; font-weight: bold; }
-    .layerNum { fill: green; }
-    .layerSym { fill: blue; }
+    .layer  { font-size: 14px; font-weight: bold; fill: #f8f8f8; }
+    .layerSym { font-weight: normal; }
+    .layerMod { font-weight: bold; font-size: 14px; }
+
+    .layerSym, .colorSym { fill: blue; }
 
     @media (prefers-color-scheme: dark) {
-      text      { fill: #888; }
-      rect      { fill: #444; }
-      .layerNum { fill: #6d6; }
-      .layerSym { fill: #99f; }
+      text                 { fill: #666; }
+      rect                 { fill: #444; }
+      .dualKey             { fill: #666; }
+      .layerMod            { fill: #eee; }
+      .layerSym, .colorSym { fill: #99f; }
     }
   </style>
 
@@ -36,75 +43,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="layerSym">@</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Q</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"/>
-        <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="layerSym">&lt;</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">W</text>
+        <text x="38.0" y="43.4" class="layerSym">&lt;</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="layerSym">&gt;</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">E</text>
+        <text x="38.0" y="43.4" class="layerSym">&gt;</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="layerSym">$</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">R</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"/>
-        <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="layerSym">%</text>
-        </g>
+        <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"/>
-        <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="layerSym">^</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">Y</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"/>
-        <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="layerSym">&amp;</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">U</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"/>
-        <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="layerSym">*</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">I</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"/>
-        <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="layerSym">'</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">O</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"/>
-        <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="layerSym">`</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">P</text>
+        <text x="38.0" y="43.4" class="layerSym">`</text>
       </g>
     </g>
   </g>
@@ -113,76 +100,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="layerSym">{</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">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"/>
-        <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="layerSym">(</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">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"/>
-        <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="layerSym">)</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">D</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"/>
-        <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="layerSym">}</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">F</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"/>
-        <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="layerSym"> = </text>
-        </g>
+        <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"/>
-        <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="layerSym">\</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">H</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"/>
-        <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="layerSym">+</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">J</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"/>
-        <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="layerSym">-</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">K</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"/>
-        <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="layerSym">/</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">L</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"/>
-        <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="layerSym">"</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="layerSym">"</text>
       </g>
     </g>
   </g>
@@ -191,35 +158,35 @@
     <g class="left">
       <g transform="translate(90)">
         <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">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 class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">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 class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">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 class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">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 class="key" text-anchor="middle">
+        <g>
           <text x="12.8" y="20.6" class="level2">B</text>
           <text x="38.0" y="43.4" class="layerSym">#</text>
         </g>
@@ -228,41 +195,31 @@
     <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="38.0" y="43.4" class="layerSym">|</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">N</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"/>
-        <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="layerSym">!</text>
-        </g>
+        <text x="12.8" y="20.6" class="level2">M</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"/>
-        <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="layerSym">;</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="layerSym">;</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="layerSym">:</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="layerSym">:</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="layerSym">?</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="layerSym">?</text>
       </g>
     </g>
   </g>
@@ -270,7 +227,6 @@
   <g id="row_AA">
     <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>
     </g>
     <g transform="translate(270)">
       <rect width="232" height="52" rx="5" ry="5"/>

img/symbols39.svg

@@ -1,371 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
-
-  <style>
-    rect, path {
-      stroke: #666;
-      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;
-    }
-
-    #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); } */
-
-    .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; }
-
-    /* dimmed AltGr + bold dead keys */
-    .level3, .level4 { fill: blue; }
-    .level5, .level6 { fill: green; }
-    .deadKey {
-      /* fill: red; */
-      font-size: 16px;
-      transform: translateY(-3px);
-    }
-    .diacritic {
-      font-size: 24px;
-      font-weight: bolder;
-      transform: translateY(8px);
-    }
-
-    /* hide Level4 (Shift+AltGr) unless AltGr is pressed */
-    .level4        { display: none; }
-    .altgr .level4 { display: block; }
-
-    /* highlight AltGr + Dead Keys */
-    .dk .level1, .altgr .level1,
-    .dk .level2, .altgr .level2 { opacity: 0.25; }
-    .dk .level5, .altgr .level3,
-    .dk .level6, .altgr .level4 { opacity: 1; }
-    .dk .level3,
-    .dk .level4 { display: none; }
-  </style>
-
-  <g id="row_AD">
-    <g class="left">
-      <g transform="translate(30)">
-        <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="16.4" y="42.8">↹</text>
-          <text x="38.0" y="43.4" class="level3">~</text>
-        </g>
-      </g>
-      <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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </g>
-      <g transform="translate(690)">
-        <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="16.4" y="42.8" style="font-size: 12px;">⌫</text>
-          <text x="38.0" y="43.4" class="level3">"</text>
-        </g>
-      </g>
-    </g>
-  </g>
-
-  <g id="row_AC">
-    <g class="left">
-      <g transform="translate(30)">
-        <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="16.4" y="42.8">⎋</text>
-          <text x="38.0" y="43.4" class="level3">`</text>
-        </g>
-      </g>
-      <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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </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>
-      </g>
-      <g transform="translate(690)">
-        <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="16.4" y="42.8">⏎</text>
-          <text x="38.0" y="43.4" class="level3">'</text>
-        </g>
-      </g>
-    </g>
-  </g>
-
-  <g id="row_AB">
-    <g class="left">
-      <g transform="translate(30)">
-        <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="16.4" y="42.8">⇧</text>
-          <text x="38.0" y="43.4" class="level3">&lt;</text>
-        </g>
-      </g>
-      <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">{</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>
-        </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>
-        </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>
-        </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">&gt;</text>
-        </g>
-      </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="38.0" y="43.4" class="level3">\</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>
-        </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="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>
-      </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>
-      </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>
-      </g>
-      <g transform="translate(690)">
-        <rect width="52" height="52" rx="5" ry="5"/>
-        <g class="key" text-anchor="middle">
-          <text x="16.4" y="42.8">⇧</text>
-          <text x="38.0" y="43.4" class="level3">|</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">Shift</text>
-        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
-      </g>
-    </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">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">Sym</text>
-        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
-      </g>
-    </g>
-  </g>
-
-</svg>

img/vim_navigation.svg

@@ -0,0 +1,250 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
+
+  <style>
+    :root {
+      color-scheme: light dark;
+    }
+    rect {
+      fill: #f8f8f8;
+      stroke: #666;
+      stroke-width: .5px;
+    }
+    text {
+      fill: #bbb;
+      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: 10px; transform: translate(-3px,  -1px); }
+    .layerSym { font-weight: normal; }
+    .layerMod { font-weight: bold; font-size: 14px; }
+    .layerNav { font-weight: bold; }
+    .right .layerNav { font-weight: normal; }
+
+    .layerMod, .colorMod { fill: #333; }
+    .layerSym, .colorSym { fill: blue; }
+    .layerNav, .colorNav { fill: #e83; }
+    #row_AA    .level2   { fill: #333; }
+
+    @media (prefers-color-scheme: dark) {
+      text                 { fill: #666; }
+      rect                 { fill: #444; }
+      .dualKey             { fill: #666; }
+      .layerMod, .colorMod { fill: #eee; }
+      .layerSym, .colorSym { fill: #99f; }
+      .layerNav, .colorNav { fill: #e83; }
+      #row_AA .level2      { fill: #ccc; }
+    }
+  </style>
+
+  <g id="row_AD">
+    <g class="left">
+      <g transform="translate(90)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <rect width="48" height="26" rx="2" ry="2" class="dualKey"/>
+        <text x="12.8" y="20.6" class="level2">Q</text>
+        <text x="25.5" y="42.8" class="layerNav shortcut">NumPad</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="20.6" class="layerNav shortcut">close</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="20.6" class="layerNav">⎗</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="20.6" class="layerNav">⎘</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>
+      </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="20.6" class="layerNav">⇱</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="20.6" class="layerNav">⇟</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="20.6" class="layerNav">⇞</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="20.6" class="layerNav">⇲</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>
+      </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="20.6" class="layerNav shortcut">all</text>
+      </g>
+      <g transform="translate(150)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">S</text>
+        <text x="38.0" y="20.6" class="layerNav shortcut">save</text>
+      </g>
+      <g transform="translate(210)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">D</text>
+        <text x="38.0" y="20.6" class="layerNav">⇤</text>
+      </g>
+      <g transform="translate(270)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">F</text>
+        <text x="38.0" y="20.6" class="layerNav">↹</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>
+      </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="20.6" class="layerNav">←</text>
+      </g>
+      <g transform="translate(450)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">J</text>
+        <text x="38.0" y="20.6" class="layerNav">↓</text>
+      </g>
+      <g transform="translate(510)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">K</text>
+        <text x="38.0" y="20.6" class="layerNav">↑</text>
+      </g>
+      <g transform="translate(570)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">L</text>
+        <text x="38.0" y="20.6" class="layerNav">→</text>
+      </g>
+      <g transform="translate(630)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <rect width="25" height="26" rx="2" ry="2" class="dualKey"/>
+        <text x="12.8" y="20.6" class="level2">:</text>
+        <text x="15" y="43.4" class="layerNav shortcut"
+          style="font-weight: bold;">Fn</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="20.6" class="layerNav shortcut">undo</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="20.6" class="layerNav shortcut">cut</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="20.6" class="layerNav shortcut">copy</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="20.6" class="layerNav shortcut">paste</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>
+        </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="38.0" y="20.6" class="layerNav">🖰</text>
+        <text x="38.0" y="30.6" class="layerNav">←</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="20.6" class="layerNav">🖰</text>
+        <text x="42.0" y="20.6" class="layerNav">↓</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="20.6" class="layerNav">🖰</text>
+        <text x="42.0" y="20.6" class="layerNav">↑</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="38.0" y="20.6" class="layerNav">🖰</text>
+        <text x="38.0" y="30.6" class="layerNav">→</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>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AA">
+    <g transform="translate(180)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="61.5" y="20.6" class="layerNav" style="font-size: 14px;">⌦</text>
+    </g>
+    <g transform="translate(270)">
+      <rect width="232" height="52" rx="5" ry="5" class="colorNav"/>
+      <text x="20.5" y="42.8" class="layerMod">nav</text>
+    </g>
+    <g transform="translate(510)">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="61.5" y="20.6" class="layerNav" style="font-weight: normal;">⎋</text>
+    </g>
+  </g>
+
+</svg>

kanata/README.md

@@ -1,48 +1,38 @@
-kanata
+Arsenik Kanata
 ================================================================================
 
-A modularized Arsenik that let you choose your features, e.g.
-angle mods, Vim-like navigation layer, Mac/Azerty/Qwertz support, etc.
-
-- load `kanata.kbd` with kanata (installation instructions below)
-- enable each feature by un-commenting the related line
-- live-reload the configuration with Space+Backspace (requires layer-taps)
-
-Configuration options:
-
-- key arrangement: Mac or PC, with or without angle mod?
-- base layer: standard, layer-taps, homerow mods?
-- symbols layer: AltGr, QWERTY, QWERTZ, AZERTY?
-- navigation layer: ESDF or HJKL?
-
-Note that kanata can also use the laptop’s trackpoint buttons (e.g. ThinkPad)
-as two additional thumb keys. :-)
-
-
 Installation
 --------------------------------------------------------------------------------
 
-You can install `kanata` by either downloading a [pre-built
-executable](https://github.com/jtroo/kanata/releases), or by running the
-following commands (if you have `rustc` installed):
+- To get Arsenik, check out this repository with Git or
+[download it][Download Arsenik].
+- Launch `kanata.kbd` with Kanata.
+  - You can install Kanata by downloading a
+  [pre-built executable][Download Kanata].
+  - Follow the installation details of your operating system.
 
-```bash
-rustup update stable
-cargo install kanata
-```
+<details>
+<summary>Windows</summary>
 
-Windows users might prefer the `kanata_winIOv2.exe` version as it fixes some
-weird bugs.
+Windows users might prefer to download the `kanata_winIOv2.exe` version as it
+fixes some weird bugs like <kbd>C</kbd> and <kbd>V</kbd> inversion.
 
-Linux users may want to run these extra steps:
+*Note: this tip is tested for the version 1.6.1 of Kanata, in later version the
+`winIOv2` version might be the default one.*
+
+Put the `kanata_winIOv2.exe` in the Kanata Arsenik folder, run it and you’re
+good to go!
+</details>
 
 <details>
-<summary> Running kanata without <code>sudo</code> </summary>
+<summary>Linux</summary>
+
+### Run Kanata without <code>sudo</code>
 
 kanata needs to intercept `uinput` signals, which it cannot do without the
 proper authorisations.
 
-If you don’t want to run `kanata` with `sudo`, you’ll need to allow `kanata` to
+If you don’t want to run `kanata` with `sudo`, you’ll need to allow Kanata to
 read from `uinput`. This requires the users to be part of both `input` and
 `uinput` groups.
 
@@ -67,13 +57,12 @@ Finally, you need to add a udev rule in `/etc/udev/rules.d/50-kanata.rules`:
 ```udev
 KERNEL=="uinput", MODE="0660", GROUP="uinput", OPTIONS+="static_node=uinput"
 ```
-</details>
 
-<details>
-<summary> Making a user-side systemd service for kanata </summary>
 
-Note: This only works if `kanata` is able to run without <pre>sudo</pre> (and
-is using `systemd`).
+### Making a user-side systemd service for Kanata
+
+Note: This only works if `kanata` is able to run without `sudo` (and is using
+`systemd`).
 
 Using a `systemd service` allows running `kanata` as a daemon, possibly right
 after logging in. Here is a template for a service file:
@@ -99,7 +88,10 @@ Copy-paste it into `~/.config/systemd/user/kanata.service`, fill in the
 placeholders, then run one of the following commands:
 
 - `systemctl --user start kanata.service` to manually start `kanata`
-- `systemctl --user enable kanata.service` so `kanata` may autostart whenever the current user logs in
+- `systemctl --user enable kanata.service` so `kanata` may autostart whenever
+the current user logs in
 - `systemctl --user status kanata.service` to check if `kanata` is running
-
 </details>
+
+[Download Arsenik]: https://github.com/OneDeadKey/arsenik/releases
+[Download Kanata]: https://github.com/jtroo/kanata/releases

kanata/deflayer_navigation.kbd

@@ -8,10 +8,10 @@
 
 (deflayer navigation
   M-1  M-2  M-3  M-4  M-5  lrld M-6  M-7  M-8  M-9  M-0
-  tab  home up   end  pgup      XX   @7   @8   @9   @run
+  tab  home up   end  pgup      @/   @7   @8   @9   @run
   @all lft  down rght pgdn      @-   @4   @5   @6   @0
   @ndo @cut @cpy @pst S-tab _   @,   @1   @2   @3   @.
-            del            @nbs           esc
+            del             _             esc
 )
 
 ;; vim: set ft=lisp

kanata/deflayer_navigation_vim.kbd

@@ -17,7 +17,7 @@
 ;; NumPad
 (deflayer numpad
   _    _    _    _    _     _   _    _    _    _    _
-  XX   home up   end  pgup      XX   @7   @8   @9   XX
+  XX   home up   end  pgup      @/   @7   @8   @9   XX
   XX   lft  down rght pgdn      @-   @4   @5   @6   @0
   XX   XX   XX   XX   XX    _   @,   @1   @2   @3   @.
             @std           @nbs           @std

kanata/kanata.kbd

@@ -38,9 +38,9 @@
 ;; `Symbols` layer
 
 (include deflayer_symbols_noop.kbd)  ;; AltGr stays as-is
-;; (include deflayer_symbols_1dk.kbd)  ;; AltGr programmation layer like Ergo‑L
+;; (include deflayer_symbols_lafayette.kbd)  ;; AltGr programmation layer like Ergo‑L
 ;; (include deflayer_symbols_noop_num.kbd)  ;; AltGr stays as-is + NumRow layers
-;; (include deflayer_symbols_1dk_num.kbd)  ;; AltGr prog layer + NumRow layers
+;; (include deflayer_symbols_lafayette_num.kbd)  ;; AltGr prog layer + NumRow layers
 
 
 ;;-----------------------------------------------------------------------------

qmk/README.md

@@ -0,0 +1,20 @@
+Arsenik QMK
+================================================================================
+
+The QMK implementation of Arsenik is a bit different:
+
+- it takes advantage of the 4 thumb keys
+- the Navigation layer uses a mouse emulation on the left hand
+
+![Arsenik on a 34-key keyboard](../img/qmk/all.svg)
+
+TODO: update this image
+
+In fact, this is what I ended up with for my beloved Ferris in the first place,
+and Arsenik/Selenium is an attempt to fit most of this magic into my laptop
+keyboard.
+
+```bash
+# from the `qmk_firmware` root:
+make ferris/0_2/bling:1dk:flash
+```