keymap.html

<title>splitmac</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chivo:wght@700;900&family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap">
<style>
:root {
  --bg: #e9e9e7;
  --bg-raise: #f6f6f5;
  --fg: #16171b;
  --fg-dim: #5c5d67;
  --fg-faint: #8b8c96;
  --rule: #cfcfcc;
  --rule-soft: #dedeDB;

  /* the deck stays dark in both themes — it is a MacBook, after all */
  --chassis: #cdcdca;
  --chassis-edge: #b6b6b2;
  --deck: #17181c;
  --cap: #232429;
  --cap-edge: #34353d;
  --cap-lip: #101116;
  --ghost: #6b6c78;
  --sub: #9a9ba6;

  --c-alpha-bg: #232429;   --c-alpha-fg: #f3f3f6;
  --c-punct-bg: #16304c;   --c-punct-fg: #8ecbff;
  --c-trainer-bg: #000000; --c-trainer-fg: #63636b;
  --c-gate-bg: #17392f;    --c-gate-fg: #8ff0cd;
  --c-layer-bg: #372450;   --c-layer-fg: #d3aaff;
  --c-mod-bg: #48320f;     --c-mod-fg: #ffcf7a;
  --c-magic-bg: #431f38;   --c-magic-fg: #ffa1d5;
  --c-system-bg: #10383a;  --c-system-fg: #7fe6e0;
  --c-dead-bg: #1b1c20;    --c-dead-fg: #55565f;

  --shadow: 0 24px 60px -28px rgba(10, 12, 20, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0b0d;
    --bg-raise: #121317;
    --fg: #eef0f4;
    --fg-dim: #9b9da8;
    --fg-faint: #6e707b;
    --rule: #24262c;
    --rule-soft: #1a1c21;
    --chassis: #1c1d22;
    --chassis-edge: #2b2d34;
    --deck: #0f1013;
    --shadow: 0 24px 70px -30px rgba(0, 0, 0, .9);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0b0d;
  --bg-raise: #121317;
  --fg: #eef0f4;
  --fg-dim: #9b9da8;
  --fg-faint: #6e707b;
  --rule: #24262c;
  --rule-soft: #1a1c21;
  --chassis: #1c1d22;
  --chassis-edge: #2b2d34;
  --deck: #0f1013;
  --shadow: 0 24px 70px -30px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px 96px;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* ---------- masthead ---------- */

header { padding-top: 64px; display: flex; flex-direction: column; gap: 18px; }

.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

h1 {
  font-family: Chivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(42px, 8vw, 88px);
  line-height: .92;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}

.standfirst {
  max-width: 60ch;
  font-size: 20px;
  color: var(--fg-dim);
  margin: 0;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg-faint);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.meta a { color: var(--fg-dim); text-decoration-color: var(--rule); }
.meta a:hover { color: var(--fg); }

/* ---------- layer switcher ---------- */

.switch {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  margin: 0 -28px;
  padding: 10px 28px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.switch::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid transparent;
  background: none;
  color: var(--fg-dim);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 7px 13px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.tab:hover { color: var(--fg); background: var(--rule-soft); }
.tab[aria-selected="true"] {
  color: var(--fg);
  border-color: var(--rule);
  background: var(--bg-raise);
}
.tab:focus-visible { outline: 2px solid var(--c-layer-fg); outline-offset: 2px; }

/* ---------- the keyboard ---------- */

.stage { display: flex; flex-direction: column; gap: 20px; }

.stage-head { display: flex; flex-direction: column; gap: 4px; }
.stage-head h2 {
  font-family: Chivo, sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -.02em;
  margin: 0;
}
.stage-head p { margin: 0; color: var(--fg-dim); max-width: 68ch; }

.chassis {
  background: linear-gradient(180deg, var(--chassis) 0%, var(--chassis-edge) 100%);
  border: 1px solid var(--chassis-edge);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.deck {
  background: var(--deck);
  border-radius: 11px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 940px;
}
.krow { display: flex; gap: 6px; }

.key {
  position: relative;
  height: 62px;
  border-radius: 8px;
  background: var(--cap-bg, var(--c-dead-bg));
  border: 1px solid var(--cap-edge);
  box-shadow: 0 2px 0 var(--cap-lip);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 3px 5px;
  color: var(--cap-fg, var(--c-dead-fg));
  transition: background .16s, color .16s, transform .06s, box-shadow .06s;
}
.krow.fnrow .key { height: 44px; }

.key .cap-ghost {
  position: absolute;
  top: 4px;
  right: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8.5px;
  color: var(--ghost);
  letter-spacing: .02em;
  pointer-events: none;
}
.key .legend {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.12;
  text-align: center;
  white-space: pre-line;
}
.key .legend.small { font-size: 10.5px; font-weight: 500; letter-spacing: -.01em; }
.key .legend.tiny  { font-size: 9px;   font-weight: 500; }
.key .sub {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8.5px;
  color: var(--sub);
  text-align: center;
  line-height: 1.1;
}

.key.down {
  transform: translateY(2px);
  box-shadow: 0 0 0 1px var(--cap-fg, var(--c-dead-fg)),
              0 0 22px -4px var(--cap-fg, var(--c-dead-fg));
}

.split { display: flex; flex-direction: column; gap: 2px; }
.split .key { height: 30px; border-radius: 5px; }
.krow .split .key .legend { font-size: 11px; }
.krow .split .key .legend.tiny,
.krow .split .key .legend.small { font-size: 8px; line-height: 1.05; }
.krow .split .key .cap-ghost { top: 2px; right: 3px; }

/* ---------- readout ---------- */

.readout {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 26px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--fg-dim);
}
.readout .pk {
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 1px 7px;
  color: var(--fg);
  background: var(--bg-raise);
}
.readout .arrow { color: var(--fg-faint); }
.readout strong { color: var(--fg); font-weight: 700; }
.readout .hint { color: var(--fg-faint); font-style: italic; font-family: "Source Serif 4", serif; }

/* ---------- legend + prose ---------- */

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--fg-dim);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.swatch { display: inline-flex; align-items: center; gap: 7px; }
.swatch i {
  width: 11px; height: 11px; border-radius: 3px; display: block;
  border: 1px solid var(--cap-edge);
}

section.prose { display: flex; flex-direction: column; gap: 14px; }
section.prose h3 {
  font-family: Chivo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
section.prose p { margin: 0; max-width: 68ch; }
section.prose code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .86em;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 5px;
}

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }

table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule-soft); }
th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); font-weight: 500;
}
td:first-child {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; color: var(--fg); white-space: nowrap;
}

footer {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
footer a { color: var(--fg-dim); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px 64px; }
  .switch { margin: 0 -16px; padding: 10px 16px; }
  header { padding-top: 40px; }
}
</style>

<div class="wrap">

<header>
  <div class="eyebrow">Karabiner-Elements · MacBook Air · US layout</div>
  <h1>splitmac</h1>
  <p class="standfirst">Split-keyboard ergonomics on a stock MacBook: the right
  hand moves a column over, the home row becomes modifiers and four layers, and
  twenty-five keys you should stop reaching for are switched off.</p>
  <div class="meta">
    <span>No firmware</span>
    <span>No external board</span>
    <span>One karabiner.json</span>
    <a href="https://github.com/noodleweapon/splitmac">github.com/noodleweapon/splitmac</a>
  </div>
</header>

<div class="switch" role="tablist" aria-label="Keymap layers" id="tabs"></div>

<div class="stage">
  <div class="stage-head">
    <h2 id="layer-name"></h2>
    <p id="layer-sub"></p>
  </div>

  <div class="chassis">
    <div class="deck" id="deck"></div>
  </div>

  <div class="readout" id="readout">
    <span class="hint">Press keys on your own keyboard — the matching cap lights up.
    Hold Caps Lock or Return, then hold S, P, M or H to preview a layer live.</span>
  </div>

  <div class="legend-row" id="legend"></div>
</div>

<div class="cols">
  <section class="prose">
    <h3>Why a gate</h3>
    <p>Home-row mods misfire when you type fast — the roll from <code>t</code> to
    <code>h</code> becomes a stray Command press. Here they simply do not exist
    until you hold Caps Lock or Return. Let go and the home row is eight plain
    letters again.</p>
    <p>Only one layer can be live at a time: every layer key is conditioned on the
    other three being off, so a fumbled two-key hold does nothing rather than
    something surprising.</p>
  </section>

  <section class="prose">
    <h3>The trainer</h3>
    <p>The number row, <code>esc</code>, <code>tab</code>, <code>delete</code>, the
    arrow cluster and the <code>Y</code>/<code>H</code>/<code>B</code> positions all
    type <code>HERROPERS</code>. It is deliberately embarrassing. Every trapped key
    has a home-row replacement, and after about a week you stop reaching.</p>
    <p>Delete the rule named <em>Bad-habit trainer</em> when the habit is gone. Or
    keep it. Nobody is judging.</p>
  </section>
</div>

<section class="prose">
  <h3>Thumbs and modifiers</h3>
  <table>
    <thead><tr><th>Physical key</th><th>Does</th></tr></thead>
    <tbody>
      <tr><td>Left Shift</td><td>types <code>'</code></td></tr>
      <tr><td>Right Shift</td><td>types <code>;</code></td></tr>
      <tr><td>Left Command</td><td>tap = Return, hold = Shift</td></tr>
      <tr><td>Right Option</td><td>tap = Tab, hold = Shift</td></tr>
      <tr><td>Right Command</td><td>Delete</td></tr>
      <tr><td>Left Option</td><td>Control</td></tr>
      <tr><td>Caps Lock / Return</td><td>hold arms the layers; tap does nothing</td></tr>
      <tr><td>Shift + <code>/</code></td><td>Escape</td></tr>
      <tr><td>F6</td><td>toggles the entire keymap off and on</td></tr>
    </tbody>
  </table>
</section>

<footer>
  <span>Layout data generated from karabiner.json</span>
  <a href="https://github.com/getreuer/qmk-keymap">Reference: @getreuer's QMK keymap</a>
  <a href="https://karabiner-elements.pqrs.org/">Karabiner-Elements</a>
  <a href="https://github.com/GalileoBlues/Gallium">Gallium v2 by GalileoBlues</a>
</footer>

</div>

<script>
const DATA = {"rows": [[{"id": "escape", "cap": "esc", "w": 1.5, "code": "Escape"}, {"id": "f1", "cap": "F1", "w": 1.0, "code": "F1"}, {"id": "f2", "cap": "F2", "w": 1.0, "code": "F2"}, {"id": "f3", "cap": "F3", "w": 1.0, "code": "F3"}, {"id": "f4", "cap": "F4", "w": 1.0, "code": "F4"}, {"id": "f5", "cap": "F5", "w": 1.0, "code": "F5"}, {"id": "f6", "cap": "F6", "w": 1.0, "code": "F6"}, {"id": "f7", "cap": "F7", "w": 1.0, "code": "F7"}, {"id": "f8", "cap": "F8", "w": 1.0, "code": "F8"}, {"id": "f9", "cap": "F9", "w": 1.0, "code": "F9"}, {"id": "f10", "cap": "F10", "w": 1.0, "code": "F10"}, {"id": "f11", "cap": "F11", "w": 1.0, "code": "F11"}, {"id": "f12", "cap": "F12", "w": 1.0, "code": "F12"}, {"id": "touch_id", "cap": "⏻", "w": 1.0, "code": ""}], [{"id": "grave_accent_and_tilde", "cap": "`", "w": 1.0, "code": "Backquote"}, {"id": "1", "cap": "1", "w": 1.0, "code": "Digit1"}, {"id": "2", "cap": "2", "w": 1.0, "code": "Digit2"}, {"id": "3", "cap": "3", "w": 1.0, "code": "Digit3"}, {"id": "4", "cap": "4", "w": 1.0, "code": "Digit4"}, {"id": "5", "cap": "5", "w": 1.0, "code": "Digit5"}, {"id": "6", "cap": "6", "w": 1.0, "code": "Digit6"}, {"id": "7", "cap": "7", "w": 1.0, "code": "Digit7"}, {"id": "8", "cap": "8", "w": 1.0, "code": "Digit8"}, {"id": "9", "cap": "9", "w": 1.0, "code": "Digit9"}, {"id": "0", "cap": "0", "w": 1.0, "code": "Digit0"}, {"id": "hyphen", "cap": "-", "w": 1.0, "code": "Minus"}, {"id": "equal_sign", "cap": "=", "w": 1.0, "code": "Equal"}, {"id": "delete_or_backspace", "cap": "delete", "w": 1.5, "code": "Backspace"}], [{"id": "tab", "cap": "tab", "w": 1.5, "code": "Tab"}, {"id": "q", "cap": "Q", "w": 1.0, "code": "KeyQ"}, {"id": "w", "cap": "W", "w": 1.0, "code": "KeyW"}, {"id": "e", "cap": "E", "w": 1.0, "code": "KeyE"}, {"id": "r", "cap": "R", "w": 1.0, "code": "KeyR"}, {"id": "t", "cap": "T", "w": 1.0, "code": "KeyT"}, {"id": "y", "cap": "Y", "w": 1.0, "code": "KeyY"}, {"id": "u", "cap": "U", "w": 1.0, "code": "KeyU"}, {"id": "i", "cap": "I", "w": 1.0, "code": "KeyI"}, {"id": "o", "cap": "O", "w": 1.0, "code": "KeyO"}, {"id": "p", "cap": "P", "w": 1.0, "code": "KeyP"}, {"id": "open_bracket", "cap": "[", "w": 1.0, "code": "BracketLeft"}, {"id": "close_bracket", "cap": "]", "w": 1.0, "code": "BracketRight"}, {"id": "backslash", "cap": "\\", "w": 1.0, "code": "Backslash"}], [{"id": "caps_lock", "cap": "caps", "w": 1.75, "code": "CapsLock"}, {"id": "a", "cap": "A", "w": 1.0, "code": "KeyA"}, {"id": "s", "cap": "S", "w": 1.0, "code": "KeyS"}, {"id": "d", "cap": "D", "w": 1.0, "code": "KeyD"}, {"id": "f", "cap": "F", "w": 1.0, "code": "KeyF"}, {"id": "g", "cap": "G", "w": 1.0, "code": "KeyG"}, {"id": "h", "cap": "H", "w": 1.0, "code": "KeyH"}, {"id": "j", "cap": "J", "w": 1.0, "code": "KeyJ"}, {"id": "k", "cap": "K", "w": 1.0, "code": "KeyK"}, {"id": "l", "cap": "L", "w": 1.0, "code": "KeyL"}, {"id": "semicolon", "cap": ";", "w": 1.0, "code": "Semicolon"}, {"id": "quote", "cap": "'", "w": 1.0, "code": "Quote"}, {"id": "return_or_enter", "cap": "return", "w": 1.75, "code": "Enter"}], [{"id": "left_shift", "cap": "shift", "w": 2.25, "code": "ShiftLeft"}, {"id": "z", "cap": "Z", "w": 1.0, "code": "KeyZ"}, {"id": "x", "cap": "X", "w": 1.0, "code": "KeyX"}, {"id": "c", "cap": "C", "w": 1.0, "code": "KeyC"}, {"id": "v", "cap": "V", "w": 1.0, "code": "KeyV"}, {"id": "b", "cap": "B", "w": 1.0, "code": "KeyB"}, {"id": "n", "cap": "N", "w": 1.0, "code": "KeyN"}, {"id": "m", "cap": "M", "w": 1.0, "code": "KeyM"}, {"id": "comma", "cap": ",", "w": 1.0, "code": "Comma"}, {"id": "period", "cap": ".", "w": 1.0, "code": "Period"}, {"id": "slash", "cap": "/", "w": 1.0, "code": "Slash"}, {"id": "right_shift", "cap": "shift", "w": 2.25, "code": "ShiftRight"}], [{"id": "fn", "cap": "fn", "w": 1.0, "code": "Fn"}, {"id": "left_control", "cap": "control", "w": 1.0, "code": "ControlLeft"}, {"id": "left_option", "cap": "option", "w": 1.25, "code": "AltLeft"}, {"id": "left_command", "cap": "command", "w": 1.25, "code": "MetaLeft"}, {"id": "spacebar", "cap": "", "w": 4.75, "code": "Space"}, {"id": "right_command", "cap": "command", "w": 1.25, "code": "MetaRight"}, {"id": "right_option", "cap": "option", "w": 1.0, "code": "AltRight"}, {"id": "left_arrow", "cap": "←", "w": 1.0, "code": "ArrowLeft"}, {"id": "__updown", "cap": "", "w": 1.0, "code": ""}, {"id": "right_arrow", "cap": "→", "w": 1.0, "code": "ArrowRight"}]], "rowWidth": 14.5, "layers": [{"id": "base", "name": "Base", "sub": "Gallium v2, the row-staggered variant. Right hand sits one column right of QWERTY home.", "full": true, "hold": "", "keys": {"q": {"main": "B", "sub": "", "cls": "alpha"}, "w": {"main": "L", "sub": "", "cls": "alpha"}, "e": {"main": "D", "sub": "", "cls": "alpha"}, "r": {"main": "C", "sub": "", "cls": "alpha"}, "t": {"main": "V", "sub": "", "cls": "alpha"}, "u": {"main": "J", "sub": "", "cls": "alpha"}, "i": {"main": "F", "sub": "", "cls": "alpha"}, "o": {"main": "O", "sub": "", "cls": "alpha"}, "p": {"main": "U", "sub": "", "cls": "alpha"}, "open_bracket": {"main": "✦", "sub": "magic", "cls": "magic"}, "a": {"main": "N", "sub": "", "cls": "alpha"}, "s": {"main": "R", "sub": "⌥ opt", "cls": "mod"}, "d": {"main": "T", "sub": "⌘ cmd", "cls": "mod"}, "f": {"main": "S", "sub": "№ num", "cls": "layer"}, "g": {"main": "G", "sub": "", "cls": "alpha"}, "j": {"main": "Y", "sub": "", "cls": "alpha"}, "k": {"main": "H", "sub": "→ nav", "cls": "layer"}, "l": {"main": "A", "sub": "⌘ cmd", "cls": "mod"}, "semicolon": {"main": "E", "sub": "⌥ opt", "cls": "mod"}, "quote": {"main": "I", "sub": "", "cls": "alpha"}, "z": {"main": "X", "sub": "", "cls": "alpha"}, "x": {"main": "Q", "sub": "", "cls": "alpha"}, "c": {"main": "M", "sub": "& sym", "cls": "layer"}, "v": {"main": "W", "sub": "", "cls": "alpha"}, "m": {"main": "K", "sub": "", "cls": "alpha"}, "comma": {"main": "P", "sub": "# sym", "cls": "layer"}, "period": {"main": ",", "sub": "⇧ ⌥C", "cls": "alpha"}, "slash": {"main": ".", "sub": "⇧ esc", "cls": "alpha"}, "caps_lock": {"main": "hold =\nlayers", "sub": "tap: nothing", "cls": "gate"}, "return_or_enter": {"main": "hold =\nlayers", "sub": "tap: nothing", "cls": "gate"}, "left_shift": {"main": "Z", "sub": "", "cls": "alpha"}, "right_shift": {"main": "'", "sub": "", "cls": "punct"}, "left_option": {"main": "control", "sub": "", "cls": "mod"}, "left_command": {"main": "⇧ shift", "sub": "tap: return", "cls": "mod"}, "right_command": {"main": "⌫ delete", "sub": "", "cls": "mod"}, "right_option": {"main": "⇧ shift", "sub": "tap: tab", "cls": "mod"}, "spacebar": {"main": "space", "sub": "", "cls": "dead"}, "fn": {"main": "fn", "sub": "", "cls": "dead"}, "touch_id": {"main": "⏻", "sub": "", "cls": "dead"}, "f3": {"main": "⌘⇧⌃ 4", "sub": "clip shot", "cls": "system"}, "f4": {"main": "Raycast", "sub": "", "cls": "system"}, "f6": {"main": "toggle\nkeymap", "sub": "on / off", "cls": "system"}, "f1": {"main": "☀−", "sub": "", "cls": "dead"}, "f2": {"main": "☀+", "sub": "", "cls": "dead"}, "f5": {"main": "mic", "sub": "", "cls": "dead"}, "f7": {"main": "⏮", "sub": "", "cls": "dead"}, "f8": {"main": "⏯", "sub": "", "cls": "dead"}, "f9": {"main": "⏭", "sub": "", "cls": "dead"}, "f10": {"main": "mute", "sub": "", "cls": "dead"}, "f11": {"main": "vol −", "sub": "", "cls": "dead"}, "f12": {"main": "vol +", "sub": "", "cls": "dead"}, "grave_accent_and_tilde": {"main": "Disabled", "sub": "", "cls": "trainer"}, "1": {"main": "Disabled", "sub": "", "cls": "trainer"}, "2": {"main": "Disabled", "sub": "", "cls": "trainer"}, "3": {"main": "Disabled", "sub": "", "cls": "trainer"}, "4": {"main": "Disabled", "sub": "", "cls": "trainer"}, "5": {"main": "Disabled", "sub": "", "cls": "trainer"}, "6": {"main": "Disabled", "sub": "", "cls": "trainer"}, "7": {"main": "Disabled", "sub": "", "cls": "trainer"}, "8": {"main": "Disabled", "sub": "", "cls": "trainer"}, "9": {"main": "Disabled", "sub": "", "cls": "trainer"}, "0": {"main": "Disabled", "sub": "", "cls": "trainer"}, "hyphen": {"main": "Disabled", "sub": "", "cls": "trainer"}, "equal_sign": {"main": "Disabled", "sub": "", "cls": "trainer"}, "delete_or_backspace": {"main": "Disabled", "sub": "", "cls": "trainer"}, "tab": {"main": "Disabled", "sub": "", "cls": "trainer"}, "close_bracket": {"main": "Disabled", "sub": "", "cls": "trainer"}, "backslash": {"main": "Disabled", "sub": "", "cls": "trainer"}, "escape": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_control": {"main": "Disabled", "sub": "", "cls": "trainer"}, "y": {"main": "Disabled", "sub": "", "cls": "trainer"}, "h": {"main": "Disabled", "sub": "", "cls": "trainer"}, "b": {"main": "Disabled", "sub": "", "cls": "trainer"}, "n": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "right_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "up_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "down_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "__updown": {"main": "Disabled", "sub": "", "cls": "trainer"}}}, {"id": "mods", "name": "Hold gate + home-row mods", "sub": "Hold caps or return to arm. Then hold a home-row key for its modifier or layer.", "full": false, "hold": "", "keys": {"grave_accent_and_tilde": {"main": "Disabled", "sub": "", "cls": "trainer"}, "1": {"main": "Disabled", "sub": "", "cls": "trainer"}, "2": {"main": "Disabled", "sub": "", "cls": "trainer"}, "3": {"main": "Disabled", "sub": "", "cls": "trainer"}, "4": {"main": "Disabled", "sub": "", "cls": "trainer"}, "5": {"main": "Disabled", "sub": "", "cls": "trainer"}, "6": {"main": "Disabled", "sub": "", "cls": "trainer"}, "7": {"main": "Disabled", "sub": "", "cls": "trainer"}, "8": {"main": "Disabled", "sub": "", "cls": "trainer"}, "9": {"main": "Disabled", "sub": "", "cls": "trainer"}, "0": {"main": "Disabled", "sub": "", "cls": "trainer"}, "hyphen": {"main": "Disabled", "sub": "", "cls": "trainer"}, "equal_sign": {"main": "Disabled", "sub": "", "cls": "trainer"}, "delete_or_backspace": {"main": "Disabled", "sub": "", "cls": "trainer"}, "tab": {"main": "Disabled", "sub": "", "cls": "trainer"}, "close_bracket": {"main": "Disabled", "sub": "", "cls": "trainer"}, "backslash": {"main": "Disabled", "sub": "", "cls": "trainer"}, "escape": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_control": {"main": "Disabled", "sub": "", "cls": "trainer"}, "y": {"main": "Disabled", "sub": "", "cls": "trainer"}, "h": {"main": "Disabled", "sub": "", "cls": "trainer"}, "b": {"main": "Disabled", "sub": "", "cls": "trainer"}, "n": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "right_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "up_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "down_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "__updown": {"main": "Disabled", "sub": "", "cls": "trainer"}, "s": {"main": "⌥", "sub": "left", "cls": "mod"}, "d": {"main": "⌘", "sub": "left", "cls": "mod"}, "l": {"main": "⌘", "sub": "left", "cls": "mod"}, "semicolon": {"main": "⌥", "sub": "left", "cls": "mod"}, "f": {"main": "№", "sub": "numbers", "cls": "layer"}, "k": {"main": "→", "sub": "nav", "cls": "layer"}, "c": {"main": "&", "sub": "sym R", "cls": "layer"}, "comma": {"main": "#", "sub": "sym L", "cls": "layer"}, "caps_lock": {"main": "hold", "sub": "arms all of it", "cls": "gate"}, "return_or_enter": {"main": "hold", "sub": "arms all of it", "cls": "gate"}}}, {"id": "number", "name": "Number layer", "sub": "caps/return + hold S (physical F). Digits land on the right hand.", "full": false, "hold": "f", "keys": {"grave_accent_and_tilde": {"main": "Disabled", "sub": "", "cls": "trainer"}, "1": {"main": "Disabled", "sub": "", "cls": "trainer"}, "2": {"main": "Disabled", "sub": "", "cls": "trainer"}, "3": {"main": "Disabled", "sub": "", "cls": "trainer"}, "4": {"main": "Disabled", "sub": "", "cls": "trainer"}, "5": {"main": "Disabled", "sub": "", "cls": "trainer"}, "6": {"main": "Disabled", "sub": "", "cls": "trainer"}, "7": {"main": "Disabled", "sub": "", "cls": "trainer"}, "8": {"main": "Disabled", "sub": "", "cls": "trainer"}, "9": {"main": "Disabled", "sub": "", "cls": "trainer"}, "0": {"main": "Disabled", "sub": "", "cls": "trainer"}, "hyphen": {"main": "Disabled", "sub": "", "cls": "trainer"}, "equal_sign": {"main": "Disabled", "sub": "", "cls": "trainer"}, "delete_or_backspace": {"main": "Disabled", "sub": "", "cls": "trainer"}, "tab": {"main": "Disabled", "sub": "", "cls": "trainer"}, "close_bracket": {"main": "Disabled", "sub": "", "cls": "trainer"}, "backslash": {"main": "Disabled", "sub": "", "cls": "trainer"}, "escape": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_control": {"main": "Disabled", "sub": "", "cls": "trainer"}, "y": {"main": "Disabled", "sub": "", "cls": "trainer"}, "h": {"main": "Disabled", "sub": "", "cls": "trainer"}, "b": {"main": "Disabled", "sub": "", "cls": "trainer"}, "n": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "right_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "up_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "down_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "__updown": {"main": "Disabled", "sub": "", "cls": "trainer"}, "i": {"main": "7", "sub": "", "cls": "punct"}, "o": {"main": "8", "sub": "", "cls": "punct"}, "p": {"main": "9", "sub": "", "cls": "punct"}, "open_bracket": {"main": "~", "sub": "", "cls": "punct"}, "k": {"main": "0", "sub": "", "cls": "punct"}, "l": {"main": "1", "sub": "", "cls": "punct"}, "semicolon": {"main": "2", "sub": "", "cls": "punct"}, "quote": {"main": "3", "sub": "", "cls": "punct"}, "comma": {"main": "4", "sub": "", "cls": "punct"}, "period": {"main": "5", "sub": "", "cls": "punct"}, "slash": {"main": "6", "sub": "", "cls": "punct"}, "right_shift": {"main": "_", "sub": "", "cls": "punct"}, "f": {"main": "hold", "sub": "S", "cls": "layer"}}}, {"id": "sym-left", "name": "Symbol layer — left", "sub": "caps/return + hold P (physical comma). Math, brackets and shell glyphs.", "full": false, "hold": "comma", "keys": {"grave_accent_and_tilde": {"main": "Disabled", "sub": "", "cls": "trainer"}, "1": {"main": "Disabled", "sub": "", "cls": "trainer"}, "2": {"main": "Disabled", "sub": "", "cls": "trainer"}, "3": {"main": "Disabled", "sub": "", "cls": "trainer"}, "4": {"main": "Disabled", "sub": "", "cls": "trainer"}, "5": {"main": "Disabled", "sub": "", "cls": "trainer"}, "6": {"main": "Disabled", "sub": "", "cls": "trainer"}, "7": {"main": "Disabled", "sub": "", "cls": "trainer"}, "8": {"main": "Disabled", "sub": "", "cls": "trainer"}, "9": {"main": "Disabled", "sub": "", "cls": "trainer"}, "0": {"main": "Disabled", "sub": "", "cls": "trainer"}, "hyphen": {"main": "Disabled", "sub": "", "cls": "trainer"}, "equal_sign": {"main": "Disabled", "sub": "", "cls": "trainer"}, "delete_or_backspace": {"main": "Disabled", "sub": "", "cls": "trainer"}, "tab": {"main": "Disabled", "sub": "", "cls": "trainer"}, "close_bracket": {"main": "Disabled", "sub": "", "cls": "trainer"}, "backslash": {"main": "Disabled", "sub": "", "cls": "trainer"}, "escape": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_control": {"main": "Disabled", "sub": "", "cls": "trainer"}, "y": {"main": "Disabled", "sub": "", "cls": "trainer"}, "h": {"main": "Disabled", "sub": "", "cls": "trainer"}, "b": {"main": "Disabled", "sub": "", "cls": "trainer"}, "n": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "right_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "up_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "down_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "__updown": {"main": "Disabled", "sub": "", "cls": "trainer"}, "q": {"main": "^", "sub": "", "cls": "punct"}, "w": {"main": "*", "sub": "", "cls": "punct"}, "e": {"main": "-", "sub": "", "cls": "punct"}, "r": {"main": "|", "sub": "", "cls": "punct"}, "a": {"main": "+", "sub": "", "cls": "punct"}, "s": {"main": "!", "sub": "", "cls": "punct"}, "d": {"main": "/", "sub": "", "cls": "punct"}, "f": {"main": "=", "sub": "", "cls": "punct"}, "left_shift": {"main": "`", "sub": "", "cls": "punct"}, "z": {"main": "<", "sub": "", "cls": "punct"}, "x": {"main": ">", "sub": "", "cls": "punct"}, "c": {"main": "@", "sub": "", "cls": "punct"}, "comma": {"main": "hold", "sub": "P", "cls": "layer"}}}, {"id": "sym-right", "name": "Symbol layer — right", "sub": "caps/return + hold M (physical C). Pairs, punctuation and money.", "full": false, "hold": "c", "keys": {"grave_accent_and_tilde": {"main": "Disabled", "sub": "", "cls": "trainer"}, "1": {"main": "Disabled", "sub": "", "cls": "trainer"}, "2": {"main": "Disabled", "sub": "", "cls": "trainer"}, "3": {"main": "Disabled", "sub": "", "cls": "trainer"}, "4": {"main": "Disabled", "sub": "", "cls": "trainer"}, "5": {"main": "Disabled", "sub": "", "cls": "trainer"}, "6": {"main": "Disabled", "sub": "", "cls": "trainer"}, "7": {"main": "Disabled", "sub": "", "cls": "trainer"}, "8": {"main": "Disabled", "sub": "", "cls": "trainer"}, "9": {"main": "Disabled", "sub": "", "cls": "trainer"}, "0": {"main": "Disabled", "sub": "", "cls": "trainer"}, "hyphen": {"main": "Disabled", "sub": "", "cls": "trainer"}, "equal_sign": {"main": "Disabled", "sub": "", "cls": "trainer"}, "delete_or_backspace": {"main": "Disabled", "sub": "", "cls": "trainer"}, "tab": {"main": "Disabled", "sub": "", "cls": "trainer"}, "close_bracket": {"main": "Disabled", "sub": "", "cls": "trainer"}, "backslash": {"main": "Disabled", "sub": "", "cls": "trainer"}, "escape": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_control": {"main": "Disabled", "sub": "", "cls": "trainer"}, "y": {"main": "Disabled", "sub": "", "cls": "trainer"}, "h": {"main": "Disabled", "sub": "", "cls": "trainer"}, "b": {"main": "Disabled", "sub": "", "cls": "trainer"}, "n": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "right_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "up_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "down_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "__updown": {"main": "Disabled", "sub": "", "cls": "trainer"}, "i": {"main": ";", "sub": "", "cls": "punct"}, "o": {"main": "&", "sub": "", "cls": "punct"}, "p": {"main": "$", "sub": "", "cls": "punct"}, "open_bracket": {"main": "#", "sub": "", "cls": "punct"}, "k": {"main": "[", "sub": "", "cls": "punct"}, "l": {"main": "]", "sub": "", "cls": "punct"}, "semicolon": {"main": "(", "sub": "", "cls": "punct"}, "quote": {"main": ")", "sub": "", "cls": "punct"}, "comma": {"main": ":", "sub": "", "cls": "punct"}, "period": {"main": "\\", "sub": "", "cls": "punct"}, "slash": {"main": "%", "sub": "", "cls": "punct"}, "right_shift": {"main": "?", "sub": "", "cls": "punct"}, "c": {"main": "hold", "sub": "M", "cls": "layer"}}}, {"id": "nav", "name": "Navigation layer", "sub": "caps/return + hold H (physical K). Bottom row jumps five at a time.", "full": false, "hold": "k", "keys": {"grave_accent_and_tilde": {"main": "Disabled", "sub": "", "cls": "trainer"}, "1": {"main": "Disabled", "sub": "", "cls": "trainer"}, "2": {"main": "Disabled", "sub": "", "cls": "trainer"}, "3": {"main": "Disabled", "sub": "", "cls": "trainer"}, "4": {"main": "Disabled", "sub": "", "cls": "trainer"}, "5": {"main": "Disabled", "sub": "", "cls": "trainer"}, "6": {"main": "Disabled", "sub": "", "cls": "trainer"}, "7": {"main": "Disabled", "sub": "", "cls": "trainer"}, "8": {"main": "Disabled", "sub": "", "cls": "trainer"}, "9": {"main": "Disabled", "sub": "", "cls": "trainer"}, "0": {"main": "Disabled", "sub": "", "cls": "trainer"}, "hyphen": {"main": "Disabled", "sub": "", "cls": "trainer"}, "equal_sign": {"main": "Disabled", "sub": "", "cls": "trainer"}, "delete_or_backspace": {"main": "Disabled", "sub": "", "cls": "trainer"}, "tab": {"main": "Disabled", "sub": "", "cls": "trainer"}, "close_bracket": {"main": "Disabled", "sub": "", "cls": "trainer"}, "backslash": {"main": "Disabled", "sub": "", "cls": "trainer"}, "escape": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_control": {"main": "Disabled", "sub": "", "cls": "trainer"}, "y": {"main": "Disabled", "sub": "", "cls": "trainer"}, "h": {"main": "Disabled", "sub": "", "cls": "trainer"}, "b": {"main": "Disabled", "sub": "", "cls": "trainer"}, "n": {"main": "Disabled", "sub": "", "cls": "trainer"}, "left_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "right_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "up_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "down_arrow": {"main": "Disabled", "sub": "", "cls": "trainer"}, "__updown": {"main": "Disabled", "sub": "", "cls": "trainer"}, "a": {"main": "←", "sub": "", "cls": "punct"}, "s": {"main": "↑", "sub": "", "cls": "punct"}, "d": {"main": "↓", "sub": "", "cls": "punct"}, "f": {"main": "→", "sub": "", "cls": "punct"}, "left_shift": {"main": "←×5", "sub": "", "cls": "punct"}, "z": {"main": "↑×5", "sub": "", "cls": "punct"}, "x": {"main": "↓×5", "sub": "", "cls": "punct"}, "c": {"main": "→×5", "sub": "", "cls": "punct"}, "k": {"main": "hold", "sub": "H", "cls": "layer"}}}]};

const U = 66, GAP = 6;
const CLASSES = [
  ["alpha", "base letters"], ["punct", "punctuation & digits"],
  ["layer", "layer key"], ["mod", "modifier"],
  ["gate", "hold gate"], ["magic", "magic key"], ["system", "app / system"],
  ["trainer", "disabled — types HERROPERS"],
];

const deck = document.getElementById("deck");
const tabs = document.getElementById("tabs");
const readout = document.getElementById("readout");
const nameEl = document.getElementById("layer-name");
const subEl = document.getElementById("layer-sub");

const cells = new Map();   // key id -> element
const byCode = new Map();  // KeyboardEvent.code -> key id

// ---- build the board -------------------------------------------------------

DATA.rows.forEach((row, r) => {
  const el = document.createElement("div");
  el.className = "krow" + (r === 0 ? " fnrow" : "");
  row.forEach(k => {
    if (k.id === "__updown") {
      const box = document.createElement("div");
      box.className = "split";
      box.style.width = (k.w * U - GAP) + "px";
      ["up_arrow", "down_arrow"].forEach(id => box.appendChild(makeKey(
        { id, cap: id === "up_arrow" ? "↑" : "↓", w: k.w }, true)));
      el.appendChild(box);
      return;
    }
    el.appendChild(makeKey(k, false));
  });
  deck.appendChild(el);
});

function makeKey(k, inSplit) {
  const el = document.createElement("div");
  el.className = "key";
  if (!inSplit) el.style.width = (k.w * U - GAP) + "px";
  el.dataset.id = k.id;

  const ghost = document.createElement("span");
  ghost.className = "cap-ghost";
  ghost.textContent = k.cap || "";
  el.appendChild(ghost);

  const legend = document.createElement("span");
  legend.className = "legend";
  el.appendChild(legend);

  const sub = document.createElement("span");
  sub.className = "sub";
  el.appendChild(sub);

  cells.set(k.id, el);
  const code = k.code || (k.id === "up_arrow" ? "ArrowUp" : k.id === "down_arrow" ? "ArrowDown" : "");
  if (code) byCode.set(code, k.id);
  return el;
}

// ---- paint a layer ---------------------------------------------------------

let current = DATA.layers[0];

function paint(layer) {
  current = layer;
  nameEl.textContent = layer.name;
  subEl.textContent = layer.sub;
  cells.forEach((el, id) => {
    const e = layer.keys[id];
    const cls = e ? e.cls : "dead";
    el.style.setProperty("--cap-bg", `var(--c-${cls}-bg)`);
    el.style.setProperty("--cap-fg", `var(--c-${cls}-fg)`);
    const legend = el.querySelector(".legend");
    const sub = el.querySelector(".sub");
    const main = e ? e.main : "";
    legend.textContent = main;
    legend.className = "legend" +
      (main.length <= 3 && !main.includes("\n") ? "" :
       main.length <= 9 && !main.includes("\n") ? " small" : " tiny");
    sub.textContent = e ? e.sub : "";
  });
  [...tabs.children].forEach(b =>
    b.setAttribute("aria-selected", String(b.dataset.layer === layer.id)));
}

DATA.layers.forEach(l => {
  const b = document.createElement("button");
  b.className = "tab";
  b.setAttribute("role", "tab");
  b.dataset.layer = l.id;
  b.textContent = l.name;
  b.addEventListener("click", () => { pinned = l; paint(l); });
  tabs.appendChild(b);
});

// ---- legend ----------------------------------------------------------------

const legendRow = document.getElementById("legend");
CLASSES.forEach(([cls, label]) => {
  const s = document.createElement("span");
  s.className = "swatch";
  s.innerHTML = `<i style="background:var(--c-${cls}-bg);box-shadow:inset 0 0 0 1px var(--c-${cls}-fg)"></i>${label}`;
  legendRow.appendChild(s);
});

// ---- live keyboard ---------------------------------------------------------

let pinned = DATA.layers[0];
let gate = false;
const held = new Set();
const layerByHold = {};
DATA.layers.forEach(l => { if (l.hold) layerByHold[l.hold] = l; });

const base = DATA.layers[0];
const GLYPH = { number: "S", "sym-left": "P", "sym-right": "M", nav: "H" };

function describe(id) {
  const e = current.keys[id] || base.keys[id];
  if (!e) return null;
  return e;
}

function report(id) {
  const cap = cells.get(id)?.querySelector(".cap-ghost")?.textContent || id;
  const e = describe(id);
  if (!e) { readout.innerHTML = `<span class="pk">${cap}</span> <span class="arrow">is untouched</span>`; return; }
  const main = (e.main || "").replace(/\n/g, " ");
  let html = `<span class="pk">${cap}</span><span class="arrow">&rarr;</span><strong>${main}</strong>`;
  if (e.sub) html += `<span class="arrow">·</span><span>${e.sub}</span>`;
  readout.innerHTML = html;
}

function resolve() {
  if (gate) {
    for (const h of held) {
      if (layerByHold[h]) return layerByHold[h];
    }
    return DATA.layers.find(l => l.id === "mods") || pinned;
  }
  return pinned;
}

addEventListener("keydown", ev => {
  const id = byCode.get(ev.code);
  if (ev.code === "Tab" || ev.metaKey || ev.ctrlKey) return;  // leave the browser alone
  if (!id) return;
  ev.preventDefault();
  held.add(id);
  cells.get(id)?.classList.add("down");
  if (id === "caps_lock" || id === "return_or_enter") gate = true;
  paint(resolve());
  report(id);
});

addEventListener("keyup", ev => {
  const id = byCode.get(ev.code);
  if (!id) return;
  held.delete(id);
  cells.get(id)?.classList.remove("down");
  if (id === "caps_lock" || id === "return_or_enter") gate = false;
  paint(resolve());
});

addEventListener("blur", () => {
  held.clear();
  gate = false;
  cells.forEach(el => el.classList.remove("down"));
  paint(pinned);
});

cells.forEach((el, id) => {
  el.addEventListener("pointerenter", () => report(id));
});

paint(pinned);
</script>