:root{--bg-color: #0D0D0D;--bg-color-light: #2a2a2a;--primary-color: #eb83e2;--primary-color-transparent: #eb83e270;--primary-color-light: #ffb7ff;--primary-color-light-transparent: #ffb7ff90;--primary-color-light-transparentx: #ffb7ff20;--primary-color-dark: #ae5a91;--primary-color-dark-transparent: #ae5a9190;--primary-color-darkest: #613a4e;--primary-color-darkest-transparent: #613a4eB0;--color-border: #444444;--text: #ffffff;--text-muted: #cccccc;--key-bg: #1c1c1f;--key-bg-top: #26262b;--key-bg-bottom: #121216;--key-border: #33333a;--key-shadow: rgba(0, 0, 0, .7);--key-glow: rgba(255, 112, 245, .35);--panel-bg: #222228;--panel-border: #262634}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.keyboard-container{position:relative;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;background:radial-gradient(circle at top,#1b1220 0,var(--bg-color) 55%);box-shadow:0 1.125rem 2.5rem #000000e6;perspective:1200px}.keyboard-display{width:80%;max-width:950px;height:7.5rem;margin:0 auto 1.25rem;padding:.75rem 1rem;overflow-y:auto;background:var(--bg-color-light);color:var(--text);border-radius:.75rem;border:1px solid #2b2b33;font-size:1rem;box-shadow:0 0 .75rem #000000b3,0 0 .625rem #000000e6;resize:none}.keyboard-display:focus{outline:none;border-color:var(--primary-color)}.container{position:relative;width:80%;max-width:950px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;background:linear-gradient(to bottom,var(--panel-bg),#0b0b10);border-radius:1.125rem;padding:1.5rem;border:1px solid var(--panel-border);box-shadow:0 1.125rem 2.5rem #000c,0 0 1.5rem #000000e6;transform-style:preserve-3d;transform:rotateX(1deg)}.container:before{content:"";position:absolute;pointer-events:none}.keyboard-row{position:relative;width:100%;display:flex;flex-wrap:nowrap;justify-content:center;gap:.25rem;margin-bottom:.25rem;z-index:10}.keyboard-key{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 0 0;border:1px solid var(--key-border);background:linear-gradient(to bottom,var(--key-bg-top),var(--key-bg-bottom));color:var(--text);height:3.25rem;min-width:2.75rem;padding:.15rem .4rem;outline:none;border-radius:.25rem;cursor:pointer;transform:translateZ(1.5rem);box-shadow:0 .25rem #050507,.25rem .25rem .5rem var(--key-shadow),.125rem 1.125rem .25rem var(--key-shadow),-1px -1px #ffffff4d,-2px -2px #ffffff38,-3px -3px #ffffff29,-4px -4px #ffffff1a,-5px -5px #ffffff14,-6px -6px #ffffff0f;transition:transform .12s ease-out,box-shadow .12s ease-out,background .12s ease-out,border-color .12s ease-out,color .12s ease-out;z-index:0}.keyboard-key:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:none;z-index:-1}.keyboard-key:hover,.keyboard-key:focus-visible{transform:translateZ(.3px);border-color:var(--primary-color-transparent);z-index:100;box-shadow:0 1px #050507,5px 5px 12px var(--key-shadow),2px 2px 8px var(--key-shadow),-1px -1px 0 var(--primary-color-dark-transparent),-2px -2px 0 var(--primary-color-dark-transparent),-3px -3px 0 var(--primary-color-dark-transparent),-4px -4px 0 var(--primary-color-dark),-4px -4px 5px var(--primary-color-dark-transparent),0 0 10px var(--primary-color-transparent),0 0 20px var(--primary-color-darkest-transparent),-4px -4px 2px var(--primary-color-light-transparent),-3px -5px 10px var(--primary-color),-3px -3px 30px var(--primary-color-light-transparent),-3px -3px 60px var(--primary-color-light-transparentx)}.keyboard-key:active{transform:translateY(2px) scale(.98);box-shadow:0 2px #050507,3px 3px 8px var(--key-shadow),1px 1px 4px var(--key-shadow),0 0 10px var(--primary-color-transparent),0 0 20px var(--primary-color-darkest-transparent),-1px -1px #ffffff3d,-2px -2px #ffffff2e,-3px -3px #ffffff1f,-3px -3px #ffffff0f,-2px -2px 10px var(--primary-color),-2px -3px 30px var(--primary-color-light-transparent),-2px -3px 60px var(--primary-color-light-transparentx)}.keyboard-key:focus-visible{transform:translateY(0) scale(1.02);border:0px solid var(--primary-color);color:var(--primary-color-light)}.keyboard-key--wide{flex:1.5 0 0;min-width:4.75rem}.keyboard-key--extra-wide{flex:5 0 0;min-width:13.75rem}.keyboard-key--shifted{font-size:.65rem;opacity:.78;align-self:flex-start;transform:translateY(-.125rem)}.keyboard-key--base{font-size:.9rem}.keyboard-key--active{background:radial-gradient(circle at top,var(--primary-color),var(--key-bg-bottom));border-color:var(--primary-color-transparent);box-shadow:0 0 10px var(--primary-color-transparent),0 0 20px var(--primary-color-darkest-transparent),0 4px #050507,5px 5px 10px var(--key-shadow),-1px -1px 0 var(--primary-color-dark-transparent),-2px -2px 0 var(--primary-color-dark-transparent),-3px -3px 0 var(--primary-color-dark-transparent),-4px -4px 0 var(--primary-color-transparent),-5px -5px 0 var(--primary-color-dark-transparent)}.keyboard-key--active:before{box-shadow:-1px -1px 0 var(--primary-color-dark-transparent),-2px -2px 0 var(--primary-color-dark-transparent),-3px -3px 0 var(--primary-color-dark-transparent),-4px -4px 0 var(--primary-color-darkest-transparent),-3px -3px 2px var(--primary-color-light-transparent),-4px -4px 5px var(--primary-color-transparent),-2px -5px 10px var(--primary-color),-2px -5px 10px var(--primary-color),-3px -3px 30px var(--primary-color-light-transparent),-3px -3px 60px var(--primary-color-light-transparentx);z-index:-999;pointer-events:none;border-radius:.125rem}