.keyboard--hover-effect{--mouse-x:0px;--mouse-y:0px;position:relative}.keyboard-key--hover-effect{position:relative}.keyboard-key--hover-effect:after{content:"";border-radius:inherit;background-image:radial-gradient(150px circle at calc(var(--mouse-x) - var(--key-x,0px))calc(var(--mouse-y) - var(--key-y,0px)),#00000038 0%,#00000014 45%,transparent 100%);-webkit-mask-composite:xor;pointer-events:none;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.keyboard-key--hover-effect.keyboard-key--active:after{opacity:0}