:root{--pixel: "Press Start 2P", ui-monospace, monospace;--c0: #fff6d3;--c1: #f9a875;--c2: #eb6b6f;--c3: #7c3f58;--line: 4px;--ease: .25s ease}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%}body{font-family:var(--pixel);color:var(--c3);background:var(--c0);user-select:none;-webkit-user-select:none;-webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent;transition:background var(--ease),color var(--ease)}button{font:inherit;color:inherit;cursor:pointer;touch-action:none}.stage{min-height:100vh;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px;padding:24px 16px}.console{position:relative;width:min(100%,400px);padding:22px 22px 34px;background:var(--c1);border:var(--line) solid var(--c3);border-radius:16px 16px 64px}.brand{display:flex;align-items:center;justify-content:space-between;margin:0 4px 16px}.brand-name{font-size:15px;letter-spacing:2px}.bezel{padding:12px 30px 14px;background:var(--c3);border-radius:10px 10px 40px}.bezel-top{display:flex;align-items:center;gap:10px;margin:0 -18px 10px}.led{flex:none;width:8px;height:8px;background:var(--c2);opacity:.4}.led.on{background:var(--c0);opacity:1}.led.paused{animation:blink 1s steps(1) infinite}.screen{position:relative;width:100%;aspect-ratio:160 / 144;overflow:hidden;background:var(--c0)}.screen canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.screen:after{content:"";position:absolute;inset:0;pointer-events:none;--grid: color-mix(in srgb, var(--c3) 7%, transparent);background:linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0 / .625% 100%,linear-gradient(var(--grid) 1px,transparent 1px) 0 0 / 100% calc(100% / 144)}.screen-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:var(--c3);font-size:11px;line-height:1.7;cursor:pointer}.screen-msg p{margin:0}.screen-msg .small{font-size:7px;color:var(--c2)}.blink{animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.paused-badge{position:absolute;top:8px;right:8px;padding:4px 6px;color:var(--c0);background:var(--c3);font-size:7px}.cart-title{margin:12px 0 0;overflow:hidden;color:var(--c1);font-size:7px;letter-spacing:1px;text-align:center;white-space:nowrap;text-overflow:ellipsis}.controls{display:flex;align-items:center;justify-content:space-between;margin:30px 6px 0}.dpad{display:grid;grid-template:repeat(3,34px) / repeat(3,34px)}.dpad-btn,.dpad-center{padding:0;border:0;background:var(--c3)}.dpad-btn.up{grid-area:1 / 2;border-radius:4px 4px 0 0}.dpad-btn.left{grid-area:2 / 1;border-radius:4px 0 0 4px}.dpad-center{grid-area:2 / 2}.dpad-btn.right{grid-area:2 / 3;border-radius:0 4px 4px 0}.dpad-btn.down{grid-area:3 / 2;border-radius:0 0 4px 4px}.dpad-btn:after{content:"";display:block;width:0;height:0;margin:auto;border:5px solid transparent}.dpad-btn.up:after{border-bottom-color:var(--c2);margin-top:6px}.dpad-btn.down:after{border-top-color:var(--c2);margin-top:18px}.dpad-btn.left:after{border-right-color:var(--c2);margin-left:6px}.dpad-btn.right:after{border-left-color:var(--c2);margin-left:18px}.dpad-btn.pressed{background:var(--c2)}.dpad-btn.pressed:after{filter:brightness(.6)}.ab{display:flex;gap:16px;padding:10px 12px;border-radius:40px;background:color-mix(in srgb,var(--c3) 12%,var(--c1));transform:rotate(-25deg)}.ab-btn-wrap,.pill-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}.ab-btn-wrap.b{transform:translateY(14px)}.ab-btn-wrap span,.pill-wrap span{color:var(--c3);font-size:9px;letter-spacing:1px}.ab-btn{width:48px;height:48px;border:var(--line) solid var(--c3);border-radius:50%;background:var(--c2)}.ab-btn.pressed{background:var(--c3)}.menu-row{display:flex;justify-content:center;gap:26px;margin-top:34px}.pill-wrap{transform:rotate(-25deg)}.pill-wrap span{font-size:6px}.pill{width:46px;height:12px;border:0;border-radius:8px;background:var(--c3)}.pill.pressed{background:var(--c2)}.deck{width:min(100%,320px);display:flex;flex-direction:column;gap:18px}.cart-slot{display:flex;align-items:center;gap:14px;padding:16px;cursor:pointer;background:var(--c0);border:var(--line) dashed var(--c3)}.cart-slot:hover,.swatch:hover{background:var(--c1)}.cart-icon{position:relative;flex:none;width:36px;height:42px;border-radius:2px 8px 2px 2px;background:var(--c3)}.cart-icon:before{content:"";position:absolute;top:8px;left:5px;right:5px;height:18px;background:linear-gradient(var(--c0) 33%,var(--c1) 33% 66%,var(--c2) 66%)}.cart-text{display:flex;flex-direction:column;gap:8px}.cart-text strong{color:var(--c3);font-size:11px;font-weight:400}.cart-text small{color:var(--c3);font:11px ui-monospace,monospace;opacity:.75}.panel{background:var(--c0);border:var(--line) solid var(--c3)}.panel h2{margin:0;padding:8px 12px 7px;color:var(--c0);background:var(--c3);font-size:9px;font-weight:400;letter-spacing:2px}.panel>:not(h2){margin:14px 16px 16px}.sys-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.key{padding:10px 6px;color:var(--c3);background:var(--c1);border:3px solid var(--c3);font-size:8px}.key:hover:not(:disabled){background:var(--c2)}.key:active:not(:disabled){color:var(--c0);background:var(--c3)}.key[aria-pressed=false]{background:var(--c0)}.key:disabled{opacity:.4;cursor:not-allowed}.key:focus-visible,.swatch:focus-visible,.cart-slot:focus-within,.dpad-btn:focus-visible,.ab-btn:focus-visible,.pill:focus-visible{outline:3px solid var(--c2);outline-offset:2px}.palettes{display:flex;flex-direction:column;gap:6px}.swatch{display:flex;align-items:center;gap:10px;padding:6px;background:transparent;border:3px solid transparent;font-size:7px;text-align:left}.swatch[aria-checked=true]{border-color:var(--c3);background:var(--c1)}.swatch .chips{display:flex;flex:none;border:2px solid var(--c3)}.swatch .chips i{width:14px;height:14px}.keymap{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:7px}.keymap dt{color:var(--c3)}.keymap dd{margin:0;color:var(--c3);opacity:.7}.drop-overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c0) 88%,transparent);pointer-events:none}.drop-overlay p{padding:28px 36px;color:var(--c3);background:var(--c1);border:var(--line) dashed var(--c3);font-size:14px;animation:blink .8s steps(1) infinite}.toast{position:fixed;left:50%;bottom:24px;z-index:20;max-width:calc(100% - 32px);padding:12px 16px;color:var(--c0);background:var(--c3);border:var(--line) solid var(--c2);font-size:8px;line-height:1.6;transform:translate(-50%)}.toast.ok{border-color:var(--c1)}.console:fullscreen{width:auto;height:100%;display:flex;align-items:center;justify-content:center;border:0;border-radius:0;background:var(--c3)}.console:fullscreen>:not(.bezel){display:none}.console:fullscreen .bezel{height:100%;display:flex;align-items:center;padding:0}.console:fullscreen .bezel-top,.console:fullscreen .cart-title{display:none}.console:fullscreen .screen{width:auto;height:100%;max-width:100vw}@media(max-width:420px){.console{padding:16px 14px 28px}.bezel{padding:10px 16px 12px}.bezel-top{margin:0 -6px 8px}.controls{margin-top:24px}}@media(prefers-reduced-motion:reduce){*,.blink,.led.paused,.drop-overlay p{animation:none!important;transition:none!important}}