.controller-panel{margin-bottom:24px;background:radial-gradient(ellipse at 50% 55%,#30253f 0,#191921 65%)}.controller{display:block;width:100%;max-width:800px;margin:auto;overflow:visible}.controller .shell{fill:url(#shell);stroke:#60586e;stroke-width:3}.shell-detail{fill:none;stroke:#494251;stroke-width:2}.controller text{fill:#d9d2e8;text-anchor:middle;font:600 15px system-ui;pointer-events:none}.controller .pad-button{fill:#17151f;stroke:#655b77;stroke-width:2}.controller .pad-button.active{fill:#ba9aff;stroke:#f0e5ff;filter:drop-shadow(0 0 7px #ba9aff88)}.visual-stick>circle:first-child{fill:#13121a;stroke:#52485f;stroke-width:3}.visual-stick path{stroke:#3b3346;stroke-width:1;fill:none}.controller .stick-cap{fill:#4c425d;stroke:#887a9c;stroke-width:3}.visual-trigger>rect:first-child{fill:#302b3c;stroke:#61556f;stroke-width:2}.visual-trigger>rect:nth-child(2){fill:#ba9aff}.visual-trigger text{font-size:13px}.dpad>rect{fill:#272230}.face text{font-size:21px;font-weight:800}.face .green{fill:#96e7b0}.face .red{fill:#ff9aaf}.face .blue{fill:#98c5ff}.face .yellow{fill:#f9da8e}.controller .home{stroke:#9c82bf}.controller-panel .hint{text-align:center;margin-top:8px}@media(max-width:500px){.controller-panel{padding:18px 10px}.controller-panel .section-heading{padding:0 8px}.controller-panel .hint{font-size:11px;padding:0 8px}.controller text{font-size:17px}.visual-trigger text{font-size:16px}}