:root{--primary-font: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;--primary-color: #4a90e2;--secondary-color: #64b5f6;--accent-color: #2196f3;--text-color: #333;--light-text: #fff}*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}html,body,#root{width:100%;height:100%;overflow:hidden;touch-action:none;position:fixed}body{font-family:var(--primary-font);color:var(--text-color);background-color:#e3f2fd;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{display:none}.key-display{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:relative}.key{font-size:15rem;font-weight:700;color:var(--primary-color);text-shadow:4px 4px 0 rgba(255,255,255,.5),-4px -4px 0 rgba(0,0,0,.1);transform-origin:center;opacity:0;transform:scale(.5);transition:opacity .1s ease-out,transform .1s ease-out}.key-display.animate .key{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes popIn{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.key-instruction{font-size:3rem;color:var(--secondary-color);text-align:center;animation:pulse 2s infinite;text-shadow:2px 2px 0 rgba(255,255,255,.5)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (max-width: 768px){.key{font-size:10rem}.key-instruction{font-size:2rem}}@media (max-width: 480px){.key{font-size:8rem}.key-instruction{font-size:1.5rem}}.background-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.settings-panel{background-color:#fff;border-radius:20px;padding:24px;width:90%;max-width:400px;position:relative;box-shadow:0 8px 32px #00000026;max-height:90vh;overflow-y:auto}.close-button{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;padding:4px;color:var(--text-color);opacity:.6;transition:opacity .2s ease}.close-button:hover{opacity:1}h2{font-size:24px;margin-bottom:24px;color:var(--text-color)}.settings-section{margin-bottom:24px}.about-section{border-top:1px solid #eee;padding-top:24px}.about-text{font-size:14px;line-height:1.6;color:var(--text-color);margin-bottom:20px;text-align:justify}h3{font-size:18px;margin-bottom:12px;color:var(--text-color)}.sound-controls{display:flex;gap:12px;align-items:center}.sound-button{background-color:#f0f0f0;border:none;border-radius:12px;padding:12px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.sound-button.active{background-color:var(--accent-color);color:#fff}.sound-mode-buttons{display:flex;gap:8px;flex:1}.mode-button{background-color:#f0f0f0;border:none;border-radius:12px;padding:8px 16px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px;flex:1;justify-content:center;color:var(--text-color)}.mode-button.active{background-color:var(--accent-color);color:#fff}.mode-button span{font-size:14px;font-weight:500}.theme-shape-controls{display:flex;flex-direction:column;gap:12px}.theme-buttons{display:flex;gap:8px;flex-wrap:wrap}.theme-button{width:32px;height:32px;border-radius:50%;border:2px solid;cursor:pointer;transition:all .2s ease}.theme-button.active{transform:scale(1.2);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent-color)}.shape-buttons{display:flex;gap:8px}.shape-button{background-color:#f0f0f0;border:none;border-radius:12px;padding:12px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex:1}.shape-button.active{background-color:var(--accent-color);color:#fff}.donate-container{display:flex;justify-content:center;margin-top:16px}@media (max-width: 480px){.settings-panel{padding:16px}h2{font-size:20px;margin-bottom:16px}h3{font-size:16px}.mode-button{padding:8px}.mode-button span{font-size:12px}.theme-button{width:28px;height:28px}.about-text{font-size:13px}}/*!
* 
*   react-simple-keyboard v3.8.72
*   https://github.com/hodgef/react-simple-keyboard
*
*   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
*
*   This source code is licensed under the MIT license found in the
*   LICENSE file in the root directory of this source tree.
*
*//*!
 * 
 *   simple-keyboard v3.8.54
 *   https://github.com/hodgef/simple-keyboard
 *
 *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
 *
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
 */.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span,.hg-theme-default .hg-button span svg{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px #0000004d;box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:#05194687;color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:#00000008;cursor:pointer}li.hg-candidate-box-list-item:active{background:#0000001a}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}.virtual-keyboard{position:fixed;bottom:0;left:0;width:100%;background-color:#fffffff2;padding:10px;box-shadow:0 -4px 12px #0000001a;display:none;z-index:1000;transition:transform .3s ease-in-out}.virtual-keyboard.hidden{transform:translateY(100%)}.custom-theme{border-radius:10px;background-color:transparent!important}.custom-theme .hg-button{height:45px!important;border-radius:8px!important;background-color:#fff!important;border:2px solid var(--primary-color)!important;color:var(--primary-color)!important;font-family:var(--primary-font)!important;font-size:1.2em!important;box-shadow:0 2px 4px #0000001a!important}.custom-theme .hg-button:active{background-color:var(--primary-color)!important;color:#fff!important}@media (max-width: 768px){.virtual-keyboard{display:block}.custom-theme .hg-button{height:40px!important;font-size:1em!important}}@media (max-width: 480px){.custom-theme .hg-button{height:35px!important;font-size:.9em!important}}.app{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10}.brand-name{position:absolute;top:20px;left:20px;font-size:1.2rem;color:var(--primary-color);z-index:100;font-weight:700;text-shadow:2px 2px 0 rgba(255,255,255,.5),-1px -1px 0 rgba(0,0,0,.1);letter-spacing:.5px;opacity:.8;transition:all .3s ease}.brand-name:hover{opacity:1;transform:scale(1.05)}.settings-button{position:absolute;bottom:20px;right:20px;background-color:#fffc;border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 8px #0000001a;z-index:100}.settings-button:hover{background-color:#fff;transform:translateY(-2px);box-shadow:0 6px 12px #00000026}@media (max-width: 768px){.settings-button{top:15px;right:15px;width:40px;height:40px;bottom:auto}.brand-name{top:15px;left:15px;font-size:1rem}.content{padding-bottom:200px}}