[data-v-1d653a50]:root{--primary:#00a13a}.touchpad-wrapper[data-v-1d653a50]{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.touchpad-wrapper .touchpad-container[data-v-1d653a50]{flex-grow:1;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:7%;position:relative;z-index:1}.touchpad-wrapper .cta[data-v-1d653a50]{position:relative;z-index:1;color:#fff;background-color:hsla(0,0%,100%,.2)}.touchpad-wrapper[data-v-1d653a50]:after{content:"";width:100%;height:100%;position:absolute;z-index:0;top:0;left:0;background-color:var(--userColor);transition:filter .1s;filter:brightness(.4) saturate(.8)}.touchpad-wrapper.touched[data-v-1d653a50]:after{filter:brightness(1) saturate(1)}.touchpad[data-v-1d653a50]{width:100%;height:auto;aspect-ratio:1;background-color:#dbdbdb;box-shadow:inset 0 3px 16px 0 rgba(0,0,0,.122);position:relative}.touchpad .touch[data-v-1d653a50]{position:absolute;z-index:9;border-radius:50%;width:var(--size);height:var(--size);box-shadow:inset 0 0 6px 5px hsla(0,0%,4%,.1);pointer-events:none}.touchpad.square-shape .touch[data-v-1d653a50]{left:50%;top:50%;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%))}.touchpad.circle-shape[data-v-1d653a50]{border-radius:50%}.touchpad.circle-shape img[data-v-1d653a50]{position:absolute;width:100%;height:100%;pointer-events:none}.touchpad.circle-shape .touch[data-v-1d653a50]{margin:auto;left:0;right:0;top:0;bottom:0;transform:rotate(var(--angle)) translateY(var(--offcenter))}.jButtons[data-v-1d653a50]{display:flex;justify-content:center;gap:1em;margin-top:3em}.jButtons .button[data-v-1d653a50]{width:70px;height:70px;border-radius:50%;border:0;background-color:var(--userColor);cursor:pointer;box-shadow:inset 0 0 6px 5px hsla(0,0%,4%,.1);color:#fff;font-weight:700;font-size:18px;transition:alñ .1s}.jButtons .button[data-v-1d653a50]:active{font-size:16px;box-shadow:inset 0 0 6px 5px hsla(0,0%,4%,.2)}