.pocket{--pc-paper: var(--surface-paper, #f7f2ed);--pc-ink: var(--text-title, #44403b);--pc-edge: var(--surface-container, #e7e3de);--pc-accent: var(--nav-current, #475f00);--pc-highlight: color-mix(in srgb, var(--pc-paper) 78%, white);--pc-side: color-mix(in srgb, var(--pc-edge) 76%, var(--pc-ink));--pc-recess: color-mix(in srgb, var(--pc-ink) 20%, var(--pc-paper));--pc-key-light: color-mix(in srgb, var(--pc-accent) 17%, var(--pc-paper));--pc-key-dark: color-mix(in srgb, var(--pc-accent) 35%, var(--pc-paper));--pc-shadow: #30291f;--pc-lcd: #ced3ad;--pc-pixel: #37452c;display:block;position:relative;width:min(100%,400px);color:var(--pc-ink);perspective:1100px;container-type:inline-size;outline:none;-webkit-tap-highlight-color:transparent}[data-theme=dark] .pocket{--pc-paper: #414d37;--pc-edge: #2c3725;--pc-ink: #d9e1ce;--pc-accent: #bfcd86;--pc-highlight: #788567;--pc-side: #131c0f;--pc-recess: #1c2818;--pc-key-light: #8a9870;--pc-key-dark: #475a32;--pc-lcd: #a2b087;--pc-pixel: #263820;--pc-shadow: #000}[data-theme=dark] .pocket .pocket__ink,[data-theme=dark] .pocket .pocket__edge{stroke:#1b2615}[data-theme=dark] .pocket .pocket__machine{filter:drop-shadow(4px 8px 3px #0007) drop-shadow(13px 24px 16px #0005)}[data-theme=dark] .pocket .pocket__rim-light{opacity:.8}[data-theme=dark] .pocket .pocket__side-seam{stroke:#071005;opacity:.45}[data-theme=dark] .pocket .pocket__key-shine{stroke:#b3c198;opacity:.65}[data-theme=dark] .pocket .pocket__bezel{filter:drop-shadow(0 2px 0 #657454)}[data-theme=dark] .pocket .pocket__screen{border-color:#15200f;box-shadow:-1px -2px 3px #0006,1px 2px #7b8965,inset 4px 5px 6px #26382055}[data-theme=dark] .pocket .pocket__power span{border-color:#26351b}.pocket__machine{position:relative;width:100%;aspect-ratio:400 / 620;transform:rotate(-5deg) rotateY(-7deg);transition:transform .35s ease;filter:drop-shadow(5px 9px 3px color-mix(in srgb,var(--pc-shadow) 16%,transparent)) drop-shadow(15px 25px 17px color-mix(in srgb,var(--pc-shadow) 18%,transparent))}.pocket__shell{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.pocket__edge{stroke:var(--pc-ink);stroke-width:1}.pocket__ink{stroke:var(--pc-ink)}.pocket__rim-light{stroke:var(--pc-highlight);stroke-width:5;stroke-linecap:round;opacity:.65;filter:blur(.45px)}.pocket__side-seam{stroke:var(--pc-ink);stroke-width:2.5;opacity:.16;filter:blur(.5px)}.pocket__bezel{filter:drop-shadow(0 2px 0 var(--pc-highlight))}.pocket__pad,.pocket__small{fill:var(--pc-neutral-fill, var(--pc-edge))}.pocket__pad,.pocket__small,.pocket__action{filter:drop-shadow(1px 3px 0 var(--pc-side)) drop-shadow(2px 5px 2px color-mix(in srgb,var(--pc-shadow) 25%,transparent));transition:transform .12s,filter .12s}.pocket__key-shine{stroke:var(--pc-highlight);stroke-width:2;stroke-linecap:round;opacity:.75}.pocket__machine:has(.pocket__a:active,.pocket__a[data-pressed]) .pocket__action--a,.pocket__machine:has(.pocket__b:active,.pocket__b[data-pressed]) .pocket__action--b{transform:translateY(2px);filter:drop-shadow(0 1px 0 var(--pc-side))}.pocket__accent-stroke{stroke:var(--pc-accent)}.pocket button{position:absolute;appearance:none;padding:0;border:0;background:transparent;color:var(--pc-ink);cursor:pointer;font:inherit;touch-action:manipulation;border-radius:5px}.pocket button:hover{background:transparent}.pocket button:active,.pocket button[data-pressed]{transform:translateY(2px);background:transparent}.pocket button:focus-visible{outline:2px dashed var(--pc-accent);outline-offset:5px}.pocket__screen{position:absolute;left:18.5%;top:16.1%;width:66%;height:33%;padding:5px;box-sizing:border-box;background:var(--pc-lcd);border:2px solid var(--pc-ink);border-radius:3px 2px 5px;box-shadow:-1px -2px 1px color-mix(in srgb,var(--pc-shadow) 25%,transparent),1px 2px 0 var(--pc-highlight),inset 4px 5px 6px #26382040;overflow:hidden}.pocket__screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff14,transparent 48%),repeating-linear-gradient(0deg,transparent 0 3px,#26382009 3px 4px)}.pocket canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.pocket__brand{position:absolute;top:54.5%;left:9%;font-family:Segoe Print,Bradley Hand,Chalkboard SE,cursive;font-size:8.5cqw;font-weight:600;letter-spacing:-2px;transform:rotate(-2deg)}.pocket__led{position:absolute;left:11.3%;top:27.7%;width:5px;height:5px;border-radius:50%;background:var(--pc-accent);box-shadow:0 0 5px color-mix(in srgb,var(--pc-accent) 25%,transparent)}.pocket[data-off] .pocket__led{opacity:.2;box-shadow:none}.pocket__power-label{position:absolute;font-family:var(--font-note, monospace);letter-spacing:1px;left:25%;top:3.8%;font-size:6px}.pocket .pocket__power{left:10%;top:0;width:48px;height:30px}.pocket__power span{display:block;width:26px;height:8px;margin-left:16px;border:1px solid var(--pc-ink);border-radius:2px;background:repeating-linear-gradient(90deg,var(--pc-edge) 0 3px,var(--pc-ink) 3px 4px);transition:margin .15s}.pocket[data-off] .pocket__power span{margin-left:0}.pocket__dpad{position:absolute;left:10%;top:65.5%;width:21%;height:13%}.pocket__dpad button{width:38%;height:38%;font-size:18px}.pocket__dpad [data-action=up]{left:31%;top:0}.pocket__dpad [data-action=left]{left:0;top:31%}.pocket__dpad [data-action=right]{right:0;top:31%}.pocket__dpad [data-action=down]{left:31%;bottom:0}.pocket .pocket__a,.pocket .pocket__b{width:13%;height:8.4%;border-radius:50%}.pocket__a{left:72%;top:61.5%}.pocket__b{left:58.5%;top:65.8%}.pocket__a span,.pocket__b span{position:absolute;top:105%;left:50%;font:italic 14px var(--font-serif, serif)}.pocket .pocket__select,.pocket .pocket__start{width:13%;height:5%;rotate:-27deg;border-radius:999px}.pocket__select{left:30%;top:81.6%}.pocket__start{left:43%;top:81%}.pocket__select span,.pocket__start span{display:block;margin-top:25px;font:7px var(--font-note, monospace);letter-spacing:1px}.pocket__accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pocket__destination{position:absolute;left:50%;bottom:-20px;transform:translate(-50%);color:var(--pc-ink);font:12px var(--font-note, monospace);text-underline-offset:4px}@media(prefers-reduced-motion:reduce){.pocket__machine,.pocket__power span,.pocket__action{transition:none}}.pocket button{transition:color .14s ease}.pocket button span{pointer-events:none}.pocket .pocket__power:active,.pocket .pocket__power[data-pressed]{transform:none}.pocket__power span{box-shadow:inset 0 1px 0 var(--pc-highlight),0 1px 1px color-mix(in srgb,var(--pc-shadow) 20%,transparent)}.pocket__small--select,.pocket__small--start{transition:transform .12s ease,filter .12s ease}.pocket:not(.pocket--wide):has(.pocket__select:active,.pocket__select[data-pressed]) .pocket__small--select,.pocket:not(.pocket--wide):has(.pocket__start:active,.pocket__start[data-pressed]) .pocket__small--start{transform:translateY(2px);filter:drop-shadow(0 1px 0 var(--pc-side))}.pocket__destination{border-radius:3px;transition:color .15s ease}.pocket__destination:hover{color:var(--pc-accent)}@media(hover:hover){.pocket button:hover{color:var(--pc-accent)}.pocket .pocket__power:hover span{border-color:var(--pc-accent)}.pocket:not(.pocket--wide):has(.pocket__a:hover) .pocket__action--a>path:first-child,.pocket:not(.pocket--wide):has(.pocket__b:hover) .pocket__action--b>path:first-child,.pocket:has(.pocket__select:hover) .pocket__small--select,.pocket:has(.pocket__start:hover) .pocket__small--start{stroke:var(--pc-accent);stroke-width:2}.pocket__dpad button:hover{text-shadow:0 0 3px color-mix(in srgb,var(--pc-accent) 25%,transparent)}}@media(prefers-reduced-motion:reduce){.pocket button,.pocket__small,.pocket__destination{transition:none}}