body{margin:0;background:#222;font-family:system-ui;display:grid;place-content:center;min-height:100vh}.App{display:flex;flex-direction:column;gap:8px}body{width:100%;height:90vh;padding:0;margin:0;background:#192d38;background:radial-gradient(#8d91b8,#192d38);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#192d38",endColorstr="#211f2f",GradientType=1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;font-weight:600}#root{display:grid;grid-template-columns:75% 23%;grid-template-rows:repeat(2,max-content);grid-column-gap:2%;padding:0 2%;margin:0;position:fixed;inset:0;max-width:2300px}.header{padding:20px;grid-area:1 / 1 / 2 / 3;display:flex;gap:20px}header{display:flex;gap:20px;padding:20px}header>span{align-self:center}#keyboard-menu{padding:20px}main{grid-area:2 / 1 / 3 / 2}aside{grid-area:2 / 2 / 3 / 3;display:flex;flex-direction:column;align-items:start;gap:10px}main,aside{padding:20px}a{color:orange;text-decoration:none;transition:color .1s ease-in-out}a:hover{color:#ff8c00}a:active{color:#ff4500}#action-menu{display:width;justify-content:space-between;align-items:end}footer{padding:20px;grid-area:3 / 1 / 4 / 4}#lightswitch{position:absolute;top:9.9em;right:-10em;width:auto;font-family:keyboard,Arial Rounded,Helvetica,Arial,sans-serif}#lightswitch:active{top:10em}#lightswitch span{display:inline;font-size:4em;line-height:inherit;vertical-align:middle;color:#444}.night #lightswitch span{color:#0f0;text-shadow:0 0 3px #0f0}.key.highlighted,.key.highlighted:before,.key.highlighted:after{--shadow-color: #f00;background-color:#a60000!important;color:#fff!important;box-shadow:inset -1px -1px 12px 8px #bd0909!important}@media (max-width: 2000px){#root{grid-template-columns:100%}#action-menu{grid-area:unset;margin-top:auto;flex-direction:row}.tab-list{flex-direction:row}.buttons>button.main{margin:auto 40px}}@media (min-width: 1999px){.tab-list{flex-direction:column}.buttons>button.main{margin:40px auto}}:root{--main-color: rgb(230, 230, 230);--key-shadow: 1px 1px 1px 0px #111, inset -2px -2px 6px 0px var(--shadow-color);--vertical-gap: 5px}.keyboard.hp-elitebook{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--vertical-gap);background-color:#999;padding:2%;border-radius:4px;max-width:1000px;margin:auto}.keyboard.hp-elitebook .regular{width:6%}.keyboard.hp-elitebook .function{width:5.6875%;height:70%}.keyboard.hp-elitebook .ordinal{width:4.2%}.keyboard.hp-elitebook .backspace{width:9.4%}.keyboard.hp-elitebook .tab{width:7.3%}.keyboard.hp-elitebook .key.upper-return{width:6.3%;visibility:hidden}.keyboard.hp-elitebook .key.upper-return:after{content:"";inset:0 0 auto auto;width:100%;height:213%!important;position:absolute!important;clip-path:polygon(0 0,100% 0,100% 100%,6% 100%,6% 47%,0 47%);visibility:initial;z-index:1;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" viewBox="0 -1000 2500 2500"> <path d="M359-240 120-479l239-239 43 43-167 167h545v-172h60v231H236l166 166-43 43Z" fill="rgb(230, 230, 230)"></path></svg>');background-repeat:no-repeat;background-position:bottom;background-size:45% 135%;display:inline-block}.keyboard.hp-elitebook .key.lower-return{visibility:hidden}.keyboard.hp-elitebook .bloq-mayus{width:7.6%}.keyboard.hp-elitebook .right-shift{width:14.2%}.keyboard.hp-elitebook .spacebar{width:32.4%}.keyboard.hp-elitebook .arrows{width:7.6%;display:grid;height:100%;grid-gap:4%}.keyboard.hp-elitebook .arrows>.key:nth-child(1){box-shadow:1px 1px 1px #111,inset 0 -2px 6px 0 var(--shadow-color)}.keyboard.hp-elitebook .arrows>.key:nth-child(2){box-shadow:1px 1px 1px #111,inset 0 2px 6px 0 var(--shadow-color)}.keyboard.hp-elitebook .row.function-row{aspect-ratio:28/1}.keyboard.hp-elitebook .row{aspect-ratio:18/1;gap:.6%}.keyboard.hp-elitebook .key.upper-return:after,.keyboard.hp-elitebook .key{height:100%;background-color:#222;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:clamp(10px,85%,16px);border-radius:4px;box-shadow:1px 1px 1px #111111b5,inset -1px -1px 12px 8px #00000094;color:var(--main-color);-webkit-user-select:none;user-select:none;position:relative}.keyboard.macbook-pro{display:grid;grid-template-rows:10% repeat(5,16%);grid-gap:2%;width:80vw;aspect-ratio:34/13;padding:1%;background-color:#97989c;border-radius:10px;font-size:1rem;font-weight:400;max-width:1000px;margin:auto;border:1px solid #565656;box-shadow:inset 0 10px 8px -5px #d5d5d5,inset 0 -2px 6px 2px #3c3c3c}.keyboard.macbook-pro .row{display:flex;gap:.7%;position:relative}.keyboard.macbook-pro .key,.keyboard.macbook-pro .hiReturn:after{background-color:#1b1c20;height:100%;border-radius:5px;box-shadow:inset 0 40px 40px -20px #45464a,0 0 0 1px #0a0a0a,2px 2px 1px #000;color:#ccc;-webkit-user-select:none;user-select:none;transition:transform .1s}.keyboard.macbook-pro .key:active,.keyboard.macbook-pro .hiReturn:after:active{transform:scale(.95);background-color:#00f}.keyboard.macbook-pro .regular,.keyboard.macbook-pro .hiReturn{width:6.3%}.keyboard.macbook-pro .loReturn{width:4.2%}.keyboard.macbook-pro .superbar{width:87.9%}.keyboard.macbook-pro .fingerprint{width:4.4%}.keyboard.macbook-pro .backspace,.keyboard.macbook-pro .tab{width:9%}.keyboard.macbook-pro .mayus{width:11.1%}.keyboard.macbook-pro .lShift,.keyboard.macbook-pro .command{width:7.9%}.keyboard.macbook-pro .rShift{width:14.4%}.keyboard.macbook-pro .spacebar{width:34.3%}.keyboard.macbook-pro .arrowArea{width:19.8%}.keyboard.macbook-pro .text{font-size:.9rem}.keyboard.macbook-pro .key>span{margin:0 7px}.keyboard.macbook-pro .arrowArea{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);height:100%;grid-gap:4%}.keyboard.macbook-pro .arrowArea>.key{width:100%;height:100%}.keyboard.macbook-pro .arrowArea>.key:nth-child(1){grid-area:1/2/2/3;border-radius:10px 10px 0 0}.keyboard.macbook-pro .arrowArea>.key:nth-child(2){grid-area:2/1/3/2}.keyboard.macbook-pro .arrowArea>.key:nth-child(3){grid-area:2/2/3/3;border-radius:0 0 10px 10px}.keyboard.macbook-pro .arrowArea>.key:nth-child(4){grid-area:2/3/3/4}.keyboard.macbook-pro .hiReturn,.keyboard.macbook-pro .loReturn{visibility:hidden;position:relative}.keyboard.macbook-pro .hiReturn:after{content:"";position:absolute;inset:0 0 auto auto;clip-path:polygon(0 0,100% 0,100% 100%,35% 100%,35% 47%,0 47%);visibility:initial;width:100%;height:210%;z-index:1;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" viewBox="0 -1000 2500 2500"> <path d="M359-240 120-479l239-239 43 43-167 167h545v-172h60v231H236l166 166-43 43Z" fill="rgb(230, 230, 230)"></path></svg>');background-repeat:no-repeat;background-position:bottom;background-size:65% 125%;display:inline-block}.keyboard.macbook-pro .two-storeys{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.keyboard.macbook-pro .two-storeys>*:nth-child(1){grid-area:1/2/2/3;align-self:end;font-size:.9rem}.keyboard.macbook-pro .two-storeys>*:nth-child(2){grid-area:2/2/3/3;align-self:start;font-size:1.1rem}.keyboard.macbook-pro .two-storeys>*:nth-child(3){grid-area:2/3/3/4;align-self:start;font-size:.9rem}.keyboard.macbook-pro .two-storeys>*.bigger{font-size:1.1rem}.keyboard.macbook-pro .two-storeys>*.lower{justify-self:start;margin-top:15%}.keyboard.macbook-pro .content-in-corners{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.keyboard.macbook-pro .content-in-corners>*:nth-child(1){grid-area:1/1/2/3}.keyboard.macbook-pro .content-in-corners>*:nth-child(2){grid-area:2/1/3/3}.keyboard.macbook-pro .content-in-corners>*.left{justify-self:start}.keyboard.macbook-pro .content-in-corners>*.center{justify-self:center}.keyboard.macbook-pro .content-in-corners>*.right{justify-self:end}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;font-display:block;src:url(/assets/material-symbols-outlined-ba77dc83.woff2) format("woff2")}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;font-display:block;src:url(/assets/material-symbols-rounded-e7c5b465.woff2) format("woff2")}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:Material Symbols Sharp;font-style:normal;font-weight:100 700;font-display:block;src:url(/assets/material-symbols-sharp-5e8b2862.woff2) format("woff2")}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}:root{--main-color: rgb(230, 230, 230);--vertical-gap: 10px}.keyboard.external-keyboard{display:grid;background-color:#222;padding:2%;border-radius:4px;grid-template-columns:64.8% 12.4% 16.8%;grid-gap:3%;aspect-ratio:45/9}.keyboard.external-keyboard .grid-container{grid-template-columns:6.4% .3% repeat(4,6.6%) .3% repeat(4,6.6%) .3% repeat(4,6.6%)}.keyboard.external-keyboard .keyboard-section{display:grid;gap:2%;border-radius:10px;grid-template-rows:7% repeat(5,16.6%)}.keyboard.external-keyboard .keyboard-section .row:first-child .key span{padding:5% 10%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .row.function-row{display:grid;grid-template-columns:6.4% .3% repeat(4,6.6%) .3% repeat(4,6.6%) .3% repeat(4,6.6%);align-items:initial}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .row.function-row .key{height:initial}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .row{gap:.9%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .regular{width:5.8%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .ordinal{width:5.6%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .backspace{width:13.1%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .tab{width:10.7%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .upper-return{width:8%;border-radius:2px 2px 0}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .upper-return:after{content:"";position:absolute;inset:0 0 auto auto;clip-path:polygon(0 0,100% 0,100% 100%,28% 100%,28% 47%,0 47%);visibility:initial;width:100%;height:210%;z-index:1;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" viewBox="0 -1000 2500 2500"> <path d="M359-240 120-479l239-239 43 43-167 167h545v-172h60v231H236l166 166-43 43Z" fill="rgb(230, 230, 230)"></path></svg>');background-repeat:no-repeat;background-position:bottom;background-size:65% 125%;display:inline-block}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .lower-return{width:5.7%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .bloq-mayus{width:13%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .left-shift,.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .left-control{width:8.5%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .right-shift{width:16.9%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .spacebar{width:39.3%}.keyboard.external-keyboard .keyboard-section:nth-of-type(1) .right-control{width:9.5%}.keyboard.external-keyboard .keyboard-section:nth-of-type(2) .row{gap:4.6875%}.keyboard.external-keyboard .keyboard-section:nth-of-type(2) .regular{width:30.2083333333%}.keyboard.external-keyboard .keyboard-section:nth-of-type(3) .row{gap:3.4749034749%}.keyboard.external-keyboard .keyboard-section:nth-of-type(3) .regular{width:22.3938223938%}.keyboard.external-keyboard .keyboard-section:nth-of-type(3) .numpad-zero{width:48.2625482625%}.keyboard.external-keyboard .keyboard-section:nth-of-type(3) .double-height:after{content:attr(data-content);background-color:#222;height:211%;position:absolute;inset:0;z-index:1;box-shadow:inset 6px 6px 30px #292929,inset 0 2px 2px #5e5e5e,1px 1px 3px #000;display:flex;align-items:center;padding-left:10%}.keyboard.external-keyboard .homing-bump:after{content:"";box-shadow:inset 6px 6px 30px #292929,inset 0 2px 2px #5e5e5e,0 0 2px #000;width:25%;height:2px;position:absolute;bottom:12%}.keyboard.external-keyboard .row.function{aspect-ratio:28/1}.keyboard.external-keyboard .arrows{width:7.6%;display:grid;height:100%}.keyboard.external-keyboard .arrows>.key:nth-child(1){box-shadow:1px 1px 1px #111,inset 0 -2px 6px 0 var(--shadow-color)}.keyboard.external-keyboard .arrows>.key:nth-child(2){box-shadow:1px 1px 1px #111,inset 0 2px 6px 0 var(--shadow-color)}.keyboard.external-keyboard .upper-return:after,.keyboard.external-keyboard .key{height:100%;background-color:#222;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:clamp(10px,85%,16px);border-radius:2px;box-shadow:inset -2px -2px 6px #333,inset 6px 6px 30px #292929,inset 0 2px 2px #5e5e5e;color:#e6e6e6;-webkit-user-select:none;user-select:none;position:relative;filter:drop-shadow(1px 1px 3px black) drop-shadow(1px 1px 1px #111)}.keyboard.external-keyboard .hidden{visibility:hidden}.keyboard.external-keyboard .darker{fill:#1b1b1b}.keyboard .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;position:relative}.keyboard .key,.keyboard .key>div,.keyboard .key>span{display:flex;justify-content:center;align-items:center;flex-direction:column}.keyboard svg{width:25%;fill:var(--main-color)}.keyboard .key.two-storeys>span{display:flex;justify-content:center;align-items:center}.keyboard .key.three-storeys{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.keyboard .key.function,.keyboard .key.text{justify-content:start;align-items:start}.keyboard .key.function>span,.keyboard .key.text>span{font-size:75%;padding:6px}.keyboard .key:active{top:2%}.keyboard .crossed{text-decoration:line-through}.keyboard .flip-270{transform:rotate(270deg)}.keyboard .flip-180{transform:rotate(180deg)}.keyboard .flip-90{transform:rotate(90deg)}.buttons>button{backface-visibility:hidden;border:1px solid rgb(230,230,230);border-radius:.25rem;transform-style:preserve-3d;transition:all .2s cubic-bezier(.2,1,.2,1);font-size:1rem;line-height:1.5;margin:.4rem;padding:.4rem .75rem;box-shadow:0 5px #d9d9d9,2px 2.5px 4px #adb5bd,0 -1px 2.5px #adb5bd;background-color:#fff;border-color:#e6e6e6;color:#192d39;cursor:pointer}.buttons>button:after{border-style:solid;box-sizing:content-box;content:"";display:block;position:absolute;transform-style:preserve-3d;transition:all .2s cubic-bezier(.2,1,.2,1);border-radius:.5rem;border-width:.1rem;bottom:-10px;left:-.3rem;right:-.3rem;top:0px;transform:translateZ(-5px);border-color:#ccc}.buttons>button:is(:hover,:focus),.buttons>button.active{transform:translate3d(0,1px,5px);background-color:orange;color:#fff;outline:none}.buttons>button:is(:hover,:focus):after,.buttons>button.active:after{transform:translate3d(0,-1px,-5px)}.buttons>button:active{border-color:transparent;box-shadow:none;transform:translate3d(0,5px,0);background-color:#e6e6e6;box-shadow:0 0 1px 1px #b3b3b3}.buttons>button:active:after{transform:translate3d(0,-5px,0)}.buttons>button.main{aspect-ratio:1;border-radius:100px;transform:perspective(300px) rotateX(25deg);max-width:50px}.buttons>button.main:after{border-radius:100px}.buttons>button.main:active{transform:perspective(300px) rotateX(25deg) translate3d(0,5px,0)}:root{--transition: .3s ease-in-out}.dropdown{border:1px solid #ccc;border-radius:6px}.dropdown{padding:.5rem 1rem;max-width:18rem}.dropdown-title{cursor:pointer;display:flex;gap:.5rem;-webkit-user-select:none;user-select:none}.dropdown-content{font-weight:400;transition:max-height var(--transition),opacity var(--transition);max-height:100vh}.dropdown>.dropdown-title svg{transition:transform var(--transition)}.dropdown.inactive>.dropdown-content{opacity:0;max-height:0}.dropdown.active>.dropdown-title svg{transform:rotate(180deg)}.tab-list{display:flex}