:root{--key-size:2.5rem;--key-bg:#f1f1f1;--key-active-bg:#d0d0d0;--key-color:#333;--accent-color:#007bff;--accent-hover-color:#00d907;--accent-shift-color:#fc0;--accent-active-color:#0056b3}.key.emoji-item .main-char{font-family:Noto Color Emoji,Segoe UI Emoji,sans-serif}.key{align-items:center;background-color:var(--key-bg);border-radius:6px;color:var(--key-color);cursor:pointer;display:flex;flex-direction:column;height:var(--key-size);justify-content:center;position:relative;transition:all .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--key-size)}.key:active{background-color:var(--key-active-bg);transform:scale(.95)}.key.multi-char{font-size:.9em}.multi-char{position:relative}.multi-char .main-char{font-size:1rem}.multi-char .alt-char{color:#666;font-size:.6rem;position:absolute;top:.01rem}.numeric-key{font-size:.9rem;font-weight:700}.key .main-char{font-size:1.2em}.letters-key,.punctuation-key{font-size:.8em}.alt-char,.key .alt-char{font-size:.7em;opacity:.7}.alt-char{color:var(--accent-color);position:absolute;right:2px;top:2px}.key.emoji-key,.key.numeric-key,.key.shift-key{height:var(--key-size);width:calc(var(--key-size)*1.5)}.key.space-key{height:var(--key-size);justify-content:flex-end;width:calc(var(--key-size)*4.5)}.key.enter-key{background-color:var(--accent-color);color:var(--key-bg);font-size:1.25rem;height:var(--key-size);padding-bottom:.3125rem;width:calc(var(--key-size)*1.5)}.key.shift-locked:before{color:#fff}.key.shift-active{background-color:var(--accent-shift-color)}.key.enter-key:active,.key.shift-locked{background-color:var(--accent-active-color)}.enter-arrow{color:#fff;font-size:1.5em;position:relative;top:-3px}.backspace-key{height:var(--key-size);width:calc(var(--key-size)*1.5)}.backspace-icon{font-size:1em}.key.emoji-item{align-items:center;cursor:pointer;display:flex;justify-content:center;transition:transform .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.key.emoji-item:active{transform:scale(.95)}.key.special-option-key{align-items:center;cursor:pointer;display:flex;justify-content:center;transition:background-color .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.key.special-option-key.active,.key.special-option-key.hovered,.key.special-option-key:hover{background-color:#ffffff4d;transform:scale(1.1);transition:all .2s ease}@media(min-width:769px){:root{--key-size:2.5rem}}@media(max-width:768px){:root{--key-size:2rem}}@media(max-width:480px){:root{--key-size:1.8rem}}@media(max-width:360px){:root{--key-size:1.5rem}.key{font-size:.6rem!important}}@media(max-width:348px){:root{--key-size:1.3rem}.key{font-size:.6rem!important}}@media(max-width:320px){:root{--key-size:1rem}.key{font-size:.4rem!important}}