.pocket--wide{width:min(100%,800px)}.pocket--wide{--pc-highlight: color-mix(in srgb, var(--pc-paper) 85%, white);--pc-key-light: color-mix(in srgb, var(--pc-paper) 88%, white);--pc-key-dark: color-mix(in srgb, var(--pc-paper) 80%, var(--pc-side))}[data-theme=dark] .pocket--wide{--pc-highlight: #657056;--pc-key-light: #748063;--pc-key-dark: #515e43}.switch__paper-grain{opacity:.13;mix-blend-mode:soft-light}.pocket.pocket--wide .pocket__rim-light{opacity:.35;stroke-width:3}.pocket.pocket--wide .pocket__key-shine{opacity:.3;stroke-width:1.4}.pocket--wide .pocket__machine{aspect-ratio:800 / 360;transform:rotate(-3deg) rotateY(-5deg)}.pocket--wide .pocket__screen{left:22.5%;top:15.6%;width:54.1%;height:65%;padding:.75cqw;border-radius:4px}.pocket--wide .pocket__brand{left:46%;top:83.4%;font-size:2.6cqw;letter-spacing:-1px}.pocket--wide .pocket__led{left:79.6%;top:46%;width:.45cqw;height:.45cqw}.pocket--wide .pocket__power{left:22%;top:0;width:6%;height:7%}.pocket--wide .pocket__power span{width:2.8cqw;height:.65cqw;margin-left:1.6cqw}.pocket--wide[data-off] .pocket__power span{margin-left:0}.pocket--wide .pocket__power:hover,.pocket--wide .pocket__power:active,.pocket--wide .pocket__power[data-pressed]{background:transparent;transform:none}.pocket--wide .switch__face,.pocket--wide .switch__home{width:5.75%;height:12.78%;min-width:26px;min-height:26px;translate:-50% -50%;border-radius:50%;font:2cqw var(--font-note, monospace)}.pocket--wide .pocket__dpad{left:4.5%;top:36.4%;width:10.25%;height:23.1%}.pocket--wide .pocket__dpad button{font-size:2cqw}.pocket--wide .pocket__dpad button,.pocket--wide .switch__face{color:#f4e9db}.pocket.pocket--wide .switch__face:hover,.pocket.pocket--wide .pocket__dpad button:hover{color:#fff4e5}.pocket--wide .switch__home-key>path{stroke:#30322f}.switch__face--a{left:91.75%;top:39.44%}.switch__face--b{left:87%;top:54.44%}.pocket--wide .switch__home{left:89.5%;top:73.89%;width:4%;height:9%}.switch__key{filter:drop-shadow(1px 2px 0 var(--pc-side)) drop-shadow(1px 3px 1px color-mix(in srgb,var(--pc-shadow) 20%,transparent))}@media(prefers-reduced-motion:reduce){.pocket--wide .pocket__small{transition:none}}.switch__key,.switch__direction-piece,.switch__home-key{transition:translate .12s ease,filter .12s ease}.pocket--wide .switch__face:hover,.pocket--wide .switch__face:active,.pocket--wide .switch__face[data-pressed],.pocket--wide .pocket__dpad button:hover,.pocket--wide .pocket__dpad button:active,.pocket--wide .pocket__dpad button[data-pressed],.pocket--wide .switch__home:hover,.pocket--wide .switch__home:active,.pocket--wide .switch__home[data-pressed]{background:transparent}.pocket--wide:has(.switch__face--a:active,.switch__face--a[data-pressed]) .switch__key--a,.pocket--wide:has(.switch__face--b:active,.switch__face--b[data-pressed]) .switch__key--b{translate:0 2px;filter:drop-shadow(0 1px 0 var(--pc-side))}.pocket--wide:has(.switch__home:active,.switch__home[data-pressed]) .switch__home-key{translate:0 2px}.pocket--wide:has(.switch__home:active,.switch__home[data-pressed]) .switch__home-key .pocket__small{filter:drop-shadow(0 1px 0 var(--pc-side))}.pocket--wide .pocket__screen:after{box-shadow:inset 2px 3px 5px #26382026}.pocket--wide .pocket__led{transition:opacity .2s}.pocket--wide[data-off] .pocket__screen:after{opacity:.35}@media(prefers-reduced-motion:reduce){.pocket--wide .switch__key,.pocket--wide .switch__direction-key,.pocket--wide .switch__home-key,.pocket--wide .pocket__pad,.pocket--wide .pocket__led{transition:none}}.switch__direction-fill{fill:var(--pc-direction-fill, var(--pc-edge));stroke:none}.switch__direction-key{filter:drop-shadow(1px 3px 0 var(--pc-side)) drop-shadow(2px 5px 2px color-mix(in srgb,var(--pc-shadow) 25%,transparent))}.pocket--wide:has([data-action=up]:active,[data-action=up][data-pressed]) .switch__direction-piece--up{translate:0 2px}.pocket--wide:has([data-action=down]:active,[data-action=down][data-pressed]) .switch__direction-piece--down{translate:0 2px}.pocket--wide:has([data-action=left]:active,[data-action=left][data-pressed]) .switch__direction-piece--left{translate:0 2px}.pocket--wide:has([data-action=right]:active,[data-action=right][data-pressed]) .switch__direction-piece--right{translate:0 2px}@media(prefers-reduced-motion:reduce){.switch__direction-piece{transition:none}}@media(hover:hover){.pocket--wide:has(.switch__face--a:hover) .switch__key--a>circle,.pocket--wide:has(.switch__face--b:hover) .switch__key--b>circle,.pocket--wide:has(.switch__home:hover) .switch__home-key>circle{stroke:var(--pc-accent);stroke-width:2}.pocket--wide:has([data-action=up]:hover) .switch__direction-piece--up>path:not(.switch__direction-fill):not(.pocket__key-shine){stroke:var(--pc-accent);stroke-width:2}.pocket--wide:has([data-action=down]:hover) .switch__direction-piece--down>path:not(.switch__direction-fill):not(.pocket__key-shine){stroke:var(--pc-accent);stroke-width:2}.pocket--wide:has([data-action=left]:hover) .switch__direction-piece--left>path:not(.switch__direction-fill):not(.pocket__key-shine){stroke:var(--pc-accent);stroke-width:2}.pocket--wide:has([data-action=right]:hover) .switch__direction-piece--right>path:not(.switch__direction-fill):not(.pocket__key-shine){stroke:var(--pc-accent);stroke-width:2}}[data-theme=dark] .pocket--wide .switch__home-key>path{stroke:#30322f}