assets/layout-mac-colemak.svg

<svg fill="none" viewBox="0 0 831 324" width="831" height="324" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                #keyboard {
                    font-family: Arial, sans-serif;
                    margin-top: 0px;
                    margin-bottom: 0px
                }
                #keyboard #keyboard-bg {
                    position: inherit;
                    border: solid 1px #ddd;
                    padding: 9px;
                    box-sizing: content-box;
                    border-radius: 6px;
                    min-width: 56px;
                    min-height: 56px
                }
                #keyboard #keyboard-bg {
                    width: 811px;
                    height: 271px;
                    background-color: rgb(238, 238, 238);
                }
                #keyboard #keyboard-cfg {
                    text-align: left;
                    font-size: smaller;
                    border: solid 1px #ddd;
                    border-radius: 6px;
                    padding: 9px;
                }
                #keyboard #keyboard-cfg {
                    width: 811px;
                    height: 14px;
                    background-color: rgb(238, 238, 238);
                }
                #keyboard-bg div,
                #keyboard-bg label {
                    position: absolute;
                    border-color: #000;
                    box-sizing: border-box;
                    background-clip: padding-box
                }
                .kl0>div,
                .kl3>div,
                .kl6>div,
                .kl9>div {
                    text-align: left
                }
                .kl1>div,
                .kl4>div,
                .kl7>div,
                .kl10>div {
                    text-align: center
                }
                .kl2>div,
                .kl5>div,
                .kl8>div,
                .kl11>div {
                    text-align: right
                }
                .kl0>div,
                .kl1>div,
                .kl2>div {
                    vertical-align: top
                }
                .kl3>div,
                .kl4>div,
                .kl5>div {
                    vertical-align: middle
                }
                .kl6>div,
                .kl7>div,
                .kl8>div {
                    vertical-align: bottom
                }
                .kl9,
                .kl10,
                .kl11 {
                    top: 100%;
                    margin-top: -1px;
                    font-size: 9px !important;
                    max-height: 1em !important;
                    white-space: nowrap;
                    overflow: hidden
                }
                .kl6 {
                    font-weight: bolder;
                }
                .kl.ts1 {
                    font-size: 8px;
                    line-height: 1em
                }
                .kl.ts2 {
                    font-size: 10px;
                    line-height: 1em
                }
                .kl.ts3 {
                    font-size: 12px;
                    line-height: 1em
                }
                .kl.ts4 {
                    font-size: 14px;
                    line-height: 1em
                }
                .kl.ts5 {
                    font-size: 16px;
                    line-height: 1em
                }
                .kl.ts6 {
                    font-size: 18px;
                    line-height: 1em
                }
                .kl.ts7 {
                    font-size: 20px;
                    line-height: 1em
                }
                .kl.ts8 {
                    font-size: 22px;
                    line-height: 1em
                }
                .kl.ts9 {
                    font-size: 24px;
                    line-height: 1em
                }
                .kb {
                    border-radius: 5px;
                    border: 1px solid black;
                    background-color: rgb(204, 204, 204);
                    width: 54px;
                    height: 54px;
                    display: block;
                }
                .high>.kb {
                    height: 60px;
                }
                .kt {
                    border-radius: 3px;
                    border: 1px solid rgba(0, 0, 0, 0.1) !important;
                    background-color: rgb(252, 252, 252);
                    width: 42px;
                    height: 42px;
                    display: block;
                }
                .high>.kt {
                    height: 48px;
                }
                .kls {
                    font-family: Arial, Helvetica, sans-serif;
                    padding: 4px 3px;
                    width: 42px;
                    height: 42px;
                }
                .high>.kls {
                    height: 48px;
                }
                .kl {
                    width: 36px;
                    height: 36px;
                    color: rgb(8, 8, 8);
                }
                .high>.kl {
                    height: 42px;
                }
                .kl>div {
                    display: table-cell;
                    position: static !important;
                    width: 36px;
                    height: 36px;
                    max-width: 36px;
                }
                .high>.kl>div {
                    height: 42px;
                }
                .kr2 .kt,
                .kr2 .kls {
                    top: 3px;
                }
                .kr2 .kb {
                    top: 0px
                }
                .kr3 .kt,
                .kr3 .kls {
                    top: 57px;
                }
                .kr3 .kb {
                    top: 54px
                }
                .kr4 .kt,
                .kr4 .kls {
                    top: 111px;
                }
                .kr4 .kb {
                    top: 108px
                }
                .kr5 .kt,
                .kr5 .kls {
                    top: 165px;
                }
                .kr5 .kb {
                    top: 162px
                }
                .kr6 .kt,
                .kr6 .kls {
                    top: 219px;
                }
                .kr6 .kb {
                    top: 216px
                }
                .dead {
                    padding: 0 4px;
                    border: 1px solid rgba(1, 129, 129, 0.49);
                    border-radius: 3px;
                    background-color: rgba(66, 204, 204, 0.32);
                }
            </style>

            <div id="keyboard">
                <div id="keyboard-bg">

                    <!-- 1234567890 -->
                    <div class="kr2">
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left:   0px"></div>
                                <div class="kt" style="left:   6px"></div>
                                <div class="kls" style="left:   6px">
                                    <div class="kl kl0 ts5">
                                        <div>±</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="§ U+00A7 SECTION SIGN
SHIFT: ± U+00B1 PLUS-MINUS SIGN">§</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left:  54px"></div>
                                <div class="kt" style="left:  60px"></div>
                                <div class="kls" style="left:  60px">
                                    <div class="kl kl0 ts5">
                                        <div>!</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="1 U+0031 DIGIT ONE
SHIFT: ! U+0021 EXCLAMATION MARK">1</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 108px"></div>
                                <div class="kt" style="left: 114px"></div>
                                <div class="kls" style="left: 114px">
                                    <div class="kl kl0 ts5">
                                        <div>@</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="2 U+0032 DIGIT TWO
SHIFT: @ U+0040 COMMERCIAL AT
SHIFT+CONTROL:  U+0000 &lt;control&gt;">2</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 162px"></div>
                                <div class="kt" style="left: 168px"></div>
                                <div class="kls" style="left: 168px">
                                    <div class="kl kl0 ts5">
                                        <div>#</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>3</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="3 U+0033 DIGIT THREE
SHIFT: # U+0023 NUMBER SIGN
CONTROL+MENU: £ U+00A3 POUND SIGN">£</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 216px"></div>
                                <div class="kt" style="left: 222px"></div>
                                <div class="kls" style="left: 222px">
                                    <div class="kl kl0 ts5">
                                        <div>$</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>4</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="4 U+0034 DIGIT FOUR
SHIFT: $ U+0024 DOLLAR SIGN
CONTROL+MENU: ¤ U+00A4 CURRENCY SIGN">¤</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 270px"></div>
                                <div class="kt" style="left: 276px"></div>
                                <div class="kls" style="left: 276px">
                                    <div class="kl kl0 ts5">
                                        <div>%</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>5</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="5 U+0035 DIGIT FIVE
SHIFT: % U+0025 PERCENT SIGN
CONTROL+MENU: € U+20AC EURO SIGN">€</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 324px"></div>
                                <div class="kt" style="left: 330px"></div>
                                <div class="kls" style="left: 330px">
                                    <div class="kl kl0 ts5">
                                        <div>^</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>6</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="6 U+0036 DIGIT SIX
SHIFT: ^ U+005E CIRCUMFLEX ACCENT
SHIFT+CONTROL:  U+001E &lt;control&gt;
CONTROL+MENU: ^ U+005E CIRCUMFLEX ACCENT"><span class="dead">^</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 378px"></div>
                                <div class="kt" style="left: 384px"></div>
                                <div class="kls" style="left: 384px">
                                    <div class="kl kl0 ts5">
                                        <div>&amp;</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="7 U+0037 DIGIT SEVEN
SHIFT: &amp; U+0026 AMPERSAND">7</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 432px"></div>
                                <div class="kt" style="left: 438px"></div>
                                <div class="kls" style="left: 438px">
                                    <div class="kl kl0 ts5">
                                        <div>*</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>°</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>8</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="8 U+0038 DIGIT EIGHT
SHIFT: * U+002A ASTERISK
CONTROL+MENU: · U+00B7 MIDDLE DOT
SHIFT+CONTROL+MENU: ° U+00B0 DEGREE SIGN">·</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 486px"></div>
                                <div class="kt" style="left: 492px"></div>
                                <div class="kls" style="left: 492px">
                                    <div class="kl kl0 ts5">
                                        <div>(</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="9 U+0039 DIGIT NINE
SHIFT: ( U+0028 LEFT PARENTHESIS">9</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 540px"></div>
                                <div class="kt" style="left: 546px"></div>
                                <div class="kls" style="left: 546px">
                                    <div class="kl kl0 ts5">
                                        <div>)</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>≈</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="">0</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="0 U+0030 DIGIT ZERO
SHIFT: ) U+0029 RIGHT PARENTHESIS
CONTROL+MENU: ≠ U+2260 NOT EQUAL TO
SHIFT+CONTROL+MENU: ≈ U+2248 ALMOST EQUAL TO">≠</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 594px"></div>
                                <div class="kt" style="left: 600px"></div>
                                <div class="kls" style="left: 600px">
                                    <div class="kl kl0 ts5">
                                        <div>_</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>—</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div >-</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="- U+002D HYPHEN-MINUS
SHIFT: _ U+005F LOW LINE
CONTROL+MENU: – U+2013 EN DASH
SHIFT+CONTROL+MENU: — U+2014 EM DASH">–</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 648px"></div>
                                <div class="kt" style="left: 654px"></div>
                                <div class="kls" style="left: 654px">
                                    <div class="kl kl0 ts5">
                                        <div>+</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>÷</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>=</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="= U+003D EQUALS SIGN
SHIFT: + U+002B PLUS SIGN
CONTROL+MENU: × U+00D7 MULTIPLICATION SIGN
SHIFT+CONTROL+MENU: ÷ U+00F7 DIVISION SIGN">×</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 702px;width:109px"></div>
                                <div class="kt" style="left:708px;width:97px"></div>
                                <div class="kls" style="left:708px">
                                    <div class="kl kl0 ts5" style="width:91px;">
                                        <div style="width:91px;max-width:91px;"></div>
                                    </div>
                                    <div class="kl kl4 ts4" style="width:91px;">
                                        <div style="width:91px;max-width:91px;" title="Backspace">Backspace</div>
                                    </div>
                                    <div class="kl kl6 ts5" style="width:91px;">
                                        <div style="width:91px;max-width:91px;" title=" U+0008 &lt;control&gt;
SHIFT:  U+0008 &lt;control&gt;
CONTROL:  U+007F &lt;control&gt;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- QWFPGJLUY -->
                    <div class="kr3">
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left:   0px;width:81px;"></div>
                                <div class="kt" style="left:6px;width:69px"></div>
                                <div class="kls" style="left:6px">
                                    <div class="kl kl0 ts5" style="width:63px;">
                                        <div style="width:63px;max-width:63px;"> </div>
                                    </div>
                                    <div class="kl kl4 ts4" style="width:63px;">
                                        <div style="width:63px;max-width:63px;" title="Tab">Tab</div>
                                    </div>
                                    <div class="kl kl6 ts5" style="width:63px;">
                                        <div style="width:63px;max-width:63px;" title=" U+0009 &lt;control&gt;
SHIFT:  U+0009 &lt;control&gt;"> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left:  81px"></div>
                                <div class="kt" style="left:  87px"></div>
                                <div class="kls" style="left:  87px;">
                                    <div class="kl kl0 ts5">
                                        <div>Q</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="q U+0071 LATIN SMALL LETTER Q
SHIFT: Q U+0051 LATIN CAPITAL LETTER Q
CAPITAL: Q U+0051 LATIN CAPITAL LETTER Q
SHIFT+CAPITAL: q U+0071 LATIN SMALL LETTER Q">q</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 135px"></div>
                                <div class="kt" style="left: 141px"></div>
                                <div class="kls" style="left: 141px;">
                                    <div class="kl kl0 ts5">
                                        <div>W</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="w U+0077 LATIN SMALL LETTER W
SHIFT: W U+0057 LATIN CAPITAL LETTER W
CAPITAL: W U+0057 LATIN CAPITAL LETTER W
SHIFT+CAPITAL: w U+0077 LATIN SMALL LETTER W">w</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 189px"></div>
                                <div class="kt" style="left: 195px"></div>
                                <div class="kls" style="left: 195px;">
                                    <div class="kl kl0 ts5">
                                        <div>F</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="f U+0066 LATIN SMALL LETTER F
SHIFT: F U+0046 LATIN CAPITAL LETTER F
CAPITAL: F U+0046 LATIN CAPITAL LETTER F
SHIFT+CAPITAL: f U+0066 LATIN SMALL LETTER F">f</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 243px"></div>
                                <div class="kt" style="left: 249px"></div>
                                <div class="kls" style="left: 249px;">
                                    <div class="kl kl0 ts5">
                                        <div>P</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="p U+0070 LATIN SMALL LETTER P
SHIFT: P U+0050 LATIN CAPITAL LETTER P
CAPITAL: P U+0050 LATIN CAPITAL LETTER P
SHIFT+CAPITAL: p U+0070 LATIN SMALL LETTER P">p</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 297px"></div>
                                <div class="kt" style="left: 303px"></div>
                                <div class="kls" style="left: 303px;">
                                    <div class="kl kl0 ts5">
                                        <div>G</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="g U+0067 LATIN SMALL LETTER G
SHIFT: G U+0047 LATIN CAPITAL LETTER G
CAPITAL: G U+0047 LATIN CAPITAL LETTER G
SHIFT+CAPITAL: g U+0067 LATIN SMALL LETTER G">g</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 351px"></div>
                                <div class="kt" style="left: 357px"></div>
                                <div class="kls" style="left: 357px;">
                                    <div class="kl kl0 ts5">
                                        <div>J</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="j U+006A LATIN SMALL LETTER J
SHIFT: J U+004A LATIN CAPITAL LETTER J
CAPITAL: J U+004A LATIN CAPITAL LETTER J
SHIFT+CAPITAL: j U+006A LATIN SMALL LETTER J">j</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 405px"></div>
                                <div class="kt" style="left: 411px"></div>
                                <div class="kls" style="left: 411px;">
                                    <div class="kl kl0 ts5">
                                        <div>L</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ł</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>l</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="l U+006C LATIN SMALL LETTER L
SHIFT: L U+004C LATIN CAPITAL LETTER L
CAPITAL: L U+004C LATIN CAPITAL LETTER L
SHIFT+CAPITAL: l U+006C LATIN SMALL LETTER L
CONTROL+MENU: ł U+0142 LATIN SMALL LETTER L WITH STROKE
SHIFT+CONTROL+MENU: Ł U+0141 LATIN CAPITAL LETTER L WITH STROKE
CONTROL+MENU+CAPITAL: Ł U+0141 LATIN CAPITAL LETTER L WITH STROKE
SHIFT+CONTROL+MENU+CAPITAL: ł U+0142 LATIN SMALL LETTER L WITH STROKE">ł</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 459px"></div>
                                <div class="kt" style="left: 465px"></div>
                                <div class="kls" style="left: 465px;">
                                    <div class="kl kl0 ts5">
                                        <div>U</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>u</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="u U+0075 LATIN SMALL LETTER U
SHIFT: U U+0055 LATIN CAPITAL LETTER U
CAPITAL: U U+0055 LATIN CAPITAL LETTER U
SHIFT+CAPITAL: u U+0075 LATIN SMALL LETTER U
CONTROL+MENU: € U+20AC EURO SIGN">€</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 513px"></div>
                                <div class="kt" style="left: 519px"></div>
                                <div class="kls" style="left: 519px;">
                                    <div class="kl kl0 ts5">
                                        <div>Y</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>y</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="y U+0079 LATIN SMALL LETTER Y
SHIFT: Y U+0059 LATIN CAPITAL LETTER Y
CAPITAL: Y U+0059 LATIN CAPITAL LETTER Y
SHIFT+CAPITAL: y U+0079 LATIN SMALL LETTER Y
CONTROL+MENU: ¥ U+00A5 YEN SIGN">¥</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 567px"></div>
                                <div class="kt" style="left: 573px"></div>
                                <div class="kls" style="left: 573px;">
                                    <div class="kl kl0 ts5">
                                        <div>:</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Æ</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>;</div>
                                    </div>
                                    <div class="kl kl8 ts5"><div title="; U+003B SEMICOLON
SHIFT: : U+003A COLON
CONTROL:  U+001D &lt;control&gt;
CONTROL+MENU: æ U+00E6 LATIN SMALL LETTER AE
SHIFT+CONTROL+MENU: Æ U+00C6 LATIN CAPITAL LETTER AE
CONTROL+MENU+CAPITAL: Æ U+00C6 LATIN CAPITAL LETTER AE
SHIFT+CONTROL+MENU+CAPITAL: æ U+00E6 LATIN SMALL LETTER AE">æ</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 621px"></div>
                                <div class="kt" style="left: 627px"></div>
                                <div class="kls" style="left: 627px;">
                                    <div class="kl kl0 ts5">
                                        <div>{</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Å</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>[</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="[ U+005B LEFT SQUARE BRACKET
SHIFT: { U+007B LEFT CURLY BRACKET
CONTROL:  U+001B &lt;control&gt;
CONTROL+MENU: å U+00E5 LATIN SMALL LETTER A WITH RING ABOVE
SHIFT+CONTROL+MENU: Å U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE
CONTROL:  U+001B &lt;control&gt;
CONTROL+MENU+CAPITAL: Å U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE
SHIFT+CONTROL+MENU+CAPITAL: å U+00E5 LATIN SMALL LETTER A WITH RING ABOVE">å</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 675px"></div>
                                <div class="kt" style="left: 681px"></div>
                                <div class="kls" style="left: 681px;">
                                    <div class="kl kl0 ts5">
                                        <div>}</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="] U+005D RIGHT SQUARE BRACKET
SHIFT: } U+007D RIGHT CURLY BRACKET
CONTROL:  U+001D &lt;control&gt;">]</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 743px;width:68px;height:108px"></div>
                                <div class="kb" style="left: 729px;top:54px;width:81px;height: 54px"></div>
                                <div class="kb"
                                    style="border-radius: 5px; left: 744px; top: 55px; width: 66px; height: 106px; background-color: rgb(204, 204, 204); border-style: none">
                                </div>
                                <div class="kt" style="left: 749px; top:57px; width: 56px; height: 96px"></div>
                                <div class="kt"
                                    style="background-position:   0px 0px; border-style: none !important; left: 735px; top: 57px; width: 69px; height: 42px; background-size: 69px 96px;">
                                </div>
                                <div class="kt"
                                    style="background-position: -13px 0px; border-style: none !important; left: 750px; top: 59px; width: 54px; height: 94px; background-size: 69px 96px;">
                                </div>
                                <div class="kls" style="left: 749px; top: 57px; width: 56px; height: 96px;">
                                    <div class="kl kl0 ts5" style="width:50px;height:90px">
                                        <div style="width:50px;max-width:50px;height:90px">
                                        </div>
                                    </div>
                                    <div class="kl kl4 ts4" style="width:50px;height:90px">
                                        <div style="width:50px;max-width:50px;height:90px" title="Enter">Enter</div>
                                    </div>
                                    <div class="kl kl6 ts5" style="width:50px;height:90px">
                                        <div style="width:50px;max-width:50px;height:90px" title=" U+000D &lt;control&gt;
SHIFT:  U+000D &lt;control&gt;
CONTROL:  U+000A &lt;control&gt;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ARSTDHNEIO -->
                    <div class="kr4">
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left:   0px;width:95px;"></div>
                                <div class="kt" style="left:6px;width:83px;"></div>
                                <div class="kls" style="left:6px;width:83px">
                                    <div class="kl kl4 ts4" style="width:77px;">
                                        <div style="width:77px;max-width:77px;">Caps Lock</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left:  95px"></div>
                                <div class="kt" style="left: 101px"></div>
                                <div class="kls" style="left: 101px">
                                    <div class="kl kl0 ts5">
                                        <div>A</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ą</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>a</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="a U+0061 LATIN SMALL LETTER A
SHIFT: A U+0041 LATIN CAPITAL LETTER A
CAPITAL: A U+0041 LATIN CAPITAL LETTER A
SHIFT+CAPITAL: a U+0061 LATIN SMALL LETTER A
CONTROL+MENU: ą U+0105 LATIN SMALL LETTER A WITH OGONEK
SHIFT+CONTROL+MENU: Ą U+0104 LATIN CAPITAL LETTER A WITH OGONEK
CONTROL+MENU+CAPITAL: Ą U+0104 LATIN CAPITAL LETTER A WITH OGONEK
SHIFT+CONTROL+MENU+CAPITAL: ą U+0105 LATIN SMALL LETTER A WITH OGONEK">ą</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 149px"></div>
                                <div class="kt" style="left: 155px"></div>
                                <div class="kls" style="left: 155px">
                                    <div class="kl kl0 ts5">
                                        <div>R</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="r U+0072 LATIN SMALL LETTER R
SHIFT: R U+0052 LATIN CAPITAL LETTER R
CAPITAL: R U+0052 LATIN CAPITAL LETTER R
SHIFT+CAPITAL: r U+0072 LATIN SMALL LETTER R">r</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 203px"></div>
                                <div class="kt" style="left: 209px"></div>
                                <div class="kls" style="left: 209px">
                                    <div class="kl kl0 ts5">
                                        <div>S</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ś</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>s</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="s U+0073 LATIN SMALL LETTER S
SHIFT: S U+0053 LATIN CAPITAL LETTER S
CAPITAL: S U+0053 LATIN CAPITAL LETTER S
SHIFT+CAPITAL: s U+0073 LATIN SMALL LETTER S
CONTROL+MENU: ś U+015B LATIN SMALL LETTER S WITH ACUTE
SHIFT+CONTROL+MENU: Ś U+015A LATIN CAPITAL LETTER S WITH ACUTE
CONTROL+MENU+CAPITAL: Ś U+015A LATIN CAPITAL LETTER S WITH ACUTE
SHIFT+CONTROL+MENU+CAPITAL: ś U+015B LATIN SMALL LETTER S WITH ACUTE">ś</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 257px"></div>
                                <div class="kt" style="left: 263px"></div>
                                <div class="kls" style="left: 263px">
                                    <div class="kl kl0 ts5">
                                        <div>T</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="t U+0074 LATIN SMALL LETTER T
SHIFT: T U+0054 LATIN CAPITAL LETTER T
CAPITAL: T U+0054 LATIN CAPITAL LETTER T
SHIFT+CAPITAL: t U+0074 LATIN SMALL LETTER T">t</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 311px"></div>
                                <div class="kt" style="left: 317px"></div>
                                <div class="kls" style="left: 317px">
                                    <div class="kl kl0 ts5">
                                        <div>D</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="d U+0064 LATIN SMALL LETTER D
SHIFT: D U+0044 LATIN CAPITAL LETTER D
CAPITAL: D U+0044 LATIN CAPITAL LETTER D
SHIFT+CAPITAL: d U+0064 LATIN SMALL LETTER D">d</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 365px"></div>
                                <div class="kt" style="left: 371px"></div>
                                <div class="kls" style="left: 371px">
                                    <div class="kl kl0 ts5">
                                        <div>H</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="h U+0068 LATIN SMALL LETTER H
SHIFT: H U+0048 LATIN CAPITAL LETTER H
CAPITAL: H U+0048 LATIN CAPITAL LETTER H
SHIFT+CAPITAL: h U+0068 LATIN SMALL LETTER H">h</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 419px"></div>
                                <div class="kt" style="left: 425px"></div>
                                <div class="kls" style="left: 425px">
                                    <div class="kl kl0 ts5">
                                        <div>N</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ń</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>n</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="n U+006E LATIN SMALL LETTER N
SHIFT: N U+004E LATIN CAPITAL LETTER N
CAPITAL: N U+004E LATIN CAPITAL LETTER N
SHIFT+CAPITAL: n U+006E LATIN SMALL LETTER N
CONTROL+MENU: ń U+0144 LATIN SMALL LETTER N WITH ACUTE
SHIFT+CONTROL+MENU: Ń U+0143 LATIN CAPITAL LETTER N WITH ACUTE
CONTROL+MENU+CAPITAL: Ń U+0143 LATIN CAPITAL LETTER N WITH ACUTE
SHIFT+CONTROL+MENU+CAPITAL: ń U+0144 LATIN SMALL LETTER N WITH ACUTE">ń</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 473px"></div>
                                <div class="kt" style="left: 479px"></div>
                                <div class="kls" style="left: 479px">
                                    <div class="kl kl0 ts5">
                                        <div>E</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ę</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>e</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="e U+0065 LATIN SMALL LETTER E
SHIFT: E U+0045 LATIN CAPITAL LETTER E
CAPITAL: E U+0045 LATIN CAPITAL LETTER E
SHIFT+CAPITAL: e U+0065 LATIN SMALL LETTER E
CONTROL+MENU: ę U+0119 LATIN SMALL LETTER E WITH OGONEK
SHIFT+CONTROL+MENU: Ę U+0118 LATIN CAPITAL LETTER E WITH OGONEK
CONTROL+MENU+CAPITAL: Ę U+0118 LATIN CAPITAL LETTER E WITH OGONEK
SHIFT+CONTROL+MENU+CAPITAL: ę U+0119 LATIN SMALL LETTER E WITH OGONEK">ę</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 527px"></div>
                                <div class="kt" style="left: 533px"></div>
                                <div class="kls" style="left: 533px">
                                    <div class="kl kl0 ts5">
                                        <div>I</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="i U+0069 LATIN SMALL LETTER I
SHIFT: I U+0049 LATIN CAPITAL LETTER I
CAPITAL: I U+0049 LATIN CAPITAL LETTER I
SHIFT+CAPITAL: i U+0069 LATIN SMALL LETTER I">i</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 581px"></div>
                                <div class="kt" style="left: 587px"></div>
                                <div class="kls" style="left: 587px">
                                    <div class="kl kl0 ts5">
                                        <div>O</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ó</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>o</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="o U+006F LATIN SMALL LETTER O
SHIFT: O U+004F LATIN CAPITAL LETTER O
CAPITAL: O U+004F LATIN CAPITAL LETTER O
SHIFT+CAPITAL: o U+006F LATIN SMALL LETTER O
CONTROL+MENU: ó U+00F3 LATIN SMALL LETTER O WITH ACUTE
SHIFT+CONTROL+MENU: Ó U+00D3 LATIN CAPITAL LETTER O WITH ACUTE
CONTROL+MENU+CAPITAL: Ó U+00D3 LATIN CAPITAL LETTER O WITH ACUTE
SHIFT+CONTROL+MENU+CAPITAL: ó U+00F3 LATIN SMALL LETTER O WITH ACUTE">ó</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 635px"></div>
                                <div class="kt" style="left: 641px"></div>
                                <div class="kls" style="left: 641px">
                                    <div class="kl kl0 ts5">
                                        <div>"</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ø</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>'</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="' U+0027 APOSTROPHE
SHIFT: &quot; U+0022 QUOTATION MARK
CONTROL+MENU: ø U+00F8 LATIN SMALL LETTER O WITH STROKE
SHIFT+CONTROL+MENU: Ø U+00D8 LATIN CAPITAL LETTER O WITH STROKE
CONTROL+MENU+CAPITAL: Ø U+00D8 LATIN CAPITAL LETTER O WITH STROKE
SHIFT+CONTROL+MENU+CAPITAL: ø U+00F8 LATIN SMALL LETTER O WITH STROKE">
                                            ø</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 689px"></div>
                                <div class="kt" style="left: 695px"></div>
                                <div class="kls" style="left: 695px">
                                    <div class="kl kl0 ts5">
                                        <div>|</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>‡</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>\</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="\ U+005C REVERSE SOLIDUS
SHIFT: | U+007C VERTICAL LINE
CONTROL:  U+001C &lt;control&gt;
CONTROL+MENU: † U+2020 DAGGER
SHIFT+CONTROL+MENU: ‡ U+2021 DOUBLE DAGGER">†</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ZXCVBKM -->
                    <div class="kr5">
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left:   0px;width:68px;"></div>
                                <div class="kt" style="left:6px;width:56px;"></div>
                                <div class="kls" style="left:6px;width:56px">
                                    <div class="kl kl4 ts4" style="width:50px;">
                                        <div style="width:50px;max-width:50px;">Shift</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left:  68px"></div>
                                <div class="kt" style="left:  74px"></div>
                                <div class="kls" style="left:  74px">
                                    <div class="kl kl0 ts5">
                                        <div>~</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div><span class="dead">~</span></div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div><span>`</span></div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="` U+0060 GRAVE ACCENT
SHIFT: ~ U+007E TILDE
CONTROL+MENU: ` U+0060 GRAVE ACCENT
SHIFT+CONTROL+MENU: ~ U+007E TILDE"><span class="dead">`</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 122px"></div>
                                <div class="kt" style="left: 128px"></div>
                                <div class="kls" style="left: 128px">
                                    <div class="kl kl0 ts5">
                                        <div>Z</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ż</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>z</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="z U+007A LATIN SMALL LETTER Z
SHIFT: Z U+005A LATIN CAPITAL LETTER Z
CAPITAL: Z U+005A LATIN CAPITAL LETTER Z
SHIFT+CAPITAL: z U+007A LATIN SMALL LETTER Z
CONTROL+MENU: ż U+017C LATIN SMALL LETTER Z WITH DOT ABOVE
SHIFT+CONTROL+MENU: Ż U+017B LATIN CAPITAL LETTER Z WITH DOT ABOVE
CONTROL+MENU+CAPITAL: Ż U+017B LATIN CAPITAL LETTER Z WITH DOT ABOVE
SHIFT+CONTROL+MENU+CAPITAL: ż U+017C LATIN SMALL LETTER Z WITH DOT ABOVE">ż</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 176px"></div>
                                <div class="kt" style="left: 182px"></div>
                                <div class="kls" style="left: 182px">
                                    <div class="kl kl0 ts5">
                                        <div>X</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ź</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>x</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="x U+0078 LATIN SMALL LETTER X
SHIFT: X U+0058 LATIN CAPITAL LETTER X
CAPITAL: X U+0058 LATIN CAPITAL LETTER X
SHIFT+CAPITAL: x U+0078 LATIN SMALL LETTER X
CONTROL+MENU: ź U+017A LATIN SMALL LETTER Z WITH ACUTE
SHIFT+CONTROL+MENU: Ź U+0179 LATIN CAPITAL LETTER Z WITH ACUTE
CONTROL+MENU+CAPITAL: Ź U+0179 LATIN CAPITAL LETTER Z WITH ACUTE
SHIFT+CONTROL+MENU+CAPITAL: ź U+017A LATIN SMALL LETTER Z WITH ACUTE">ź</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 230px"></div>
                                <div class="kt" style="left: 236px"></div>
                                <div class="kls" style="left: 236px">
                                    <div class="kl kl0 ts5">
                                        <div>C</div>
                                    </div>
                                    <div class="kl kl2 ts5">
                                        <div>Ć</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>c</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title="c U+0063 LATIN SMALL LETTER C
SHIFT: C U+0043 LATIN CAPITAL LETTER C
CAPITAL: C U+0043 LATIN CAPITAL LETTER C
SHIFT+CAPITAL: c U+0063 LATIN SMALL LETTER C
CONTROL+MENU: ć U+0107 LATIN SMALL LETTER C WITH ACUTE
SHIFT+CONTROL+MENU: Ć U+0106 LATIN CAPITAL LETTER C WITH ACUTE
CONTROL+MENU+CAPITAL: Ć U+0106 LATIN CAPITAL LETTER C WITH ACUTE
SHIFT+CONTROL+MENU+CAPITAL: ć U+0107 LATIN SMALL LETTER C WITH ACUTE">ć</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 284px"></div>
                                <div class="kt" style="left: 290px"></div>
                                <div class="kls" style="left: 290px">
                                    <div class="kl kl0 ts5">
                                        <div>V</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="v U+0076 LATIN SMALL LETTER V
SHIFT: V U+0056 LATIN CAPITAL LETTER V
CAPITAL: V U+0056 LATIN CAPITAL LETTER V
SHIFT+CAPITAL: v U+0076 LATIN SMALL LETTER V">v</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 338px"></div>
                                <div class="kt" style="left: 344px"></div>
                                <div class="kls" style="left: 344px">
                                    <div class="kl kl0 ts5">
                                        <div>B</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="b U+0062 LATIN SMALL LETTER B
SHIFT: B U+0042 LATIN CAPITAL LETTER B
CAPITAL: B U+0042 LATIN CAPITAL LETTER B
SHIFT+CAPITAL: b U+0062 LATIN SMALL LETTER B">b</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 392px"></div>
                                <div class="kt" style="left: 398px"></div>
                                <div class="kls" style="left: 398px">
                                    <div class="kl kl0 ts5">
                                        <div>K</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="k U+006B LATIN SMALL LETTER K
SHIFT: K U+004B LATIN CAPITAL LETTER K
CAPITAL: K U+004B LATIN CAPITAL LETTER K
SHIFT+CAPITAL: k U+006B LATIN SMALL LETTER K">k</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 446px"></div>
                                <div class="kt" style="left: 452px"></div>
                                <div class="kls" style="left: 452px">
                                    <div class="kl kl0 ts5">
                                        <div>M</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="m U+006D LATIN SMALL LETTER M
SHIFT: M U+004D LATIN CAPITAL LETTER M
CAPITAL: M U+004D LATIN CAPITAL LETTER M
SHIFT+CAPITAL: m U+006D LATIN SMALL LETTER M">m</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 500px"></div>
                                <div class="kt" style="left: 506px"></div>
                                <div class="kls" style="left: 506px">
                                    <div class="kl kl0 ts5">
                                        <div>&lt;</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>,</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title=", U+002C COMMA
SHIFT: &lt; U+003C LESS-THAN SIGN
CONTROL+MENU: ´ U+00B4 ACUTE ACCENT"><span class="dead">´</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 554px"></div>
                                <div class="kt" style="left: 560px"></div>
                                <div class="kls" style="left: 560px">
                                    <div class="kl kl0 ts5">
                                        <div>&gt;</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div>.</div>
                                    </div>
                                    <div class="kl kl8 ts5">
                                        <div title=". U+002E FULL STOP
SHIFT: &gt; U+003E GREATER-THAN SIGN
CONTROL+MENU: ¨ U+00A8 DIAERESIS"><span class="dead">¨</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 608px"></div>
                                <div class="kt" style="left: 614px"></div>
                                <div class="kls" style="left: 614px">
                                    <div class="kl kl0 ts5">
                                        <div>?</div>
                                    </div>
                                    <div class="kl kl6 ts5">
                                        <div title="/ U+002F SOLIDUS
SHIFT: ? U+003F QUESTION MARK">/</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc">
                                <div class="kb" style="left: 662px;width:149px;"></div>
                                <div class="kt" style="left: 668px;width:137px"></div>
                                <div class="kls" style="left: 668px;width:137px">
                                    <div class="kl kl4 ts4" style="width:131px;">
                                        <div style="width:131px;max-width:131px;">Shift</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Ctrl Opt Space -->
                    <div class="kr6">
                        <!--div class="key">
                            <div class="kc high">
                                <div class="kb" style="left:   0px;"></div>
                                <div class="kt" style="left:   6px;"></div>
                                <div class="kls" style="left:   6px;">
                                    <div class="kl kl4 ts4">
                                        <div>Fn</div>
                                    </div>
                                </div>
                            </div>
                        </div-->
                        <div class="key">
                            <div class="kc high">
                                <div class="kb" style="left:  54px;"></div>
                                <div class="kt" style="left:  60px;"></div>
                                <div class="kls" style="left:  60px;">
                                    <div class="kl kl4 ts4">
                                        <div>Ctrl</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc high">
                                <div class="kb" style="left: 108px;"></div>
                                <div class="kt" style="left: 114px;"></div>
                                <div class="kls" style="left: 114px;">
                                    <div class="kl kl4 ts4">
                                        <div>Opt</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc high">
                                <div class="kb" style="left: 162px;width: 68px;"></div>
                                <div class="kt" style="left: 168px;width: 56px;"></div>
                                <div class="kls" style="left: 168px;width: 56px;">
                                    <div class="kl kl4 ts4" style="width:50px;">
                                        <div style="width:50px;max-width:50px;">Cmd</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc high">
                                <div class="kb" style="left: 230px;width:338px;"></div>
                                <div class="kt" style="left: 236px;width:326px;"></div>
                                <div class="kls" style="left: 236px;width:326px;">
                                    <div class="kl kl0 ts5" style="width:320px;">
                                        <div style="width:320px;max-width:320px;"> </div>
                                    </div>
                                    <div class="kl kl3 ts4" style="width:320px;">
                                        <div style="width:320px;max-width:320px;padding-left:8px;" title="Space">Space</div>
                                    </div>
                                    <div class="kl kl5 ts4" style="width:320px;">
                                        <div style="width:320px;max-width:320px;padding-right:8px" title="Non-breaking space">Non-breaking space</div>
                                    </div>
                                    <div class="kl kl6 ts5" style="width:320px;">
                                        <div style="width:320px;max-width:320px;" title="  U+0020 SPACE
SHIFT:   U+0020 SPACE
CONTROL+MENU:   U+00A0 NON-BREAKING SPACE"> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc high">
                                <div class="kb" style="left: 568px;width: 68px;"></div>
                                <div class="kt" style="left: 574px;width: 56px;"></div>
                                <div class="kls" style="left: 574px;width: 56px;">
                                    <div class="kl kl4 ts4" style="width:50px;">
                                        <div style="width:50px;max-width:50px;">Cmd</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="key">
                            <div class="kc high">
                                <div class="kb" style="left: 636px;"></div>
                                <div class="kt" style="left: 642px;"></div>
                                <div class="kls" style="left: 642px;">
                                    <div class="kl kl4 ts4">
                                        <div>Opt</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- kbd-bg -->
                <div id="keyboard-cfg">
                    <span class="dead" style="margin-right: 6px;"> </span>dead key 
                </div>
            </div>
        </div>
    </foreignObject>
</svg>