body{background:#f0f0f0;color:#000;font-family:Helvatica,Arial;transition:all 1s linear}body.dark{background:#101010;color:#fff}.controller-layout{display:grid;grid-template-columns:2fr 10fr;position:relative;width:100%}.sidebar{grid-column:1/2;position:absolute;left:0;top:0;padding:1rem;z-index:10}.sidebar .input-history ul{padding:0;margin:0;max-height:21rem;overflow-y:auto}.sidebar .input-history ul li{list-style:none}.main{grid-column:1/3;padding:2rem}.buttons-container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2rem;padding:4rem}.buttons{position:relative;height:44vmin;width:600px}.button-svg .primary,.red .button-svg .secondary,.white .button-svg .secondary{fill:#000}.red.pressed .button-svg .primary,.white.pressed .button-svg .primary{fill:#aaa}.button-container{position:absolute;width:10vmin;height:10vmin;background-color:#aaa;border-radius:100%}.button-container.display-none{display:none}[data-button-group=red][data-group-index="1"]{left:32vmin;top:3vmin}[data-button-group=red][data-group-index="2"]{left:20vmin;top:15vmin}[data-button-group=red][data-group-index="3"]{left:30vmin;top:13vmin}[data-button-group=red][data-group-index="4"]{left:40vmin;top:17vmin}[data-button-group=red][data-group-index="5"]{left:42vmin;top:33vmin;height:12vmin;width:12vmin}[data-button-group=white][data-group-index="1"]{left:50vmin;top:13vmin}[data-button-group=white][data-group-index="2"]{left:60vmin;top:11vmin}[data-button-group=white][data-group-index="3"]{left:70vmin;top:13vmin}[data-button-group=white][data-group-index="4"]{left:80vmin;top:15vmin}[data-button-group=white][data-group-index="5"]{left:48vmin;top:23vmin}[data-button-group=white][data-group-index="6"]{left:58vmin;top:21vmin}[data-button-group=white][data-group-index="7"]{left:68vmin;top:23vmin}[data-button-group=white][data-group-index="8"]{left:78vmin;top:25vmin}.is-connected{margin-left:.5em}.check-mark{display:none}.check-mark.connected,.cross-mark{display:inline-block}.cross-mark.connected,.display-none{display:none}.animated-gradient-border{position:relative;display:inline-block;padding:20px 40px;font-size:18px;font-weight:700;text-transform:uppercase;color:#fff;border-radius:15px;overflow:hidden;background:#fff;z-index:1}.animated-gradient-border:before{content:"";position:absolute;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 24px);border-radius:15px;background:linear-gradient(45deg,#00faff,#0aff9d,#006eff,#c700ff,#ff1493,#ff00ff,#006eff,#00faff,#0aff9d);background-size:300% 300%;animation:gradientBorderAnimation 10s linear infinite;z-index:-2}.animated-gradient-border:after{top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);top:8px;left:8px;width:calc(100% - 16px);height:calc(100% - 16px);background:#fff;z-index:-1;background-image:url(https://cdna.artstation.com/p/assets/images/images/072/488/516/large/ilham-ramadhan-reina-tekken-8-red-bg.jpg?1707471426);background-size:cover;background-position:50%;background-image:url(https://pbs.twimg.com/media/GGN-jYmW4AApJ90?format=jpg&name=large);background-size:50%;background-repeat:no-repeat;background-position:100%}.animated-gradient-border:after,.unmei:before{content:"";position:absolute;border-radius:15px}.unmei:before{top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 24px);background:linear-gradient(45deg,#00faff,#0aff9d,#8bcf7d,#fff9ce,#7b3e02,#234001,#00faff,#0aff9d);background-size:300% 300%;animation:gradientBorderAnimation 10s linear infinite;z-index:-2}.unmei:after{content:"";position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);top:8px;left:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:15px;background:#fff;z-index:-1;background-image:url(https://cdna.artstation.com/p/assets/images/images/072/488/516/large/ilham-ramadhan-reina-tekken-8-red-bg.jpg?1707471426);background-size:cover;background-position:50%;background-image:url(https://pbs.twimg.com/media/GGN-jYmW4AApJ90?format=jpg&name=large);background-image:url(https://static0.gamerantimages.com/wordpress/wp-content/uploads/2024/05/tekken-8-s-eddy-gordo-3-explained.jpg);background-size:100%;background-repeat:no-repeat;background-position:100%}.joystick-rod{fill:url(#rodGradient)}.joystick-knob{fill:#c1272d}.joystick-core{fill:#000;stroke:#222;stroke-width:3;opacity:.85}.joystick-highlight{opacity:.08;fill:#fff;enable-background:new}.joystick-shadow{opacity:.1;enable-background:new}#joystick-rod{transform-style:preserve-3d}.cls-1{fill:#1a1a1a}.cls-2{fill:#c1272d}.cls-3{fill:#fff;opacity:.08}.cls-3,.cls-4{isolation:isolate}.cls-4{opacity:.1}@keyframes gradientBorderAnimation{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes animateGradient{0%{background-position:0 0}50%{background-position:100% 100%}to{background-position:0 0}}.button-set-sw-black .button-rim{fill:#080808}.button-set-sw-black .button-mid{fill:#181818}.button-set-sw-black .button-mid2{fill:#232323}.button-set-sw-black .button-crescent{fill:#101010}.button-set-sw-black .button-shadow{fill:#181818}.button-set-sw-black .button-cap{fill:#222}.button-set-sw-black .button-inner{fill:#080808}.button-set-sw-charcoal .button-rim{fill:#3b444b}.button-set-sw-charcoal .button-mid{fill:#4a535b}.button-set-sw-charcoal .button-mid2{fill:#2c353c}.button-set-sw-charcoal .button-crescent{fill:#232a2f}.button-set-sw-charcoal .button-shadow{fill:#232e36}.button-set-sw-charcoal .button-cap{fill:#5a646b}.button-set-sw-charcoal .button-inner{fill:#3b444b}.button-set-sw-ivory .button-rim{fill:#f0ece1}.button-set-sw-ivory .button-mid{fill:#e2dfd6}.button-set-sw-ivory .button-mid2{fill:#d4d1c8}.button-set-sw-ivory .button-crescent,.button-set-sw-ivory .button-shadow{fill:#bcb9b0}.button-set-sw-ivory .button-cap{fill:#fffdf6}.button-set-sw-ivory .button-inner{fill:#f0ece1}.button-set-sw-red .button-rim{fill:#dd4e1e}.button-set-sw-red .button-mid{fill:#b93e16}.button-set-sw-red .button-mid2{fill:#a13713}.button-set-sw-red .button-crescent,.button-set-sw-red .button-shadow{fill:#7a280e}.button-set-sw-red .button-cap{fill:#ff6a3a}.button-set-sw-red .button-inner{fill:#dd4e1e}.button-set-sw-orange .button-rim{fill:#e5703d}.button-set-sw-orange .button-mid{fill:#c45a1a}.button-set-sw-orange .button-mid2{fill:#a94d16}.button-set-sw-orange .button-crescent,.button-set-sw-orange .button-shadow{fill:#7a360e}.button-set-sw-orange .button-cap{fill:#ff944d}.button-set-sw-orange .button-inner{fill:#e5703d}.button-set-sw-grey .button-rim{fill:#c7c7c7}.button-set-sw-grey .button-mid{fill:#b0b0b0}.button-set-sw-grey .button-mid2{fill:#a0a0a0}.button-set-sw-grey .button-crescent,.button-set-sw-grey .button-shadow{fill:#8a8a8a}.button-set-sw-grey .button-cap{fill:#e0e0e0}.button-set-sw-grey .button-inner{fill:#c7c7c7}.button-set-mint .button-rim{fill:#8bcf7d}.button-set-mint .button-mid{fill:#75b869}.button-set-mint .button-mid2{fill:#61a156}.button-set-mint .button-crescent,.button-set-mint .button-shadow{fill:#4c8843}.button-set-mint .button-cap{fill:#a0e091}.button-set-mint .button-inner{fill:#8bcf7d}.button-set-cream .button-rim{fill:#fff9ce}.button-set-cream .button-mid{fill:#eae4bc}.button-set-cream .button-mid2{fill:#d6d0aa}.button-set-cream .button-crescent,.button-set-cream .button-shadow{fill:#c2bc98}.button-set-cream .button-cap{fill:#fffde0}.button-set-cream .button-inner{fill:#fff9ce}.button-set-brown .button-rim{fill:#7b3e02}.button-set-brown .button-mid{fill:#673501}.button-set-brown .button-mid2{fill:#552c01}.button-set-brown .button-crescent,.button-set-brown .button-shadow{fill:#422200}.button-set-brown .button-cap{fill:#8f4c0a}.button-set-brown .button-inner{fill:#7b3e02}.button-set-forest .button-rim{fill:#234001}.button-set-forest .button-mid{fill:#1c3400}.button-set-forest .button-mid2{fill:#152800}.button-set-forest .button-crescent,.button-set-forest .button-shadow{fill:#0f1c00}.button-set-forest .button-cap{fill:#2a4c06}.button-set-forest .button-inner{fill:#234001}.button-set-nature .button-rim{fill:#8bcf7d}.button-set-nature .button-mid{fill:#7b3e02}.button-set-nature .button-crescent,.button-set-nature .button-mid2{fill:#234001}.button-set-nature .button-shadow{fill:#7b3e02}.button-set-nature .button-cap{fill:#fff9ce}.button-set-nature .button-inner{fill:#8bcf7d}.button-set-red .button-rim{fill:#af1027}.button-set-red .button-mid{fill:#9b0d28}.button-set-red .button-mid2{fill:#890e2c}.button-set-red .button-crescent,.button-set-red .button-shadow{fill:#590e20}.button-set-red .button-cap{fill:#c41839}.button-set-red .button-inner{fill:#af1027}.button-set-blue .button-rim{fill:#006eff}.button-set-blue .button-mid{fill:#0051b8}.button-set-blue .button-mid2{fill:#003a80}.button-set-blue .button-crescent,.button-set-blue .button-shadow{fill:#00254d}.button-set-blue .button-cap{fill:#338fff}.button-set-blue .button-inner{fill:#006eff}.button-set-green .button-rim{fill:#1fa31f}.button-set-green .button-mid{fill:#197d19}.button-set-green .button-mid2{fill:#145f14}.button-set-green .button-crescent,.button-set-green .button-shadow{fill:#0e3f0e}.button-set-green .button-cap{fill:#2fdc2f}.button-set-green .button-inner{fill:#1fa31f}.button-set-yellow .button-rim{fill:#ffe600}.button-set-yellow .button-mid{fill:#ffd000}.button-set-yellow .button-mid2{fill:#ffb800}.button-set-yellow .button-crescent,.button-set-yellow .button-shadow{fill:#b89c00}.button-set-yellow .button-cap{fill:#fff799}.button-set-yellow .button-inner{fill:#ffe600}.button-set-purple .button-rim{fill:#a259ff}.button-set-purple .button-mid{fill:#7c2fff}.button-set-purple .button-mid2{fill:#5a1fa3}.button-set-purple .button-crescent,.button-set-purple .button-shadow{fill:#3d1466}.button-set-purple .button-cap{fill:#c299ff}.button-set-purple .button-inner{fill:#a259ff}.button-set-orange .button-rim{fill:#f90}.button-set-orange .button-mid{fill:#f70}.button-set-orange .button-mid2{fill:#c60}.button-set-orange .button-crescent,.button-set-orange .button-shadow{fill:#994c00}.button-set-orange .button-cap{fill:#fb3}.button-set-orange .button-inner{fill:#f90}.button-set-white .button-rim{fill:#f8f8f8}.button-set-white .button-mid{fill:#e0e0e0}.button-set-white .button-mid2{fill:#ccc}.button-set-white .button-crescent,.button-set-white .button-shadow{fill:#b0b0b0}.button-set-white .button-cap{fill:#fff}.button-set-white .button-inner{fill:#f8f8f8}.button-set-charcoal .button-rim{fill:#36454f}.button-set-charcoal .button-mid{fill:#425563}.button-set-charcoal .button-mid2{fill:#2c353c}.button-set-charcoal .button-crescent{fill:#1b2328}.button-set-charcoal .button-shadow{fill:#232e36}.button-set-charcoal .button-cap{fill:#4b5c6b}.button-set-charcoal .button-inner{fill:#36454f}.button-set-cyberpunk .button-rim{fill:#006eff}.button-set-cyberpunk .button-mid{fill:#c700ff}.button-set-cyberpunk .button-mid2{fill:#ff1493}.button-set-cyberpunk .button-crescent{fill:#f0f}.button-set-cyberpunk .button-shadow{fill:#006eff}.button-set-cyberpunk .button-cap{fill:#c700ff}.button-set-cyberpunk .button-inner{fill:#ff1493}