diff --git a/.github/workflows/hugo.yaml b/.github/workflows/hugo.yaml
new file mode 100644
index 00000000..f9373e0b
--- /dev/null
+++ b/.github/workflows/hugo.yaml
@@ -0,0 +1,77 @@
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo site to ergol.org
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - main
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.123.0
+    steps:
+      - name: Install Hugo CLI
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          fetch-depth: 0
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
+      - name: Install Node.js dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc \
+            --minify \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3
+
diff --git a/.gitignore b/.gitignore
index 00394718..a2e78499 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ build
 dist
 *.vim*
 *.custom
+www/public
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..64c791a3
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,4 @@
+Copyright © 2024 Léo Cazenave
+This work is free. You can redistribute it and/or modify it under the
+terms of the Do What The Fuck You Want To Public License, Version 2,
+as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.
diff --git a/Makefile b/Makefile
index e55e0b45..c51e3332 100644
--- a/Makefile
+++ b/Makefile
@@ -1,16 +1,16 @@
 all:
-	@for file in data/layouts/*.toml; do \
-		kalamine build $$file --out "data/layouts/$$(basename $${file%.*}).json"; \
+	@for file in layouts/*.toml; do \
+		kalamine build $$file --out "layouts/$$(basename $${file%.*}).json"; \
 	done
-	@for file in data/layouts/*.yaml; do \
-		kalamine build $$file --out "data/layouts/$$(basename $${file%.*}).json"; \
+	@for file in layouts/*.yaml; do \
+		kalamine build $$file --out "layouts/$$(basename $${file%.*}).json"; \
 	done
 
 watch:
-	@inotifywait -m data/layouts -e close_write | while read -r _path _action file; do \
+	@inotifywait -m layouts -e close_write | while read -r _path _action file; do \
 		case $$file in \
-			*yaml) kalamine build "data/layouts/$$file" --out "data/layouts/$$(basename "$${file%.*}").json";; \
-			*toml) kalamine build "data/layouts/$$file" --out "data/layouts/$$(basename "$${file%.*}").json";; \
+			*yaml) kalamine build "layouts/$$file" --out "layouts/$$(basename "$${file%.*}").json";; \
+			*toml) kalamine build "layouts/$$file" --out "layouts/$$(basename "$${file%.*}").json";; \
 		esac \
 	done
 
@@ -23,12 +23,12 @@ clean:
 # the install/uninstall targets below require Kalamine v0.4.2+
 
 install:
-	@echo "Installer script for XKB (GNU/Linux). Requires super-user privileges."
+	@echo "Installer script for XKB (GNU/Linux)."
 	@echo
-	xkalamine install data/layouts/ergol.yaml
+	xkalamine install layouts/ergol.toml
 
 uninstall:
-	@echo "Unistaller script for XKB (GNU/Linux). Requires super-user privileges."
+	@echo "Unistaller script for XKB (GNU/Linux)."
 	@echo
 	xkalamine remove fr/ergol
 	@echo
diff --git a/README.md b/README.md
index 6df4f49c..c8193f58 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 [**(in English hereinafter)**](#English)
 
 Une disposition de clavier ergonomique optimisée pour le français, l’anglais et
-la programmation.
+le code.
 
 - Disposition **optimisée pour le français _et_ l’anglais**;
 - Couche AltGr optionnelle, optimisée pour l’enchaînement des symboles de
@@ -68,7 +68,7 @@ pipx install kalamine
 Download the [layouts/ergol.toml][4] file in this repo and build the layout :
 
 ```bash
-kalamine ergol.toml
+kalamine build ergol.toml
 ```
 
 You’ll get a `dist` folder containing all of the drivers.
@@ -76,8 +76,8 @@ You’ll get a `dist` folder containing all of the drivers.
 Then, to install Ergo‑L, follow the [install section of Kalamine’s repo][3],
 and you should be good to go !
 
-[2]: https://github.com/fabi1cazenave/kalamine
-[3]: https://github.com/fabi1cazenave/kalamine#installing-distributable-layouts
+[2]: https://github.com/OneDeadKey/kalamine
+[3]: https://github.com/OneDeadKey/kalamine#installing-distributable-layouts
 [4]: https://github.com/Nuclear-Squid/ergol/blob/master/layouts/ergol.toml
 [5]: https://github.com/pypa/pipx?tab=readme-ov-file#install-pipx
 
@@ -98,6 +98,7 @@ Then switch to Ergo‑L using the following command:
 setxkbmap fr -variant ergol  # Switch your keyboard layout to ergol
 ```
 
+
 Make Your Own !
 --------------------------------------------------------------------------------
 
diff --git a/code/LICENSE b/code/LICENSE
new file mode 100644
index 00000000..a23ee566
--- /dev/null
+++ b/code/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-2024 Fabien & Léo Cazenave
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/code/README.md b/code/README.md
new file mode 100644
index 00000000..1f32677e
--- /dev/null
+++ b/code/README.md
@@ -0,0 +1,7 @@
+The code here is linked with the OneDeadKey project.
+
+- layout-analyser.js will be contributed to [kalamine][1]
+- x-keyboard.js has been taken *as is* from [x-keyboard][2]
+
+[1]: https://github.com/OneDeadKey/kalamine
+[2]: https://github.com/OneDeadKey/x-keyboard
diff --git a/js/collapsable-table.js b/code/collapsable-table.js
similarity index 100%
rename from js/collapsable-table.js
rename to code/collapsable-table.js
diff --git a/js/demo.js b/code/demo.js
similarity index 100%
rename from js/demo.js
rename to code/demo.js
diff --git a/js/dactylo.js b/code/duck-typist.js
similarity index 96%
rename from js/dactylo.js
rename to code/duck-typist.js
index c877db3d..5c8b3744 100644
--- a/js/dactylo.js
+++ b/code/duck-typist.js
@@ -51,9 +51,9 @@ window.addEventListener('DOMContentLoaded', () => {
   const gLayout   = document.querySelector('#layout');
   const gDict     = document.querySelector('#dict');
 
-  const gKeyList  = document.querySelector('header .key_list');
-  const gStatus   = document.querySelector('header .status');
-  const gQuacks   = document.querySelector('header .quacks');
+  const gKeyList  = document.querySelector('.key_list');
+  const gStatus   = document.querySelector('.status');
+  const gQuacks   = document.querySelector('.quacks');
   const gLesson   = document.querySelector('#lesson');
   const gInput    = document;
 
@@ -74,7 +74,7 @@ window.addEventListener('DOMContentLoaded', () => {
   // fetch a kalamine corpus: symbols, bigrams, trigrams
   const fetchNgrams = () => {
     const ngrams = gDict.value.split(',')[0];
-    return fetch(`data/corpus/${ngrams}.json`)
+    return fetch(`../corpus/${ngrams}.json`)
       .then(response => response.json())
       .then(data => {
         gDictionary.trigrams = Object.keys(data.trigrams);
@@ -85,7 +85,7 @@ window.addEventListener('DOMContentLoaded', () => {
   // fetch MonkeyType words
   const fetchWords = () => {
     const words = gDict.value.split(',')[1];
-    return fetch(`data/dicts/${words}.json`)
+    return fetch(`./${words}.json`)
       .then(response => response.json())
       .then(data => {
         gDictionary.words = data.words;
@@ -94,7 +94,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // fetch a kalamine keyboard layout
   const fetchLayout = () => {
-    return fetch(`data/layouts/${gLayout.value}.json`)
+    return fetch(`../layouts/${gLayout.value}.json`)
       .then(response => response.json())
       .then(layout => {
         gKeyboard.setKeyboardLayout(layout.keymap, layout.deadkeys, gGeometry.value);
@@ -269,6 +269,8 @@ window.addEventListener('DOMContentLoaded', () => {
     gLessonLevel = level  ? Number(level)  : STARTING_LEVEL;
     gQuackCount  = quacks ? Number(quacks) : 1;
 
+    window.location.hash = `#${gLayout.value}`;
+
     Promise.all([fetchNgrams(), fetchWords(), fetchLayout()])
       .then(setLessonLevel);
   };
diff --git a/js/heatmap.js b/code/layout-analyzer.js
similarity index 99%
rename from js/heatmap.js
rename to code/layout-analyzer.js
index acbd8e5f..21cabcd3 100644
--- a/js/heatmap.js
+++ b/code/layout-analyzer.js
@@ -455,7 +455,7 @@ window.addEventListener('DOMContentLoaded', () => {
   const setProp = (key, value) => {
     if (key === 'layout') {
       if (value) {
-        fetch(`data/layouts/${value}.json`)
+        fetch(`../layouts/${value}.json`)
           .then(response => response.json())
           .then(data => {
             inputField.placeholder = `Zone de saisie ${value}`;
@@ -479,7 +479,7 @@ window.addEventListener('DOMContentLoaded', () => {
       }
     } else if (key === 'corpus') {
       if (value && value !== corpusName) {
-        fetch(`data/corpus/${value}.json`)
+        fetch(`../corpus/${value}.json`)
           .then(response => response.json())
           .then(data => {
             corpus = data.symbols;
diff --git a/js/svg.js b/code/svg.js
similarity index 100%
rename from js/svg.js
rename to code/svg.js
diff --git a/js/x-keyboard.js b/code/x-keyboard.js
similarity index 100%
rename from js/x-keyboard.js
rename to code/x-keyboard.js
diff --git a/corpus/LICENSE b/corpus/LICENSE
new file mode 100644
index 00000000..27bf1b16
--- /dev/null
+++ b/corpus/LICENSE
@@ -0,0 +1,301 @@
+THE FULL PROJECT GUTENBERG LICENSE
+
+PLEASE READ THIS BEFORE YOU DISTRIBUTE OR USE THIS WORK
+
+To protect the Project Gutenberg-tm mission of promoting the free distribution
+of electronic works, by using or distributing this work (or any other work
+associated in any way with the phrase “Project Gutenberg”), you agree to comply
+with all the terms of the Full Project Gutenberg-tm License available with this
+file or online at www.gutenberg.org/license. Section 1. General Terms of Use and
+Redistributing Project Gutenberg-tm electronic works
+
+1.A. By reading or using any part of this Project Gutenberg-tm electronic work,
+you indicate that you have read, understand, agree to and accept all the terms
+of this license and intellectual property (trademark/copyright) agreement. If
+you do not agree to abide by all the terms of this agreement, you must cease
+using and return or destroy all copies of Project Gutenberg-tm electronic works
+in your possession. If you paid a fee for obtaining a copy of or access to a
+Project Gutenberg-tm electronic work and you do not agree to be bound by the
+terms of this agreement, you may obtain a refund from the person or entity to
+whom you paid the fee as set forth in paragraph 1.E.8.
+
+1.B. “Project Gutenberg” is a registered trademark. It may only be used on or
+associated in any way with an electronic work by people who agree to be bound by
+the terms of this agreement. There are a few things that you can do with most
+Project Gutenberg-tm electronic works even without complying with the full terms
+of this agreement. See paragraph 1.C below. There are a lot of things you can do
+with Project Gutenberg-tm electronic works if you follow the terms of this
+agreement and help preserve free future access to Project Gutenberg-tm
+electronic works. See paragraph 1.E below.
+
+1.C. The Project Gutenberg Literary Archive Foundation (“the Foundation” or
+PGLAF), owns a compilation copyright in the collection of Project Gutenberg-tm
+electronic works. Nearly all the individual works in the collection are in the
+public domain in the United States. If an individual work is unprotected by
+copyright law in the United States and you are located in the United States, we
+do not claim a right to prevent you from copying, distributing, performing,
+	displaying or creating derivative works based on the work as long as all
+	references to Project Gutenberg are removed. Of course, we hope that you
+	will support the Project Gutenberg-tm mission of promoting free access
+	to electronic works by freely sharing Project Gutenberg-tm works in
+	compliance with the terms of this agreement for keeping the Project
+	Gutenberg-tm name associated with the work. You can easily comply with
+	the terms of this agreement by keeping this work in the same format with
+	its attached full Project Gutenberg-tm License when you share it without
+	charge with others.
+
+[*] This particular work is one of the few individual works protected by
+copyright law in the United States and most of the remainder of the world,
+included in the Project Gutenberg collection with the permission of the
+copyright holder. Information on the copyright owner for this particular work
+and the terms of use imposed by the copyright holder on this work are set forth
+at the beginning of this work.
+
+1.D. The copyright laws of the place where you are located also govern what you
+can do with this work. Copyright laws in most countries are in a constant state
+of change. If you are outside the United States, check the laws of your country
+in addition to the terms of this agreement before downloading, copying,
+displaying, performing, distributing or creating derivative works based on this
+work or any other Project Gutenberg-tm work. The Foundation makes no
+representations concerning the copyright status of any work in any country
+outside the United States.
+
+1.E. Unless you have removed all references to Project Gutenberg:
+
+1.E.1. The following sentence, with active links to, or other immediate access
+to, the full Project Gutenberg-tm License must appear prominently whenever any
+copy of a Project Gutenberg-tm work (any work on which the phrase “Project
+Gutenberg” appears, or with which the phrase “Project Gutenberg” is associated)
+is accessed, displayed, performed, viewed, copied or distributed:
+
+This eBook is for the use of anyone anywhere in the United States and most other
+parts of the world at no cost and with almost no restrictions whatsoever. You
+may copy it, give it away or re-use it under the terms of the Project Gutenberg
+License included with this eBook or online at www.gutenberg.org. If you are not
+located in the United States, you’ll have to check the laws of the country where
+you are located before using this ebook.
+
+1.E.2. If an individual Project Gutenberg-tm electronic work is derived from
+texts not protected by U.S. copyright law (does not contain a notice indicating
+that it is posted with permission of the copyright holder), the work can be
+copied and distributed to anyone in the United States without paying any fees or
+charges. If you are redistributing or providing access to a work with the phrase
+“Project Gutenberg” associated with or appearing on the work, you must comply
+either with the requirements of paragraphs 1.E.1 through 1.E.7 or obtain
+permission for the use of the work and the Project Gutenberg-tm trademark as set
+forth in paragraphs 1.E.8 or 1.E.9.
+
+1.E.3. If an individual Project Gutenberg-tm electronic work is posted with the
+permission of the copyright holder, your use and distribution must comply with
+both paragraphs 1.E.1 through 1.E.7 and any additional terms imposed by the
+copyright holder. Additional terms will be linked to the Project Gutenberg-tm
+License for all works posted with the permission of the copyright holder found
+at the beginning of this work.
+
+1.E.4. Do not unlink or detach or remove the full Project Gutenberg-tm License
+terms from this work, or any files containing a part of this work or any other
+work associated with Project Gutenberg-tm.
+
+1.E.5. Do not copy, display, perform, distribute or redistribute this electronic
+work, or any part of this electronic work, without prominently displaying the
+sentence set forth in paragraph 1.E.1 with active links or immediate access to
+the full terms of the Project Gutenberg-tm License.
+
+1.E.6. You may convert to and distribute this work in any binary, compressed,
+marked up, nonproprietary or proprietary form, including any word processing or
+hypertext form. However, if you provide access to or distribute copies of a
+Project Gutenberg-tm work in a format other than “Plain Vanilla ASCII” or other
+format used in the official version posted on the official Project Gutenberg-tm
+web site (www.gutenberg.org), you must, at no additional cost, fee or expense to
+the user, provide a copy, a means of exporting a copy, or a means of obtaining a
+copy upon request, of the work in its original “Plain Vanilla ASCII” or other
+form. Any alternate format must include the full Project Gutenberg-tm License as
+specified in paragraph 1.E.1.
+
+1.E.7. Do not charge a fee for access to, viewing, displaying, performing,
+copying or distributing any Project Gutenberg-tm works unless you comply with
+paragraph 1.E.8 or 1.E.9.
+
+1.E.8. You may charge a reasonable fee for copies of or providing access to or
+distributing Project Gutenberg-tm electronic works provided that
+
+    You pay a royalty fee of 20% of the gross profits you derive from the use of
+    Project Gutenberg-tm works calculated using the method you already use to
+    calculate your applicable taxes. The fee is owed to the owner of the Project
+    Gutenberg-tm trademark, but he has agreed to donate royalties under this
+    paragraph to the Project Gutenberg Literary Archive Foundation. Royalty
+    payments must be paid within 60 days following each date on which you
+    prepare (or are legally required to prepare) your periodic tax returns.
+    Royalty payments should be clearly marked as such and sent to the Project
+    Gutenberg Literary Archive Foundation at the address specified in Section 4,
+    “Information about donations to the Project Gutenberg Literary Archive
+    Foundation.”
+
+    You provide a full refund of any money paid by a user who notifies you in
+    writing (or by e-mail) within 30 days of receipt that s/he does not agree to
+    the terms of the full Project Gutenberg-tm License. You must require such a
+    user to return or destroy all copies of the works possessed in a physical
+    medium and discontinue all use of and all access to other copies of Project
+    Gutenberg-tm works.
+
+    You provide, in accordance with paragraph 1.F.3, a full refund of any money
+    paid for a work or a replacement copy, if a defect in the electronic work is
+    discovered and reported to you within 90 days of receipt of the work.
+
+    You comply with all other terms of this agreement for free distribution of
+    Project Gutenberg-tm works.
+
+1.E.9. If you wish to charge a fee or distribute a Project Gutenberg-tm
+electronic work or group of works on different terms than are set forth in this
+agreement, you must obtain permission in writing from both the Project Gutenberg
+Literary Archive Foundation and The Project Gutenberg Trademark LLC, the owner
+of the Project Gutenberg-tm trademark. Contact the Foundation as set forth in
+Section 3 below.
+
+1.F.
+
+1.F.1. Project Gutenberg volunteers and employees expend considerable effort to
+identify, do copyright research on, transcribe and proofread works not protected
+by U.S. copyright law in creating the Project Gutenberg-tm collection. Despite
+these efforts, Project Gutenberg-tm electronic works, and the medium on which
+they may be stored, may contain “Defects,” such as, but not limited to,
+incomplete, inaccurate or corrupt data, transcription errors, a copyright or
+other intellectual property infringement, a defective or damaged disk or other
+medium, a computer virus, or computer codes that damage or cannot be read by
+your equipment.
+
+1.F.2. LIMITED WARRANTY, DISCLAIMER OF DAMAGES - Except for the “Right of
+Replacement or Refund” described in paragraph 1.F.3, the Project Gutenberg
+Literary Archive Foundation, the owner of the Project Gutenberg-tm trademark,
+and any other party distributing a Project Gutenberg-tm electronic work under
+this agreement, disclaim all liability to you for damages, costs and expenses,
+including legal fees. YOU AGREE THAT YOU HAVE NO REMEDIES FOR NEGLIGENCE, STRICT
+LIABILITY, BREACH OF WARRANTY OR BREACH OF CONTRACT EXCEPT THOSE PROVIDED IN
+PARAGRAPH 1.F.3. YOU AGREE THAT THE FOUNDATION, THE TRADEMARK OWNER, AND ANY
+DISTRIBUTOR UNDER THIS AGREEMENT WILL NOT BE LIABLE TO YOU FOR ACTUAL, DIRECT,
+INDIRECT, CONSEQUENTIAL, PUNITIVE OR INCIDENTAL DAMAGES EVEN IF YOU GIVE NOTICE
+OF THE POSSIBILITY OF SUCH DAMAGE.
+
+1.F.3. LIMITED RIGHT OF REPLACEMENT OR REFUND - If you discover a defect in this
+electronic work within 90 days of receiving it, you can receive a refund of the
+money (if any) you paid for it by sending a written explanation to the person
+you received the work from. If you received the work on a physical medium, you
+must return the medium with your written explanation. The person or entity that
+provided you with the defective work may elect to provide a replacement copy in
+lieu of a refund. If you received the work electronically, the person or entity
+providing it to you may choose to give you a second opportunity to receive the
+work electronically in lieu of a refund. If the second copy is also defective,
+you may demand a refund in writing without further opportunities to fix the
+problem.
+
+1.F.4. Except for the limited right of replacement or refund set forth in
+paragraph 1.F.3, this work is provided to you ‘AS-IS’, WITH NO OTHER WARRANTIES
+OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF
+MERCHANTABILITY OR FITNESS FOR ANY PURPOSE.
+
+1.F.5. Some states do not allow disclaimers of certain implied warranties or the
+exclusion or limitation of certain types of damages. If any disclaimer or
+limitation set forth in this agreement violates the law of the state applicable
+to this agreement, the agreement shall be interpreted to make the maximum
+disclaimer or limitation permitted by the applicable state law. The invalidity
+or unenforceability of any provision of this agreement shall not void the
+remaining provisions.
+
+1.F.6. INDEMNITY - You agree to indemnify and hold the Foundation, the trademark
+owner, any agent or employee of the Foundation, anyone providing copies of
+Project Gutenberg-tm electronic works in accordance with this agreement, and any
+volunteers associated with the production, promotion and distribution of Project
+Gutenberg-tm electronic works, harmless from all liability, costs and expenses,
+including legal fees, that arise directly or indirectly from any of the
+following which you do or cause to occur: (a) distribution of this or any
+Project Gutenberg-tm work, (b) alteration, modification, or additions or
+deletions to any Project Gutenberg-tm work, and (c) any Defect you cause.
+Section 2. Information about the Mission of Project Gutenberg-tm
+
+Project Gutenberg-tm is synonymous with the free distribution of electronic
+works in formats readable by the widest variety of computers including obsolete,
+old, middle-aged and new computers. It exists because of the efforts of hundreds
+of volunteers and donations from people in all walks of life.
+
+Volunteers and financial support to provide volunteers with the assistance they
+need are critical to reaching Project Gutenberg-tm’s goals and ensuring that the
+Project Gutenberg-tm collection will remain freely available for generations to
+come. In 2001, the Project Gutenberg Literary Archive Foundation was created to
+provide a secure and permanent future for Project Gutenberg-tm and future
+generations. To learn more about the Project Gutenberg Literary Archive
+Foundation and how your efforts and donations can help, see Sections 3 and 4 and
+the Foundation information page at www.gutenberg.org Section 3. Information
+about the Project Gutenberg Literary Archive Foundation
+
+The Project Gutenberg Literary Archive Foundation is a non profit 501(c)(3)
+educational corporation organized under the laws of the state of Mississippi and
+granted tax exempt status by the Internal Revenue Service. The Foundation’s EIN
+or federal tax identification number is 64-6221541. Contributions to the Project
+Gutenberg Literary Archive Foundation are tax deductible to the full extent
+permitted by U.S. federal laws and your state’s laws.
+
+The Foundation’s principal office is located at 4557 Melan Dr. S. Fairbanks, AK,
+99712., but its volunteers and employees are scattered throughout numerous
+locations. Its business office is located at 809 North 1500 West, Salt Lake
+City, UT 84116, (801) 596-1887. Email contact links and up to date contact
+information can be found at the Foundation’s web site and official page at
+www.gutenberg.org/contact
+
+For additional contact information:
+
+    Dr. Gregory B. Newby Chief Executive and Director gbnewby@pglaf.org
+
+Section 4. Information about Donations to the Project Gutenberg Literary Archive
+Foundation
+
+Project Gutenberg-tm depends upon and cannot survive without wide spread public
+support and donations to carry out its mission of increasing the number of
+public domain and licensed works that can be freely distributed in machine
+readable form accessible by the widest array of equipment including outdated
+equipment. Many small donations ($1 to $5,000) are particularly important to
+maintaining tax exempt status with the IRS.
+
+The Foundation is committed to complying with the laws regulating charities and
+charitable donations in all 50 states of the United States. Compliance
+requirements are not uniform and it takes a considerable effort, much paperwork
+and many fees to meet and keep up with these requirements. We do not solicit
+donations in locations where we have not received written confirmation of
+compliance. To SEND DONATIONS or determine the status of compliance for any
+particular state visit www.gutenberg.org/donate
+
+While we cannot and do not solicit contributions from states where we have not
+met the solicitation requirements, we know of no prohibition against accepting
+unsolicited donations from donors in such states who approach us with offers to
+donate.
+
+International donations are gratefully accepted, but we cannot make any
+statements concerning tax treatment of donations received from outside the
+United States. U.S. laws alone swamp our small staff.
+
+Please check the Project Gutenberg Web pages for current donation methods and
+addresses. Donations are accepted in a number of other ways including checks,
+online payments and credit card donations. To donate, please visit:
+www.gutenberg.org/donate Section 5. General Information About Project
+Gutenberg-tm electronic works.
+
+Professor Michael S. Hart was the originator of the Project Gutenberg-tm concept
+of a library of electronic works that could be freely shared with anyone. For
+forty years, he produced and distributed Project Gutenberg-tm eBooks with only a
+loose network of volunteer support.
+
+Project Gutenberg-tm eBooks are often created from several printed editions, all
+of which are confirmed as not protected by copyright in the U.S. unless a
+copyright notice is included. Thus, we do not necessarily keep eBooks in
+compliance with any particular paper edition.
+
+Most people start at our Web site which has the main PG search facility:
+www.gutenberg.org
+
+This Web site includes information about Project Gutenberg-tm, including how to
+make donations to the Project Gutenberg Literary Archive Foundation, how to help
+produce our new eBooks, and how to subscribe to our email newsletter to hear
+about new eBooks.
+
+[*] This paragraph, after 1.C., is included only for copyrighted works. For
+those, you must contact the copyright holder before any non-free use or removal
+of the Project Gutenberg header.
diff --git a/data/corpus/chardict.py b/corpus/chardict.py
similarity index 100%
rename from data/corpus/chardict.py
rename to corpus/chardict.py
diff --git a/data/corpus/en+fr.json b/corpus/en+fr.json
similarity index 100%
rename from data/corpus/en+fr.json
rename to corpus/en+fr.json
diff --git a/data/corpus/en+fr.txt b/corpus/en+fr.txt
similarity index 100%
rename from data/corpus/en+fr.txt
rename to corpus/en+fr.txt
diff --git a/data/corpus/en.json b/corpus/en.json
similarity index 100%
rename from data/corpus/en.json
rename to corpus/en.json
diff --git a/data/corpus/en.txt b/corpus/en.txt
similarity index 100%
rename from data/corpus/en.txt
rename to corpus/en.txt
diff --git a/data/corpus/fr.json b/corpus/fr.json
similarity index 100%
rename from data/corpus/fr.json
rename to corpus/fr.json
diff --git a/data/corpus/fr.txt b/corpus/fr.txt
similarity index 100%
rename from data/corpus/fr.txt
rename to corpus/fr.txt
diff --git a/data/corpus/merge.py b/corpus/merge.py
similarity index 100%
rename from data/corpus/merge.py
rename to corpus/merge.py
diff --git a/css/images/forkme.png b/css/images/forkme.png
deleted file mode 100644
index 9c5aecfe..00000000
Binary files a/css/images/forkme.png and /dev/null differ
diff --git a/css/images/key-bksp.png b/css/images/key-bksp.png
deleted file mode 100644
index e2c99a1e..00000000
Binary files a/css/images/key-bksp.png and /dev/null differ
diff --git a/css/images/key-caps.png b/css/images/key-caps.png
deleted file mode 100644
index 8f157f71..00000000
Binary files a/css/images/key-caps.png and /dev/null differ
diff --git a/css/images/key-rtrn.png b/css/images/key-rtrn.png
deleted file mode 100644
index 2b4af093..00000000
Binary files a/css/images/key-rtrn.png and /dev/null differ
diff --git a/css/images/key-shift.png b/css/images/key-shift.png
deleted file mode 100644
index 84499e6f..00000000
Binary files a/css/images/key-shift.png and /dev/null differ
diff --git a/css/images/key-tab.png b/css/images/key-tab.png
deleted file mode 100644
index 5c31f05c..00000000
Binary files a/css/images/key-tab.png and /dev/null differ
diff --git a/css/layout.css b/css/layout.css
deleted file mode 100644
index 6b876996..00000000
--- a/css/layout.css
+++ /dev/null
@@ -1,105 +0,0 @@
-html {
-  background-color: #ccc;
-}
-
-body {
-  max-width: 58em;
-  margin: auto;
-  padding: 20px;
-  line-height: 1.4em;
-  font-family: sans-serif;
-  border-left: 1px solid #aaa;
-  border-right: 1px solid #aaa;
-  background-color: white;
-  color: black;
-  box-shadow: 0px 1px 10px #888;
-}
-
-h1 {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 30px;
-}
-
-h1 + p {
-  margin-top: 0.5em;
-  color: #c8a;
-}
-
-h1,
-h2 {
-  color: brown;
-  border-bottom: 1px inset;
-}
-
-img {
-  max-width: 100%;
-}
-
-dd,
-dt {
-  margin-bottom: 0.5em;
-}
-
-li {
-  margin: 0.2em 0;
-}
-
-table {
-  width: 100%;
-}
-
-th {
-  /* font-weight: normal; */
-}
-
-footer {
-  border-top: 1px solid brown;
-  text-align: right;
-  padding: 0.2rem 0 0.5rem;
-}
-
-footer small {
-  float: left;
-}
-
-a {
-  color: brown;
-}
-
-/******************************************************************************
- * Dark Mode
- */
-
-input,
-select {
-  color-scheme: light dark;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    background-color: #111;
-  }
-
-  body {
-    background-color: #222;
-    border-color: #111;
-    box-shadow: 0px 1px 10px #111;
-    color: #ccc;
-  }
-
-  h1,
-  h2,
-  header,
-  a {
-    color: #e74;
-  }
-  h1,
-  h2,
-  footer {
-    border-color: #e74;
-  }
-  h1 + p {
-    color: #e74b;
-  }
-}
diff --git a/dactylo.html b/dactylo.html
deleted file mode 100644
index bf7ee79c..00000000
--- a/dactylo.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!doctype html>
-<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-  <meta charset="utf-8" />
-  <meta name="description" content="Une disposition de clavier francophone
-        de type Colemak, optimisée pour le français, l’anglais et le code." />
-  <title>Ergo‑L</title>
-  <link type="text/css" rel="stylesheet" href="css/layout.css" />
-  <link type="text/css" rel="stylesheet" href="css/demo.css" />
-  <link type="image/svg+xml" rel="icon" href="favicon.svg" sizes="any" />
-  <script src="js/x-keyboard.js" type="module"></script>
-  <script src="js/dactylo.js" type="text/javascript"></script>
-</head>
-<body>
-  <header>
-    <h1><span class="key_list"></span><span class="quacks">🦆</span></h1>
-    <p class="status">·</p>
-  </header>
-
-  <div class="keyboard">
-    <input hidden spellcheck="false" />
-    <p id="lesson"></p>
-    <x-keyboard></x-keyboard>
-    <p style="text-align: right;">
-      <span style="float: left;">
-        <select id="layout">
-          <option value="ergol" selected>Ergo‑L</option>
-          <option value="erglace">Erglace</option>
-          <option value="bepo">Bépo</option>
-          <option value="azerty">Azerty</option>
-          <option value="lafayette">Lafayette</option>
-        </select>
-        <select id="dict">
-          <option value="fr,french_1k">Français 1k</option>
-          <option value="fr,french_10k" selected>Français 10k</option>
-          <option value="en,english_1k">English 1k</option>
-          <option value="en,english_10k">English 10k</option>
-        </select>
-      </span>
-      <select id="geometry">
-        <option value="iso" selected>ISO</option>
-        <option value="ansi">ANSI</option>
-        <option value="ol60">TMx</option>
-        <option value="ol50">4×6</option>
-        <option value="ol40">3×6</option>
-      </select>
-    </p>
-  </div>
-
-  <footer>
-    <span style="float: left;"> <small>powered by <a
-          href="https://onedeadkey.github.io/x-keyboard/">x-keyboard</a>,
-        inspired by <a href="https://github.com/wwwtyro/keyzen">keyzen</a>
-        and <a href="https://github.com/aradzie/keybr.com">keybr</a>, fuelled by
-        <a href="https://github.com/monkeytypegame/monkeytype">MonkeyType</a>
-      </small> </span>
-    <a href=".">Ergo‑L »</a>
-  </footer>
-</body>
-</html>
diff --git a/img/charge_bepo_en.png b/img/charge_bepo_en.png
deleted file mode 100644
index d5c6d9e8..00000000
Binary files a/img/charge_bepo_en.png and /dev/null differ
diff --git a/img/charge_bepo_en_fr.png b/img/charge_bepo_en_fr.png
deleted file mode 100644
index 09bd8542..00000000
Binary files a/img/charge_bepo_en_fr.png and /dev/null differ
diff --git a/img/charge_bepo_fr.png b/img/charge_bepo_fr.png
deleted file mode 100644
index d4725a3c..00000000
Binary files a/img/charge_bepo_fr.png and /dev/null differ
diff --git a/img/charge_ergol_en.png b/img/charge_ergol_en.png
deleted file mode 100644
index b3e619de..00000000
Binary files a/img/charge_ergol_en.png and /dev/null differ
diff --git a/img/charge_ergol_en_fr.png b/img/charge_ergol_en_fr.png
deleted file mode 100644
index 5e355a9a..00000000
Binary files a/img/charge_ergol_en_fr.png and /dev/null differ
diff --git a/img/charge_ergol_fr.png b/img/charge_ergol_fr.png
deleted file mode 100644
index cfd437d4..00000000
Binary files a/img/charge_ergol_fr.png and /dev/null differ
diff --git a/index.html b/index.html
deleted file mode 100644
index 96da8d38..00000000
--- a/index.html
+++ /dev/null
@@ -1,534 +0,0 @@
-<!doctype html>
-<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="description"
-      content="Une disposition de clavier francophone de type Colemak, optimisée pour le français, l’anglais et le code."
-    />
-    <title>Ergo‑L</title>
-    <link type="text/css" rel="stylesheet" href="css/layout.css" />
-    <link type="text/css" rel="stylesheet" href="css/demo.css" />
-    <link type="image/svg+xml" rel="icon" href="favicon.svg" sizes="any" />
-    <script src="js/x-keyboard.js" type="module"></script>
-    <script src="js/demo.js" type="text/javascript"></script>
-    <script src="js/svg.js " type="text/javascript"></script>
-  </head>
-  <body>
-    <header>
-      <h1>Ergo‑L</h1>
-      <p> Une disposition de clavier ergonomique optimisée pour le français,
-        l’anglais et le code. </p>
-    </header>
-
-    <div class="keyboard">
-      <img src="img/ergol.svg">
-      <p style="text-align: right;">
-        <span style="float: left;"> <small>powered by <a
-              href="https://onedeadkey.github.io/x-keyboard/">x-keyboard</a>
-        </span> géométrie</small> :
-        <select>
-          <option value="dk iso">ISO</option>
-        </select>
-      </p>
-      <nav>
-        <a href="dactylo">⌨ Apprendre</a>
-        <button hidden>⇪ Tester !</button>
-        <a href="lts">⇣ Installer</a>
-      </nav>
-    </div>
-
-    <dialog id="demo">
-      <input spellcheck="false" placeholder="zone de saisie Ergo‑L" />
-      <x-keyboard src="data/layouts/ergol.json"></x-keyboard>
-    </dialog>
-
-    <h2 id="objectifs">Objectifs</h2>
-    <ul>
-      <li>
-        disposition <strong>optimisée pour le français et l’anglais</strong>
-      </li>
-      <li>
-        couche AltGr optionnelle, optimisée pour l’enchaînement des symboles de programmation
-      </li>
-      <li>
-        <strong>conservation des raccourcis usuels</strong> :
-        <kbd>Ctrl</kbd
-        >-{<kbd>Q</kbd>,<kbd>A</kbd>,<kbd>S</kbd>,<kbd>Z</kbd>,<kbd>X</kbd>,<kbd>V</kbd>}
-        (<kbd>Ctrl</kbd>-<kbd>C</kbd> est décalé, mais reste faisable d’une
-        main)
-      </li>
-      <li>
-        support de tous les caractères spéciaux utilisés en français
-        (diacritiques, majuscules accentuées, lettres entrelacées, symboles de
-        ponctuation…)
-      </li>
-      <li><strong>chiffres en accès direct</strong></li>
-    </ul>
-
-    <h2 id="install">Installation</h2>
-    <p>
-      Voir <a href="https://github.com/Nuclear-Squid/ErgoL">le dépôt GitHub</a>
-      pour les instructions d’installation.
-    </p>
-
-    <h2 id="licence">Licence</h2>
-    <p>
-      <a href="http://wtfpl.net/">WTFPL</a>
-      – Do What the Fuck You Want to Public License.
-    </p>
-
-    <h2 id="optimisation">Optimisation</h2>
-    <p>
-      L’optimisation d’une disposition de clavier francophone comprend deux
-      difficultés :
-    </p>
-    <ul>
-      <li>
-        le placement des lettres, selon une méthode de type Dvorak ou Colemak ;
-      </li>
-      <li>
-        la gestion des caractères accentués — accès direct, <kbd>AltGr</kbd>,
-        touche morte ?
-      </li>
-    </ul>
-    <p>
-      <abbr title="trop long ; pas lu :">TL;PL:</abbr> Ergo‑L est une
-      disposition optimisée façon <a href="https://colemak.com/">Colemak</a> /
-      <a href="https://workmanlayout.org/">Workman</a>, utilisant une touche
-      morte de type <a href="https://qwerty-lafayette.org/">Lafayette</a> pour
-      les caractères accentués.
-    </p>
-
-    <p>
-      Ergo‑L est meilleur que Bépo pour le Français, meilleur que Dvorak pour
-      l’Anglais et meilleur que Qwerty pour la programmation !
-    </p>
-
-    <p style="text-align: center">
-      <a href="stats#/ergol/iso/fr"
-        ><img
-          src="img/ergol_fr.svg"
-          alt="heatmap de la disposition Ergo‑L sur un corpus francophone"
-        />
-        <br />fréquence des touches en français
-      </a>
-    </p>
-    <p style="text-align: center">
-      <a href="stats#/ergol/iso/en"
-        ><img
-          src="img/ergol_en.svg"
-          alt="heatmap de la disposition Ergo‑L sur un corpus anglo-saxon"
-        />
-        <br />fréquence des touches en anglais
-      </a>
-    </p>
-
-    <h3>Placement des lettres</h3>
-    <p>
-      Il y a eu plusieurs projets anglo-saxons d’optimisation du clavier, tous
-      basés sur un réarrangement des touches du Qwerty visant à :
-    </p>
-    <ul>
-      <li>Maximiser l’alternance des mains lors de la frappe ;</li>
-      <li>Répartir les touches de façon équitable sur les deux mains ;</li>
-      <li>
-        Utiliser en priorité la rangée centrale, puis haute, puis inférieure ;
-      </li>
-      <li>
-        En cas de non-alternance des mains sur un digramme, diriger la frappe
-        vers le centre du clavier ce qui sollicite davantage les doigts les plus
-        habiles à savoir l’index et le majeur.
-      </li>
-    </ul>
-    <p>
-      Le plus connu et le plus ancien (finalisé en 1932) est
-      <a href="https://fr.wikipedia.org/wiki/Disposition_Dvorak">Dvorak</a>.
-      Particularité : toutes les voyelles sont sous la main gauche. Mais avec la
-      généralisation de la bureautique, les raccourcis claviers
-      <kbd>Ctrl</kbd
-      >-{<kbd>Q</kbd>,<kbd>A</kbd>,<kbd>S</kbd>,<kbd>Z</kbd>,<kbd>X</kbd>,<kbd>C</kbd>,<kbd>V</kbd>}
-      sont devenus indispensables et les projets récents d’optimisation de
-      disposition clavier ont cherché à les préserver.
-    </p>
-    <ul>
-      <li>
-        C’est notamment le cas de <a href="https://colemak.com/">Colemak</a>,
-        qui revendique une meilleure efficacité que Dvorak tout en préservant
-        les raccourcis usuels — sauf <kbd>Ctrl</kbd>-<kbd>S</kbd>, décalé d’une
-        colonne.
-      </li>
-      <li>
-        La disposition <a href="https://workmanlayout.org/">Workman</a> vise à
-        améliorer Colemak, notamment en limitant les mouvements horizontaux des
-        doigts. Là encore, les raccourcis sont préservés — sauf
-        <kbd>Ctrl</kbd>-<kbd>C</kbd>,<kbd>V</kbd>, décalés d’une colonne.
-      </li>
-    </ul>
-    <p>
-      Ergo‑L reprend les principes de Colemak et Workman et concerve la plupart
-      des raccourcis usuels. <kbd>Ctrl</kbd>-<kbd>C</kbd> est déplacé mais reste
-      accessible d’une main. Nous pensons que le gain en ergonomie justifie ce
-      décalage.
-    </p>
-
-    <h3>Polyvalence français / anglais</h3>
-    <p>
-      Les dispositions Dvorak, Colemak et Workman sont optimisées pour l’anglais
-      exclusivement. Les dispositions francophones
-      <a href="https://www.algo.be/ergo/dvorak-fr.html">Dvorak-fr</a> et
-      <a href="https://bepo.fr/">Bépo</a> appliquent au français le principe de
-      Dvorak (donc sans support des raccourcis claviers usuels), quitte à
-      devenir pénalisantes pour l’anglais.
-    </p>
-    <p>
-      Pourtant, à une exception près, les 9 lettres les plus fréquentes sont les
-      mêmes en français (ESANITRUO) et en anglais (ETAOHNISR) :
-    </p>
-    <table style="font-size: small">
-      <tr>
-        <th></th>
-        <th>E</th>
-        <th>S</th>
-        <th>A</th>
-        <th>N</th>
-        <th>I</th>
-        <th>T</th>
-        <th>R</th>
-        <th>U</th>
-        <th>O</th>
-        <th>H</th>
-      </tr>
-      <tr>
-        <th>fr</th>
-        <td>14.44 %</td>
-        <td>7.25 %</td>
-        <td>7.14 %</td>
-        <td>6.78 %</td>
-        <td>6.74 %</td>
-        <td>6.74 %</td>
-        <td>6.52 %</td>
-        <td>6.16 %</td>
-        <td>5.29 %</td>
-        <td>1.06 %</td>
-      </tr>
-      <tr>
-        <th>en</th>
-        <td>11.72 %</td>
-        <td>6.15 %</td>
-        <td>7.97 %</td>
-        <td>6.63 %</td>
-        <td>6.50 %</td>
-        <td>9.04 %</td>
-        <td>5.33 %</td>
-        <td>2.68 %</td>
-        <td>7.85 %</td>
-        <td>6.71 %</td>
-      </tr>
-    </table>
-    <p>
-      Ergo‑L place donc ces lettres aux emplacements les plus confortables
-      (suivant les principes de Workman) et fait en sorte qu’aucun enchaînement
-      fréquent en français ou en anglais ne soit rédhibitoire. On obtient donc
-      une efficacité supérieure à Bépo ou Dvorak-fr, sans sacrifier la
-      programmation ou l’anglais.
-    </p>
-
-    <h3>Gestion des accents</h3>
-    <p>
-      Azerty, <a href="https://www.algo.be/ergo/dvorak-fr.html">Dvorak-fr</a> et
-      <a href="https://bepo.fr/">Bépo</a> gèrent les caractères accentués de
-      façon assez similaire :
-    </p>
-    <ul>
-      <li>
-        certaines lettres comme <kbd>É</kbd><kbd>È</kbd><kbd>À</kbd
-        ><kbd>Ç</kbd> sont accessibles directement ;
-      </li>
-      <li>
-        l’accent circonflexe et le tréma sont faits avec une touche morte (le
-        tréma nécessitant <em>en plus</em> <kbd>AltGr</kbd> avec Bépo) ;
-      </li>
-      <li>
-        certains caractères nécessitent la touche <kbd>AltGr</kbd>, ce qui
-        complique les enchaînements : Œ, Æ, points de suspension… et même Ù pour
-        Bépo.
-      </li>
-    </ul>
-    <p>C’est la source de deux défauts majeurs dont Qwerty est exempt :</p>
-    <ul>
-      <li>
-        les chiffres nécessitent <kbd>Shift</kbd>, ce qui rend fastidieuse la
-        saisie de nombres ;
-      </li>
-      <li>
-        certaines lettres ne sont pas accessibles dans la zone confortable des
-        3×10 touches sous les chiffres, ce qui impose des extensions de doigt :
-        <kbd>É</kbd><kbd>È</kbd><kbd>À</kbd><kbd>Ç</kbd> pour Azerty,
-        <kbd>È</kbd><kbd>Z</kbd><kbd>W</kbd> pour Dvorak-fr, <kbd>M</kbd
-        ><kbd>Z</kbd><kbd>W</kbd><kbd>Ç</kbd><kbd>Ê</kbd> pour Bépo.
-      </li>
-    </ul>
-    <p>
-      Pour éviter cela, Ergo‑L utilise une touche morte de type
-      <a href="https://qwerty-lafayette.org/">Qwerty-Lafayette</a> pour tous les
-      caractères accentués et ponctuations spéciales. Cela occasionne environ
-      4 % de frappes supplémentaires pour un texte francophone, ce qui est
-      négligeable comparé au gain de confort que cela apporte. La touche
-      <kbd>AltGr</kbd> peut ainsi être dédiée aux seuls symboles de
-      programmation.
-    </p>
-
-    <h2 id="ergomonie">Principes d’ergonomie</h2>
-
-    <h3>Une approche moderne de la saisie de texte</h3>
-    <p>
-      Il n’y a pas de lettres à l’extérieur des 3×10 touches du centre pour
-      éviter le manque de confort et de précision causé par les extensions. Cela
-      implique que :
-    </p>
-    <ul>
-      <li>
-        Les lettres accentuées et ponctuations spéciales soient obtenues avec
-        une touche morte :
-        <ul>
-          <li>
-            C’est moins intuitif qu’une couche <kbd>AltGr</kbd>, mais favorise
-            les enchaînements et l’apprentissage en mémoire musculaire.
-          </li>
-          <li>
-            La touche morte ajoute aux voyelles qui suivent un accent grave (ou
-            les transforme en leur diacritique principal si elles n’ont pas
-            d’accent grave).
-          </li>
-          <li>
-            Les accents circonflexes se font avec une touche à côté de la touche
-            de la voyelle, et les trémas avec shift + touche morte, puis la
-            voyelle. Ce n’est pas du tout intuitif, mais ça permet de garder
-            tous les accents courants en accès rapide.
-          </li>
-          <li>
-            Faire shift + voyelle <b>après</b> la touche morte permet d’avoir
-            les lettres accentuées en majuscule. Oubliez vos alt codes !
-          </li>
-          <li>
-            Une exception : le <code>é</code> se fait en touche morte -&gt;
-            <code> s </code> pour garder l’enchaînement
-            <code>ée</code> efficace.
-          </li>
-        </ul>
-      </li>
-      <li>
-        La couche AltGr (voir ci-dessous) est réservée aux symboles de
-        programmation :
-        <ul>
-          <li>Tous les symboles de programmation sont en AltGr.</li>
-          <li>
-            Accolades, crochets et parenthèses sont sur les 6 touches les plus
-            accessibles.
-          </li>
-          <li>
-            La disposition est optimisée pour les enchaînements fréquents en
-            programmation :
-            <code> -&gt; =&gt; &lt;/ /&gt; (0) [0] [''] ("") {} ~/ </code> …
-          </li>
-        </ul>
-      </li>
-    </ul>
-
-    <p>
-      La touche morte et la couche AltGr rendent la disposition
-      <strong>compatible avec les claviers ultra compacts</strong> (33 touches
-      minimum).
-    </p>
-
-    <p>
-      <img src="img/ergol_1dk.svg" alt="La touche morte de la disposition." />
-    </p>
-    <p>
-      <img src="img/ergol_altgr.svg" alt="La couche AltGr de la disposition." />
-    </p>
-
-    <p>
-      Les chiffres sont en accès direct, sans <kbd>Shift</kbd>, pour faciliter
-      leur enchaînement (= la saisie de nombres). Oubliez votre pavé numérique !
-    </p>
-    <p>
-      Les raccourcis usuels
-      <kbd>Ctrl</kbd
-      >-{<kbd>Q</kbd>,<kbd>A</kbd>,<kbd>S</kbd>,<kbd>Z</kbd>,<kbd>X</kbd>,<kbd>V</kbd>}
-      ont été conservés car le gain marginal d’ergonomie en mettant une autre
-      lettre à la place n’est pas suffisant pour compenser la perte de ces
-      raccourcis — loin s’en faut (une exception : <kbd>Ctrl</kbd>-<kbd>C</kbd>
-      qui a permis un gain important d’ergonomie, et a été modifié de sorte à
-      gêner le moins possible).
-    </p>
-    <p>
-      Beaucoup d’attention a été portée sur les enchaînements de lettres, avec
-      la plupart des enchaînements fréquents qui se font soit avec une
-      alternance main gauche / main droite, soit avec un roulement intérieur (se
-      terminant sur le majeur ou l’index). Les lettres fréquemment doublées
-      (e.g. <kbd>L</kbd> et <kbd>M</kbd>) sont placées sous les index.
-      <strong>On privilégie le confort sur la vitesse</strong> : il est possible
-      de taper vite avec n’importe quelle disposition de clavier.
-    </p>
-
-    <h3>Ergo‑L vs Bépo</h3>
-    <p>
-      Ergo‑L poursuit les mêmes objectifs que
-      <a href="https://bepo.fr">Bépo</a> pour le français, mais d’une façon
-      différente.
-    </p>
-    <ul>
-      <li>
-        <i lang="en">Heatmap</i> :
-        <ul>
-          <li>
-            Bépo est typé « Dvorak », i.e. les touches fréquentes sont étalées
-            sur toute la <i lang="en">home row</i> ;
-          </li>
-          <li>
-            Ergo‑L est typé « Workman », i.e. on évite les deux colonnes du
-            centre pour limiter les extensions de l’index.
-          </li>
-        </ul>
-      </li>
-      <li>
-        Charge des doigts :
-        <ul>
-          <li>
-            Bépo charge surtout les index et les auriculaires (notamment
-            l’auriculaire droit) ;
-          </li>
-          <li>
-            Ergo‑L répartit la charge sur tous les doigts, en mettant plus de
-            charge sur les doigts forts (index, majeur) et en allégeant les
-            auriculaires — surtout l’auriculaire droit, déjà très sollicité par
-            <kbd>Shift</kbd> / <kbd>Entrée</kbd> / <kbd>Backspace</kbd>.
-          </li>
-        </ul>
-      </li>
-      <li>
-        Enchaînements :
-        <ul>
-          <li>
-            Bépo privilégie les accès directs et étale les lettres sur tout le
-            clavier, quitte à requérir des extensions de doigts (<kbd>M</kbd
-            ><kbd>Z</kbd><kbd>W</kbd><kbd>Ç</kbd><kbd>Ê</kbd>) ou l’utilisation
-            de <kbd>AltGr</kbd> (Ù, tréma, ponctuation…) ;
-          </li>
-          <li>
-            Ergo‑L privilégie la fluidité et ne place aucune lettre hors de la
-            zone principale de 3×10 touches ou dans la couche <kbd>AltGr</kbd>.
-          </li>
-        </ul>
-      </li>
-      <li>
-        Typographie :
-        <ul>
-          <li>
-            Bépo permet une typographie soignée à condition de s’en donner la
-            peine (beaucoup de symboles en <kbd>AltGr</kbd>) ;
-          </li>
-          <li>
-            Ergo‑L hérite du Qwerty-Lafayette la facilité de soigner la typo —
-            les ponctuations spéciales sont toutes derrière la touche morte,
-            comme l’apostrophe typographique en touche morte + espace, le point
-            médian en touche morte + virgule, le point de suspension en touche
-            morte + point, etc.
-          </li>
-        </ul>
-      </li>
-      <li>
-        <abbr
-          title="La proportion totale d’enchaînements effectués avec le même doigt,
-      un type d’enchaînement très inconfortable"
-        >
-          SFU (same finger usage) </abbr
-        > :
-        <ul>
-          <li>
-            Bépo a environ 2.55% de SFU en Français, dont la moitié sont
-            retrouvés sur l’index gauche, qui est déjà trop chargé (23% de la
-            charge totale), et 0.3% se trouvent sur l’auriculaire gauche, trop
-            pour un doigt aussi faible. De plus, une grande partie des touches
-            doublées se trouvent sur l’auriculaire droit (et souvent en
-            extension !)
-          </li>
-          <li>
-            Ergo‑L n’a que 1.36% de SFU en Français, et aucun doigt ne fait trop
-            d’effort. Les auriculaires n’ont pratiquement pas de touches
-            doublées.
-          </li>
-        </ul>
-      </li>
-    </ul>
-    <table>
-      <caption style="caption-side: bottom">
-        Comparaison des charges des doigts entre Ergo‑L et Bépo<br />
-        <small> (cliquer sur l’image pour plus d’infos) </small>
-      </caption>
-      <tr>
-        <th></th>
-        <th>Ergo‑L</th>
-        <th>Bépo</th>
-      </tr>
-      <tr>
-        <th>fr</th>
-        <td>
-          <a href="stats#/ergol/iso/fr"
-            ><img src="img/charge_ergol_fr.png"
-          /></a>
-        </td>
-        <td>
-          <a href="stats#/bepo/iso/fr"><img src="img/charge_bepo_fr.png" /></a>
-        </td>
-      </tr>
-      <tr>
-        <th>fr<br />en</th>
-        <td>
-          <a href="stats#/ergol/iso/en+fr"
-            ><img src="img/charge_ergol_en_fr.png"
-          /></a>
-        </td>
-        <td>
-          <a href="stats#/bepo/iso/en+fr"
-            ><img src="img/charge_bepo_en_fr.png"
-          /></a>
-        </td>
-      </tr>
-      <tr>
-        <th>en</th>
-        <td>
-          <a href="stats#/ergol/iso/en"
-            ><img src="img/charge_ergol_en.png"
-          /></a>
-        </td>
-        <td>
-          <a href="stats#/bepo/iso/en"><img src="img/charge_bepo_en.png" /></a>
-        </td>
-      </tr>
-    </table>
-
-    <h3>Expériences rejetées et évolutions possibles</h3>
-    <p>
-      Le layout est encore en cours de développement, notamment pour améliorer
-      l’efficacité de la couche AltGr. Vous pouvez participer aux travaux en
-      rejoignant le
-      <a href="https://discord.gg/5xR5K3nAFX">serveur Discord</a> dédié.
-    </p>
-
-    <p>
-      On a envisagé par le passé de placer le <kbd>E</kbd> sous l’index, comme
-      en Bépo, parce que c’est la lettre la plus fréquente en français ; mais
-      cela ruine l’équilibre de la charge des doigts et complique beaucoup
-      d’enchaînements. De même, on a essayé de mettre toutes les voyelles d’un
-      côté (comme Dvorak ou Bépo) mais cela engendrait plus de problèmes que
-      cela n’en résolvait.
-    </p>
-
-    <footer>
-      <a href="https://github.com/Nuclear-Squid/ErgoL">dépôt GitHub</a> |
-      <a href="https://discord.gg/5xR5K3nAFX">serveur Discord</a>
-    </footer>
-  </body>
-</html>
diff --git a/data/layouts/ISRT.json b/layouts/ISRT.json
similarity index 100%
rename from data/layouts/ISRT.json
rename to layouts/ISRT.json
diff --git a/data/layouts/ISRT.yaml b/layouts/ISRT.yaml
similarity index 100%
rename from data/layouts/ISRT.yaml
rename to layouts/ISRT.yaml
diff --git a/data/layouts/MTGAP.json b/layouts/MTGAP.json
similarity index 100%
rename from data/layouts/MTGAP.json
rename to layouts/MTGAP.json
diff --git a/data/layouts/MTGAP.yaml b/layouts/MTGAP.yaml
similarity index 100%
rename from data/layouts/MTGAP.yaml
rename to layouts/MTGAP.yaml
diff --git a/data/layouts/azerty.json b/layouts/azerty.json
similarity index 100%
rename from data/layouts/azerty.json
rename to layouts/azerty.json
diff --git a/data/layouts/azerty.yaml b/layouts/azerty.yaml
similarity index 100%
rename from data/layouts/azerty.yaml
rename to layouts/azerty.yaml
diff --git a/data/layouts/bepo.json b/layouts/bepo.json
similarity index 100%
rename from data/layouts/bepo.json
rename to layouts/bepo.json
diff --git a/data/layouts/bepo.yaml b/layouts/bepo.yaml
similarity index 100%
rename from data/layouts/bepo.yaml
rename to layouts/bepo.yaml
diff --git a/data/layouts/colemak-dh.json b/layouts/colemak-dh.json
similarity index 100%
rename from data/layouts/colemak-dh.json
rename to layouts/colemak-dh.json
diff --git a/data/layouts/colemak-dh.yaml b/layouts/colemak-dh.yaml
similarity index 100%
rename from data/layouts/colemak-dh.yaml
rename to layouts/colemak-dh.yaml
diff --git a/data/layouts/colemak.json b/layouts/colemak.json
similarity index 100%
rename from data/layouts/colemak.json
rename to layouts/colemak.json
diff --git a/data/layouts/colemak.yaml b/layouts/colemak.yaml
similarity index 100%
rename from data/layouts/colemak.yaml
rename to layouts/colemak.yaml
diff --git a/data/layouts/dvorak.json b/layouts/dvorak.json
similarity index 100%
rename from data/layouts/dvorak.json
rename to layouts/dvorak.json
diff --git a/data/layouts/dvorak.yaml b/layouts/dvorak.yaml
similarity index 100%
rename from data/layouts/dvorak.yaml
rename to layouts/dvorak.yaml
diff --git a/data/layouts/erglace.json b/layouts/erglace.json
similarity index 100%
rename from data/layouts/erglace.json
rename to layouts/erglace.json
diff --git a/data/layouts/erglace.toml b/layouts/erglace.toml
similarity index 100%
rename from data/layouts/erglace.toml
rename to layouts/erglace.toml
diff --git a/data/layouts/ergol.json b/layouts/ergol.json
similarity index 100%
rename from data/layouts/ergol.json
rename to layouts/ergol.json
diff --git a/data/layouts/ergol.toml b/layouts/ergol.toml
similarity index 100%
rename from data/layouts/ergol.toml
rename to layouts/ergol.toml
diff --git a/data/layouts/lafayette.json b/layouts/lafayette.json
similarity index 100%
rename from data/layouts/lafayette.json
rename to layouts/lafayette.json
diff --git a/data/layouts/lafayette.yaml b/layouts/lafayette.yaml
similarity index 100%
rename from data/layouts/lafayette.yaml
rename to layouts/lafayette.yaml
diff --git a/data/layouts/qwerty.json b/layouts/qwerty.json
similarity index 100%
rename from data/layouts/qwerty.json
rename to layouts/qwerty.json
diff --git a/data/layouts/qwerty.yaml b/layouts/qwerty.yaml
similarity index 100%
rename from data/layouts/qwerty.yaml
rename to layouts/qwerty.yaml
diff --git a/data/layouts/sturdy.json b/layouts/sturdy.json
similarity index 100%
rename from data/layouts/sturdy.json
rename to layouts/sturdy.json
diff --git a/data/layouts/sturdy.toml b/layouts/sturdy.toml
similarity index 100%
rename from data/layouts/sturdy.toml
rename to layouts/sturdy.toml
diff --git a/data/layouts/workman.json b/layouts/workman.json
similarity index 100%
rename from data/layouts/workman.json
rename to layouts/workman.json
diff --git a/data/layouts/workman.yaml b/layouts/workman.yaml
similarity index 100%
rename from data/layouts/workman.yaml
rename to layouts/workman.yaml
diff --git a/lts.html b/lts.html
deleted file mode 100644
index eb2bab57..00000000
--- a/lts.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-  <meta charset="utf-8" />
-  <meta name="description"
-    content="Une disposition de clavier francophone de type Colemak, optimisée pour le français, l’anglais et le code." />
-  <title>Ergo‑L</title>
-  <link type="text/css" rel="stylesheet" href="css/layout.css" />
-  <link type="text/css" rel="stylesheet" href="css/demo.css" />
-  <link type="image/svg+xml" rel="icon" href="favicon.svg" sizes="any" />
-  <script src="js/x-keyboard.js" type="module"></script>
-  <script src="js/svg.js" type="text/javascript"></script>
-</head>
-<body>
-    <header>
-      <a href="." style="float: right; margin-top: 2em"> « accueil </a>
-      <h1>Ergo‑L</h1>
-      <p> Une disposition de clavier ergonomique optimisée pour le français,
-        l’anglais et le code. </p>
-    </header>
-
-  <div class="keyboard">
-    <img src="img/ergol.svg">
-    <p style="text-align: right;"> géométrie :
-      <select>
-        <option>ISO</option>
-      </select>
-    </p>
-  </div>
-
-  <h2 id="pilotes"> Téléchargement </h2>
-  <dl class="download">
-
-    <dt>
-      <strong> Windows, installeur : </strong>
-      <a href="./0_7_0/ergol_KbdEditInstaller.exe">ergol_KbdEditInstaller.exe</a>
-    </dt>
-    <dd>
-      <p> Exécuter l’installeur et relancer la session. La disposition de
-      clavier apparaît dans la barre de langues (indicateur de la barre des
-      tâches). </p>
-    </dd>
-
-    <dt>
-      <strong> Windows, version portable : </strong>
-      <a href="./0_7_0/ergol_ahk.exe">ergol_ahk.exe</a>
-    </dt>
-    <dd>
-      <p> Après lancement, un indicateur apparaît dans la barre des tâches.
-        Le pilote peut être activé / désactivé avec le raccourci
-        <kbd>Alt</kbd>+<kbd>AltGr</kbd/. </p>
-      <p> Ne nécessite pas de droits d’administration, peut fonctionner depuis
-        une clé USB. </p>
-    </dd>
-
-    <dt>
-      <strong> macOS : </strong>
-      <a href="./0_7_0/ergol.keylayout">ergol.keylayout</a>
-    </dt>
-    <dd>
-      <p> Enregistrer dans <code>/Library/Keyboard Layouts</code> et relancer
-      la session. La disposition de clavier est disponible dans les préférences
-      « Langue et Texte », onglet « Méthodes de saisie ». </p>
-      <p> On peut aussi l’enregistrer dans <code>~/Library/Keyboard Layouts</code>
-        (pour le seul utilisateur courant), mais la disposition ne sera pas
-        active au login. </p>
-      <p> Il est possible (et recommandé) d’utiliser <a
-        href="https://karabiner-elements.pqrs.org/">Karabiner</a> pour <a
-        href="img/karabiner_settings.png">inverser les touches</a>
-      <kbd>⌘ Command</kbd> et <kbd>⌥ Option</kbd> à droite, afin d’accéder plus
-      facilement à la couche de symboles. </p>
-    </dd>
-
-    <dt>
-      <strong> GNU/Linux : </strong>
-      <a href="./0_7_0/ergol.xkb_custom">ergol.xkb_custom</a>
-    </dt>
-    <dd>
-      <p> Copier le pilote dans <code>xkb/symbols/custom</code> :</p>
-      <pre>
-      wget https://ergol.org/0_7_0/ergol.xkb_custom
-      sudo mv ergol.xkb_custom ${XKB_CONFIG_ROOT:-/usr/share/X11/xkb}/symbols/custom </pre>
-      <p> La disposition de clavier est disponible dans le gestionnaire de
-        préférences du bureau sous un nom générique (« custom layout »,
-        « disposition personnalisée », etc.).
-        Sous XOrg on peut aussi l’activer directement en ligne de commande : </p>
-      <pre>
-      setxkbmap custom </pre>
-      <p> D’autres méthodes d’installation sont possibles, en passant le <a
-        href="data/layouts/ergol.toml">fichier source</a> à <a
-        href="https://github.com/OneDeadKey/kalamine#xkalamine">XKalamine</a>.
-      <p> Remarque : avec certains bureaux (Gnome notamment), la touche morte
-      <kbd>★</kbd> ne fonctionne que si Lafayette est définie comme disposition
-      de par défaut, i.e. en haut de la liste dans les préférences clavier. </p>
-    </dd>
-
-  </dl>
-
-  <h2 id="licence"> Licence </h2>
-  <p> <a href="http://wtfpl.net/">WTFPL</a>
-    – Do What the Fuck You Want to Public License. </p>
-
-  <footer>
-    <a href="https://github.com/Nuclear-Squid/ErgoL">dépôt GitHub</a> |
-    <a href="https://discord.gg/5xR5K3nAFX">serveur Discord</a>
-  </footer>
-</body>
-</html>
diff --git a/stats.html b/stats.html
deleted file mode 100644
index dab7d3b6..00000000
--- a/stats.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<!doctype html>
-<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="description"
-      content="Une disposition de clavier francophone de type Colemak, optimisée pour le français, l’anglais et la programmation"
-    />
-    <title>Ergo-L</title>
-    <link type="text/css" rel="stylesheet" href="css/layout.css" />
-    <link type="text/css" rel="stylesheet" href="css/demo.css" />
-    <link type="text/css" rel="stylesheet" href="css/heatmap.css" />
-    <link type="image/svg+xml" rel="icon" href="favicon.svg" sizes="any" />
-    <script src="js/x-keyboard.js" type="module"></script>
-    <script src="js/heatmap.js" type="text/javascript"></script>
-    <script defer src="js/demo.js"></script>
-    <script defer src="js/collapsable-table.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <header>
-      <a href="index.html" style="float: right; margin-top: 2em"> « accueil </a>
-      <h1>Heatmap</h1>
-      <p>
-        Fréquences de touches obtenues avec le “Don Quichotte” de Cervantès.
-      </p>
-    </header>
-
-    <div id="demo">
-      <input spellcheck="false" />
-      <x-keyboard id="keyboard"></x-keyboard>
-    </div>
-
-    <div id="sticky-select" class="keyboard">
-      <form>
-        <select id="layout">
-          <option disabled>  [en]</option>
-          <option>qwerty</option>
-          <option>dvorak</option>
-          <option>colemak</option>
-          <option>colemak-dh</option>
-          <option>workman</option>
-          <option>ISRT</option>
-          <option>MTGAP</option>
-          <option>sturdy</option>
-          <option disabled>  [fr]</option>
-          <option>azerty</option>
-          <option>lafayette</option>
-          <option selected>ergol</option>
-          <option>erglace</option>
-          <option>bepo</option>
-        </select>
-        <select id="geometry">
-          <option value="iso">ISO</option>
-          <option value="ansi" selected>ANSI</option>
-          <option value="ol60">TMx</option>
-          <option value="ol50">50%</option>
-          <option value="ol40">40%</option>
-        </select>
-        <select id="corpus">
-          <option>en</option>
-          <option selected>en+fr</option>
-          <option>fr</option>
-        </select>
-      </form>
-    </div>
-
-    <p id="imprecise-data">
-      <small>
-        Cette disposition ne sait pas générer un nombre non-négligeable de
-        symboles, les résultats sont peu fiables.
-      </small>
-    </p>
-
-    <h3>Charge des doigts</h3>
-    <small><span id="load-left"></span> / <span id="load-right"></span></small>
-    <div id="load">
-      <canvas></canvas>
-      <table></table>
-    </div>
-
-    <h3>Digrammes à un doigt</h3>
-    <small><span id="sfu-all"></span></small>
-    <div id="sfu">
-      <canvas></canvas>
-      <table></table>
-    </div>
-
-    <h3>Touches doublées</h3>
-    <small><span id="sku-all"></span></small>
-    <div id="sku">
-      <canvas></canvas>
-      <table></table>
-    </div>
-
-    <collapsable-table id="Achoppements">
-      <small>
-        <span id="unsupported-all"></span>
-        / <span id="sfu-all"></span> / <span id="extensions-all"></span> /
-        <span id="scisors-all"></span>
-      </small>
-
-      <table id="unsupported"></table>
-      <table id="sfu-digrams"></table>
-      <table id="extended-rolls"></table>
-      <table id="scisors"></table>
-    </collapsable-table>
-
-    <collapsable-table id="Digrammes">
-      <small>
-        <span id="sku-all"></span>
-        / <span id="inward-all"></span> / <span id="outward-all"></span>
-      </small>
-
-      <table id="sku-digrams"></table>
-      <table id="inward"></table>
-      <table id="outward"></table>
-    </collapsable-table>
-
-    <collapsable-table id="Trigrammes">
-      <small>
-        <span id="almost-skb-all"></span>
-        / <span id="almost-sfb-all"></span> / <span id="redirect-all"></span> /
-        <span id="bad-redirect-all"></span>
-      </small>
-
-      <table id="almost-skbs"></table>
-      <table id="almost-sfbs"></table>
-      <table id="redirect"></table>
-      <table id="bad-redirect"></table>
-    </collapsable-table>
-
-    <footer>
-      <small>
-        powered by
-        <a href="https://fabi1cazenave.github.io/x-keyboard/">x-keyboard</a>
-      </small>
-      <a href="./">« ErgoL</a>
-    </footer>
-  </body>
-</html>
diff --git a/www/.hugo_build.lock b/www/.hugo_build.lock
new file mode 100644
index 00000000..e69de29b
diff --git a/www/archetypes/default.md b/www/archetypes/default.md
new file mode 100644
index 00000000..c6f3fcef
--- /dev/null
+++ b/www/archetypes/default.md
@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++
diff --git a/css/heatmap.css b/www/assets/css/heatmap.css
similarity index 56%
rename from css/heatmap.css
rename to www/assets/css/heatmap.css
index 6fc9afea..de2c221d 100644
--- a/css/heatmap.css
+++ b/www/assets/css/heatmap.css
@@ -1,38 +1,9 @@
-html {
-  height: 100%;
-  width: 100%;
-  font-family: sans-serif;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 0 25px;
-  margin: auto;
-  max-width: 51em;
-  min-height: calc(100% - 50px);
-}
-
-header {
-  font-size: 1rem;
-}
-
-h1 {
-  margin-bottom: 0.2em;
-  font-size: 1.4rem;
-}
-
-h3 {
-  border-bottom: 1px dotted;
-}
-
 h3 + small {
   text-align: right;
   margin-top: -1em;
 }
 
-div {
+main div {
   text-align: center;
 }
 
@@ -42,12 +13,22 @@ div {
   margin-bottom: -0.75em;
 }
 
+#sticky-select {
+  align-items: center;
+  position: sticky;
+  margin-bottom: 0;
+  top: 0;
+  z-index: 999;
+}
+
 input {
   box-sizing: border-box;
+  border-radius: 6px;
   width: 100%;
-  margin-bottom: 0.5em;
+  height: 2em;
   text-align: center;
-  font-size: 1.3em;
+  font-size: 1.5em;
+  margin-bottom: 1em;
 }
 
 canvas {
@@ -81,7 +62,3 @@ th {
 .row td {
   width: 4em;
 }
-
-footer {
-  margin-top: 2em;
-}
diff --git a/css/demo.css b/www/assets/css/keyboard.css
similarity index 51%
rename from css/demo.css
rename to www/assets/css/keyboard.css
index 2a62a458..80f7bc12 100644
--- a/css/demo.css
+++ b/www/assets/css/keyboard.css
@@ -29,18 +29,6 @@
   display: none;
 }
 
-#sticky-select {
-  align-items: center;
-  position: sticky;
-  margin-bottom: 0;
-  top: 0;
-  z-index: 999;
-}
-
-dialog::backdrop {
-  backdrop-filter: blur(5px);
-}
-
 #demo {
   max-width: 70em;
   width: 100%;
@@ -63,55 +51,6 @@ dialog::backdrop {
   margin-bottom: 1em;
 }
 
-h1 .quacks {
-  float: right;
-  transition: transform 1s;
-  user-select: none;
-  cursor: grab;
-}
-
-h1.active .quacks {
-  transform: translateX(-1000%);
-}
-
-.keyboard #lesson {
-  text-align: left;
-  font-family: monospace;
-  font-size: 2.5em;
-  height: 4em;
-  line-height: 1.2em;
-  margin: 0;
-  padding: 0;
-  text-wrap: break;
-}
-
-.keyboard #current {
-  border-bottom: 2px solid;
-}
-.keyboard span {
-  box-sizing: border-box;
- }
-.keyboard #lesson { color: #333; }
-.keyboard .done   { color: #999; }
-.keyboard .error  { color: red; }
-.keyboard .fixed  { color: green; }
-.keyboard .space::before {
-  content: "·";
-  word-break: break-all;
-}
-
-.key_list kbd {
-  font-family: monospace;
-  text-transform: uppercase;
-  display: inline-block;
-  margin: 0 2px;
-  cursor: pointer;
-}
-
-.key_list kbd.inactive {
-  color: gray;
-}
-
 #demo p {
   margin: 1em 0;
   text-align: right;
@@ -123,21 +62,14 @@ h1.active .quacks {
 }
 
 @media (prefers-color-scheme: dark) {
-
+  #demo {
+    background-color: #222;
+    border: 5px solid #0004;
+  }
   .keyboard nav a,
   .keyboard nav button {
     color: #ccc;
     background-color: #444;
     border: 1px solid #7778;
   }
-
-  .keyboard #lesson { color: white; }
-  .keyboard .error  { color: #f44; }
-  .keyboard .fixed  { color: #9e1; }
-
-  #demo {
-    background-color: #222;
-    border: 5px solid #0004;
-  }
-
 }
diff --git a/www/assets/css/layout.css b/www/assets/css/layout.css
new file mode 100644
index 00000000..5c582a0d
--- /dev/null
+++ b/www/assets/css/layout.css
@@ -0,0 +1,168 @@
+html {
+  height: 100%;
+  width: 100%;
+  font-family: sans-serif;
+  background-color: #ccc;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0 25px;
+  margin: auto;
+  max-width: 58em;
+  min-height: 100%;
+
+  line-height: 1.4em;
+  border-left: 1px solid #aaa;
+  border-right: 1px solid #aaa;
+  box-shadow: 0px 1px 10px #888;
+  background-color: white;
+  color: black;
+}
+
+h2 {
+  color: brown;
+  border-bottom: 1px inset;
+}
+
+h3 {
+  border-bottom: 1px dotted;
+}
+
+h2, h3, footer {
+  margin-top: 2em;
+}
+
+dialog::backdrop {
+  backdrop-filter: blur(5px);
+}
+
+.highlight {
+  max-width: 42em;
+  margin: auto;
+  padding: 1em;
+  border-radius: 1em;
+  background-color: #8882;
+}
+
+img {
+  max-width: 100%;
+}
+
+figure {
+  margin: 2em 0;
+  text-align: center;
+}
+
+dd,
+dt {
+  margin-bottom: 0.5em;
+}
+
+li {
+  margin: 0.2em 0;
+}
+
+table {
+  width: 100%;
+}
+
+table caption {
+  caption-side: bottom;
+}
+
+a {
+  color: brown;
+}
+
+
+/******************************************************************************
+ * Header & Footer
+ */
+
+#banner {
+  margin: 1em 0 0;
+  box-sizing: border-box;
+  background: left center no-repeat url(../favicon.svg);
+  background-size: 50px;
+  min-height: 50px;
+  padding-left: 60px;
+}
+
+#banner p.title {
+  font-size: 2em;
+  font-weight: bold;
+}
+
+#banner p {
+  margin: 0.4em 0 0;
+}
+
+header, header a,
+footer, footer a {
+  color: #544; /* matches the favicon #rocket color */
+  text-decoration: none;
+}
+
+header a:hover,
+footer a:hover {
+  text-decoration: underline;
+}
+
+header h1 {
+  text-align: center;
+  font-size: 2.5em;
+}
+
+header nav {
+  border-top: 1px solid;
+  border-color: #544f; /* matches the favicon #rocket color */
+  text-align: right;
+}
+
+footer {
+  border-top: 1px solid brown;
+  text-align: right;
+  padding: 0.2rem 0 0.5rem;
+}
+
+footer small {
+  float: left;
+}
+
+
+/******************************************************************************
+ * Dark Mode
+ */
+
+input,
+select {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: #111;
+  }
+
+  body {
+    background-color: #222;
+    border-color: #111;
+    box-shadow: 0px 1px 10px #111;
+    color: #ccc;
+  }
+
+  header, header a, header nav,
+  footer, footer a, footer nav {
+    /* matches the favicon #rocket color */
+    border-color: #cbb4;
+    color: #cbb;
+  }
+
+  h2, a {
+    color: #f96;
+    border-color: #f96;
+  }
+}
diff --git a/www/assets/js b/www/assets/js
new file mode 120000
index 00000000..d12c3c27
--- /dev/null
+++ b/www/assets/js
@@ -0,0 +1 @@
+../../code
\ No newline at end of file
diff --git a/www/content/_index.md b/www/content/_index.md
new file mode 100644
index 00000000..c83c9bf2
--- /dev/null
+++ b/www/content/_index.md
@@ -0,0 +1,357 @@
++++
+[params]
+cssSheets = ["/css/keyboard.css"]
+jsModules = ["/js/x-keyboard.js"]
+jsScripts = ["/js/demo.js", "/js/svg.js"]
++++
+
+{{< x-keyboard
+    name="Ergo‑L"
+    download="/lts"
+    src="/layouts/ergol.json"
+    image="/img/ergol.svg" >}}
+
+:::{.highlight}
+- [Ergonomique avant tout !]
+  <br> – réduit les extensions de doigt, les déviations ulnaires, l’effort de saisie
+  <br> – compatible avec **tous** les claviers ergonomiques, de 33 à 105 touches
+  <br> – préserve les raccourcis clavier et les chiffres en direct
+- [Plus optimisé que Dvorak et Bépo]
+  <br> deux fois moins de SFU que Bépo en français **et** que Dvorak en anglais
+- [Impeccable en français]
+  <br> une seule touche morte pour produire tous les caractères spéciaux
+- [Efficace en anglais]
+  <br> la première disposition francophone **réellement** optimisée pour l’anglais
+- [Redoutable pour le code]
+  <br> une couche de symboles optionnelle et optimisée pour le code
+:::
+
+
+Ergonomique avant tout !
+--------------------------------------------------------------------------------
+
+### 1DFH, <i lang="en">“1u Distance From Home”</i>
+
+Ergo-L intègre l’approche 1DFH, qui consiste à ne pas déplacer ses doigts de
+plus d’une touche par rapport à la position de repos. Cela permet un gain de
+confort important pour la saisie en méthode dactylo, évitant notamment les
+extensions latérales de l’auriculaire droit qui sont typiques de Bépo pour les
+lettres `MZWÇ` (« les quatre cavaliers de l’auriculaire »).
+
+![Ergo‑L sur un clavier compact (OLKB Plank)](img/ergol_1dfh.svg)
+
+C’est pour suivre cette approche que l’immense majorité des claviers
+ergonomiques actuels ne proposent que 6 colonnes de touches par main, ce qui est :
+
+- compliqué avec AZERTY, qui a les touches [ù]{.kbd} et [`^`]{.kbd} en 6e
+  colonne, obligeant à déplacer [Entrée]{.kbd} et [Backspace]{.kbd} ;
+- **très** compliqué avec Bépo, qui a des lettres en 7e colonne à déplacer
+  également ;
+- trivial avec Ergo‑L, qui a été conçu pour ça.
+
+Les claviers ergonomiques modernes cherchent à limiter le nombre total de
+touches, en utilisant différents *layers* pour amener les touches excentrées
+sous les doigts plutôt que l’inverse. Nous avons donc décidé de n’utiliser
+aucune touche en dehors du pavé de 3×10 touches centrales pour les lettres et
+symboles de programation. Ergo‑L est ainsi compatible avec les claviers les
+plus compacts (minimum 33 touches) sans ajustement majeur.
+
+
+### Adapté à la bureautique
+
+Les raccourcis claviers usuels
+[Ctrl]{.kbd}‑[Q]{.kbd}[A]{.kbd}[S]{.kbd}[Z]{.kbd}[X]{.kbd}[C]{.kbd}[V]{.kbd}
+sont devenus indispensables, car ils sont accessibles de la main gauche pendant
+que la main droite utilise la souris. Les approches de type [Dvorak][], très
+antérieures à la généralisation de la bureautique (Dvorak a été finalisé en
+1932), ignorent ces raccourcis clavier en plaçant toutes les voyelles sous la
+main gauche ; mais les approches modernes comme Colemak et Workman permettent de
+conserver ces raccourcis tout en obtenant de meilleures métriques que Dvorak.
+
+Ergo‑L suit cette approche [Colemak][] / [Workman][] et comme eux, s’autorise un
+changement : le [C]{.kbd} est ainsi déplacé pour favoriser les enchaînements,
+mais [Ctrl]{.kbd}‑[C]{.kbd} reste faisable d’une main à gauche.
+
+
+### Réduction de la fatigue de saisie
+
+Ergo‑L veille à réduire autant que possible :
+
+- **les déviations ulnaires**, en proposant une alternative en [AltGr]{.kbd} à
+  tous les symboles placés sur des touches excentrées ;
+- **la charge des doigts faibles**, surtout celle de l’auriculaire droit,
+  responsable de [Entrée]{.kbd} et [Backspace]{.kbd} sur la plupart des
+  claviers ;
+- **le taux de digrammes de même doigt**, un type d’enchaînement très
+  inconfortable, notamment à haute vitesse de saisie.
+
+Ergo‑L privilégie le confort à la vitesse : on peut taper vite avec n’importe
+quel clavier. Mais il est conçu pour que son confort et son ergonomie ne se
+dégradent pas au fur et à mesure que la vitesse de saisie augmente.
+
+
+Plus optimisé que Dvorak et Bépo
+--------------------------------------------------------------------------------
+
+[Dvorak][] est la disposition de clavier optimisée la plus connue. Elle fut
+développée pendant l’entre-deux guerres pour les machines à écrire, qui ont
+d’importantes contraintes physiques dont les claviers modernes sont exemptés :
+typiquement, appuyer sur deux touches côte‑à‑côte est un excellent moyen de
+coincer les marteaux. Cela implique qu’il fallait privilégier les alternances de
+mains aux <abbr title="Enchaînements de deux touches actionnées par deux doigts
+différents d’une même main, comme 'df' en AZERTY">roulements</abbr>, alors que
+ces derniers sont très confortables sur un clavier d’ordinateur.
+
+Dvorak était un grand pas en avant, mais se base sur une philosophie qui
+n’est plus pertinente aujourd’hui. Malheureusement, [Bépo][] et ses nombreuses
+variantes la reprend sans chercher à la mettre à jour.
+
+Dvorak et Bépo ne sont optimisés que pour une seule langue (anglais et français,
+respectivement), et sont très inconfortables dans l’autre. Pourtant, à une
+exception près, les 9 lettres les plus fréquentes sont les mêmes en français
+(ESANITRUO) et en anglais (ETAOHNISR) :
+
+:::{}
+|      |      E |      S |      A |      N |      I |      T |      R |      U |      O |      H |
+|    -:|:------:|:------:|:------:|:------:|:------:|:------:|:------:|:------:|:------:|:------:|
+|**fr**| 14.4 % |  7.2 % |  7.1 % |  6.8 % |  6.7 % |  6.7 % |  6.5 % |  6.1 % |  5.3 % |  1.0 % |
+|**en**| 11.7 % |  6.1 % |  8.0 % |  6.6 % |  6.5 % |  9.0 % |  5.3 % |  2.7 % |  7.8 % |  6.7 % |
+: Fréquence des lettres les plus utilisées en français et en anglais.
+:::
+
+Ergo‑L place donc ces lettres aux emplacements les plus confortables (au sens de
+[Workman][]) et fait en sorte qu’aucun enchaînement fréquent en français ou en
+anglais ne soit rédhibitoire. Comme [Colemak][], on cherche à limiter le plus
+possible le taux de digrammes de même doigt, en favorisant les roulements au
+même titre que les alternances de mains.
+
+Malgré le fait qu’il soit optimisé pour les **deux** langues, français **et**
+anglais, Ergo‑L affiche de meilleures métriques d’optimisation, tant sur la
+charge des doigts que sur le taux de digrammes de même doigt :
+
+<style>
+.sfu table th,
+.sfu table td { padding: 0.2em 0; }
+.sfu table tr td:nth-child(4) { background-color: #f884; }
+.sfu table caption { margin-top: 0.5em; font-size: smaller; }
+.sfu table { margin: 1em auto; max-width: 50em; border-collapse: collapse; }
+.sfu a:hover { text-decoration: underline; }
+.sfu a       { text-decoration: none; }
+</style>
+:::{.sfu}
+|      |  AZERTY                          |  Bépo                          |  Ergo‑L                         |  Dvorak                          |  QWERTY                          |
+|    -:|:--------------------------------:|:------------------------------:|:-------------------------------:|:--------------------------------:|:--------------------------------:|
+|**fr**| [7.97 %](/stats/#/azerty/iso/fr) | [2.55 %](/stats/#/bepo/iso/fr) | [1.23 %](/stats/#/Ergo‑L/iso/fr) | [3.31 %](/stats/#/dvorak/iso/fr) | [7.16 %](/stats/#/qwerty/iso/fr) |
+|**en**| [6.31 %](/stats/#/azerty/iso/en) | [3.01 %](/stats/#/bepo/iso/en) | [1.40 %](/stats/#/Ergo‑L/iso/en) | [2.62 %](/stats/#/dvorak/iso/en) | [5.76 %](/stats/#/qwerty/iso/en) |
+: Taux de digrammes de même doigts en français et anglais, extrait de la [page de comparaison avec Bépo](bepo).
+:::
+
+
+Impeccable en français
+--------------------------------------------------------------------------------
+
+### Caractères accentués
+
+La gestion des accents, diacritiques et symboles typographiques français
+nécessite traditionnellement l’usage de touches excentrées (ce qui irait à
+l’encontre de la philosophie 1DFH d’Ergo‑L) ou de [AltGr]{.kbd} (qui est prone à
+l’erreur à haute vitesse car il faut relâcher la touche au bon moment)
+
+Ergo‑L utilise une touche morte de type [Lafayette][] (notée ★) pour tous les
+caractères accentués, diacritiques et ponctuations spéciales. Actionner cette
+« touche typo » donne accès à **tous** ces symboles dans le pavé de 3×10
+touches **sans** utiliser [AltGr]{.kbd}. Cela occasionne environ 4 % de frappes
+supplémentaires pour un texte francophone, ce qui est négligeable comparé au
+gain de confort que cela apporte.
+
+![La touche morte d’Ergo‑L.](img/ergol_1dk.svg)
+
+Maintenir shift après avoir actionné la touche typo permet de saisir des
+lettres accentuées en majuscule (★ → [Shift]{.kbd} + `a` = `À`). Oubliez vos
+alt codes ! Cette touche typo peut *parfois* donner l’accès à une autre touche
+morte, comme le tréma mort, accessible en double‑cliquant la touche typo (donc
+★ → ★ → `E` = `Ë`)
+
+
+### Placement des lettres
+
+En français, les huit lettres les plus fréquentes (`esanitru`) sont toutes
+réparties sur la position de repos des doigts, et le reste des lettres
+fréquentes sont réparties sur les autres touches faciles d’accès.
+
+Une grande attention à été portée sur les enchaînements de lettres :
+
+- Les voyelles s’enchaînent fréquemment avec toutes les consonnes importantes,
+  donc elles sont soit :
+    - placées sur les auriculaires, avec des consonnes peu fréquentes autour
+      (comme `QAZ` et `FUK`)
+    - empilées sur des doigts forts pour celles qui ne s’enchaînent pas ensemble
+      (comme `EO` et ★`IY`).
+- Le placement des lettres sur les positions de repos maximise les roulements
+  vers l’intérieur et minimise les redirections, qui sont source d’erreur à
+  haute vitesse.
+- Le reste des lettres fréquentes sont placées de sorte à minimiser les
+  digrammes de même doigt (par exemple, `D` et `G` s’enchaînent très souvent
+  avec `N` ou `R`, mais très peu avec `T`)
+- La touche morte est placée sur la main opposée à `EAC`, qui sont les lettres
+  les plus souvent diacritées en français.
+
+Pratiquement aucun enchaînement courant en français ne demande trop d’effort.
+
+:::{ style="text-align: center;" }
+<a href="stats/#/Ergo‑L/iso/fr">
+![fréquence d’utilisation des touches en français](img/ergol_fr.svg)
+  fréquence d’utilisation des touches en français</a>
+:::
+
+
+### Typographie
+
+Soigner la typographie demande souvent un effort (physique et mental)
+supplémentaire non négligeable. Beaucoup l’ignore, ou laisse leur éditeur de
+texte la gérer pour eux. Ergo‑L permet de soigner la typographie sans aucun
+effort supplémentaire :
+
+- [Shift]{.kbd} + [Espace]{.kbd} = espace insécable fine
+- ★ → [Espace]{.kbd} = apostrophe typographique
+- les guillemets typographiques et ponctuations doublées (`:;?!`) en
+  [Shift]{.kbd} pour faciliter leur enchaînement avec l’insécable fine.
+
+
+Efficace en anglais
+--------------------------------------------------------------------------------
+
+### Même optimisation qu’en français
+
+Ergo‑L porte la même attention au confort de la saisie de texte en anglais qu’en
+français, mais doit faire quelques compromis pour faire cohabiter les deux
+langues. Certaines lettres sont beaucoup plus fréquentes dans une langue que
+l’autre, (comme le [U]{.kbd} et la touche typo en français et le [H]{.kbd} en
+anglais) et les enchaînements courrant peuvent être très différents.
+
+Ergo‑L optimise le plus possible la saisie de texte anglais et français sans
+causer de problèmes rédhibitoires dans une de ces deux langues. Par exemple,
+l’enchaînement `TH` (*le* digramme le plus fréquent en anglais, avec 3.2%
+d’occurences) est très confortable, mais le `H` occupe une place dont on peut
+se dispenser en français. De même, `U` et ★ sont très fréquent en français,
+mais peu fréquent en anglais, ce qui a été pris en compte pour leur placement.
+
+:::{ style="text-align: center;" }
+<a href="stats/#/Ergo‑L/iso/en">
+![fréquence d’utilisation des touches en anglais](img/ergol_en.svg)
+  fréquence d’utilisation des touches en anglais</a>
+:::
+
+Ergo‑L a donc une ergonomie comparable en français et en anglais. Bien que de
+nombreuses dispositions dédiés exclusivement à l’anglais soient plus efficace
+qu’Ergo‑L dans cette langue, Ergo‑L est *la première disposition **reéellement**
+optimisée pour le français **et** l’anglais*.
+
+
+### Et les autres langues ?
+
+Ergo‑L est capable de saisir du texte dans presque toutes le langues
+européennes, mais ne cherche pas a optimiser la saisie de texte dans d’autres
+langues que le français et l’anglais. Certains caractères sont disponibles en
+touche typo, comme `ß` ou `ñ`, et il existe de nombreuses touches mortes en
+[AltGr-Shift]{.kbd} : par exemple, `^` étant en [AltGr]{.kbd}[J]{.kbd},
+[Shift]{.kbd}[AltGr]{.kbd}[J]{.kbd} produit un accent circonflexe mort, ce qui
+est suffisant pour la saisie occasionnelle de caractères spéciaux.
+
+Pour des usages plus réguliers, plutôt que de chercher à couvrir tous les cas
+possibles nous avons préféré faire en sorte que la disposition soit **simple à
+modifier**. Le [dépôt github d’Ergo‑L](https://github.com/Nuclear-Squid/ErgoL)
+contient le fichier source de la disposition (un fichier `.toml` facile à lire
+et modifier) ainsi que des instructions pour construire votre disposition
+personnalisée ou évaluer la qualité des enchaînements de votre variante.
+Remplacer les caractères de la touche morte par ceux dont vous avez besoin
+devrait être relativement simple, et le résultat sera bien plus efficace que
+n’importe quelle disposition de clavier cherchant à couvrir toutes les langues !
+
+![Un exemple d’adaptation d’Ergo‑L pour l’allemand](img/ergol_1dk_de.svg)
+
+Si vous voulez adapter Ergo‑L à une langue étrangère, nous vous recommandons de
+concevoir la couche typo uniquement pour cette langue et d’installer votre
+adaptation en même temps qu’Ergo‑L en lui donnant un autre nom (comme
+« ergol-de » pour l’allemand, par exemple). Tous les bureaux modernes proposent
+un raccourci clavier pour basculer d’une langue à l’autre, et vous pourrez ainsi
+basculer d’Ergo‑L à votre variante spécifique en un clin d’œil.
+
+
+Redoutable pour le code
+--------------------------------------------------------------------------------
+
+### Héritage QWERTY-US
+
+La grande majorité des touches en dehors du pavé de 3×10 sont identiques à
+celles de Qwerty‑US. Cela implique que les chiffres sont en accès direct (sans
+[Shift]{.kbd}), ce qui facilite grandement la saisie de nombres.
+
+QWERTY‑US est réputé pour son efficacité dans la saisie de symboles de
+programation, mais elle est perfectible : **tous** les symboles de programmation
+nécessitent au moins un auriculaire et une extension, car ils sont tous sous un
+auriculaire, ou en [Shift]{.kbd}, ou les deux. Ergo‑L a donc à cœur de proposer
+une meilleure alternative.
+
+
+### Couche symboles
+
+Ergo‑L propose une couche [AltGr]{.kbd} optionelle optimisée pour le placement
+et les enchaînements de symboles de programmation.
+
+![La couche AltGr d’Ergo‑L.](img/ergol_altgr.svg)
+
+Cette couche [AltGr]{.kbd} est plutôt simple à mémoriser, car les symboles sont
+regroupés par « blocs ». On y retrouve :
+
+- les délimiteurs `(){}[]<>`
+- les délimiteurs de chaîne de caractères ``'`"``
+- les symboles arithmétiques `+-/*`
+- les ponctuations `!;:?` (de plus, `;:` sont à leur emplacement en Qwerty Européen)
+- `$%^&*` sont à leur position en [Shift]{.kbd} + chiffres, mais une rangée plus bas.
+
+Comme pour l’emplacement des lettres de la disposition, une grande attention à
+été portée au placement des symboles de prog et aux enchaînements courrants. Les
+symboles peu courrants (``~@#%^`|``) sont loins des positions de repos, et la
+grande majorité des enchaînements de symboles de prog se fait soit avec une
+alternance de main (`~/`, `);`, `</>`, `+=`, `['']`, …) soit avec un roulement
+(`>=`, `/*`, `";`, `()`, `\"`, …).
+
+Comme pour la saisie de texte en français ou anglais, la couche [AltGr]{.kbd}
+d’Ergo‑L ne contient pratiquement aucun enchaînement inconfortable.
+
+
+### Compatibilité Vim
+
+Pour une utilisation technique, Vim apporte une ergonomie reconnue et de
+nombreux éditeurs de code implémentent un mode de navigation Vim. La couche
+[AltGr]{.kbd} d’Ergo‑L lui permet de conserver les principales commandes de
+déplacement :
+
+- [AltGr]{.kbd} + `jk` donne `+-`, qui est une action très proche de `jk`
+- les sauts verticaux `{}`, `()` et `[]` sont en AltGr + main gauche
+
+À ce jour, nous n’avons pas trouvé de meilleure couche de symboles que celle que
+nous avons développée. Elle a été reprise dans d’autres projets, notamment
+[Lafayette].
+
+
+Licence
+--------------------------------------------------------------------------------
+
+[WTFPL][] – Do What The Fuck You Want To Public License. Bien qu’il existe des
+licences mieux réputées, nous avons choisi d’en utiliser une dont on comprend
+tous les mots.
+
+
+<!--
+ !   ╭───────────────────────────────────────────────────────╮
+ !   │               Balises pour les liens :                │
+ !   ╰───────────────────────────────────────────────────────╯
+-->
+[WTFPL]:     http://wtfpl.net
+[dvorak]:    https://fr.wikipedia.org/wiki/Disposition_Dvorak
+[bépo]:      https://bepo.fr
+[workman]:   https://workmanlayout.org
+[colemak]:   https://colemak.com
+[lafayette]: https://qwerty-lafayette.org/
diff --git a/www/content/bepo/charge_bepo_en.png b/www/content/bepo/charge_bepo_en.png
new file mode 100644
index 00000000..35b1c6f9
Binary files /dev/null and b/www/content/bepo/charge_bepo_en.png differ
diff --git a/www/content/bepo/charge_bepo_en_fr.png b/www/content/bepo/charge_bepo_en_fr.png
new file mode 100644
index 00000000..fec9f37c
Binary files /dev/null and b/www/content/bepo/charge_bepo_en_fr.png differ
diff --git a/www/content/bepo/charge_bepo_fr.png b/www/content/bepo/charge_bepo_fr.png
new file mode 100644
index 00000000..1e4cca2e
Binary files /dev/null and b/www/content/bepo/charge_bepo_fr.png differ
diff --git a/www/content/bepo/charge_ergol_en.png b/www/content/bepo/charge_ergol_en.png
new file mode 100644
index 00000000..1b808990
Binary files /dev/null and b/www/content/bepo/charge_ergol_en.png differ
diff --git a/www/content/bepo/charge_ergol_en_fr.png b/www/content/bepo/charge_ergol_en_fr.png
new file mode 100644
index 00000000..4dc57c81
Binary files /dev/null and b/www/content/bepo/charge_ergol_en_fr.png differ
diff --git a/www/content/bepo/charge_ergol_fr.png b/www/content/bepo/charge_ergol_fr.png
new file mode 100644
index 00000000..ad2e44bb
Binary files /dev/null and b/www/content/bepo/charge_ergol_fr.png differ
diff --git a/www/content/bepo/index.md b/www/content/bepo/index.md
new file mode 100644
index 00000000..dfdefa6b
--- /dev/null
+++ b/www/content/bepo/index.md
@@ -0,0 +1,328 @@
++++
+title = "Ergo‑L ou Bépo ?"
+
+[params]
+cssSheets = ["/css/keyboard.css"]
+jsModules = ["/js/x-keyboard.js"]
+jsScripts = ["/js/demo.js", "/js/svg.js"]
++++
+
+{{< x-keyboard
+    name="Bépo"
+    download="https://bepo.fr"
+    src="/layouts/bepo.json"
+    image="/img/bepo.svg" >}}
+
+:::{.highlight style="max-width: 32em;"}
+- [Ergonomie]
+  <br> une priorité pour Ergo‑L bien plus que pour Bépo
+- [Optimisation]
+  <br> Dvorak pour Bépo, Colemak/Workman pour Ergo‑L
+- [Typographie]
+  <br> deux approches différentes
+- [Programmation]
+  <br> la spécialité d’Ergo‑L
+- [Variantes de Bépo]
+:::
+
+Ergonomie
+--------------------------------------------------------------------------------
+
+### Bépo
+
+Conservant l’approche AZERTY d’avoir certaines lettres accentuées en direct
+(`É`, `È`, `À`, `Ç`), Bépo a manqué de place pour placer toutes les lettres et a
+choisi d’occuper les colonnes excentrées pour des lettres jugées moins
+fréquentes (`M`, `Z`, `W`, `Ç`). Il en résulte une incompatibilité avec la
+plupart des claviers ergonomiques du marché, qui ne proposent que 6 colonnes de
+touches par main pour respecter le principe [1DFH](#dfh-1u-distance-from-home).
+
+Par ailleurs, la charge des doigts est mal répartie :
+
+- la charge de l’index gauche est très élevée (> 23 % en français), et c’est
+  d’autant plus gênant que ce doigt gère à lui seul la moitié des [digrammes de
+  même doigt](#optimisation) ;
+- plus grave, la charge de l’auriculaire droit (> 11 % en français) est bien
+  plus élevée que dans toutes les dispositions de clavier francophones,
+  optimisées ou non ;
+- une grande partie des touches doublées se trouvent sous l’auriculaire droit —
+  et souvent en extension !
+
+C’est notamment le cas du `M` : 13e lettre la plus fréquente en français (2.7 %
+de fréquence, soit plus que tous les caractères accentués cumulés), fréquemment
+doublé (0.2 % du temps) et en extension latérale sur l’auriculaire droit. Cela
+favorise grandement les déviations ulnaires, qui sont la principale cause de
+développement de troubles musculo-squelettiques associés à la saisie au clavier.
+
+Enfin, par inspiration [Dvorak][], Bépo a renoncé aux raccourcis clavier
+positionnels [Ctrl]{.kbd}‑[Z]{.kbd}[X]{.kbd}[C]{.kbd}[V]{.kbd}.
+
+### Ergo‑L
+
+Ergo‑L se veut [ergonomique avant tout](/#ergonomique-avant-tout). À ce titre,
+il suit une approche 1DFH stricte, plaçant les 26 lettres et les 4 principales
+ponctuations dans le pavé central de 3×10 touches, garantissant une
+compatibilité parfaite avec tous les claviers de 33 à 105 touches, ergonomiques
+ou non.
+
+Cette approche permet aussi de garder les chiffres en direct, rendant le pavé
+numérique inutile. On peut ainsi utiliser des claviers compacts qui favorisent
+une meilleure posture de travail, notamment quand on utilise la souris de la
+main droite.
+
+Les auriculaires sont préservés, en particulier le droit qui est en charge des
+touches [Entrée]{.kbd} et [Backspace]{.kbd} sur la plupart des claviers (et qui
+ne sont pas comptées dans ces métriques).
+
+Les lettres fréquemment doublées (e.g. [L]{.kbd}, [N]{.kbd} et [M]{.kbd}) sont
+placées sous les index.
+
+Les raccourcis clavier positionnels [Ctrl]{.kbd}‑[Z]{.kbd}[X]{.kbd}[C]{.kbd}[V]{.kbd}
+ainsi que [Ctrl]{.kbd}‑[Q]{.kbd}[A]{.kbd}[S]{.kbd} sont préservés, mais le
+[C]{.kbd} a été déplacé pour permettre un gain d’optimisation très sensible.
+
+<!-- Bon, j’ai beau adorer pandoc-md, ce tableau il *reste en HTML* -->
+<table>
+  <caption style="caption-side: bottom">
+    Comparaison des charges des doigts entre Bépo et Ergo‑L.<br>
+    <small> (cliquer sur l’histogramme pour plus d’infos) </small>
+  </caption>
+
+  <tr>
+    <th> Bépo </th>
+    <th></th>
+    <th> Ergo‑L </th>
+  </tr>
+  <tr>
+    <td> <a href="/stats/#/bepo/iso/fr"><img src="./charge_bepo_fr.png" /></a> </td>
+    <th> fr </th>
+    <td> <a href="/stats/#/ergol/iso/fr"><img src="./charge_ergol_fr.png"/></a> </td>
+  </tr>
+  <tr>
+    <td> <a href="/stats/#/bepo/iso/en+fr"><img src="./charge_bepo_en_fr.png"/></a> </td>
+    <th> fr‑en </th>
+    <td> <a href="/stats/#/ergol/iso/en+fr"><img src="./charge_ergol_en_fr.png"/></a> </td>
+  </tr>
+  <tr>
+    <td> <a href="/stats/#/bepo/iso/en"><img src="./charge_bepo_en.png" /></a> </td>
+    <th> en </th>
+    <td> <a href="/stats/#/ergol/iso/en"><img src="./charge_ergol_en.png"/></a> </td>
+  </tr>
+
+  <tr style="text-align: right; font-size: 10px;">
+    <td>
+      <table><tr>
+        <td width="9%"> </td>
+        <td width="9%"> 9.6 %</td>
+        <td width="9%"> 8.0 %</td>
+        <td width="9%"> 9.7 %</td>
+        <td width="9%">23.0 %</td>
+        <td width="9%"> </td>
+        <td width="9%">15.2 %</td>
+        <td width="9%">12.3 %</td>
+        <td width="9%">15.6 %</td>
+        <td width="9%">13.7 %</td>
+        <td width="9%"> </td>
+      </tr></table>
+    </td>
+    <td style="text-align: center; font-size: 12px;"> max. </td>
+    <td>
+      <table><tr>
+        <td width="9%"> </td>
+        <td width="9%"> 9.2 %</td>
+        <td width="9%">12.0 %</td>
+        <td width="9%">19.5 %</td>
+        <td width="9%">14.8 %</td>
+        <td width="9%"> </td>
+        <td width="9%">18.6 %</td>
+        <td width="9%">15.2 %</td>
+        <td width="9%">11.1 %</td>
+        <td width="9%"> 6.9 %</td>
+        <td width="9%"> </td>
+      </tr></table>
+    </td>
+  </tr>
+</table>
+
+**De notre point de vue** : Bépo a été optimisée au détriment de l’ergonomie,
+notamment en surchargeant beaucoup trop l’auriculaire droit et en s’aliénant la
+plupart des claviers ergonomiques.
+
+
+Optimisation
+--------------------------------------------------------------------------------
+
+### Bépo
+
+Bépo applique une optimisation de type [Dvorak][] au français :
+
+- maximiser l’alternance des mains lors de la frappe ;
+- répartir les touches de façon équitable sur les deux mains ;
+- utiliser en priorité la rangée centrale, puis haute, puis inférieure ;
+- en cas de non-alternance des mains sur un digramme, diriger la frappe vers le
+  centre du clavier ce qui sollicite davantage les doigts les plus habiles à
+  savoir l’index et le majeur.
+
+Bépo cherche également à minimiser le taux de digrammes de même doigt, que nous
+mesurons à 2.6 % en français contre 8.0 % pour l’AZERTY. C’est un score très
+proche de celui obtenu par Dvorak en anglais, là où QWERTY est à 7.2 %.
+
+Cette optimisation est faite au détriment de l’anglais :
+- la charge de l’auriculaire droit grimpe à 13.7 % ;
+- certains digrammes, notamment `WH`, sont rédhibitoires.
+
+
+### Ergo‑L
+
+Ergo‑L reprend les principes ci-dessus mais intègre les inspirations [Colemak][]
+et [Workman][] :
+
+- on privilégie les roulements aux alternances de main :
+    - les alternances de main étaient nécessaires à l’époque des machines à
+      écrire mécaniques pour éviter de coincer les marteaux, mais ne le sont
+      plus aujourd’hui ;
+    - les roulements permettent de faire moins d’erreurs de saisie à haute
+      vitesse, tout en restant très confortables ;
+- on évite les colonnes centrales qui requièrent une extension de l’index ;
+- faute de pouvoir utiliser les positions de repos on privilégie les touches :
+    - de la rangée supérieure pour l’annulaire et le majeur ;
+    - de la rangée inférieure pour l’index ;
+- on fait le choix de conserver les raccourcis clavier positionnels se justifie,
+  tant l’impact sur les métriques d’optimisation est limité.
+
+Malgré ces compromis et le fait qu’il soit optimisé pour les **deux** langues,
+français **et** anglais, Ergo‑L affiche de meilleures métriques d’optimisation,
+tant sur la charge des doigts (voir ci-dessus) que sur le taux de digrammes de
+même doigt :
+
+<style>
+.sfu table th,
+.sfu table td { padding: 0.2em 0; }
+.sfu table tr td:nth-child(4) { background-color: #f884; }
+.sfu table caption { caption-side: bottom; margin-top: 0.5em; font-size: smaller; }
+.sfu table { margin: 1em auto; max-width: 50em; border-collapse: collapse; }
+.sfu a:hover { text-decoration: underline; }
+.sfu a       { text-decoration: none; }
+</style>
+:::{.sfu}
+|      |  AZERTY                          |  Bépo                          |  Ergo‑L                         |  Dvorak                          |  QWERTY                          |
+|    -:|:--------------------------------:|:------------------------------:|:-------------------------------:|:--------------------------------:|:--------------------------------:|
+|**fr**| [7.97 %](/stats/#/azerty/iso/fr) | [2.55 %](/stats/#/bepo/iso/fr) | [1.23 %](/stats/#/ergol/iso/fr) | [3.31 %](/stats/#/dvorak/iso/fr) | [7.16 %](/stats/#/qwerty/iso/fr) |
+|**en**| [6.31 %](/stats/#/azerty/iso/en) | [3.01 %](/stats/#/bepo/iso/en) | [1.40 %](/stats/#/ergol/iso/en) | [2.62 %](/stats/#/dvorak/iso/en) | [5.76 %](/stats/#/qwerty/iso/en) |
+: Taux de digrammes de même doigts en français et anglais.
+:::
+
+**De notre point de vue** : l’optimisation de Bépo est faite au détriment de
+l’anglais et de l’ergonomie, et elle est (très) inférieure à celle que propose
+Ergo‑L dans les deux langues.
+
+
+Typographie
+--------------------------------------------------------------------------------
+
+### Bépo
+
+Bépo gère les caractères accentués de façon similaire à AZERTY :
+
+- certaines lettres comme [ÉÈÀÇ]{.kbd} sont accessibles directement ;
+- l’accent circonflexe et le tréma sont faits avec une touche morte (le tréma
+  nécessitant *en plus* [AltGr]{.kbd} avec Bépo) ;
+- certains caractères nécessitent la touche [AltGr]{.kbd}, ce qui complique les
+  enchaînements : [Ù]{.kbd}, [Œ]{.kbd}, [Æ]{.kbd}, points de suspension…
+
+De plus, Bépo propose beaucoup de caractères spéciaux (i.e. non liés à la langue
+français ou au code informatique) via la couche AltGr ou des touches mortes, au
+prix d’une certaine complexité des pilotes de clavier :
+
+- les pilotes Windows existent en deux versions, l’une « tronquée » et stable,
+  l’autre « complète » mais dont le comportement est présenté comme moins
+  fiable ;
+- le pilote Linux, théoriquement inclus a XKB, se base sur des définitions de
+  touches mortes qu’il faut ajouter manuellement coté utilisateur.
+
+
+### Ergo‑L
+
+À l’inverse, Ergo‑L utilise une touche morte de type [Qwerty-Lafayette][3] pour
+tous les caractères accentués et ponctuations spéciales : la fluditié des
+enchaînements est préservée, et la touche [AltGr]{.kbd} peut être dédiée aux
+seuls symboles de programmation.
+
+Cette touche morte occasionne des frappes supplémentaires sur un texte francophone :
+
+- 1.0 % pour `È`, `À`, `Ç`, `Œ`, `Æ`
+- 1.5 % pour le seul `É`
+- 1.5 % si on utilise l’apostrophe typographique `’` plutôt que l’apostrophe
+  droite `'`
+
+… soit environ 4 % de frappes supplémentaires. Pour une vitesse de saisie de 60
+mots/minutes, on perd ainsi 2 mots/minute en Ergo‑L.
+
+Le support typographique du français est tout aussi complet que celui de Bépo,
+mais pour les autres caractères spéciaux Ergo‑L se contente des touches mortes
+standard définies dans XKB afin de proposer des pilotes plus robustes.
+Les autres caractères spéciaux sont laissés à la touche Compose.
+
+![La couche Typo d’Ergo‑L.](/img/ergol_1dk.svg)
+
+**De notre point de vue** : la saisie de la plupart des caractères accentués
+est plus intuitive avec Bépo. L’approche d’Ergo‑L permet d’éviter les extensions
+de doigts mais nécessite un apprentissage.
+
+
+Programmation
+--------------------------------------------------------------------------------
+
+Avec son optimisation pour l’anglais et sa couche dédiée aux symboles de
+programmation en [AltGr]{.kbd}, Ergo‑L est de loin la disposition la plus
+adaptée à la programmation. Comme pour les lettres en français et en anglais,
+les symboles sont placés de façon à faciliter les enchaînements et éviter les
+touches répétées sous les auriculaires.
+
+![La couche Symboles d’Ergo‑L.](/img/ergol_altgr.svg)
+
+La touche [AltGr]{.kbd} reste facultative, les symboles étant également
+disponibles aux emplacements du QWERTY ANSI, qui est perçu comme efficace pour
+cet usage.
+
+
+Variantes de Bépo
+--------------------------------------------------------------------------------
+
+De par son ancienneté, Bépo a vu naître beaucoup de variantes qui ont toutes
+repris la philosophie initiale :
+
+- toutes les voyelles à gauche (approche Dvorak) ;
+- les lettres sont étalées sur toutes les colonnes du clavier ;
+- les chiffres restent en Shift.
+
+Et très logiquement, ces variantes présentent les mêmes défauts d’ergonomie :
+
+- compatibilité délicate avec la quasi-totalité des claviers ergonomiques ;
+- surcharge importante de l’auriculaire droit ;
+- perte des raccourcis claviers positionnels.
+
+Optimot est une variante non-libre de Bépo qui l’optimise très nettement : le
+taux de digrammes de même doigt est divisé par deux en anglais et par trois en
+français ! Mais les défauts d’ergonomie restent les mêmes, ou ne sont atténués
+que très marginalement :
+
+- les lettres excentrées posent toujours le même problème de compatibilité avec
+  les claviers ergonomiques ;
+- la charge de l’auriculaire droit est diminuée en anglais mais reste
+  strictement identique pour le français littéraire, et s’accroît dès que l’on
+  utilise des symboles de programmation (dont l’accès recommandé par l’auteur se
+  fait via la touche morte circonflexe, placée sous l’auriculaire en extension).
+
+**De notre point de vue**, les deux dispositions portent bien leur nom :
+
+- Optimot est une **opti**misation de Bépo qui apportera un gain de confort aux
+  utilisateurs satisfaits de Bépo ;
+- Ergo‑L est **ergo**nomique avant tout, et apportera une solution radicale aux
+  personnes qui ont des difficultés avec Bépo.
+
+
+[bépo]:    https://bepo.fr
+[dvorak]:  https://fr.wikipedia.org/wiki/Disposition_Dvorak
+[workman]: https://workmanlayout.org
+[colemak]: https://colemak.com
diff --git a/data/dicts/LICENSE b/www/content/dactylo/LICENSE
similarity index 100%
rename from data/dicts/LICENSE
rename to www/content/dactylo/LICENSE
diff --git a/data/dicts/README.md b/www/content/dactylo/README.md
similarity index 100%
rename from data/dicts/README.md
rename to www/content/dactylo/README.md
diff --git a/data/dicts/english_10k.json b/www/content/dactylo/english_10k.json
similarity index 100%
rename from data/dicts/english_10k.json
rename to www/content/dactylo/english_10k.json
diff --git a/data/dicts/english_1k.json b/www/content/dactylo/english_1k.json
similarity index 100%
rename from data/dicts/english_1k.json
rename to www/content/dactylo/english_1k.json
diff --git a/data/dicts/french_10k.json b/www/content/dactylo/french_10k.json
similarity index 100%
rename from data/dicts/french_10k.json
rename to www/content/dactylo/french_10k.json
diff --git a/data/dicts/french_1k.json b/www/content/dactylo/french_1k.json
similarity index 100%
rename from data/dicts/french_1k.json
rename to www/content/dactylo/french_1k.json
diff --git a/www/content/dactylo/index.html b/www/content/dactylo/index.html
new file mode 100644
index 00000000..d2653cdb
--- /dev/null
+++ b/www/content/dactylo/index.html
@@ -0,0 +1,120 @@
++++
+title = "Duck Typist"
+
+[params]
+cssSheets = ["/css/keyboard.css"]
+jsModules = ["/js/x-keyboard.js"]
+jsScripts = ["/js/duck-typist.js"]
+
+footer = """
+  powered by [x-keyboard](https://onedeadkey.github.io/x-keyboard),
+  inspired by [keyzen](https://github.com/wwwtyro/keyzen)
+  and [keybr](https://github.com/aradzie/keybr.com),
+  fuelled by [MonkeyType](https://github.com/monkeytypegame/monkeytype)
+"""
++++
+
+<style>
+  /* compact view: let the flex magic handle the vertical margins */
+  body { padding: 0 20px; }
+  header h1, #banner { display: none; }
+  header nav { border: none; }
+  .keyboard { margin-bottom: 0; }
+  h2, footer { margin-top: 0; }
+
+  h1 .quacks,
+  h2 .quacks {
+    float: right;
+    transition: transform 1s;
+    user-select: none;
+    cursor: grab;
+  }
+
+  h1.active .quacks,
+  h2.active .quacks {
+    transform: translateX(-1000%);
+  }
+
+  h2 {
+    font-size: 2em;
+  }
+
+  .keyboard #lesson {
+    text-align: left;
+    font-family: monospace;
+    font-size: 2.5em;
+    height: 4em;
+    line-height: 1.2em;
+    margin: 0;
+    padding: 0;
+    text-wrap: break;
+  }
+
+  .keyboard #current {
+    border-bottom: 2px solid;
+  }
+
+  .keyboard span {
+    box-sizing: border-box;
+  }
+
+  .keyboard #lesson { color: #333; }
+  .keyboard .done   { color: #999; }
+  .keyboard .error  { color: red; }
+  .keyboard .fixed  { color: green; }
+  .keyboard .space::before {
+    content: "·";
+    word-break: break-all;
+  }
+
+  .key_list kbd {
+    font-family: monospace;
+    text-transform: uppercase;
+    display: inline-block;
+    margin: 0 2px;
+    cursor: pointer;
+  }
+
+  .key_list kbd.inactive {
+    color: gray;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .keyboard #lesson { color: white; }
+    .keyboard .error  { color: #f44; }
+    .keyboard .fixed  { color: #9e1; }
+  }
+</style>
+
+<h2><span class="key_list"></span><span class="quacks">🦆</span></h2>
+<p class="status">·</p>
+
+<div class="keyboard">
+  <input hidden spellcheck="false" />
+  <p id="lesson"></p>
+  <x-keyboard></x-keyboard>
+  <p style="text-align: right;">
+    <span style="float: left;">
+      <select id="layout">
+        <option value="ergol" selected>Ergo‑L</option>
+        <option value="erglace">Erglace</option>
+        <option value="bepo">Bépo</option>
+        <option value="azerty">Azerty</option>
+        <option value="lafayette">Lafayette</option>
+      </select>
+      <select id="dict">
+        <option value="fr,french_1k">Français 1k</option>
+        <option value="fr,french_10k" selected>Français 10k</option>
+        <option value="en,english_1k">English 1k</option>
+        <option value="en,english_10k">English 10k</option>
+      </select>
+    </span>
+    <select id="geometry">
+      <option value="iso" selected>ISO</option>
+      <option value="ansi">ANSI</option>
+      <option value="ol60">TMx</option>
+      <option value="ol50">4×6</option>
+      <option value="ol40">3×6</option>
+    </select>
+  </p>
+</div>
diff --git a/quack.wav b/www/content/dactylo/quack.wav
similarity index 100%
rename from quack.wav
rename to www/content/dactylo/quack.wav
diff --git a/www/content/erglace.md b/www/content/erglace.md
new file mode 100644
index 00000000..b755c1db
--- /dev/null
+++ b/www/content/erglace.md
@@ -0,0 +1,178 @@
++++
+title = "Erglace (WiP)"
+
+[params]
+cssSheets = ["/css/keyboard.css"]
+jsModules = ["/js/x-keyboard.js"]
+jsScripts = ["/js/demo.js", "/js/svg.js"]
++++
+
+{{< x-keyboard
+    name="Erglace"
+    download="https://github.com/Lysquid/Erglace"
+    src="/layouts/erglace.json"
+    image="/img/erglace.svg" >}}
+
+
+## Notes de conception
+
+Le point de départ était de faire une disposition avec moins de redirections
+qu’Ergo‑L. Nous nous sommes vite rendu compte qu'il fallait pour cela isoler les
+voyelles de consonnes. Les lettres de la home row sont les lettres les plus
+utilisées du français et de l'anglais.
+
+<!-- - Les voyelles sont à gauche car ErgEAU tire profit des touches disponibles tout à droite pour rajouter des consonnes rares. Par ailleurs, c'est aussi le choix de Bépo et Optimot, ce qui permet des transitions plus faciles. -->
+
+Pour l'ordre des consonnes de la home row, nous avons cherché à maximiser les
+roulements, tout en s'assurant d'une bonne répartition de la charge. `t` est un
+bon candidat pour l'index, puisqu'il se combine assez peu avec d'autres
+consonnes comparé aux autres, or l'index à 6 lettres. Les autres ordres testés
+avaient une répartition de charge moins bonne et/ou un SFB plus haut. Cet ordre
+a toutefois le défaut de privilégier les outrolls, et n'est pas celui qui
+minimise les redirects (voir l'ordre de Nerps).
+
+Le raisonnement est similaire pour l'ordre des voyelles. `u` est de loin la
+lettre qui se combine le moins avec les consonnes et les signes de ponctuation,
+il a donc sa place sur l'index, même si c'est une lettre peu courante en
+anglais.
+<!-- Le roulement `eau`, courant en français, a donné l'ordre de voyelles de ErgEAU. -->
+
+Toutefois, `e` est une lettre particulière puisque c'est la plus utilisée et
+elle se combine avec la quasi-totalité des autres lettres, à l'exception de `o`
+et des lettres accentuées. N'ayant pas de touches dédiées aux accents comme
+ErgEAU, j'ai dû me résoudre à mettre `o` au-dessus de `e`. La charge devenant
+trop grande pour l'annulaire, je l'ai mis sur l'index comme en Ergo-L et
+Optimot. `a` est resté sur l'annulaire car il a une charge plus importante que
+`i`. Les enchaînements de cette disposition restent bons, à l'exception du bad
+redirect assez ironique `aie`, équivalent de `sad` en qwerty.
+
+J'ai essayé de laisser `e` sur l'annulaire, d'abord en mettant la touche morte
+au-dessus, ce qui faisait une charge beaucoup trop importante pour l'annulaire,
+ou en mettant une lettre rare, tel que `k` ou `z`, mais le SFB engendré était de
+loin le plus important du layout, et je trouvais dommage de mettre une des
+lettres les plus rares sur un bon emplacement.
+
+Nous avons d'abord cherché à conserver le roulement `th`, digramme le plus
+commun. Mais nous nous sommes rendu compte que `h` allait aussi très bien du
+côté des voyelles avec lesquelles il fait de nombreux roulements, même si ce
+sont des outrolls. Avoir `h` sous `u` permet aussi de charger plus l'index en
+anglais.
+
+Les autres consonnes du côté de voyelles ont été choisies pour minimiser le SFB.
+`j` est en bas pour simplifier l'écriture de `je`, et `f` en haut pour taper
+`of`. `y` en haut permet quant à lui un roulement confortable pour écrire `you`.
+Une attention particulière a été portée sur le LSB, qui reste malgré tout élevé
+à cause des digrammes `e,`, `ez` et `ek`, ce qui est assez inévitable compte
+tenu du placement de `e`.
+
+La charge de l'annulaire est alors plus importante que celle de l'index en
+français. J'ai essayé de mettre la touche morte sur l'index comme en ErgEAU,
+mais comme `e`, `a` se lit à presque toutes les autres lettres. On retrouve donc
+les mêmes problèmes qu'avec `e`, mais cette fois avec une charge trop faible sur
+l'annulaire. Par ailleurs, le touche morte sur l'index réduisait encore la
+charge de ce doigt en anglais.
+
+Le placement des consonnes restantes à droite à fait l'objet de beaucoup de
+variations. `dmlcp` sont celles qui ont le moins bougé, étant les consonnes plus
+fréquentes après celle de la home row, elles occupent les meilleurs emplacements
+sur les colonnes où elles font le moins de SFB. Le placement de `c` et `p` en
+haut permet de garantir de bons enchaînements avec `l`.
+
+Nous avons considéré d'inverser `d` et `p` pour le digramme `ld`. Mais `ld` est
+moins courant que `pl`, et `d` serait plus difficale à atteindre en haut, alors
+qu'il est deux fois plus courant que `p`.
+
+Le cas de `g` est particulier du fait de l'importance des  digrammes `ng` et
+`gr`. Le placer en bas l'annulaire rend ces digrammes inconfortables sur un
+clavier split. Pour ne pas avoir un trop gros LSB avec le digramme `ng`, la
+seule position convenable est donc à gauche de `t`.
+
+Les consonnes restantes, `vbwq` peuvent être interchangées facilement, et ont
+fait l'objet d'une mise à jour de la dispositon. Le `v` était initialement placé
+sur l'annulaire en bas, mais l’enchaînement `vr` était alors très inconfortable.
+Le `w` a pris cette place, au détriment de la compatibilité Vim puisque `cw`
+devient un SFB important. Heureusement, `ce` fait le même chose que `cw` sur
+Vim. `q` se retrouve sur l'auriculaire car c'est le moins utilisé.
+
+`v` et `b` sont alors sur l'index et peuvent être facilement inversés. Le choix
+de `b` en bas à été fait pour éviter l'enchaînement `mb` qui est très compliqué
+avec `b` en haut. Cela se fait au détriment de l'enchaînement `bl` qui est deux
+fois plus courant, mais tout de même plus acceptable. Un avantage à avoir `v` en
+haut est de pouvoir enchaîner Ctrl+C et Ctrl+V.
+
+`q` et `x` sur la colonne de l'auriculaire peuvent aussi être intervertis. Mais
+`q` étant beaucoup plus courant, il a la position la plus confortable, en haut.
+Un défaut est l'enchaînement `sq` qui n'est alors pas très confortable.
+
+Un autre digramme problématique est `j'`, un ciseau désagréable. On pourrait
+être tenté d'inverser `j` et `y`, mais cela créerait alors un ciseau pour `you`,
+qui est sinon un très bon roulement, et rend `je` moins confortable. Il a été
+envisagé d'inverser `j` et `x`, mais cela aurait créé des redirections pour
+`eux` et `aux` et un SFB important avec `ix`, particulièrement en anglais
+(digramme potentiellement biaisé dans le corpus: "Don Quixote" en anglais). Le
+mod `jx` reste intéressant pour ceux qui trouvent `j'` vraiment trop
+inconfortable.
+
+Les accents ont ensuite été répartis sur la couche correspondante, de préférence
+proches des lettres correspondantes, dans la limite de la place disponible du
+côté des voyelles. `ê` est sur e, car il y a souvent un autre `e` dans le même
+mot comme dans `même` et `être`.
+
+`a` étant sous la touche morte, ses variantes accentuées ne peuvent pas être sur
+cette colonne sous peine d'un SFB important. `à` et `â` ont donc été placés à
+droite sur les lettres avec lesquelles il fait le plus petit SFB. `œ` a aussi
+été placé à droite par manque de place, ce qui lui donne une place sur la home
+row.
+
+`é` est de loin l'accent le plus important, étant la 15ème lettre la plus
+utilisée en français. Le placer sous `e` rendrait le digramme `ée` lent et
+surchargerait encore plus le majeur. J'ai essayé de le placer sous `r`, colonne
+sur laquelle le SFB est minimal, mais le SKU engendré sur l'annulaire était
+considérable, et se ressentait beaucoup dans des mots comme 'préféré'. J'ai
+finalement opté pour le mettre derrière `u`, ce qui lui donne une place
+confortable sur la home row, et qui s’enchaîne bien avec `e`. Cela permet aussi
+de mieux charger l'index en français. La contre-parti est les digrammes `é,` et
+`éf`, ainsi qu'un décalage nécessaire des variantes accentuées de `u`.
+
+`_` a une place sur la home de la couche 1dk pour pouvoir écrire facilement des
+noms de fichiers et variables où les mots sont espacés d'underscores.
+
+`-` est derrière `e` en shift pour minimiser le SFB. N'importe quel autre
+caractère créé un SFB important avec la colonne `oe`. `,` a une meilleure
+position que `.` car elle est beaucoup plus courante.
+
+J'aurais aimé avoir `'` en accès direct puisque c'est un caractère courant en
+français, anglais et programmation, mais il se lit avec toutes les lettres. Je
+suis resté sur la solution plutôt élégante de Ergo-L, d'avoir `'` derrière la
+touche morte + espace, qui garantit un SFB minimum.
+
+<!-- Historiquement, Erglace avait sa propre couche de symbole, héritée de ma couche personelle, toujours disponible sur mon [firmware QMK](https://github.com/Lysquid/qmk_keymap). Mais Erglace étant développé au sein de la communauté Ergo-L, il est apparu plus pertinent de reprendre celle d'Ergo-L. Cela permet de simplifier la maintenance et de rendre plus clair la différence entre Ergo-L et Erglace. -->
+
+Dans cette version précédente, `?`, `!` et `_` étaient respectivement derrière
+`,`, `.` et `-` en shift. Nous avons longtemps débattu sur ce sujet, la
+conclusion étant que cela est plutôt une affaire de goût personnel. La solution
+la plus simple a donc été de se caler sur les conventions d'Ergo-L, ce qui
+simplifie la compatibilité avec la couche de symboles.
+
+Sur la page de statistiques du site d'Ergo-L, Erglace a un SFB important en
+anglais a cause des guillemets, comme `.”` qui contribue à lui seul à 0.16%. Je
+considère que ces guillemets sont surreprésentés dans le corpus, et que cet
+enchaînements n'est pas assez courant au quotidien pour essayer de le prendre en
+compte.
+
+En conclusion, la disposition a des défauts et fait un certain nombre de
+compromis. Avec les mêmes contraintes, on peut encore faire mieux. On peut
+remettre en question l'approche visant à minimiser les redirections, car cela
+implique d'avoir peu de roulements, qui sont pourtant agréables et propices à la
+mémoire musculaire. Erglace ne devrait cependant pas connaître de changements
+majeurs, s'il y en a, ce sera une nouvelle disposition.
+
+
+## Ressources utilisées
+
+- [Keyboard Layouts Doc](https://bit.ly/keyboard-layouts-doc), ressource théorique très complète
+- La [page de statistiques](https://lysquid.github.io/Erglace/stats) d'Ergo-L
+- [Layout playground](https://o-x-e-y.github.io/layouts/playground/), pour des statistiques complémentaires (LSB, BadRedirects) et du prototypage rapide
+- Les [statistiques de fréquence](https://github.com/Nuclear-Squid/ergol/tree/master/data/corpus) de Ergo-L pour le français et l'anglais
+- [Heatmap d'effort](https://colemakmods.github.io/mod-dh/model.html) des touches du clavier, développée pour Colmak-DH
+- Les retours sur le [discord d'Ergo-L](https://discord.gg/RH34GjQEgC)
diff --git a/www/content/lafayette.md b/www/content/lafayette.md
new file mode 100644
index 00000000..91778dd3
--- /dev/null
+++ b/www/content/lafayette.md
@@ -0,0 +1,63 @@
++++
+title = "Adaptations type « Lafayette »"
+
+[params]
+cssSheets = ["/css/keyboard.css"]
+jsModules = ["/js/x-keyboard.js"]
+jsScripts = ["/js/demo.js", "/js/svg.js"]
++++
+
+Une série de disposition de clavier été adaptées au français et/ou aux claviers
+compacts via une touche « Typo ».
+
+
+QWERTY-Lafayette
+--------------------------------------------------------------------------------
+
+{{< x-keyboard
+    name="QWERTY-Lafayette"
+    download="https://qwerty-lafayette.org"
+    src="/layouts/lafayette.json"
+    image="/img/ergol.svg" >}}
+
+La disposition de clavier par laquelle tout a commencé !
+
+Publiée en 2010, Lafayette est une simple adaptation du QWERTY ANSI au français.
+Aucune optimisation : on a HJKL sur la homerow et c’est très bien ainsi !
+
+C’est cette disposition qui a introduit l’idée d’une touche morte « à tout
+faire » et d’une couche AltGr entièrement dédiée aux symboles de programmation.
+Cette couche de symboles était longtemps annoncée comme « à personnaliser » :
+chaque utilisateur·ice était sensé·e se l’approprier et l’adapter à son langage
+de programmation de prédilection.
+
+Kalamine a ainsi été développé dans le but de faciliter la personnalisation de
+Lafayette. Puis x-keyboard a suivi, afin de pouvoir tester ces dispositions sans
+avoir à les installer. Et de fil en aiguille…
+
+
+Colemak French Touch
+--------------------------------------------------------------------------------
+
+{{< x-keyboard
+    name="QWERTY-Lafayette"
+    download="https://qwerty-lafayette.org"
+    src="/layouts/lafayette.json"
+    image="/img/ergol.svg" >}}
+
+Une adaptation du Colemak au français :
+
+- inversion O/U
+- touche Typo pour les diacritiques francophones
+
+
+Bepolar
+--------------------------------------------------------------------------------
+
+{{< x-keyboard
+    name="QWERTY-Lafayette"
+    download="https://qwerty-lafayette.org"
+    src="/layouts/lafayette.json"
+    image="/img/ergol.svg" >}}
+
+Une adaptation de Bépo aux claviers compacts.
diff --git a/www/content/lts/index.html b/www/content/lts/index.html
new file mode 100644
index 00000000..eeb4c9cf
--- /dev/null
+++ b/www/content/lts/index.html
@@ -0,0 +1,80 @@
++++
+title = "Ergo‑L v0.7 LTS"
+
+[params]
+jsScripts = ['js/svg.js']
++++
+
+{{< x-keyboard image="img/ergol.svg" >}}
+
+<h2 id="pilotes"> Téléchargement </h2>
+<dl class="download">
+
+  <dt>
+    <strong> Windows, installeur : </strong>
+    <a href="https://github.com/Nuclear-Squid/ergol/blob/master/0_7_0/ergol_KbdEditInstaller.exe">ergol_KbdEditInstaller.exe</a>
+  </dt>
+  <dd>
+    <p> Exécuter l’installeur et relancer la session. La disposition de
+    clavier apparaît dans la barre de langues (indicateur de la barre des
+    tâches). </p>
+  </dd>
+
+  <dt>
+    <strong> Windows, version portable : </strong>
+    <a href="https://github.com/Nuclear-Squid/ergol/blob/master/0_7_0/ergol_ahk.exe">ergol_ahk.exe</a>
+  </dt>
+  <dd>
+    <p> Après lancement, un indicateur apparaît dans la barre des tâches.
+      Le pilote peut être activé / désactivé avec le raccourci
+      <kbd>Alt</kbd>+<kbd>AltGr</kbd/. </p>
+    <p> Ne nécessite pas de droits d’administration, peut fonctionner depuis
+      une clé USB. </p>
+  </dd>
+
+  <dt>
+    <strong> macOS : </strong>
+    <a href="https://github.com/Nuclear-Squid/ergol/blob/master/0_7_0/ergol.keylayout">ergol.keylayout</a>
+  </dt>
+  <dd>
+    <p> Enregistrer dans <code>/Library/Keyboard Layouts</code> et relancer
+    la session. La disposition de clavier est disponible dans les préférences
+    « Langue et Texte », onglet « Méthodes de saisie ». </p>
+    <p> On peut aussi l’enregistrer dans <code>~/Library/Keyboard Layouts</code>
+      (pour le seul utilisateur courant), mais la disposition ne sera pas
+      active au login. </p>
+    <p> Il est possible (et recommandé) d’utiliser <a
+      href="https://karabiner-elements.pqrs.org/">Karabiner</a> pour <a
+      href="karabiner_settings.png">inverser les touches</a>
+    <kbd>⌘ Command</kbd> et <kbd>⌥ Option</kbd> à droite, afin d’accéder plus
+    facilement à la couche de symboles. </p>
+  </dd>
+
+  <dt>
+    <strong> GNU/Linux : </strong>
+    <a href="https://github.com/Nuclear-Squid/ergol/blob/master/0_7_0/ergol.xkb_custom">ergol.xkb_custom</a>
+  </dt>
+  <dd>
+    <p> Copier le pilote dans <code>xkb/symbols/custom</code> :</p>
+    <pre>
+    wget https://github.com/Nuclear-Squid/ergol/blob/master/0_7_0/ergol.xkb_custom
+    sudo mv ergol.xkb_custom ${XKB_CONFIG_ROOT:-/usr/share/X11/xkb}/symbols/custom </pre>
+    <p> La disposition de clavier est disponible dans le gestionnaire de
+      préférences du bureau sous un nom générique (« custom layout »,
+      « disposition personnalisée », etc.).
+      Sous XOrg on peut aussi l’activer directement en ligne de commande : </p>
+    <pre>
+    setxkbmap custom </pre>
+    <p> D’autres méthodes d’installation sont possibles, en passant le <a
+      href="data/layouts/ergol.toml">fichier source</a> à <a
+      href="https://github.com/OneDeadKey/kalamine#xkalamine">XKalamine</a>.
+    <p> Remarque : avec certains bureaux (Gnome notamment), la touche morte
+    <kbd>★</kbd> ne fonctionne que si Lafayette est définie comme disposition
+    de par défaut, i.e. en haut de la liste dans les préférences clavier. </p>
+  </dd>
+
+</dl>
+
+<h2 id="licence"> Licence </h2>
+<p> <a href="http://wtfpl.net/">WTFPL</a>
+  – Do What the Fuck You Want to Public License. </p>
diff --git a/img/karabiner_altgr.png b/www/content/lts/karabiner_settings.png
similarity index 100%
rename from img/karabiner_altgr.png
rename to www/content/lts/karabiner_settings.png
diff --git a/slides/CapitoleDuLibre2023/images/charge_doigts_ergol.png b/www/content/slides/CapitoleDuLibre2023/images/charge_doigts_ergol.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/charge_doigts_ergol.png
rename to www/content/slides/CapitoleDuLibre2023/images/charge_doigts_ergol.png
diff --git a/slides/CapitoleDuLibre2023/images/ergol_altgr.png b/www/content/slides/CapitoleDuLibre2023/images/ergol_altgr.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/ergol_altgr.png
rename to www/content/slides/CapitoleDuLibre2023/images/ergol_altgr.png
diff --git a/slides/CapitoleDuLibre2023/images/ergolak.png b/www/content/slides/CapitoleDuLibre2023/images/ergolak.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/ergolak.png
rename to www/content/slides/CapitoleDuLibre2023/images/ergolak.png
diff --git a/slides/CapitoleDuLibre2023/images/ferris2.jpg b/www/content/slides/CapitoleDuLibre2023/images/ferris2.jpg
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/ferris2.jpg
rename to www/content/slides/CapitoleDuLibre2023/images/ferris2.jpg
diff --git a/slides/CapitoleDuLibre2023/images/heatmap_bepo.png b/www/content/slides/CapitoleDuLibre2023/images/heatmap_bepo.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/heatmap_bepo.png
rename to www/content/slides/CapitoleDuLibre2023/images/heatmap_bepo.png
diff --git a/slides/CapitoleDuLibre2023/images/heatmap_colemak.png b/www/content/slides/CapitoleDuLibre2023/images/heatmap_colemak.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/heatmap_colemak.png
rename to www/content/slides/CapitoleDuLibre2023/images/heatmap_colemak.png
diff --git a/slides/CapitoleDuLibre2023/images/heatmap_dvorak.png b/www/content/slides/CapitoleDuLibre2023/images/heatmap_dvorak.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/heatmap_dvorak.png
rename to www/content/slides/CapitoleDuLibre2023/images/heatmap_dvorak.png
diff --git a/slides/CapitoleDuLibre2023/images/heatmap_mtgap.png b/www/content/slides/CapitoleDuLibre2023/images/heatmap_mtgap.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/heatmap_mtgap.png
rename to www/content/slides/CapitoleDuLibre2023/images/heatmap_mtgap.png
diff --git a/slides/CapitoleDuLibre2023/images/heatmap_qwerty.png b/www/content/slides/CapitoleDuLibre2023/images/heatmap_qwerty.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/heatmap_qwerty.png
rename to www/content/slides/CapitoleDuLibre2023/images/heatmap_qwerty.png
diff --git a/slides/CapitoleDuLibre2023/images/heatmap_workman.png b/www/content/slides/CapitoleDuLibre2023/images/heatmap_workman.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/heatmap_workman.png
rename to www/content/slides/CapitoleDuLibre2023/images/heatmap_workman.png
diff --git a/slides/CapitoleDuLibre2023/images/jeu_reponse.png b/www/content/slides/CapitoleDuLibre2023/images/jeu_reponse.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/jeu_reponse.png
rename to www/content/slides/CapitoleDuLibre2023/images/jeu_reponse.png
diff --git a/slides/CapitoleDuLibre2023/images/jeu_reponse_cache.png b/www/content/slides/CapitoleDuLibre2023/images/jeu_reponse_cache.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/jeu_reponse_cache.png
rename to www/content/slides/CapitoleDuLibre2023/images/jeu_reponse_cache.png
diff --git a/slides/CapitoleDuLibre2023/images/kinesis_contour.png b/www/content/slides/CapitoleDuLibre2023/images/kinesis_contour.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/kinesis_contour.png
rename to www/content/slides/CapitoleDuLibre2023/images/kinesis_contour.png
diff --git a/slides/CapitoleDuLibre2023/images/machine_a_ecrire.jpg b/www/content/slides/CapitoleDuLibre2023/images/machine_a_ecrire.jpg
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/machine_a_ecrire.jpg
rename to www/content/slides/CapitoleDuLibre2023/images/machine_a_ecrire.jpg
diff --git a/slides/CapitoleDuLibre2023/images/planck2.png b/www/content/slides/CapitoleDuLibre2023/images/planck2.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/planck2.png
rename to www/content/slides/CapitoleDuLibre2023/images/planck2.png
diff --git a/slides/CapitoleDuLibre2023/images/planck_layers.png b/www/content/slides/CapitoleDuLibre2023/images/planck_layers.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/planck_layers.png
rename to www/content/slides/CapitoleDuLibre2023/images/planck_layers.png
diff --git a/slides/CapitoleDuLibre2023/images/top10letters.png b/www/content/slides/CapitoleDuLibre2023/images/top10letters.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/top10letters.png
rename to www/content/slides/CapitoleDuLibre2023/images/top10letters.png
diff --git a/slides/CapitoleDuLibre2023/images/top10letters_ergol.png b/www/content/slides/CapitoleDuLibre2023/images/top10letters_ergol.png
similarity index 100%
rename from slides/CapitoleDuLibre2023/images/top10letters_ergol.png
rename to www/content/slides/CapitoleDuLibre2023/images/top10letters_ergol.png
diff --git a/slides/CapitoleDuLibre2023/index.html b/www/content/slides/CapitoleDuLibre2023/index.html
similarity index 100%
rename from slides/CapitoleDuLibre2023/index.html
rename to www/content/slides/CapitoleDuLibre2023/index.html
diff --git a/slides/CapitoleDuLibre2023/remark.js b/www/content/slides/CapitoleDuLibre2023/remark.js
similarity index 100%
rename from slides/CapitoleDuLibre2023/remark.js
rename to www/content/slides/CapitoleDuLibre2023/remark.js
diff --git a/slides/CapitoleDuLibre2023/style.css b/www/content/slides/CapitoleDuLibre2023/style.css
similarity index 100%
rename from slides/CapitoleDuLibre2023/style.css
rename to www/content/slides/CapitoleDuLibre2023/style.css
diff --git a/slides/CapitoleDuLibre2023/vimrc b/www/content/slides/CapitoleDuLibre2023/vimrc
similarity index 100%
rename from slides/CapitoleDuLibre2023/vimrc
rename to www/content/slides/CapitoleDuLibre2023/vimrc
diff --git a/slides/HumanTalk2022/images/benchmark_ergol.png b/www/content/slides/HumanTalk2022/images/benchmark_ergol.png
similarity index 100%
rename from slides/HumanTalk2022/images/benchmark_ergol.png
rename to www/content/slides/HumanTalk2022/images/benchmark_ergol.png
diff --git a/slides/HumanTalk2022/images/benchmark_qwerty.png b/www/content/slides/HumanTalk2022/images/benchmark_qwerty.png
similarity index 100%
rename from slides/HumanTalk2022/images/benchmark_qwerty.png
rename to www/content/slides/HumanTalk2022/images/benchmark_qwerty.png
diff --git a/slides/HumanTalk2022/images/benchmark_qwerty.png.svg b/www/content/slides/HumanTalk2022/images/benchmark_qwerty.png.svg
similarity index 100%
rename from slides/HumanTalk2022/images/benchmark_qwerty.png.svg
rename to www/content/slides/HumanTalk2022/images/benchmark_qwerty.png.svg
diff --git a/slides/HumanTalk2022/images/benchmark_workman.png b/www/content/slides/HumanTalk2022/images/benchmark_workman.png
similarity index 100%
rename from slides/HumanTalk2022/images/benchmark_workman.png
rename to www/content/slides/HumanTalk2022/images/benchmark_workman.png
diff --git a/slides/HumanTalk2022/images/benchmarks.png b/www/content/slides/HumanTalk2022/images/benchmarks.png
similarity index 100%
rename from slides/HumanTalk2022/images/benchmarks.png
rename to www/content/slides/HumanTalk2022/images/benchmarks.png
diff --git a/slides/HumanTalk2022/images/charge_doigts_azerty.png b/www/content/slides/HumanTalk2022/images/charge_doigts_azerty.png
similarity index 100%
rename from slides/HumanTalk2022/images/charge_doigts_azerty.png
rename to www/content/slides/HumanTalk2022/images/charge_doigts_azerty.png
diff --git a/slides/HumanTalk2022/images/charge_doigts_bepo.png b/www/content/slides/HumanTalk2022/images/charge_doigts_bepo.png
similarity index 100%
rename from slides/HumanTalk2022/images/charge_doigts_bepo.png
rename to www/content/slides/HumanTalk2022/images/charge_doigts_bepo.png
diff --git a/slides/HumanTalk2022/images/top10letters.png b/www/content/slides/HumanTalk2022/images/top10letters.png
similarity index 100%
rename from slides/HumanTalk2022/images/top10letters.png
rename to www/content/slides/HumanTalk2022/images/top10letters.png
diff --git a/slides/HumanTalk2022/index.html b/www/content/slides/HumanTalk2022/index.html
similarity index 100%
rename from slides/HumanTalk2022/index.html
rename to www/content/slides/HumanTalk2022/index.html
diff --git a/slides/HumanTalk2022/remark.js b/www/content/slides/HumanTalk2022/remark.js
similarity index 100%
rename from slides/HumanTalk2022/remark.js
rename to www/content/slides/HumanTalk2022/remark.js
diff --git a/slides/HumanTalk2022/style.css b/www/content/slides/HumanTalk2022/style.css
similarity index 100%
rename from slides/HumanTalk2022/style.css
rename to www/content/slides/HumanTalk2022/style.css
diff --git a/slides/HumanTalk2022/vimrc b/www/content/slides/HumanTalk2022/vimrc
similarity index 100%
rename from slides/HumanTalk2022/vimrc
rename to www/content/slides/HumanTalk2022/vimrc
diff --git a/slides/jdll2022/images/basic-position.png b/www/content/slides/jdll2022/images/basic-position.png
similarity index 100%
rename from slides/jdll2022/images/basic-position.png
rename to www/content/slides/jdll2022/images/basic-position.png
diff --git a/slides/jdll2022/images/ergol42_layout.png b/www/content/slides/jdll2022/images/ergol42_layout.png
similarity index 100%
rename from slides/jdll2022/images/ergol42_layout.png
rename to www/content/slides/jdll2022/images/ergol42_layout.png
diff --git a/slides/jdll2022/images/ergol42_lower.png b/www/content/slides/jdll2022/images/ergol42_lower.png
similarity index 100%
rename from slides/jdll2022/images/ergol42_lower.png
rename to www/content/slides/jdll2022/images/ergol42_lower.png
diff --git a/slides/jdll2022/images/ergol_top10.png b/www/content/slides/jdll2022/images/ergol_top10.png
similarity index 100%
rename from slides/jdll2022/images/ergol_top10.png
rename to www/content/slides/jdll2022/images/ergol_top10.png
diff --git a/slides/jdll2022/images/ergol_top10.svg b/www/content/slides/jdll2022/images/ergol_top10.svg
similarity index 100%
rename from slides/jdll2022/images/ergol_top10.svg
rename to www/content/slides/jdll2022/images/ergol_top10.svg
diff --git a/slides/jdll2022/images/ergol_vide.png b/www/content/slides/jdll2022/images/ergol_vide.png
similarity index 100%
rename from slides/jdll2022/images/ergol_vide.png
rename to www/content/slides/jdll2022/images/ergol_vide.png
diff --git a/slides/jdll2022/images/ergonomic-basics.png b/www/content/slides/jdll2022/images/ergonomic-basics.png
similarity index 100%
rename from slides/jdll2022/images/ergonomic-basics.png
rename to www/content/slides/jdll2022/images/ergonomic-basics.png
diff --git a/slides/jdll2022/images/heatmap_bepo.png b/www/content/slides/jdll2022/images/heatmap_bepo.png
similarity index 100%
rename from slides/jdll2022/images/heatmap_bepo.png
rename to www/content/slides/jdll2022/images/heatmap_bepo.png
diff --git a/slides/jdll2022/images/heatmap_colemak.png b/www/content/slides/jdll2022/images/heatmap_colemak.png
similarity index 100%
rename from slides/jdll2022/images/heatmap_colemak.png
rename to www/content/slides/jdll2022/images/heatmap_colemak.png
diff --git a/slides/jdll2022/images/heatmap_dvorak.png b/www/content/slides/jdll2022/images/heatmap_dvorak.png
similarity index 100%
rename from slides/jdll2022/images/heatmap_dvorak.png
rename to www/content/slides/jdll2022/images/heatmap_dvorak.png
diff --git a/slides/jdll2022/images/heatmap_ergol.png b/www/content/slides/jdll2022/images/heatmap_ergol.png
similarity index 100%
rename from slides/jdll2022/images/heatmap_ergol.png
rename to www/content/slides/jdll2022/images/heatmap_ergol.png
diff --git a/slides/jdll2022/images/heatmap_lafayette.png b/www/content/slides/jdll2022/images/heatmap_lafayette.png
similarity index 100%
rename from slides/jdll2022/images/heatmap_lafayette.png
rename to www/content/slides/jdll2022/images/heatmap_lafayette.png
diff --git a/slides/jdll2022/images/heatmap_workman.png b/www/content/slides/jdll2022/images/heatmap_workman.png
similarity index 100%
rename from slides/jdll2022/images/heatmap_workman.png
rename to www/content/slides/jdll2022/images/heatmap_workman.png
diff --git a/slides/jdll2022/images/mouse-closer.png b/www/content/slides/jdll2022/images/mouse-closer.png
similarity index 100%
rename from slides/jdll2022/images/mouse-closer.png
rename to www/content/slides/jdll2022/images/mouse-closer.png
diff --git a/slides/jdll2022/images/superduck.jpg b/www/content/slides/jdll2022/images/superduck.jpg
similarity index 100%
rename from slides/jdll2022/images/superduck.jpg
rename to www/content/slides/jdll2022/images/superduck.jpg
diff --git a/slides/jdll2022/images/top10letters.png b/www/content/slides/jdll2022/images/top10letters.png
similarity index 100%
rename from slides/jdll2022/images/top10letters.png
rename to www/content/slides/jdll2022/images/top10letters.png
diff --git a/slides/jdll2022/images/touch-type.png b/www/content/slides/jdll2022/images/touch-type.png
similarity index 100%
rename from slides/jdll2022/images/touch-type.png
rename to www/content/slides/jdll2022/images/touch-type.png
diff --git a/slides/jdll2022/index.html b/www/content/slides/jdll2022/index.html
similarity index 100%
rename from slides/jdll2022/index.html
rename to www/content/slides/jdll2022/index.html
diff --git a/slides/jdll2022/remark.js b/www/content/slides/jdll2022/remark.js
similarity index 100%
rename from slides/jdll2022/remark.js
rename to www/content/slides/jdll2022/remark.js
diff --git a/slides/jdll2022/style.css b/www/content/slides/jdll2022/style.css
similarity index 100%
rename from slides/jdll2022/style.css
rename to www/content/slides/jdll2022/style.css
diff --git a/slides/jdll2022/vimrc b/www/content/slides/jdll2022/vimrc
similarity index 100%
rename from slides/jdll2022/vimrc
rename to www/content/slides/jdll2022/vimrc
diff --git a/www/content/stats.html b/www/content/stats.html
new file mode 100644
index 00000000..c048d5b5
--- /dev/null
+++ b/www/content/stats.html
@@ -0,0 +1,145 @@
++++
+title = "Heatmap"
+
+[params]
+description = "Fréquences de touches obtenues avec le “Don Quichotte” de Cervantès."
+cssSheets = ["/css/heatmap.css"]
+jsModules = ["/js/x-keyboard.js", "/js/collapsable-table.js"]
+jsScripts = ["/js/layout-analyzer.js", "/js/demo.js"]
+footer = "powered by [x-keyboard](https://onedeadkey.github.io/x-keyboard)"
++++
+
+<div id="demo">
+  <input spellcheck="false" />
+  <x-keyboard id="keyboard"></x-keyboard>
+</div>
+
+<div id="sticky-select" class="keyboard">
+  <form>
+    <select id="layout">
+      <option disabled>  [en]</option>
+      <option>qwerty</option>
+      <option>dvorak</option>
+      <option>colemak</option>
+      <option>colemak-dh</option>
+      <option>workman</option>
+      <option>ISRT</option>
+      <option>MTGAP</option>
+      <option>sturdy</option>
+      <option disabled>  [fr]</option>
+      <option>azerty</option>
+      <option>lafayette</option>
+      <option selected>ergol</option>
+      <option>erglace</option>
+      <option>bepo</option>
+    </select>
+    <select id="geometry">
+      <option value="iso">ISO</option>
+      <option value="ansi" selected>ANSI</option>
+      <option value="ol60">TMx</option>
+      <option value="ol50">50%</option>
+      <option value="ol40">40%</option>
+    </select>
+    <select id="corpus">
+      <option>en</option>
+      <option selected>en+fr</option>
+      <option>fr</option>
+    </select>
+  </form>
+</div>
+
+<p id="imprecise-data">
+<small>
+Cette disposition ne sait pas générer un nombre non-négligeable de
+symboles, les résultats sont peu fiables.
+</small>
+</p>
+
+<h2>Métriques</h2>
+
+<h3>Charge des doigts</h3>
+<small><span id="load-left"></span> / <span id="load-right"></span></small>
+<div id="load">
+  <canvas></canvas>
+  <table></table>
+</div>
+
+<h3>Digrammes à un doigt</h3>
+<small><span id="sfu-all"></span></small>
+<div id="sfu">
+  <canvas></canvas>
+  <table></table>
+</div>
+
+<h3>Touches doublées</h3>
+<small><span id="sku-all"></span></small>
+<div id="sku">
+  <canvas></canvas>
+  <table></table>
+</div>
+
+<collapsable-table id="Achoppements">
+  <small>
+    <span id="unsupported-all"></span> /
+    <span id="sfu-all"></span> /
+    <span id="extensions-all"></span> /
+    <span id="scisors-all"></span>
+  </small>
+  <table id="unsupported"></table>
+  <table id="sfu-digrams"></table>
+  <table id="extended-rolls"></table>
+  <table id="scisors"></table>
+</collapsable-table>
+
+<collapsable-table id="Digrammes">
+  <small>
+    <span id="sku-all"></span> /
+    <span id="inward-all"></span> /
+    <span id="outward-all"></span>
+  </small>
+  <table id="sku-digrams"></table>
+  <table id="inward"></table>
+  <table id="outward"></table>
+</collapsable-table>
+
+<collapsable-table id="Trigrammes">
+  <small>
+    <span id="almost-skb-all"></span> /
+    <span id="almost-sfb-all"></span> /
+    <span id="redirect-all"></span> /
+    <span id="bad-redirect-all"></span>
+  </small>
+  <table id="almost-skbs"></table>
+  <table id="almost-sfbs"></table>
+  <table id="redirect"></table>
+  <table id="bad-redirect"></table>
+</collapsable-table>
+
+<!-- <h2>Analyseurs de layouts</h2> -->
+<!-- <p>TODO</p> -->
+
+<!-- <h2>Lexique</h2> -->
+<!-- <p>TODO</p> -->
+
+<h2>Mise en garde</h2>
+<p><strong>Ces métriques ne sont pas des cibles d’optimisation !</strong></p>
+
+<blockquote cite="https://fr.wikipedia.org/wiki/Loi_de_Goodhart">
+  <p>Lorsqu'une métrique devient un objectif, elle cesse d'être une bonne métrique.</p>
+  <p style="text-align: right;">— <a
+    href="https://fr.wikipedia.org/wiki/Loi_de_Goodhart">loi de Goodhart</a></p>
+</blockquote>
+
+<blockquote>
+  <p>Les chiffres sont aux analystes ce que les lampadaires sont aux ivrognes :
+  ils fournissent bien plus un appui qu'un éclairage.
+  <p style="text-align: right;">— Jean Dion</p>
+  <!-- Le Devoir - 4 juin 1997 -->
+</blockquote>
+
+<p> Notre recommandation : utilisez ces métriques non pour mesurer les qualités
+d’une disposition de clavier, mais pour essayer d’en évaluer le défaut le plus
+gênant. Puis itérez sur votre layout jusqu’à ce que ce que ce défaut soit
+suffisamment réduit… sans en créer un pire ailleurs. </p>
+
+<p> Et recommencez. :-) </p>
diff --git a/www/hugo.toml b/www/hugo.toml
new file mode 100644
index 00000000..799a19cc
--- /dev/null
+++ b/www/hugo.toml
@@ -0,0 +1,14 @@
+# baseURL = "https://ergol.org"
+relativeURLs = true
+languageCode = "fr"
+title = "Ergo‑L"
+
+[params]
+subtitle = "Ergonomie optimisée pour le français, l’anglais, le code."
+description = "Une disposition de clavier ergonomique de type Colemak, optimisée pour le français, l’anglais et le code."
+
+[security.exec]
+allow = ["pandoc"]
+
+[markup]
+defaultMarkdownHandler = "pandoc"
diff --git a/www/layouts/_default/baseof.html b/www/layouts/_default/baseof.html
new file mode 100644
index 00000000..ce9613a2
--- /dev/null
+++ b/www/layouts/_default/baseof.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
+<head>
+  {{ partial "head.html" . }}
+</head>
+<body>
+  <header>
+    {{ partial "header.html" . }}
+  </header>
+  <main>
+    {{ block "main" . }}{{ end }}
+  </main>
+  <footer>
+    {{ partial "footer.html" . }}
+  </footer>
+</body>
+</html>
diff --git a/www/layouts/_default/home.html b/www/layouts/_default/home.html
new file mode 100644
index 00000000..89c84cad
--- /dev/null
+++ b/www/layouts/_default/home.html
@@ -0,0 +1,7 @@
+{{ define "main" }}
+  {{ .Content }}
+  <!-- {{ range site.RegularPages }} -->
+  <!--   <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2> -->
+  <!--   {{ .Summary }} -->
+  <!-- {{ end }} -->
+{{ end }}
diff --git a/www/layouts/_default/list.html b/www/layouts/_default/list.html
new file mode 100644
index 00000000..0dfbd7e5
--- /dev/null
+++ b/www/layouts/_default/list.html
@@ -0,0 +1,8 @@
+{{ define "main" }}
+  <!-- <h1>{{ .Title }}</h1> -->
+  {{ .Content }}
+  {{ range .Pages }}
+    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+    {{ .Summary }}
+  {{ end }}
+{{ end }}
diff --git a/www/layouts/_default/single.html b/www/layouts/_default/single.html
new file mode 100644
index 00000000..e0e83081
--- /dev/null
+++ b/www/layouts/_default/single.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+  {{ .Content }}
+{{ end }}
diff --git a/www/layouts/partials/footer.html b/www/layouts/partials/footer.html
new file mode 100644
index 00000000..ef19944b
--- /dev/null
+++ b/www/layouts/partials/footer.html
@@ -0,0 +1,3 @@
+<span style="float: left"><small>{{ .Params.footer | markdownify }}</small></span>
+<a href="https://github.com/Nuclear-Squid/ErgoL">GitHub</a> |
+<a href="https://discord.gg/5xR5K3nAFX">Discord</a>
diff --git a/www/layouts/partials/head.html b/www/layouts/partials/head.html
new file mode 100644
index 00000000..87d2f402
--- /dev/null
+++ b/www/layouts/partials/head.html
@@ -0,0 +1,8 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
+<meta name="description" content="{{ .Site.Params.description }}">
+<link type="image/svg+xml" rel="icon" href="{{ absURL "favicon.svg" }}" sizes="any" />
+
+{{ partial "head/js.html" . }}
+{{ partial "head/css.html" . }}
diff --git a/www/layouts/partials/head/css.html b/www/layouts/partials/head/css.html
new file mode 100644
index 00000000..177795f5
--- /dev/null
+++ b/www/layouts/partials/head/css.html
@@ -0,0 +1,22 @@
+{{- with resources.Get "css/layout.css" }}
+  {{- if eq hugo.Environment "development" }}
+    <link rel="stylesheet" href="{{ .RelPermalink }}">
+  {{- else }}
+    {{- with . | minify | fingerprint }}
+      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+    {{- end }}
+  {{- end }}
+{{- end }}
+
+{{ range .Params.cssSheets }}
+  {{- with resources.Get . }}
+    {{- if eq hugo.Environment "development" }}
+      <link rel="stylesheet" href="{{ relURL .RelPermalink }}">
+    {{- else }}
+      {{- with . | minify | fingerprint }}
+        <link rel="stylesheet" href="{{ relURL .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{ end }}
+
diff --git a/www/layouts/partials/head/js.html b/www/layouts/partials/head/js.html
new file mode 100644
index 00000000..0094e30b
--- /dev/null
+++ b/www/layouts/partials/head/js.html
@@ -0,0 +1,23 @@
+{{ range .Params.JsModules }}
+  {{- with resources.Get . }}
+    {{- if eq hugo.Environment "development" }}
+      <script src="{{ relURL .RelPermalink }}" type="module"></script>
+    {{- else }}
+      {{- with . | minify | fingerprint }}
+        <script src="{{ relURL .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous" type="module"></script>
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{ end }}
+
+{{ range .Params.JsScripts }}
+  {{- with resources.Get . }}
+    {{- if eq hugo.Environment "development" }}
+      <script src="{{ relURL .RelPermalink }}" type="text/javascript"></script>
+    {{- else }}
+      {{- with . | minify | fingerprint }}
+        <script src="{{ relURL .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous" type="text/javascript"></script>
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{ end }}
diff --git a/www/layouts/partials/header.html b/www/layouts/partials/header.html
new file mode 100644
index 00000000..72e77ac2
--- /dev/null
+++ b/www/layouts/partials/header.html
@@ -0,0 +1,17 @@
+<div id="banner">
+  <p class="title"><a href="/">{{ site.Title }}</a></p>
+  <p>{{ .Site.Params.subtitle }}</p>
+</div>
+
+<nav>
+  <a href="/">Ergo‑L</a>
+  | <a href="/bepo">Bépo ?</a>
+  <!-- | <a href="/erglace">Erglace !</a> -->
+  <!-- | <a href="/lafayette">Lafayette</a> -->
+  | <a href="/stats">Stats</a>
+  | <a href="/dactylo">Apprendre</a>
+</nav>
+
+{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+
+<h1>{{ .Title }}</h1>
diff --git a/www/layouts/partials/menu.html b/www/layouts/partials/menu.html
new file mode 100644
index 00000000..71831809
--- /dev/null
+++ b/www/layouts/partials/menu.html
@@ -0,0 +1,51 @@
+{{- /*
+Renders a menu for the given menu ID.
+
+@context {page} page The current page.
+@context {string} menuID The menu ID.
+
+@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+*/}}
+
+{{- $page := .page }}
+{{- $menuID := .menuID }}
+
+{{- with index site.Menus $menuID }}
+  <nav>
+    <ul>
+      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+    </ul>
+  </nav>
+{{- end }}
+
+{{- define "partials/inline/menu/walk.html" }}
+  {{- $page := .page }}
+  {{- range .menuEntries }}
+    {{- $attrs := dict "href" .URL }}
+    {{- if $page.IsMenuCurrent .Menu . }}
+      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
+    {{- else if $page.HasMenuCurrent .Menu .}}
+      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
+    {{- end }}
+    {{- $name := .Name }}
+    {{- with .Identifier }}
+      {{- with T . }}
+        {{- $name = . }}
+      {{- end }}
+    {{- end }}
+    <li>
+      <a
+        {{- range $k, $v := $attrs }}
+          {{- with $v }}
+            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+          {{- end }}
+        {{- end -}}
+      >{{ $name }}</a>
+      {{- with .Children }}
+        <ul>
+          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+        </ul>
+      {{- end }}
+    </li>
+  {{- end }}
+{{- end }}
diff --git a/www/layouts/partials/terms.html b/www/layouts/partials/terms.html
new file mode 100644
index 00000000..47cf6e41
--- /dev/null
+++ b/www/layouts/partials/terms.html
@@ -0,0 +1,23 @@
+{{- /*
+For a given taxonomy, renders a list of terms assigned to the page.
+
+@context {page} page The current page.
+@context {string} taxonomy The taxonony.
+
+@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+*/}}
+
+{{- $page := .page }}
+{{- $taxonomy := .taxonomy }}
+
+{{- with $page.GetTerms $taxonomy }}
+  {{- $label := (index . 0).Parent.LinkTitle }}
+  <div>
+    <div>{{ $label }}:</div>
+    <ul>
+      {{- range . }}
+        <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+      {{- end }}
+    </ul>
+  </div>
+{{- end }}
diff --git a/www/layouts/shortcodes/x-keyboard.html b/www/layouts/shortcodes/x-keyboard.html
new file mode 100644
index 00000000..ec597a4a
--- /dev/null
+++ b/www/layouts/shortcodes/x-keyboard.html
@@ -0,0 +1,33 @@
+<div class="keyboard">
+  {{ with .Get "image" }}
+    <img src="{{ . | relURL }}">
+    <p style="text-align: right;">
+    <span style="float: left;"> <small>powered by <a
+          href="https://onedeadkey.github.io/x-keyboard/">x-keyboard</a>
+      </small></span>
+      <small>géométrie :</small>
+      <select>
+        <option value="dk iso">ISO</option>
+      </select>
+    </p>
+  {{ end }}
+  <nav>
+    {{ with .Get "src" }}
+      <a href="dactylo#{{ . }}">⌨ Apprendre</a>
+      <button hidden>⇪ Tester !</button>
+    {{ end }}
+    {{ with .Get "download" }}
+      <a href="{{ . }}">⇣ Installer</a>
+    {{ end }}
+  </nav>
+</div>
+
+{{ $name := .Get "name" }}
+
+{{ with .Get "src" }}
+  <dialog id="demo">
+      <input spellcheck="false" placeholder='{{ if $name }} {{ printf "zone de saisie %s" $name }} {{ end }}' />
+    <x-keyboard src="{{ . }}"></x-keyboard>
+  </dialog>
+{{ end }}
+
diff --git a/www/static/corpus b/www/static/corpus
new file mode 120000
index 00000000..ed3814a9
--- /dev/null
+++ b/www/static/corpus
@@ -0,0 +1 @@
+../../corpus
\ No newline at end of file
diff --git a/favicon.svg b/www/static/favicon.svg
similarity index 90%
rename from favicon.svg
rename to www/static/favicon.svg
index ca66985b..309df766 100644
--- a/favicon.svg
+++ b/www/static/favicon.svg
@@ -7,9 +7,13 @@
     .red    { fill: hsl(  0,  92%, 50%); }
     .blue   { fill: hsl(200, 100%, 40%); }
     .yellow { fill: hsl( 50, 100%, 50%); }
-    #logo   { fill: #333; }
-    @media (prefers-color-scheme: dark) { #logo { fill: #fff; } }
+    #rocket { fill: #544; }
+    @media (prefers-color-scheme: dark) { #rocket { fill: #cbb; } }
+
+    /* favicon */
     @media (max-width: 32px) { #oif path { fill: none; } }
+    @media (max-width: 32px) and (prefers-color-scheme: dark)  { #rocket { fill: #fff; } }
+    @media (max-width: 32px) and (prefers-color-scheme: light) { #rocket { fill: #333; } }
   </style>
 
   <!-- https://upload.wikimedia.org/wikipedia/commons/0/0b/Logo_OIF.svg -->
@@ -22,7 +26,7 @@
   </g>
 
   <!-- https://www.svgrepo.com/svg/99963/rocket-pointing-to-upper-left-direction -->
-  <g id="logo" transform="scale(-0.6,0.6) translate(-600,70)">
+  <g id="rocket" transform="scale(-0.6,0.6) translate(-600,70)">
     <path d="M208.195,373.272l24.652,88.625c0.287,1.062,0.908,1.998,1.75,2.707l75.802,63.035c0.985,0.812,2.2,1.244,3.443,1.244 c0.535,0,1.052-0.078,1.577-0.24c1.74-0.535,3.089-1.902,3.596-3.643l26.039-89.486c18.972,0.766,35.716-3.576,49.495-13.043 l34.502,28.344c2.189,1.787,5.374,1.605,7.334-0.449l25.618-26.957c0.994-1.043,1.521-2.449,1.473-3.902 c-0.048-1.443-0.68-2.811-1.75-3.787l-34.157-31.326c2.916-7.955,8.147-27.779,2.601-57.939l87.784-32.053 c1.712-0.622,2.983-2.066,3.395-3.835c0.421-1.769-0.096-3.624-1.349-4.944l-67.97-71.413c-0.794-0.832-1.817-1.387-2.955-1.597 l-89.533-16.007c-16.85-19.479-36.453-39.188-58.284-58.618C175.548,26.125,77.284,9.428,29.902,9.428 c-15.596,0-24.193,1.894-24.556,1.97c-2.133,0.478-3.758,2.199-4.131,4.351c-0.956,5.565-21.401,138.178,151.174,310.753 C152.618,326.721,175.749,349.145,208.195,373.272z M216.352,276.806c-30.026,0-54.363-24.337-54.363-54.363 c0-30.026,24.336-54.362,54.363-54.362s54.363,24.336,54.363,54.362C270.714,252.469,246.378,276.806,216.352,276.806z"/>
     <path d="M420.97,471.278c-1.166-1.146-2.859-1.605-4.456-1.215c-1.597,0.393-2.878,1.568-3.395,3.117l-12.364,36.73 c-0.593,1.76-0.115,3.701,1.224,4.982l58.638,56.045c0.898,0.852,2.075,1.33,3.309,1.33l0,0h49.429l0,0 c1.95,0,3.7-1.186,4.437-2.984c0.727-1.807,0.287-3.873-1.109-5.23L420.97,471.278z"/>
     <path d="M486.454,441.329c-0.908-0.947-2.161-2.936-3.462-2.936c-0.038,0-0.076,0-0.124,0c-1.349,0-2.61,2.084-3.49,3.107 l-21.258,26.049c-1.625,1.883-1.539,4.695,0.201,6.473l94.745,96.82c0.898,0.918,2.133,1.436,3.414,1.436l0,0h15.663h4.781 c2.64,0,4.781-2.143,4.781-4.781v-22.893c0-1.225-0.479-3.137-1.319-4.027L486.454,441.329z"/>
diff --git a/www/static/img/bepo.svg b/www/static/img/bepo.svg
new file mode 100644
index 00000000..077c9af0
--- /dev/null
+++ b/www/static/img/bepo.svg
@@ -0,0 +1,1002 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 300" platform="gnu" theme="" class="iso intlBackslash">
+  <style>
+    rect, path {
+      stroke: #666;
+      stroke-width: .5px;
+      fill: #f8f8f8;
+    }
+    .specialKey,
+    .specialKey rect,
+    .specialKey path {
+      fill: #e4e4e4;
+    }
+    text {
+      fill: #333;
+      font: normal 20px sans-serif;
+      text-align: center;
+    }
+    #Backspace text {
+      font-size: 12px;
+    }
+
+    #Escape { display: none; }
+
+    #row_AE { transform: translate(4px, 4px); }
+    #row_AD { transform: translate(4px, 64px); }
+    #row_AC { transform: translate(4px, 124px); }
+    #row_AB { transform: translate(4px, 184px); }
+    #row_AA { transform: translate(4px, 244px); }
+
+    /* Backslash + Enter */
+    #Enter path.alt,
+    #Enter     .iso,
+    #Backslash .iso,
+    .alt #Enter rect.ansi,
+    .iso #Enter rect.ansi,
+    .iso #Enter text.ansi,
+    .alt #Backslash .ansi,
+    .iso #Backslash .ansi { display: none; }
+    #Enter text.ansi,
+    .alt #Enter     .alt,
+    .iso #Enter     .iso,
+    .iso #Backslash .iso { display: block; }
+    .iso #Backslash { transform: translate(765px, 60px); }
+    .alt #Backslash { transform: translate(780px, -60px); }
+
+    /* Backspace + IntlYen */
+    #IntlYen, #Backspace .alt,
+    .intlYen  #Backspace .ansi { display: none; }
+    .intlYen  #Backspace .alt,
+    .intlYen  #IntlYen { display: block; }
+
+    /* ShiftLeft + IntlBackslash */
+    #IntlBackslash, #ShiftLeft .iso,
+    .intlBackslash  #ShiftLeft .ansi { display: none; }
+    .intlBackslash  #ShiftLeft .iso,
+    .intlBackslash  #IntlBackslash { display: block; }
+
+    /* ShiftRight + IntlRo */
+    #IntlRo, #ShiftRight .abnt,
+    .intlRo  #ShiftRight .ansi { display: none; }
+    .intlRo  #ShiftRight .abnt,
+    .intlRo  #IntlRo { display: block; }
+
+    .specialKey   .ergo,
+    .specialKey   .ol60,
+    .specialKey   .ol50,
+    .specialKey   .ol40,
+    #Space        .ol60,
+    #Space        .ol50,
+    #Space        .ol40,
+    #Backquote    .ol60,
+    #BracketRight .ol60,
+    #Equal        .ol60,
+    .ergo #CapsLock,
+    .ergo #Space      rect,
+    .ergo #Backslash  rect,
+    .ergo .specialKey rect,
+    .ergo .specialKey text { display: none; }
+    .ol50 #Escape,
+    .ol40 #Escape,
+    .ol60 #Space        .ol60,
+    .ol50 #Space        .ol50,
+    .ol40 #Space        .ol40,
+    .ol60 #Backquote    .ol60,
+    .ol60 #BracketRight .ol60,
+    .ol60 #Backslash    .ol60,
+    .ol60 #Equal        .ol60,
+    .ol60 .specialKey   .ol60,
+    .ol50 .specialKey   .ol50,
+    .ol40 .specialKey   .ol40,
+    .ergo .specialKey   .ergo { display: block; }
+
+    .ol50 .pinkyKey, .ol50 #ContextMenu,
+    .ol40 .pinkyKey, .ol40 #ContextMenu,
+    .ol40 #row_AE .numberKey { display: none; }
+
+    .ergo #row_AE       { transform: translate(94px, 4px); }
+    .ergo #row_AD       { transform: translate(64px, 64px); }
+    .ergo #row_AC       { transform: translate(49px, 124px); }
+    .ergo #row_AB       { transform: translate(19px, 184px); }
+
+    .ergo #Tab          { transform: translate(15px, 0px); }
+    .ergo #ShiftLeft    { transform: translate(60px, 0px); }
+    .ergo #ControlLeft  { transform: translate(75px, 0px); }
+    .ergo #MetaLeft     { transform: translate(150px, 0px); }
+    .ergo #AltLeft      { transform: translate(240px, 0px); }
+    .ergo #Space        { transform: translate(315px, 0px); }
+    .ergo #AltRight     { transform: translate(540px, 0px); }
+    .ergo #MetaRight    { transform: translate(630px, 0px); }
+    .ergo #ControlRight { transform: translate(750px, 0px); }
+
+    .ergo .left         { transform: translate(-15px, 0px); }
+    .ergo .right        { transform: translate(15px, 0px); }
+
+    .ol60 .left         { transform: translate(-75px, 0px); }
+    .ol60 #ControlRight { transform: translate(810px, 0px); }
+    .ol60 #Backquote    { transform: translate(-15px, 0px); }
+    .ol60 #ShiftRight   { transform: translate(795px, 0px); }
+    .ol60 #ContextMenu  { transform: translate(750px, 0px); }
+    .ol60 #Backslash    { transform: translate(690px, 120px); }
+    .ol60 #Backspace    { transform: translate(277.5px, 60px); }
+    .ol60 #Enter        { transform: translate(322.5px, 60px); }
+
+    .ol50 #Escape       { transform: translate(-15px, 0px); }
+    .ol50 #Backspace    { transform: translate(660px, 0px); }
+    .ol50 #Enter        { transform: translate(705px, -60px); }
+
+    .ol40 #Escape       { transform: translate(-15px, 120px); }
+    .ol40 #Backspace    { transform: translate(660px, 60px); }
+    .ol40 #Enter        { transform: translate(705px, 0px); }
+
+    [platform="gnu"].ergo .specialKey .win,
+    [platform="gnu"].ergo .specialKey .mac,
+    [platform="win"].ergo .specialKey .gnu,
+    [platform="win"].ergo .specialKey .mac { display: none; }
+    .ergo .specialKey .mac,
+    [platform="gnu"].ergo .specialKey .gnu,
+    [platform="win"].ergo .specialKey .win { display: block; }
+
+    /* swap Alt/Meta for MacOSX */
+    [platform="gnu"].ergo #MetaLeft,
+    [platform="win"].ergo #MetaLeft,
+                    .ergo #AltLeft   { transform: translate(150px, 0px); }
+    [platform="gnu"].ergo #AltLeft,
+    [platform="win"].ergo #AltLeft,
+                    .ergo #MetaLeft  { transform: translate(240px, 0px); }
+    [platform="gnu"].ergo #AltRight,
+    [platform="win"].ergo #AltRight,
+                    .ergo #MetaRight { transform: translate(570px, 0px); }
+    [platform="gnu"].ergo #MetaRight,
+    [platform="win"].ergo #MetaRight,
+                    .ergo #AltRight  { transform: translate(660px, 0px); }
+
+    #NonConvert, #Convert, #KanaMode,
+    #Lang1, #Lang2,
+    #Space .jis,
+    #Space .ks,
+    .ks  #Space .ansi,
+    .ks  #Space .jis,
+    .jis #Space .ansi,
+    .jis #Space .ks { display: none; }
+    .ks  #Space .ks,
+    .jis #NonConvert, .jis #Convert, .jis #KanaMode,
+    .ks #Lang1, .ks #Lang2,
+    .jis #Space .jis { display: block; }
+
+    #Backquote .jis,
+    #CapsLock  .jis,
+    .jis #Backquote .ansi,
+    .jis #CapsLock  .ansi { display: none; }
+    .jis #Backquote .jis,
+    .jis #CapsLock .jis { display: block; }
+
+    #Lang1 text,
+    #Lang2 text,
+    #Convert text,
+    #NonConvert text,
+    .jis #CapsLock text { font-size: 14px; }
+    #KanaMode text,
+    .jis #Backquote text { font-size: 10px; }
+
+    .specialKey .win,
+    .specialKey .gnu {
+      display: none;
+      font-size: 14px;
+    }
+
+    /* display MacOSX by default */
+    [platform="gnu"] .specialKey .win,
+    [platform="gnu"] .specialKey .mac,
+    [platform="win"] .specialKey .gnu,
+    [platform="win"] .specialKey .mac { display: none; }
+    [platform="mac"] .specialKey .mac,
+    [platform="gnu"] .specialKey .gnu,
+    [platform="win"] .specialKey .win { display: block; }
+
+    /* swap Alt/Meta for MacOSX */
+    [platform="gnu"] #MetaLeft,
+    [platform="win"] #MetaLeft,  #AltLeft   { transform: translate(75px, 0px); }
+    [platform="gnu"] #AltLeft,
+    [platform="win"] #AltLeft,   #MetaLeft  { transform: translate(150px, 0px); }
+    [platform="gnu"] #AltRight,
+    [platform="win"] #AltRight,  #MetaRight { transform: translate(600px, 0px); }
+    [platform="gnu"] #MetaRight,
+    [platform="win"] #MetaRight, #AltRight  { transform: translate(675px, 0px); }
+
+    g:target rect, .press rect,
+    g:target path, .press path {
+      fill: #aad;
+    }
+
+    [theme="reach"] .pinkyKey  rect { fill: hsl(  0, 100%, 90%); }
+    [theme="reach"] .numberKey rect { fill: hsl( 42, 100%, 90%); }
+    [theme="reach"] .letterKey rect { fill: hsl(122, 100%, 90%); }
+    [theme="reach"] .homeKey   rect { fill: hsl(122, 100%, 75%); }
+    [theme="reach"] .press     rect { fill: #aaf; }
+
+    [theme="hints"] [finger="m1"] rect { fill: hsl(  0, 100%, 95%); }
+    [theme="hints"] [finger="l2"] rect { fill: hsl( 42, 100%, 85%); }
+    [theme="hints"] [finger="r2"] rect { fill: hsl( 61, 100%, 85%); }
+    [theme="hints"] [finger="l3"] rect,
+    [theme="hints"] [finger="r3"] rect { fill: hsl(136, 100%, 85%); }
+    [theme="hints"] [finger="l4"] rect,
+    [theme="hints"] [finger="r4"] rect { fill: hsl(200, 100%, 85%); }
+    [theme="hints"] [finger="l5"] rect,
+    [theme="hints"] [finger="r5"] rect { fill: hsl(230, 100%, 85%); }
+    [theme="hints"] .specialKey   rect,
+    [theme="hints"] .specialKey   path { fill: #e4e4e4; }
+    [theme="hints"] .hint         rect { fill: #a33; }
+    [theme="hints"] .press        rect { fill: #335; }
+    [theme="hints"] .press        text { fill: #fff; }
+    [theme="hints"] .hint text {
+      font-weight: bold;
+      fill: white;
+    }
+
+    /* dimmed AltGr + bold dead keys */
+    .level3, .level4 { fill: blue; opacity: .5; }
+    .level5, .level6 { fill: green; display: none }
+    .deadKey {
+      fill: red;
+      font-size: 14px;
+    }
+    .diacritic  {
+      font-size: 20px;
+      font-weight: bolder;
+    }
+
+    /* 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; display: block; }
+    .dk .level5, .altgr .level3,
+    .dk .level6, .altgr .level4,
+    .mixed .level3, .mixed .level5 { opacity: 1; display: block;}
+    .dk .level3, .dk .level4,
+    .mixed .level4, .mixed .level6 { display: none; }
+
+    /* Translate level5 upward if mixed */
+    .mixed .level5 {transform: translate(0px, -22.8px);}
+
+    /* Adding Base class option to display Alpha + dk layers */
+    .base .level3, .base .level4 { display: none;}
+    .base .level5  { opacity: 0.5; display: block;}
+
+    @media (prefers-color-scheme: dark) {
+      rect, path { stroke: #777; fill: #444; }
+      .specialKey, .specialKey rect, .specialKey path { fill: #333; }
+      g:target rect, .press rect, g:target path, .press path { fill: #558; }
+      text { fill: #999; }
+      .level3, .level4 { fill: #99f; }
+      .level5, .level6 { fill: #6d6; }
+      .deadKey { fill: #f44; }
+
+      [theme="reach"] .pinkyKey  rect { fill: hsl(  0, 60%, 25%); }
+      [theme="reach"] .numberKey rect { fill: hsl( 42, 60%, 27%); }
+      [theme="reach"] .letterKey rect { fill: hsl(122, 75%, 20%); }
+      [theme="reach"] .homeKey   rect { fill: hsl(122, 70%, 25%); }
+      [theme="reach"] .press     rect { fill: #449; }
+
+      [theme="hints"] [finger="m1"] rect { fill: hsl(  0, 100%, 95%); }
+      [theme="hints"] [finger="l2"] rect { fill: hsl( 42, 100%, 85%); }
+      [theme="hints"] [finger="r2"] rect { fill: hsl( 61, 100%, 85%); }
+      [theme="hints"] [finger="l3"] rect,
+      [theme="hints"] [finger="r3"] rect { fill: hsl(136, 100%, 85%); }
+      [theme="hints"] [finger="l4"] rect,
+      [theme="hints"] [finger="r4"] rect { fill: hsl(200, 100%, 85%); }
+      [theme="hints"] [finger="l5"] rect,
+      [theme="hints"] [finger="r5"] rect { fill: hsl(230, 100%, 85%); }
+      [theme="hints"] .specialKey   rect,
+      [theme="hints"] .specialKey   path { fill: #e4e4e4; }
+      [theme="hints"] .hint         rect { fill: #a33; }
+      [theme="hints"] .press        rect { fill: #335; }
+      [theme="hints"] .press        text { fill: #fff; }
+      [theme="hints"] .hint text {
+        font-weight: bold;
+        fill: white;
+      }
+    }
+  </style>
+  <g id="row_AE" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="Escape" transform="translate(0, 0)">
+        <rect class="ergo" width="67" height="52" rx="5" ry="5" />
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">⎋</text>
+      </g>
+      <g class="pinkyKey" finger="l5" id="Backquote" transform="translate(0, 0)">
+        <rect class="specialKey jis" width="52" height="52" rx="5" ry="5" />
+        <rect class="ansi alt iso" width="52" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="52" rx="5" ry="5" />
+        <text class="jis" width="22" height="22" x="26" y="20">半角</text>
+        <text class="jis" width="22" height="22" x="26" y="32">全角</text>
+        <text class="jis" width="22" height="22" x="26" y="44">漢字</text>
+        <g class="ansi key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">$</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">#</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">–</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="l5" id="Digit1" transform="translate(60, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">"</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">1</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">—</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">„</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="l5" id="Digit2" transform="translate(120, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">«</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">2</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">&lt;</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">“</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="l4" id="Digit3" transform="translate(180, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">»</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">3</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">&gt;</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">”</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="l3" id="Digit4" transform="translate(240, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">(</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">4</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">[</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">≤</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="l2" id="Digit5" transform="translate(300, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">)</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">5</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">]</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">≥</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g class="numberKey" finger="l2" id="Digit6" transform="translate(360, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">@</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">6</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">^</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="r2" id="Digit7" transform="translate(420, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">+</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">7</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">±</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">¬</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="r2" id="Digit8" transform="translate(480, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">-</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">8</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">−</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">¼</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="r3" id="Digit9" transform="translate(540, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">/</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">9</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">÷</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">½</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="r4" id="Digit0" transform="translate(600, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">*</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">0</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">×</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">¾</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="Minus" transform="translate(660, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">=</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">°</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">≠</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="Equal" transform="translate(720, 0)">
+        <rect class="ansi" width="52" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">%</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">`</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">‰</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="IntlYen" transform="translate(780, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key" />
+      </g>
+      <g class="specialKey" finger="r5" id="Backspace" transform="translate(780, 0)">
+        <rect class="ansi" width="112" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="112" rx="5" ry="5" y="-60" />
+        <rect class="ol40 ol50" width="67" height="52" rx="5" ry="5" />
+        <rect class="alt" width="52" height="52" rx="5" ry="5" x="60" />
+        <text class="ansi" width="22" height="22" x="16.4" y="42.8">⌫</text>
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">⌫</text>
+        <text class="alt" width="22" height="22" x="16.4" y="42.8" transform="translate(60, 0)">⌫</text>
+      </g>
+    </g>
+  </g>
+  <g id="row_AD" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="Tab" transform="translate(0, 0)">
+        <rect class="" width="82" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="67" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="16.4" y="42.8">↹</text>
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">↹</text>
+      </g>
+      <g class="letterKey" finger="l5" id="KeyQ" transform="translate(90, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">B</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">|</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">¦</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l4" id="KeyW" transform="translate(150, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">É</text>
+          <text class="level3 deadKey diacritic" width="22" height="22" x="38" y="43.4">´</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l3" id="KeyE" transform="translate(210, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">P</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">&amp;</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">§</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyR" transform="translate(270, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">O</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">œ</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">Œ</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyT" transform="translate(330, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">È</text>
+          <text class="level3 deadKey diacritic" width="22" height="22" x="38" y="43.4">`</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g class="letterKey" finger="r2" id="KeyY" transform="translate(390, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1 deadKey diacritic" width="22" height="22" x="12.8" y="43.4">^</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">!</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">¡</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r2" id="KeyU" transform="translate(450, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">V</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4 deadKey" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r3" id="KeyI" transform="translate(510, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">D</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r4" id="KeyO" transform="translate(570, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">L</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r5" id="KeyP" transform="translate(630, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">J</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="BracketLeft" transform="translate(690, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">Z</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="BracketRight" transform="translate(750, 0)">
+        <rect class="ansi" width="52" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">W</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="Backslash" transform="translate(810, 0)">
+        <rect class="ansi" width="82" height="52" rx="5" ry="5" />
+        <rect class="iso ol60" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">Ç</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g id="row_AC" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="CapsLock" transform="translate(0, 0)">
+        <rect class="" width="97" height="52" rx="5" ry="5" />
+        <text class="ansi" width="22" height="22" x="16.4" y="42.8">⇪</text>
+        <text class="jis" width="22" height="22" x="23" y="42.8">英数</text>
+      </g>
+      <g class="letterKey homeKey" finger="l5" id="KeyA" transform="translate(105, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">A</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">æ</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">Æ</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="l4" id="KeyS" transform="translate(165, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">U</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">ù</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">Ù</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="l3" id="KeyD" transform="translate(225, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">I</text>
+          <text class="level3 deadKey diacritic" width="22" height="22" x="38" y="43.4">¨</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="l2" id="KeyF" transform="translate(285, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">E</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">€</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyG" transform="translate(345, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">,</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">;</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g class="letterKey" finger="r2" id="KeyH" transform="translate(405, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">C</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="r2" id="KeyJ" transform="translate(465, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">T</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="r3" id="KeyK" transform="translate(525, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">S</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">ß</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">ẞ</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="r4" id="KeyL" transform="translate(585, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">R</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="r5" id="Semicolon" transform="translate(645, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">N</text>
+          <text class="level3 deadKey diacritic" width="22" height="22" x="38" y="43.4">~</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="Quote" transform="translate(705, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">M</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="specialKey" finger="r5" id="Enter" transform="translate(765, 0)">
+        <path class="alt" d="M50,-60 h72 a5,5 0 0 1 5,5 v102 a5,5 0 0 1 -5,5 h-117 a5,5 0 0 1 -5,-5 v-42 a5,5 0 0 1 5,-5 h35 a5,5 1 0 0 5,-5 v-50 a5,5 0 0 1 5,-5 z" />
+        <path class="iso" d="M50,-60 h72 a5,5 0 0 1 5,5 v102 a5,5 0 0 1 -5,5 h-57 a5,5 0 0 1 -5,-5 v-50 a5,5 1 0 0 -5,-5 h-5 a5,5 0 0 1 -5,-5 v-42 a5,5 0 0 1 5,-5 z" />
+        <rect class="ansi" width="127" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="112" rx="5" ry="5" y="-60" />
+        <rect class="ol40 ol50" width="67" height="52" rx="5" ry="5" />
+        <text class="ansi alt ergo" width="22" height="22" x="16.4" y="42.8">⏎</text>
+        <text class="iso" width="22" height="22" x="16.4" y="42.8" transform="translate(60, 0)">⏎</text>
+      </g>
+    </g>
+  </g>
+  <g id="row_AB" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="ShiftLeft" transform="translate(0, 0)">
+        <rect class="ansi alt" width="127" height="52" rx="5" ry="5" />
+        <rect class="iso" width="67" height="52" rx="5" ry="5" />
+        <rect class="ol50 ol60" width="67" height="112" rx="5" ry="5" y="-60" />
+        <rect class="ol40" width="67" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="16.4" y="42.8">⇧</text>
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">⇧</text>
+      </g>
+      <g class="letterKey" finger="l5" id="IntlBackslash" transform="translate(75, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">Ê</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">/</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l5" id="KeyZ" transform="translate(135, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">À</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">\</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l4" id="KeyX" transform="translate(195, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">Y</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">{</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l3" id="KeyC" transform="translate(255, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">X</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">}</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyV" transform="translate(315, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">.</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">:</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">…</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">·</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyB" transform="translate(375, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">K</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">~</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g class="letterKey" finger="r2" id="KeyN" transform="translate(435, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">'</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">?</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">¿</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r2" id="KeyM" transform="translate(495, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">Q</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r3" id="Comma" transform="translate(555, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">G</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r4" id="Period" transform="translate(615, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">H</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r5" id="Slash" transform="translate(675, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">F</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="IntlRo" transform="translate(735, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key" />
+      </g>
+      <g class="specialKey" finger="r5" id="ShiftRight" transform="translate(735, 0)">
+        <rect class="ansi" width="157" height="52" rx="5" ry="5" />
+        <rect class="abnt" width="97" height="52" rx="5" ry="5" x="60" />
+        <rect class="ol50 ol60" width="67" height="112" rx="5" ry="5" y="-60" />
+        <rect class="ol40" width="67" height="52" rx="5" ry="5" />
+        <text class="ansi" width="22" height="22" x="16.4" y="42.8">⇧</text>
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">⇧</text>
+        <text class="abnt" width="22" height="22" x="16.4" y="42.8" transform="translate(60, 0)">⇧</text>
+      </g>
+    </g>
+  </g>
+  <g id="row_AA" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="ControlLeft" transform="translate(0, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="67" height="52" rx="5" ry="5" />
+        <text class="win gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Ctrl</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌃</text>
+      </g>
+      <g class="specialKey" finger="l1" id="MetaLeft" transform="translate(75, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="82" height="52" rx="5" ry="5" />
+        <text class="win" width="22" height="22" x="11" y="42.8" text-anchor="start">Win</text>
+        <text class="gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Super</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌘</text>
+      </g>
+      <g class="specialKey" finger="l1" id="AltLeft" transform="translate(150, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="82" height="52" rx="5" ry="5" />
+        <text class="win gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Alt</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌥</text>
+      </g>
+      <g class="specialKey" finger="l1" id="Lang2" transform="translate(225, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="20" y="42.8">한자</text>
+      </g>
+      <g class="specialKey" finger="l1" id="NonConvert" transform="translate(225, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="26" y="42.8">無変換</text>
+      </g>
+    </g>
+    <g class="homeKey" finger="m1" id="Space" transform="translate(225, 0)">
+      <rect class="ansi" width="367" height="52" rx="5" ry="5" />
+      <rect class="ol60" width="322" height="52" rx="5" ry="5" x="-60" />
+      <rect class="ol50 ol40" width="262" height="52" rx="5" ry="5" />
+      <rect class="ks" width="247" height="52" rx="5" ry="5" x="60" />
+      <rect class="jis" width="187" height="52" rx="5" ry="5" x="60" />
+    </g>
+    <g class="right">
+      <g class="specialKey" finger="r1" id="Convert" transform="translate(480, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="26" y="42.8">変換</text>
+      </g>
+      <g class="specialKey" finger="r1" id="KanaMode" transform="translate(540, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="26" y="20">カタカナ</text>
+        <text class="" width="22" height="22" x="26" y="32">ひらがな</text>
+        <text class="" width="22" height="22" x="26" y="44">ローマ字</text>
+      </g>
+      <g class="specialKey" finger="r1" id="Lang1" transform="translate(540, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="20" y="42.8">한/영</text>
+      </g>
+      <g class="specialKey" finger="r1" id="AltRight" transform="translate(600, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="82" height="52" rx="5" ry="5" />
+        <text class="win gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Alt</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌥</text>
+      </g>
+      <g class="specialKey" finger="r1" id="MetaRight" transform="translate(690, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="82" height="52" rx="5" ry="5" />
+        <text class="win" width="22" height="22" x="11" y="42.8" text-anchor="start">Win</text>
+        <text class="gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Super</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌘</text>
+      </g>
+      <g class="specialKey" finger="r5" id="ContextMenu" transform="translate(750, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="16.4" y="42.8">☰</text>
+        <text class="ol60" width="22" height="22" x="16.4" y="42.8">☰</text>
+      </g>
+      <g class="specialKey" finger="r5" id="ControlRight" transform="translate(825, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="67" height="52" rx="5" ry="5" />
+        <text class="win gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Ctrl</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌃</text>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/www/static/img/erglace.svg b/www/static/img/erglace.svg
new file mode 100644
index 00000000..5bc5c39e
--- /dev/null
+++ b/www/static/img/erglace.svg
@@ -0,0 +1,1002 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 300" platform="gnu" theme="" class="iso intlBackslash">
+  <style>
+    rect, path {
+      stroke: #666;
+      stroke-width: .5px;
+      fill: #f8f8f8;
+    }
+    .specialKey,
+    .specialKey rect,
+    .specialKey path {
+      fill: #e4e4e4;
+    }
+    text {
+      fill: #333;
+      font: normal 20px sans-serif;
+      text-align: center;
+    }
+    #Backspace text {
+      font-size: 12px;
+    }
+
+    #Escape { display: none; }
+
+    #row_AE { transform: translate(4px, 4px); }
+    #row_AD { transform: translate(4px, 64px); }
+    #row_AC { transform: translate(4px, 124px); }
+    #row_AB { transform: translate(4px, 184px); }
+    #row_AA { transform: translate(4px, 244px); }
+
+    /* Backslash + Enter */
+    #Enter path.alt,
+    #Enter     .iso,
+    #Backslash .iso,
+    .alt #Enter rect.ansi,
+    .iso #Enter rect.ansi,
+    .iso #Enter text.ansi,
+    .alt #Backslash .ansi,
+    .iso #Backslash .ansi { display: none; }
+    #Enter text.ansi,
+    .alt #Enter     .alt,
+    .iso #Enter     .iso,
+    .iso #Backslash .iso { display: block; }
+    .iso #Backslash { transform: translate(765px, 60px); }
+    .alt #Backslash { transform: translate(780px, -60px); }
+
+    /* Backspace + IntlYen */
+    #IntlYen, #Backspace .alt,
+    .intlYen  #Backspace .ansi { display: none; }
+    .intlYen  #Backspace .alt,
+    .intlYen  #IntlYen { display: block; }
+
+    /* ShiftLeft + IntlBackslash */
+    #IntlBackslash, #ShiftLeft .iso,
+    .intlBackslash  #ShiftLeft .ansi { display: none; }
+    .intlBackslash  #ShiftLeft .iso,
+    .intlBackslash  #IntlBackslash { display: block; }
+
+    /* ShiftRight + IntlRo */
+    #IntlRo, #ShiftRight .abnt,
+    .intlRo  #ShiftRight .ansi { display: none; }
+    .intlRo  #ShiftRight .abnt,
+    .intlRo  #IntlRo { display: block; }
+
+    .specialKey   .ergo,
+    .specialKey   .ol60,
+    .specialKey   .ol50,
+    .specialKey   .ol40,
+    #Space        .ol60,
+    #Space        .ol50,
+    #Space        .ol40,
+    #Backquote    .ol60,
+    #BracketRight .ol60,
+    #Equal        .ol60,
+    .ergo #CapsLock,
+    .ergo #Space      rect,
+    .ergo #Backslash  rect,
+    .ergo .specialKey rect,
+    .ergo .specialKey text { display: none; }
+    .ol50 #Escape,
+    .ol40 #Escape,
+    .ol60 #Space        .ol60,
+    .ol50 #Space        .ol50,
+    .ol40 #Space        .ol40,
+    .ol60 #Backquote    .ol60,
+    .ol60 #BracketRight .ol60,
+    .ol60 #Backslash    .ol60,
+    .ol60 #Equal        .ol60,
+    .ol60 .specialKey   .ol60,
+    .ol50 .specialKey   .ol50,
+    .ol40 .specialKey   .ol40,
+    .ergo .specialKey   .ergo { display: block; }
+
+    .ol50 .pinkyKey, .ol50 #ContextMenu,
+    .ol40 .pinkyKey, .ol40 #ContextMenu,
+    .ol40 #row_AE .numberKey { display: none; }
+
+    .ergo #row_AE       { transform: translate(94px, 4px); }
+    .ergo #row_AD       { transform: translate(64px, 64px); }
+    .ergo #row_AC       { transform: translate(49px, 124px); }
+    .ergo #row_AB       { transform: translate(19px, 184px); }
+
+    .ergo #Tab          { transform: translate(15px, 0px); }
+    .ergo #ShiftLeft    { transform: translate(60px, 0px); }
+    .ergo #ControlLeft  { transform: translate(75px, 0px); }
+    .ergo #MetaLeft     { transform: translate(150px, 0px); }
+    .ergo #AltLeft      { transform: translate(240px, 0px); }
+    .ergo #Space        { transform: translate(315px, 0px); }
+    .ergo #AltRight     { transform: translate(540px, 0px); }
+    .ergo #MetaRight    { transform: translate(630px, 0px); }
+    .ergo #ControlRight { transform: translate(750px, 0px); }
+
+    .ergo .left         { transform: translate(-15px, 0px); }
+    .ergo .right        { transform: translate(15px, 0px); }
+
+    .ol60 .left         { transform: translate(-75px, 0px); }
+    .ol60 #ControlRight { transform: translate(810px, 0px); }
+    .ol60 #Backquote    { transform: translate(-15px, 0px); }
+    .ol60 #ShiftRight   { transform: translate(795px, 0px); }
+    .ol60 #ContextMenu  { transform: translate(750px, 0px); }
+    .ol60 #Backslash    { transform: translate(690px, 120px); }
+    .ol60 #Backspace    { transform: translate(277.5px, 60px); }
+    .ol60 #Enter        { transform: translate(322.5px, 60px); }
+
+    .ol50 #Escape       { transform: translate(-15px, 0px); }
+    .ol50 #Backspace    { transform: translate(660px, 0px); }
+    .ol50 #Enter        { transform: translate(705px, -60px); }
+
+    .ol40 #Escape       { transform: translate(-15px, 120px); }
+    .ol40 #Backspace    { transform: translate(660px, 60px); }
+    .ol40 #Enter        { transform: translate(705px, 0px); }
+
+    [platform="gnu"].ergo .specialKey .win,
+    [platform="gnu"].ergo .specialKey .mac,
+    [platform="win"].ergo .specialKey .gnu,
+    [platform="win"].ergo .specialKey .mac { display: none; }
+    .ergo .specialKey .mac,
+    [platform="gnu"].ergo .specialKey .gnu,
+    [platform="win"].ergo .specialKey .win { display: block; }
+
+    /* swap Alt/Meta for MacOSX */
+    [platform="gnu"].ergo #MetaLeft,
+    [platform="win"].ergo #MetaLeft,
+                    .ergo #AltLeft   { transform: translate(150px, 0px); }
+    [platform="gnu"].ergo #AltLeft,
+    [platform="win"].ergo #AltLeft,
+                    .ergo #MetaLeft  { transform: translate(240px, 0px); }
+    [platform="gnu"].ergo #AltRight,
+    [platform="win"].ergo #AltRight,
+                    .ergo #MetaRight { transform: translate(570px, 0px); }
+    [platform="gnu"].ergo #MetaRight,
+    [platform="win"].ergo #MetaRight,
+                    .ergo #AltRight  { transform: translate(660px, 0px); }
+
+    #NonConvert, #Convert, #KanaMode,
+    #Lang1, #Lang2,
+    #Space .jis,
+    #Space .ks,
+    .ks  #Space .ansi,
+    .ks  #Space .jis,
+    .jis #Space .ansi,
+    .jis #Space .ks { display: none; }
+    .ks  #Space .ks,
+    .jis #NonConvert, .jis #Convert, .jis #KanaMode,
+    .ks #Lang1, .ks #Lang2,
+    .jis #Space .jis { display: block; }
+
+    #Backquote .jis,
+    #CapsLock  .jis,
+    .jis #Backquote .ansi,
+    .jis #CapsLock  .ansi { display: none; }
+    .jis #Backquote .jis,
+    .jis #CapsLock .jis { display: block; }
+
+    #Lang1 text,
+    #Lang2 text,
+    #Convert text,
+    #NonConvert text,
+    .jis #CapsLock text { font-size: 14px; }
+    #KanaMode text,
+    .jis #Backquote text { font-size: 10px; }
+
+    .specialKey .win,
+    .specialKey .gnu {
+      display: none;
+      font-size: 14px;
+    }
+
+    /* display MacOSX by default */
+    [platform="gnu"] .specialKey .win,
+    [platform="gnu"] .specialKey .mac,
+    [platform="win"] .specialKey .gnu,
+    [platform="win"] .specialKey .mac { display: none; }
+    [platform="mac"] .specialKey .mac,
+    [platform="gnu"] .specialKey .gnu,
+    [platform="win"] .specialKey .win { display: block; }
+
+    /* swap Alt/Meta for MacOSX */
+    [platform="gnu"] #MetaLeft,
+    [platform="win"] #MetaLeft,  #AltLeft   { transform: translate(75px, 0px); }
+    [platform="gnu"] #AltLeft,
+    [platform="win"] #AltLeft,   #MetaLeft  { transform: translate(150px, 0px); }
+    [platform="gnu"] #AltRight,
+    [platform="win"] #AltRight,  #MetaRight { transform: translate(600px, 0px); }
+    [platform="gnu"] #MetaRight,
+    [platform="win"] #MetaRight, #AltRight  { transform: translate(675px, 0px); }
+
+    g:target rect, .press rect,
+    g:target path, .press path {
+      fill: #aad;
+    }
+
+    [theme="reach"] .pinkyKey  rect { fill: hsl(  0, 100%, 90%); }
+    [theme="reach"] .numberKey rect { fill: hsl( 42, 100%, 90%); }
+    [theme="reach"] .letterKey rect { fill: hsl(122, 100%, 90%); }
+    [theme="reach"] .homeKey   rect { fill: hsl(122, 100%, 75%); }
+    [theme="reach"] .press     rect { fill: #aaf; }
+
+    [theme="hints"] [finger="m1"] rect { fill: hsl(  0, 100%, 95%); }
+    [theme="hints"] [finger="l2"] rect { fill: hsl( 42, 100%, 85%); }
+    [theme="hints"] [finger="r2"] rect { fill: hsl( 61, 100%, 85%); }
+    [theme="hints"] [finger="l3"] rect,
+    [theme="hints"] [finger="r3"] rect { fill: hsl(136, 100%, 85%); }
+    [theme="hints"] [finger="l4"] rect,
+    [theme="hints"] [finger="r4"] rect { fill: hsl(200, 100%, 85%); }
+    [theme="hints"] [finger="l5"] rect,
+    [theme="hints"] [finger="r5"] rect { fill: hsl(230, 100%, 85%); }
+    [theme="hints"] .specialKey   rect,
+    [theme="hints"] .specialKey   path { fill: #e4e4e4; }
+    [theme="hints"] .hint         rect { fill: #a33; }
+    [theme="hints"] .press        rect { fill: #335; }
+    [theme="hints"] .press        text { fill: #fff; }
+    [theme="hints"] .hint text {
+      font-weight: bold;
+      fill: white;
+    }
+
+    /* dimmed AltGr + bold dead keys */
+    .level3, .level4 { fill: blue; opacity: .5; }
+    .level5, .level6 { fill: green; display: none }
+    .deadKey {
+      fill: red;
+      font-size: 14px;
+    }
+    .diacritic  {
+      font-size: 20px;
+      font-weight: bolder;
+    }
+
+    /* 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; display: block; }
+    .dk .level5, .altgr .level3,
+    .dk .level6, .altgr .level4,
+    .mixed .level3, .mixed .level5 { opacity: 1; display: block;}
+    .dk .level3, .dk .level4,
+    .mixed .level4, .mixed .level6 { display: none; }
+
+    /* Translate level5 upward if mixed */
+    .mixed .level5 {transform: translate(0px, -22.8px);}
+
+    /* Adding Base class option to display Alpha + dk layers */
+    .base .level3, .base .level4 { display: none;}
+    .base .level5  { opacity: 0.5; display: block;}
+
+    @media (prefers-color-scheme: dark) {
+      rect, path { stroke: #777; fill: #444; }
+      .specialKey, .specialKey rect, .specialKey path { fill: #333; }
+      g:target rect, .press rect, g:target path, .press path { fill: #558; }
+      text { fill: #999; }
+      .level3, .level4 { fill: #99f; }
+      .level5, .level6 { fill: #6d6; }
+      .deadKey { fill: #f44; }
+
+      [theme="reach"] .pinkyKey  rect { fill: hsl(  0, 60%, 25%); }
+      [theme="reach"] .numberKey rect { fill: hsl( 42, 60%, 27%); }
+      [theme="reach"] .letterKey rect { fill: hsl(122, 75%, 20%); }
+      [theme="reach"] .homeKey   rect { fill: hsl(122, 70%, 25%); }
+      [theme="reach"] .press     rect { fill: #449; }
+
+      [theme="hints"] [finger="m1"] rect { fill: hsl(  0, 100%, 95%); }
+      [theme="hints"] [finger="l2"] rect { fill: hsl( 42, 100%, 85%); }
+      [theme="hints"] [finger="r2"] rect { fill: hsl( 61, 100%, 85%); }
+      [theme="hints"] [finger="l3"] rect,
+      [theme="hints"] [finger="r3"] rect { fill: hsl(136, 100%, 85%); }
+      [theme="hints"] [finger="l4"] rect,
+      [theme="hints"] [finger="r4"] rect { fill: hsl(200, 100%, 85%); }
+      [theme="hints"] [finger="l5"] rect,
+      [theme="hints"] [finger="r5"] rect { fill: hsl(230, 100%, 85%); }
+      [theme="hints"] .specialKey   rect,
+      [theme="hints"] .specialKey   path { fill: #e4e4e4; }
+      [theme="hints"] .hint         rect { fill: #a33; }
+      [theme="hints"] .press        rect { fill: #335; }
+      [theme="hints"] .press        text { fill: #fff; }
+      [theme="hints"] .hint text {
+        font-weight: bold;
+        fill: white;
+      }
+    }
+  </style>
+  <g id="row_AE" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="Escape" transform="translate(0, 0)">
+        <rect class="ergo" width="67" height="52" rx="5" ry="5" />
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">⎋</text>
+      </g>
+      <g class="pinkyKey" finger="l5" id="Backquote" transform="translate(0, 0)">
+        <rect class="specialKey jis" width="52" height="52" rx="5" ry="5" />
+        <rect class="ansi alt iso" width="52" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="52" rx="5" ry="5" />
+        <text class="jis" width="22" height="22" x="26" y="20">半角</text>
+        <text class="jis" width="22" height="22" x="26" y="32">全角</text>
+        <text class="jis" width="22" height="22" x="26" y="44">漢字</text>
+        <g class="ansi key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">`</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">~</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="l5" id="Digit1" transform="translate(60, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">1</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">!</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₁</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">¹</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">§</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">¡</text>
+        </g>
+      </g>
+      <g class="numberKey" finger="l5" id="Digit2" transform="translate(120, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">2</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">@</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₂</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">²</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">¶</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="l4" id="Digit3" transform="translate(180, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">3</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">#</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₃</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">³</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">°</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="l3" id="Digit4" transform="translate(240, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">4</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">$</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₄</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁴</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">£</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">¢</text>
+        </g>
+      </g>
+      <g class="numberKey" finger="l2" id="Digit5" transform="translate(300, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">5</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">%</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₅</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁵</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">€</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">‰</text>
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g class="numberKey" finger="l2" id="Digit6" transform="translate(360, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">6</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">^</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₆</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁶</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">¥</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="r2" id="Digit7" transform="translate(420, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">7</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">&amp;</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₇</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁷</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">¤</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="r2" id="Digit8" transform="translate(480, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">8</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">*</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₈</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁸</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">„</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="numberKey" finger="r3" id="Digit9" transform="translate(540, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">9</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">(</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₉</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁹</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">“</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">«</text>
+        </g>
+      </g>
+      <g class="numberKey" finger="r4" id="Digit0" transform="translate(600, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">0</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">)</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">₀</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁰</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">”</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">»</text>
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="Minus" transform="translate(660, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">/</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">_</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">÷</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">–</text>
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="Equal" transform="translate(720, 0)">
+        <rect class="ansi" width="52" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">=</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">+</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">≠</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">±</text>
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="IntlYen" transform="translate(780, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key" />
+      </g>
+      <g class="specialKey" finger="r5" id="Backspace" transform="translate(780, 0)">
+        <rect class="ansi" width="112" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="112" rx="5" ry="5" y="-60" />
+        <rect class="ol40 ol50" width="67" height="52" rx="5" ry="5" />
+        <rect class="alt" width="52" height="52" rx="5" ry="5" x="60" />
+        <text class="ansi" width="22" height="22" x="16.4" y="42.8">⌫</text>
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">⌫</text>
+        <text class="alt" width="22" height="22" x="16.4" y="42.8" transform="translate(60, 0)">⌫</text>
+      </g>
+    </g>
+  </g>
+  <g id="row_AD" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="Tab" transform="translate(0, 0)">
+        <rect class="" width="82" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="67" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="16.4" y="42.8">↹</text>
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">↹</text>
+      </g>
+      <g class="letterKey" finger="l5" id="KeyQ" transform="translate(90, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">Y</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">@</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l4" id="KeyW" transform="translate(150, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2 deadKey diacritic" width="22" height="22" x="12.8" y="20.6">★</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">&lt;</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">≤</text>
+          <text class="level5 dk deadKey diacritic" width="22" height="22" x="38" y="43.4">¨</text>
+          <text class="level6 dk deadKey diacritic" width="22" height="22" x="38" y="20.6">¨</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="l3" id="KeyE" transform="translate(210, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">O</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">&gt;</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">≥</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">ô</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Ô</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyR" transform="translate(270, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">F</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">$</text>
+          <text class="level4 deadKey diacritic" width="22" height="22" x="38" y="20.6">¤</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">è</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">È</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyT" transform="translate(330, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">K</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">%</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">‰</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">ù</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Ù</text>
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g class="letterKey" finger="r2" id="KeyY" transform="translate(390, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">V</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">^</text>
+          <text class="level4 deadKey diacritic" width="22" height="22" x="38" y="20.6">^</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">–</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r2" id="KeyU" transform="translate(450, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">P</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">&amp;</text>
+          <text class="level4 deadKey" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r3" id="KeyI" transform="translate(510, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">L</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">*</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">×</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">ñ</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Ñ</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="r4" id="KeyO" transform="translate(570, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">C</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">'</text>
+          <text class="level4 deadKey diacritic" width="22" height="22" x="38" y="20.6">´</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">ç</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Ç</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="r5" id="KeyP" transform="translate(630, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">Q</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">`</text>
+          <text class="level4 deadKey diacritic" width="22" height="22" x="38" y="20.6">`</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="BracketLeft" transform="translate(690, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">[</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">{</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="BracketRight" transform="translate(750, 0)">
+        <rect class="ansi" width="52" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">]</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">}</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="Backslash" transform="translate(810, 0)">
+        <rect class="ansi" width="82" height="52" rx="5" ry="5" />
+        <rect class="iso ol60" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">\</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">|</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g id="row_AC" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="CapsLock" transform="translate(0, 0)">
+        <rect class="" width="97" height="52" rx="5" ry="5" />
+        <text class="ansi" width="22" height="22" x="16.4" y="42.8">⇪</text>
+        <text class="jis" width="22" height="22" x="23" y="42.8">英数</text>
+      </g>
+      <g class="letterKey homeKey" finger="l5" id="KeyA" transform="translate(105, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">I</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">{</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">î</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Î</text>
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="l4" id="KeyS" transform="translate(165, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">A</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">(</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁽</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">æ</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Æ</text>
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="l3" id="KeyD" transform="translate(225, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">E</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">)</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">⁾</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">ê</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Ê</text>
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="l2" id="KeyF" transform="translate(285, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">U</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">}</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">é</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">É</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyG" transform="translate(345, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">,</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">;</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">=</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">≠</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">û</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Û</text>
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g class="letterKey" finger="r2" id="KeyH" transform="translate(405, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">G</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">\</text>
+          <text class="level4 deadKey diacritic" width="22" height="22" x="38" y="20.6">/</text>
+          <text class="level5 dk deadKey diacritic" width="22" height="22" x="38" y="43.4">µ</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="r2" id="KeyJ" transform="translate(465, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">T</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">+</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">±</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">à</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">À</text>
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="r3" id="KeyK" transform="translate(525, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">N</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">-</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">—</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">â</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Â</text>
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="r4" id="KeyL" transform="translate(585, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">S</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">/</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">÷</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">_</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">_</text>
+        </g>
+      </g>
+      <g class="letterKey homeKey" finger="r5" id="Semicolon" transform="translate(645, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">R</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">"</text>
+          <text class="level4 deadKey diacritic" width="22" height="22" x="38" y="20.6">¨</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">œ</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Œ</text>
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="Quote" transform="translate(705, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">'</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">"</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="specialKey" finger="r5" id="Enter" transform="translate(765, 0)">
+        <path class="alt" d="M50,-60 h72 a5,5 0 0 1 5,5 v102 a5,5 0 0 1 -5,5 h-117 a5,5 0 0 1 -5,-5 v-42 a5,5 0 0 1 5,-5 h35 a5,5 1 0 0 5,-5 v-50 a5,5 0 0 1 5,-5 z" />
+        <path class="iso" d="M50,-60 h72 a5,5 0 0 1 5,5 v102 a5,5 0 0 1 -5,5 h-57 a5,5 0 0 1 -5,-5 v-50 a5,5 1 0 0 -5,-5 h-5 a5,5 0 0 1 -5,-5 v-42 a5,5 0 0 1 5,-5 z" />
+        <rect class="ansi" width="127" height="52" rx="5" ry="5" />
+        <rect class="ol60" width="67" height="112" rx="5" ry="5" y="-60" />
+        <rect class="ol40 ol50" width="67" height="52" rx="5" ry="5" />
+        <text class="ansi alt ergo" width="22" height="22" x="16.4" y="42.8">⏎</text>
+        <text class="iso" width="22" height="22" x="16.4" y="42.8" transform="translate(60, 0)">⏎</text>
+      </g>
+    </g>
+  </g>
+  <g id="row_AB" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="ShiftLeft" transform="translate(0, 0)">
+        <rect class="ansi alt" width="127" height="52" rx="5" ry="5" />
+        <rect class="iso" width="67" height="52" rx="5" ry="5" />
+        <rect class="ol50 ol60" width="67" height="112" rx="5" ry="5" y="-60" />
+        <rect class="ol40" width="67" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="16.4" y="42.8">⇧</text>
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">⇧</text>
+      </g>
+      <g class="letterKey" finger="l5" id="IntlBackslash" transform="translate(75, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">&lt;</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">&gt;</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4" />
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l5" id="KeyZ" transform="translate(135, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">J</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">~</text>
+          <text class="level4 deadKey diacritic" width="22" height="22" x="38" y="20.6">~</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l4" id="KeyX" transform="translate(195, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">.</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">:</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">[</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">…</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l3" id="KeyC" transform="translate(255, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4">-</text>
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">?</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">]</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">‑</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">¿</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyV" transform="translate(315, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">H</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">_</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">–</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="l2" id="KeyB" transform="translate(375, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">Z</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">#</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">ŭ</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">Ŭ</text>
+        </g>
+      </g>
+    </g>
+    <g class="right">
+      <g class="letterKey" finger="r2" id="KeyN" transform="translate(435, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">B</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">|</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">¦</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">—</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r2" id="KeyM" transform="translate(495, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">D</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">!</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6">¬</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">·</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">•</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="r3" id="Comma" transform="translate(555, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">M</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">;</text>
+          <text class="level4 deadKey diacritic" width="22" height="22" x="38" y="20.6">¸</text>
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">µ</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="letterKey" finger="r4" id="Period" transform="translate(615, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">W</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">:</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4">ß</text>
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6">ẞ</text>
+        </g>
+      </g>
+      <g class="letterKey" finger="r5" id="Slash" transform="translate(675, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key">
+          <text class="level1" width="22" height="22" x="12.8" y="43.4" />
+          <text class="level2" width="22" height="22" x="12.8" y="20.6">X</text>
+          <text class="level3" width="22" height="22" x="38" y="43.4">?</text>
+          <text class="level4" width="22" height="22" x="38" y="20.6" />
+          <text class="level5 dk" width="22" height="22" x="38" y="43.4" />
+          <text class="level6 dk" width="22" height="22" x="38" y="20.6" />
+        </g>
+      </g>
+      <g class="pinkyKey" finger="r5" id="IntlRo" transform="translate(735, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <g class="key" />
+      </g>
+      <g class="specialKey" finger="r5" id="ShiftRight" transform="translate(735, 0)">
+        <rect class="ansi" width="157" height="52" rx="5" ry="5" />
+        <rect class="abnt" width="97" height="52" rx="5" ry="5" x="60" />
+        <rect class="ol50 ol60" width="67" height="112" rx="5" ry="5" y="-60" />
+        <rect class="ol40" width="67" height="52" rx="5" ry="5" />
+        <text class="ansi" width="22" height="22" x="16.4" y="42.8">⇧</text>
+        <text class="ergo" width="22" height="22" x="16.4" y="42.8">⇧</text>
+        <text class="abnt" width="22" height="22" x="16.4" y="42.8" transform="translate(60, 0)">⇧</text>
+      </g>
+    </g>
+  </g>
+  <g id="row_AA" text-anchor="middle">
+    <g class="left">
+      <g class="specialKey" finger="l5" id="ControlLeft" transform="translate(0, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="67" height="52" rx="5" ry="5" />
+        <text class="win gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Ctrl</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌃</text>
+      </g>
+      <g class="specialKey" finger="l1" id="MetaLeft" transform="translate(75, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="82" height="52" rx="5" ry="5" />
+        <text class="win" width="22" height="22" x="11" y="42.8" text-anchor="start">Win</text>
+        <text class="gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Super</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌘</text>
+      </g>
+      <g class="specialKey" finger="l1" id="AltLeft" transform="translate(150, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="82" height="52" rx="5" ry="5" />
+        <text class="win gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Alt</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌥</text>
+      </g>
+      <g class="specialKey" finger="l1" id="Lang2" transform="translate(225, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="20" y="42.8">한자</text>
+      </g>
+      <g class="specialKey" finger="l1" id="NonConvert" transform="translate(225, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="26" y="42.8">無変換</text>
+      </g>
+    </g>
+    <g class="homeKey" finger="m1" id="Space" transform="translate(225, 0)">
+      <rect class="ansi" width="367" height="52" rx="5" ry="5" />
+      <rect class="ol60" width="322" height="52" rx="5" ry="5" x="-60" />
+      <rect class="ol50 ol40" width="262" height="52" rx="5" ry="5" />
+      <rect class="ks" width="247" height="52" rx="5" ry="5" x="60" />
+      <rect class="jis" width="187" height="52" rx="5" ry="5" x="60" />
+    </g>
+    <g class="right">
+      <g class="specialKey" finger="r1" id="Convert" transform="translate(480, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="26" y="42.8">変換</text>
+      </g>
+      <g class="specialKey" finger="r1" id="KanaMode" transform="translate(540, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="26" y="20">カタカナ</text>
+        <text class="" width="22" height="22" x="26" y="32">ひらがな</text>
+        <text class="" width="22" height="22" x="26" y="44">ローマ字</text>
+      </g>
+      <g class="specialKey" finger="r1" id="Lang1" transform="translate(540, 0)">
+        <rect class="" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="20" y="42.8">한/영</text>
+      </g>
+      <g class="specialKey" finger="r1" id="AltRight" transform="translate(600, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="82" height="52" rx="5" ry="5" />
+        <text class="win gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Alt</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌥</text>
+      </g>
+      <g class="specialKey" finger="r1" id="MetaRight" transform="translate(690, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="82" height="52" rx="5" ry="5" />
+        <text class="win" width="22" height="22" x="11" y="42.8" text-anchor="start">Win</text>
+        <text class="gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Super</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌘</text>
+      </g>
+      <g class="specialKey" finger="r5" id="ContextMenu" transform="translate(750, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="52" height="52" rx="5" ry="5" />
+        <text class="" width="22" height="22" x="16.4" y="42.8">☰</text>
+        <text class="ol60" width="22" height="22" x="16.4" y="42.8">☰</text>
+      </g>
+      <g class="specialKey" finger="r5" id="ControlRight" transform="translate(825, 0)">
+        <rect class="" width="67" height="52" rx="5" ry="5" />
+        <rect class="ergo" width="67" height="52" rx="5" ry="5" />
+        <text class="win gnu" width="22" height="22" x="11" y="42.8" text-anchor="start">Ctrl</text>
+        <text class="mac" width="22" height="22" x="16.4" y="42.8">⌃</text>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/ergol.png b/www/static/img/ergol.png
similarity index 100%
rename from img/ergol.png
rename to www/static/img/ergol.png
diff --git a/img/ergol.svg b/www/static/img/ergol.svg
similarity index 100%
rename from img/ergol.svg
rename to www/static/img/ergol.svg
diff --git a/www/static/img/ergol_1dfh.svg b/www/static/img/ergol_1dfh.svg
new file mode 100644
index 00000000..5f171884
--- /dev/null
+++ b/www/static/img/ergol_1dfh.svg
@@ -0,0 +1,369 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="gnu" viewBox="0 60 900 240">
+
+  <style>
+    rect {
+      stroke: #666;
+      stroke-width: .5px;
+      fill: #fff;
+    }
+    .specialKey,
+    .specialKey rect {
+      fill: #e4e4e4;
+    }
+    .homeKey rect {
+      fill: hsl(222, 100%, 90%);
+    }
+    text {
+      fill: #333;
+      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; }
+
+    .level3, .level4 { fill: green; }
+
+    .deadKey {
+      fill: red;
+      font-size: 16px;
+      transform: translateY(-3px);
+    }
+    .diacritic {
+      font-size: 24px;
+      font-weight: bolder;
+      transform: translateY(8px);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .specialKey rect { fill: #333; }
+      rect, path       { fill: #444; }
+      text             { fill: #bbb; }
+      #odk             { fill: #484; }
+      .level3          { fill: #6b6; }
+      .deadKey         { fill: #f44; }
+      .homeKey rect    { fill: #88f5; }
+    }
+  </style>
+
+  <g id="row_AD">
+    <g class="left">
+      <g class="specialKey" transform="translate(30)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="16.4" y="42.8" text-anchor="middle">↹</text>
+      </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">C</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">O</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">P</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">W</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">J</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="20.6" class="level2">D</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 deadKey">★</text>
+          <text x="38.0" y="43.4" class="level3 deadKey diacritic">¨</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">Y</text>
+          <text x="38.0" y="43.4" class="level3">û</text>
+        </g>
+      </g>
+      <g class="specialKey" transform="translate(690)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="16.4" y="42.8" text-anchor="middle" style="font-size: 12px;">⌫</text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AC">
+    <g class="left">
+      <g class="specialKey" transform="translate(30)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="16.4" y="42.8" text-anchor="middle">⎋</text>
+      </g>
+      <g transform="translate(90)" class="homeKey">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <g class="key" text-anchor="middle">
+          <text x="12.8" y="20.6" class="level2">A</text>
+          <text x="38.0" y="43.4" class="level3">à</text>
+        </g>
+      </g>
+      <g transform="translate(150)" class="homeKey">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <g class="key" text-anchor="middle">
+          <text x="12.8" y="20.6" class="level2">S</text>
+          <text x="38.0" y="43.4" class="level3">é</text>
+        </g>
+      </g>
+      <g transform="translate(210)" class="homeKey">
+        <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)" class="homeKey">
+        <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(330)">
+        <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>
+    <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">L</text>
+          <text x="38.0" y="43.4" class="level3"> </text>
+        </g>
+      </g>
+      <g transform="translate(450)" class="homeKey">
+        <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(510)" class="homeKey">
+        <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 transform="translate(570)" class="homeKey">
+        <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(630)" class="homeKey">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <g class="key" text-anchor="middle">
+          <text x="12.8" y="20.6" class="level2">U</text>
+          <text x="38.0" y="43.4" class="level3">ù</text>
+        </g>
+      </g>
+      <g class="specialKey" transform="translate(690)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="16.4" y="42.8" text-anchor="middle">⏎</text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AB">
+    <g class="left">
+      <g class="specialKey" transform="translate(30)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="16.4" y="42.8" text-anchor="middle">⇧</text>
+      </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="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(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"> </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="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(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">H</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="20.6" class="level2">G</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">Y</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">K</text>
+          <text x="38.0" y="43.4" class="level3"> </text>
+        </g>
+      </g>
+      <g class="specialKey" transform="translate(690)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="16.4" y="42.8" text-anchor="middle">⇧</text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AA">
+    <g class="left">
+      <g class="specialKey" transform="translate(30)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="11.0" y="42.8" class="win gnu">Ctrl</text>
+        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌃</text>
+      </g>
+      <g class="specialKey" transform="translate(90)">
+        <rect width="82" height="52" rx="5" ry="5"/>
+        <text x="11.0" y="42.8" class="win">Win</text>
+        <text x="11.0" y="42.8" class="gnu">Super</text>
+        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌘</text>
+      </g>
+      <g class="specialKey" transform="translate(180)">
+        <rect width="82" height="52" rx="5" ry="5"/>
+        <text x="11.0" y="42.8" class="win gnu">Alt</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"/>
+    </g>
+    <g class="right">
+      <g class="specialKey" transform="translate(510)">
+        <rect width="82" height="52" rx="5" ry="5"/>
+        <text x="11.0" y="42.8" class="win gnu">AltGr</text>
+        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
+      </g>
+      <g class="specialKey" transform="translate(600)">
+        <rect width="82" height="52" rx="5" ry="5"/>
+        <text x="11.0" y="42.8" class="win">Win</text>
+        <text x="11.0" y="42.8" class="gnu">Super</text>
+        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌘</text>
+      </g>
+      <g class="specialKey" transform="translate(690)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="11.0" y="42.8" class="win gnu">Ctrl</text>
+        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌃</text>
+      </g>
+    </g>
+  </g>
+
+</svg>
diff --git a/img/ergol_1dk.svg b/www/static/img/ergol_1dk.svg
similarity index 100%
rename from img/ergol_1dk.svg
rename to www/static/img/ergol_1dk.svg
diff --git a/www/static/img/ergol_1dk_de.svg b/www/static/img/ergol_1dk_de.svg
new file mode 100644
index 00000000..5b4836f8
--- /dev/null
+++ b/www/static/img/ergol_1dk_de.svg
@@ -0,0 +1,237 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="gnu" viewBox="60 60 780 240">
+
+  <style>
+    rect, path {
+      fill: #f8f8f8;
+      stroke: #666;
+      stroke-width: .5px;
+    }
+    text {
+      fill: #333;
+      font: normal 20px sans-serif;
+      text-align: center;
+      text-anchor: middle;
+    }
+
+    .specialKey text { font-size: 14px; }
+    .specialKey rect { fill: #e4e4e4; }
+
+    #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); }
+
+    #odk    { fill: #7e7; }
+    .level3 { fill: green; }
+
+    .layer, .level1, .level2 { opacity: 0.5; }
+
+    .deadKey {
+      fill: red;
+      opacity: 0.8;
+      font-size: 24px;
+    }
+
+    .diacritic { font-weight: bolder; }
+
+    @media (prefers-color-scheme: dark) {
+      .specialKey rect { fill: #333; }
+      rect, path       { fill: #444; }
+      text             { fill: #bbb; }
+      #odk             { fill: #484; }
+      .deadKey         { fill: #f44; }
+      .level3          { fill: #6b6; }
+    }
+  </style>
+
+  <g id="row_AD">
+    <g class="left">
+      <g transform="translate(90)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">Q</text>
+        <text x="38.0" y="43.4" class="level3"> </text>
+      </g>
+      <g transform="translate(150)">
+        <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="level3"> </text>
+      </g>
+      <g transform="translate(210)">
+        <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="level3">ö</text>
+      </g>
+      <g transform="translate(270)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">P</text>
+        <text x="38.0" y="43.4" class="level3"> </text>
+      </g>
+      <g transform="translate(330)">
+        <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="level3"> </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">J</text>
+        <text x="38.0" y="43.4" class="level3"> </text>
+      </g>
+      <g transform="translate(450)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">M</text>
+        <text x="38.0" y="43.4" class="level3"> </text>
+      </g>
+      <g transform="translate(510)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">D</text>
+        <text x="38.0" y="43.4" class="level3">_</text>
+      </g>
+      <g transform="translate(570)">
+        <rect width="52" height="52" rx="5" ry="5" id="odk"/>
+        <text x="15" y="24" class="diacritic deadKey">★</text>
+        <text x="38" y="55" class="diacritic deadKey"> </text>
+      </g>
+      <g transform="translate(630)">
+        <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="level3"> </text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AC">
+    <g class="left">
+      <g transform="translate(90)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">A</text>
+        <text x="38.0" y="43.4" class="level3">ä</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="level3">ß</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="level3">ë</text>
+      </g>
+      <g transform="translate(270)">
+        <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="43.4" class="level3"> </text>
+      </g>
+      <g transform="translate(330)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="43.4" class="level1">,</text>
+        <text x="12.8" y="20.6" class="level2">;</text>
+        <text x="38.0" y="43.4" class="level3">·</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">L</text>
+        <text x="38.0" y="43.4" class="level3"> </text>
+      </g>
+      <g transform="translate(450)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">R</text>
+        <text x="38.0" y="43.4" class="level3"> </text>
+      </g>
+      <g transform="translate(510)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">T</text>
+        <text x="38.0" y="43.4" class="level3"> </text>
+      </g>
+      <g transform="translate(570)">
+        <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="level3">ï</text>
+      </g>
+      <g transform="translate(630)">
+        <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="level3">ü</text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AB">
+    <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="level3"> </text>
+      </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="level3"> </text>
+      </g>
+      <g transform="translate(210)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="43.4" class="level1">-</text>
+        <text x="12.8" y="20.6" class="level2">?</text>
+        <text x="38.0" y="43.4" class="level3">‑</text>
+      </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="level3"> </text>
+      </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>
+        <text x="38.0" y="43.4" class="level3">—</text>
+      </g>
+    </g>
+    <g class="right">
+      <g transform="translate(390)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="43.4" class="level1">.</text>
+        <text x="12.8" y="20.6" class="level2">:</text>
+        <text x="38.0" y="43.4" class="level3">…</text>
+      </g>
+      <g transform="translate(450)">
+        <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="level3"> </text>
+      </g>
+      <g transform="translate(510)">
+        <rect width="52" height="52" rx="5" ry="5"/>
+        <text x="12.8" y="20.6" class="level2">G</text>
+        <text x="38.0" y="43.4" class="deadKey">α</text>
+      </g>
+      <g transform="translate(570)">
+        <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="level3"> </text>
+      </g>
+      <g transform="translate(630)">
+        <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="level3"> </text>
+      </g>
+    </g>
+  </g>
+
+  <g id="row_AA">
+    <g transform="translate(180)" class="specialKey">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="26" y="42.8" class="layer">Shift</text>
+    </g>
+    <g transform="translate(270)">
+      <rect width="232" height="52" rx="5" ry="5"/>
+    </g>
+    <g transform="translate(510)" class="specialKey">
+      <rect width="82" height="52" rx="5" ry="5"/>
+      <text x="26" y="42.8" class="layer">AltGr</text>
+    </g>
+  </g>
+
+</svg>
diff --git a/img/ergol_altgr.svg b/www/static/img/ergol_altgr.svg
similarity index 100%
rename from img/ergol_altgr.svg
rename to www/static/img/ergol_altgr.svg
diff --git a/img/ergol_en.svg b/www/static/img/ergol_en.svg
similarity index 100%
rename from img/ergol_en.svg
rename to www/static/img/ergol_en.svg
diff --git a/img/ergol_fr.svg b/www/static/img/ergol_fr.svg
similarity index 100%
rename from img/ergol_fr.svg
rename to www/static/img/ergol_fr.svg
diff --git a/img/index.html b/www/static/img/index.html
similarity index 100%
rename from img/index.html
rename to www/static/img/index.html
diff --git a/www/static/layouts b/www/static/layouts
new file mode 120000
index 00000000..510a8b4f
--- /dev/null
+++ b/www/static/layouts
@@ -0,0 +1 @@
+../../layouts
\ No newline at end of file