.p5-figure{margin:0 auto;position:relative}.p5-figure[data-device=console]{max-width:120px}.p5-figure[data-device=controller]{max-width:150px}.p5-figure svg{width:100%;height:auto;display:block}.p5-figure{--p5-blue:#2f7bff;--p5-white:#fff;--p5-orange:#ff8a1f;--p5-led:transparent;--p5-glow:transparent}.p5-figure[data-color=blue]{--p5-led:var(--p5-blue);--p5-glow:var(--p5-blue)}.p5-figure[data-color=white]{--p5-led:var(--p5-white);--p5-glow:#a7b8d3}.p5-figure[data-color=orange]{--p5-led:var(--p5-orange);--p5-glow:var(--p5-orange)}.p5-figure .ps-led,.p5-figure .ds-led{stroke:var(--p5-led);fill:none}.p5-figure .ps-glow,.p5-figure .ds-glow{stroke:var(--p5-glow);fill:none;opacity:.5}.p5-figure .ps-halo,.p5-figure .ds-halo{fill:var(--p5-glow);opacity:.55}.p5-figure .ds-p,.p5-figure .ds-mute{fill:#3a3b40}.p5-figure[data-player="1"] .ds-p2,.p5-figure[data-player="2"] :is(.ds-p1,.ds-p3),.p5-figure[data-player="3"] :is(.ds-p0,.ds-p2,.ds-p4),.p5-figure[data-player="4"] :is(.ds-p0,.ds-p1,.ds-p3,.ds-p4){fill:#fff}.p5-figure[data-mute] .ds-mute{fill:var(--p5-orange)}.p5-figure[data-pattern=blink] [data-part=light]{animation:1s steps(2,jump-none) infinite p5-blink}.p5-figure[data-pattern=slow-blink] [data-part=light]{animation:2.4s ease-in-out infinite p5-slow}@keyframes p5-blink{0%{opacity:1}to{opacity:.08}}@keyframes p5-slow{0%,to{opacity:.12}50%{opacity:1}}.p5-figure[data-pattern=blue-white] [data-part=light]{animation:4s linear infinite p5-blink-then-on}.p5-figure[data-pattern=blue-white] :is(.ps-led,.ps-glow){animation:4s step-end infinite p5-blue-white}.p5-figure[data-pattern=blue-white] .ps-halo{animation:4s step-end infinite p5-blue-white-halo}@keyframes p5-blue-white{0%{stroke:var(--p5-blue)}45%{stroke:var(--p5-white)}}@keyframes p5-blue-white-halo{0%{fill:var(--p5-blue)}45%{fill:#a7b8d3}}.p5-figure[data-pattern=blink-on] [data-part=light]{animation:4s linear infinite p5-blink-then-on}@keyframes p5-blink-then-on{0%,9%,18%,27%,36%{opacity:1}4.5%,13.5%,22.5%,31.5%,40.5%{opacity:.08}45%,to{opacity:1}}.p5-figure[data-pattern=blink-off] [data-part=light]{animation:4s linear infinite p5-blink-then-off}@keyframes p5-blink-then-off{0%,9%,18%,27%,36%{opacity:1}4.5%,13.5%,22.5%,31.5%,40.5%{opacity:.08}45%,to{opacity:0}}.p5-figure[data-pattern=ps4] :is(.ds-led,.ds-glow){animation:6s step-end infinite p5-ps4}.p5-figure[data-pattern=ps4] .ds-halo{animation:6s step-end infinite p5-ps4-halo}@keyframes p5-ps4{0%{stroke:#2f7bff}25%{stroke:#ff2d3b}50%{stroke:#22c55e}75%{stroke:#ff5fb4}}@keyframes p5-ps4-halo{0%{fill:#2f7bff}25%{fill:#ff2d3b}50%{fill:#22c55e}75%{fill:#ff5fb4}}.p5-figure[data-pattern=pair] [data-part=light]{animation:4s linear infinite p5-blink-then-on}.p5-figure[data-pattern=pair] .ds-p2{animation:4s step-end infinite p5-player-on}@keyframes p5-player-on{0%{fill:#3a3b40}45%{fill:#fff}}@media (prefers-reduced-motion:reduce){.p5-figure [data-part=light],.p5-figure .ps-led,.p5-figure .ps-glow,.p5-figure .ps-halo,.p5-figure .ds-led,.p5-figure .ds-glow,.p5-figure .ds-halo,.p5-figure .ds-p{animation:none!important}}