.keyboard{--key-color-2:#e4e4e7;--key-color-3:#d4d4d8;--key-color-4:#a1a1aa;--key-color-5:#f87171;--key-color-6:#111}html.dark .keyboard{--key-color-2:#e4e4e7;--key-color-3:#d4d4d8;--key-color-4:#a1a1aa;--key-color-5:#f87171;--key-color-6:#fff}.keyboard path{fill:var( --key-color-6)!important}.keyboard{display:grid;margin:0 auto;padding:1rem;border-radius:.4rem;border:1px solid var(--key-color-2);transform:translateZ(0);transition:all .2s}.full-size{grid-template-columns:215fr 2fr 45fr 1fr 60fr;max-width:122rem}.key{width:100%;height:var(--standard-key-size);display:flex;justify-content:center;align-items:center;border-radius:.6rem;border:1px solid var(--key-color-2);color:var(--key-color-6);font-size:1.2rem;padding:1px 4px;font-weight:400;cursor:pointer;white-space:nowrap;transition:all .075}.key.key--pressed{background-color:var(--key-color-3)}.key--pressed:hover,.key:hover{transform:scale(.98);background:var(--key-color-3);border:1px solid var(--key-color-4)}.key-pressing-simulation{background-color:var(--key-color-5)!important;border:1px solid var(--key-color-5)}.region{padding:.5rem;gap:.25rem}.function{display:grid;grid-template-columns:2fr 2fr repeat(4,2fr) 1fr repeat(4,2fr) 1fr repeat(4,2fr)}.system-control{grid-column:3;display:grid;grid-template-columns:repeat(3,1fr)}.typewriter{grid-row:2;display:grid}.fifth-row,.first-row,.fourth-row,.second-row,.third-row{display:grid;justify-items:center;gap:.25rem}.first-row{grid-template-columns:repeat(13,1fr) 2fr}.second-row{grid-template-columns:1.5fr repeat(12,1fr) 1.5fr}.third-row{grid-template-columns:1.79fr repeat(11,1fr) 2.29fr}.fourth-row{grid-template-columns:2.29fr repeat(10,1fr) 2.79fr}.fifth-row{grid-template-columns:repeat(3,1.29fr) 6.36fr repeat(3,1.29fr)}.navigation{grid-column:3;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr)}.numpad{grid-column:5;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr)}.mousepad{display:grid;height:75px;grid-template-columns:4fr 2fr .5fr 2fr 4fr}.mouseleft{border-bottom-left-radius:2rem}.mouseright{border-bottom-right-radius:2rem}.key--sublegend{display:flex;flex-direction:column;gap:.1rem}.key--sublegend span:nth-child(2n),.key--sublegend span:nth-child(odd){width:100%;text-align:center;grid-row:1}.key--sublegend span:nth-child(2n){grid-row:2}.metaleft svg{width:1.8rem;height:1.8rem;fill:var(--color-keycaps-legends)}.metaleft .key--accent svg{fill:var(--color-keycaps-legends-accent)}.metaleft.key--pressed svg{fill:var(--color-keycaps-legends-pressed)}.contextmenu svg{width:2rem;height:2rem;stroke:var(--color-keycaps-legends);fill:none}.contextmenu .key--accent svg{stroke:var(--color-keycaps-legends-accent)}.contextmenu.key--pressed svg{stroke:var(--color-keycaps-legends-pressed)}.space span{transform:translateY(-1.6rem);sd-size:1.6rem}.backquote,.capslock,.controlleft,.shiftleft,.tab{justify-content:left;padding-left:6px}.backspace,.controlright,.enter,.shiftright{justify-content:right;padding-right:6px}.arrowup{grid-column:2;grid-row:4}.arrowdown,.arrowleft,.arrowright{grid-row:5}.arrowdown svg,.arrowleft svg,.arrowright svg,.arrowup svg{width:1.2rem;height:1.2rem;fill:var(--color-keycaps-legends)}.arrowdown.key--pressed svg,.arrowleft.key--pressed svg,.arrowright.key--pressed svg,.arrowup.key--pressed svg{fill:var(--color-keycaps-legends-pressed)}.numpadadd{grid-row:2/span 2}.numpadadd,.numpadenter{grid-column:4;height:100%}.numpadenter{grid-row:4/span 2}.numpad0{grid-column:1/span 2}.numpad{transition:all .15s}.hidden--step1{opacity:0;pointer-events:none;visibility:hidden;transition:all .15}.hidden--step2{width:0;padding:0}