:root{--key-bg:hsl(var(--muted));--key-color:hsl(var(--muted-foreground));--key-bg-active:hsl(var(--primary));--key-color-active:hsl(var(--primary-foreground));--key-bg-error:hsl(var(--destructive));--key-color-error:hsl(var(--destructive-foreground));--keyboard-bg:hsl(var(--background))}#keymap{font-size:1.25rem;display:grid;grid-auto-rows:auto;justify-content:center;white-space:nowrap;gap:.3125rem;margin-top:1rem;-webkit-user-select:none;user-select:none}.row{height:2.5rem;gap:.3125rem}.keymapKey{display:flex;background-color:var(--key-bg);color:var(--key-color);border-radius:var(--roundness,.375rem);text-align:center;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;position:relative;font-size:.875rem;font-weight:500}.keymapKey.activeKey{color:var(--keyboard-bg);background-color:var(--key-bg-active);border-color:var(--key-bg-active);opacity:.85}.keymapKey.spacebarFull{width:100%}.keymapKey.keySpace.left,.keymapKey.keySpace.right{width:100%;opacity:0}.keymapKey.flash{animation:flashKey 1s cubic-bezier(.16,1,.3,1) forwards}.keymapKey.hiddenKey,.keymapKey.hideKey,.keymapKey.invisible{opacity:0}.keymapKey .bump{width:.5em;height:.1em;position:absolute;border-radius:.1em;bottom:.2em}.keymapKey .bump,.keymapKey.activeKey .bump{background:var(--keyboard-bg)}.keymapMatrixSplitSpacer,.keymapSplitSpacer,.keymapStaggerSplitSpacer{display:none}.keymapKey.animate-key-flash,.keymapKey.animate-key-flash-error{animation:flashKey .5s cubic-bezier(.16,1,.3,1) forwards}.r1{grid-template-columns:0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr}.r1,.r2{display:grid;gap:.3125rem}.r2{grid-template-columns:.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.25rem}.r3{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr}.r3,.r4{display:grid;gap:.3125rem}.r4{grid-template-columns:.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.75fr}.r5{display:grid;grid-template-columns:3.5fr 6fr 3.5fr;font-size:1.25rem;gap:.3125rem}.r5 .keySpace{font-size:.625rem}.r5[data-row5-has-alpha=true][data-row5-grid="3-1"]{grid-template-columns:4fr 4fr 1fr 4fr}.r5[data-row5-has-alpha=true][data-row5-grid="1-3"]{grid-template-columns:4fr 1fr 4fr 4fr}@keyframes flashKey{0%{transform:scale(1.08)}to{transform:scale(1)}}#keymap.matrix .r1,#keymap.matrix .r2,#keymap.matrix .r3,#keymap.matrix .r4{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.3125rem}#keymap.matrix .r5{grid-template-columns:1fr 3fr 4fr 3fr 1fr;gap:.3125rem}#keymap.matrix .r5[data-row5-has-alpha=true][data-row5-grid="3-1"]{grid-template-columns:1fr 2fr 3fr 1fr 5fr}#keymap.matrix .r5[data-row5-has-alpha=true][data-row5-grid="1-3"]{grid-template-columns:2fr 3fr 1fr 3fr 3fr}#keymap.split .keymapSplitSpacer,#keymap.split .keymapStaggerSplitSpacer{display:block}#keymap.split .r1{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;gap:.3125rem}#keymap.split .r2{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.3125rem}#keymap.split .r3{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;gap:.3125rem}#keymap.split .r4{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;gap:.3125rem}#keymap.split .r5{grid-template-columns:5fr 3fr 1fr 3fr 4.5fr;gap:.3125rem}#keymap.split .r5[data-row5-has-alpha=true][data-row5-grid="3-1"]{grid-template-columns:5fr 3fr 1fr 1fr 6.5fr}#keymap.split .r5[data-row5-has-alpha=true][data-row5-grid="1-3"]{grid-template-columns:7fr 1fr 1fr 3fr 4.5fr}#keymap.split .keySpace.left,#keymap.split .keySpace.right{opacity:1}#keymap.split_matrix .keymapSplitSpacer{display:block;width:2.5rem;height:2.5rem}#keymap.split_matrix .keymapStaggerSplitSpacer{display:none}#keymap.split_matrix .keymapMatrixSplitSpacer{display:block;width:2.5rem;height:2.5rem}#keymap.split_matrix .r1,#keymap.split_matrix .r2,#keymap.split_matrix .r3,#keymap.split_matrix .r4{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.3125rem}#keymap.split_matrix .r5{grid-template-columns:1fr 2fr 3fr 1fr 3fr 2fr 1fr;gap:.3125rem}#keymap.split_matrix .r5[data-row5-has-alpha=true][data-row5-grid="3-1"]{grid-template-columns:2fr 1fr 3fr 1fr 1fr 2fr 3fr}#keymap.split_matrix .r5[data-row5-has-alpha=true][data-row5-grid="1-3"]{grid-template-columns:4fr 1fr 1fr 1fr 3fr 1fr 2fr}#keymap.split_matrix .keySpace.left,#keymap.split_matrix .keySpace.right{opacity:1}#keymap.steno .r2,#keymap.steno .r3{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.3125rem}#keymap.steno .r4{display:grid;grid-template-columns:2.6fr 1fr 1fr .1fr 1fr 1fr 3.65fr;gap:.3125rem}#keymap.steno .keymapSplitSpacer{display:block}#keymap.steno .r2 .keymapKey:first-child,#keymap.steno .r2 .keymapKey:nth-child(5){height:5.25rem}#keymap.steno .r3 .keymapKey:first-child,#keymap.steno .r3 .keymapKey:nth-child(5){visibility:hidden}#keymap.steno_matrix .r2,#keymap.steno_matrix .r3{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.3125rem}#keymap.steno_matrix .r4{display:grid;grid-template-columns:3.25fr 1fr 1fr 1fr 1fr 1fr 3.25fr;gap:.3125rem}#keymap.alice .keymapSplitSpacer,#keymap.steno_matrix .keymapSplitSpacer{display:block}#keymap.alice .r4 .keymapSplitSpacer{display:none}#keymap.alice .keymapStaggerSplitSpacer{display:block}#keymap.alice .r1{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;gap:.3125rem}#keymap.alice .r2{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.3125rem}#keymap.alice .r3{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;gap:.3125rem}#keymap.alice .r4{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;gap:.3125rem}#keymap.alice .r5{grid-template-columns:5fr 3fr 1fr 3fr 4.5fr;gap:.3125rem}#keymap.alice .r1 .keymapKey:nth-child(2){margin-left:45%}#keymap.alice .r1 .keymapKey:nth-child(3){margin-top:-2px;margin-left:45%}#keymap.alice .r1 .keymapKey:nth-child(4),#keymap.alice .r1 .keymapKey:nth-child(5),#keymap.alice .r1 .keymapKey:nth-child(6),#keymap.alice .r1 .keymapKey:nth-child(7){transform:rotate(10deg);margin-left:45%}#keymap.alice .r1 .keymapKey:nth-child(4){margin-top:3px}#keymap.alice .r1 .keymapKey:nth-child(5){margin-top:10px}#keymap.alice .r1 .keymapKey:nth-child(6){margin-top:17px}#keymap.alice .r1 .keymapKey:nth-child(7){margin-top:24px}#keymap.alice .r1 .keymapKey:nth-child(10),#keymap.alice .r1 .keymapKey:nth-child(11),#keymap.alice .r1 .keymapKey:nth-child(12),#keymap.alice .r1 .keymapKey:nth-child(9){transform:rotate(-10deg);margin-left:-48%}#keymap.alice .r1 .keymapKey:nth-child(12){margin-top:-1px}#keymap.alice .r1 .keymapKey:nth-child(11){margin-top:6px}#keymap.alice .r1 .keymapKey:nth-child(10){margin-top:13px}#keymap.alice .r1 .keymapKey:nth-child(9){margin-top:20px}#keymap.alice .r1 .keymapKey:nth-child(13),#keymap.alice .r1 .keymapKey:nth-child(14){margin-left:-40%}#keymap.alice .r2 .keymapKey:nth-child(2){margin-left:20%}#keymap.alice .r2 .keymapKey:nth-child(3),#keymap.alice .r2 .keymapKey:nth-child(4),#keymap.alice .r2 .keymapKey:nth-child(5),#keymap.alice .r2 .keymapKey:nth-child(6){transform:rotate(10deg);margin-left:45%}#keymap.alice .r2 .keymapKey:nth-child(10),#keymap.alice .r2 .keymapKey:nth-child(4){margin-top:8px}#keymap.alice .r2 .keymapKey:nth-child(5),#keymap.alice .r2 .keymapKey:nth-child(9){margin-top:15px}#keymap.alice .r2 .keymapKey:nth-child(6),#keymap.alice .r2 .keymapKey:nth-child(8){margin-top:22px}#keymap.alice .r2 .keymapKey:nth-child(10),#keymap.alice .r2 .keymapKey:nth-child(11),#keymap.alice .r2 .keymapKey:nth-child(8),#keymap.alice .r2 .keymapKey:nth-child(9){transform:rotate(-10deg);margin-left:-12%}#keymap.alice .r3 .keymapKey:nth-child(2){margin-left:-5px}#keymap.alice .r3 .keymapKey:nth-child(3),#keymap.alice .r3 .keymapKey:nth-child(4),#keymap.alice .r3 .keymapKey:nth-child(5),#keymap.alice .r3 .keymapKey:nth-child(6){margin-left:-1px;transform:rotate(10deg)}#keymap.alice .r3 .keymapKey:nth-child(10),#keymap.alice .r3 .keymapKey:nth-child(4){margin-top:8px}#keymap.alice .r3 .keymapKey:nth-child(5),#keymap.alice .r3 .keymapKey:nth-child(9){margin-top:15px}#keymap.alice .r3 .keymapKey:nth-child(6),#keymap.alice .r3 .keymapKey:nth-child(8){margin-top:22px}#keymap.alice .r3 .keymapKey:nth-child(10),#keymap.alice .r3 .keymapKey:nth-child(11),#keymap.alice .r3 .keymapKey:nth-child(8),#keymap.alice .r3 .keymapKey:nth-child(9){transform:rotate(-10deg);margin-left:-25%}#keymap.alice .r4 .keymapKey:nth-child(2){margin-left:-18px}#keymap.alice .r4 .keymapKey:nth-child(3){margin-left:-15px}#keymap.alice .r4 .keymapKey:nth-child(4),#keymap.alice .r4 .keymapKey:nth-child(5),#keymap.alice .r4 .keymapKey:nth-child(6),#keymap.alice .r4 .keymapKey:nth-child(7){margin-left:-11px;transform:rotate(10deg);margin-top:2px}#keymap.alice .r4 .keymapKey:nth-child(12){margin-top:4px;margin-left:-5px}#keymap.alice .r4 .keymapKey:nth-child(11),#keymap.alice .r4 .keymapKey:nth-child(5){margin-top:10px}#keymap.alice .r4 .keymapKey:nth-child(10),#keymap.alice .r4 .keymapKey:nth-child(6){margin-top:18px}#keymap.alice .r4 .keymapKey:nth-child(7){margin-top:24px}#keymap.alice .r4 .keymapKey:nth-child(10),#keymap.alice .r4 .keymapKey:nth-child(11),#keymap.alice .r4 .keymapKey:nth-child(12){transform:rotate(-10deg);margin-left:-25%}#keymap.alice .r5 div.keymapKey.left{opacity:1;transform:rotate(10deg);margin-left:-5%;margin-top:21%}#keymap.alice .r5 div.keymapKey.right{opacity:1;transform:rotate(-10deg);margin-left:-33%;margin-top:20%}#keymap.alice .r5[data-row5-has-alpha=true][data-row5-grid="1-3"],#keymap.alice .r5[data-row5-has-alpha=true][data-row5-grid="3-1"]{grid-template-columns:5fr 3fr 1fr 3fr 4.5fr}#keymap.alice .r5[data-row5-has-alpha=true][data-row5-grid="3-1"] div.keymapKey.right{margin-left:-30%;margin-top:25%}#keymap.alice .r5[data-row5-has-alpha=true][data-row5-grid="1-3"] div.keymapKey.left{margin-left:50%;margin-top:25%}#keymap.alice div#KeyBackslash.keymapKey{visibility:hidden}#keymap.alice div.extraKey{margin-top:25px;transform:rotate(-10deg)!important;margin-left:-7px!important;display:flex;background-color:var(--key-bg);color:var(--key-color);border-radius:var(--roundness,.375rem);text-align:center;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;position:relative}