:root{--bg:#f7f7f7;--fg:#535353;--accent:#535353;--muted:color-mix(in srgb, var(--fg) 64%, var(--bg));--line:color-mix(in srgb, var(--fg) 22%, var(--bg));--panel:color-mix(in srgb, var(--fg) 6%, var(--bg));--on-accent:var(--bg);--b:3px;--font:"Pixelify Sans", ui-rounded, system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-tap-highlight-color:transparent;margin:0;font-size:17px;line-height:1.45;transition:background-color .3s,color .3s}button,input,select{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.px,.btn,.tile,.switch .box,kbd,.chip,.swatch,.field input,.emoji-in,.designer,.toast,.pad{--c:var(--fg);box-shadow:0 calc(var(--b) * -1) 0 0 var(--c), 0 var(--b) 0 0 var(--c), calc(var(--b) * -1) 0 0 0 var(--c), var(--b) 0 0 0 var(--c)}.page{max-width:1180px;margin:0 auto;padding:clamp(16px,3.2vw,40px) clamp(16px,3.2vw,40px) 48px;transition:padding-right .25s}.masthead{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;margin-bottom:clamp(18px,3vw,32px);display:flex}.wordmark{align-items:flex-end;gap:12px;margin:0;line-height:0;display:flex}.wordmark svg{width:auto;height:28px;display:block}.wordmark svg+svg{height:14px;color:var(--muted);margin-bottom:1px}.switches{align-items:center;gap:22px;display:flex}.switch{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:0;align-items:center;gap:9px;padding:4px 2px;font-size:16px;display:inline-flex}.switch input{opacity:0;width:1px;height:1px;position:absolute}.switch .box{--b:2px;background:var(--bg);width:14px;height:14px;position:relative}.switch input:checked+.box:after,.switch[aria-pressed=true] .box:after{content:"";background:var(--fg);position:absolute;inset:3px}.switch:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}kbd{--b:2px;--c:var(--line);min-width:1.7em;font:500 13px/1.5 var(--font);text-align:center;color:var(--muted);background:var(--bg);margin:0 2px;padding:0 5px;display:inline-block}.stage{-webkit-user-select:none;user-select:none;position:relative}#game{image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:pointer;margin:0 auto;display:block}.pads{gap:12px;margin-top:14px;display:none}.pad{background:var(--panel);touch-action:none;-webkit-user-select:none;user-select:none;border:0;flex:1;justify-content:center;align-items:center;gap:10px;min-height:60px;font-size:18px;font-weight:600;display:flex}.pad svg{width:18px;height:auto}.pad.held{background:var(--fg);color:var(--bg)}@media (pointer:coarse){.pads{display:flex}}.now{grid-template-columns:auto minmax(0,max-content) auto 1fr auto;align-items:center;gap:8px 16px;margin:clamp(20px,3vw,30px) 0 18px;display:grid}.step{cursor:pointer;background:0 0;border:0;place-items:center;width:44px;height:44px;display:grid}.step svg{width:13px;height:auto}.step:hover{color:var(--accent)}.skin-name{margin:0;line-height:0}.skin-name svg{width:auto;max-width:100%;height:35px;display:block}.tagline{color:var(--muted);max-width:60ch;margin:10px 0 0}.now-actions{grid-column:5;justify-self:end;gap:14px;display:flex}.btn{--c:var(--fg);background:var(--bg);cursor:pointer;white-space:nowrap;border:0;padding:9px 16px;font-size:16px;font-weight:600}.btn:hover{background:var(--panel)}.btn.primary{background:var(--fg);color:var(--bg)}.btn.primary:hover{background:var(--accent);--c:var(--accent);color:var(--on-accent)}.btn[hidden]{display:none}.rail{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:18px 16px;padding:4px;display:grid}.tile{--c:var(--line);background:var(--bg);cursor:pointer;text-align:left;border:0;flex-direction:column;gap:0;padding:0;display:flex;position:relative}.tile canvas{width:100%;height:auto;image-rendering:pixelated;display:block}.tile .label{color:var(--muted);justify-content:space-between;align-items:baseline;gap:6px;padding:7px 9px 8px;font-size:15px;display:flex}.tile .label b{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.tile .num{opacity:.8;font-size:12px}.tile:hover{--c:var(--muted)}.tile[aria-current=true]{--c:var(--accent);--b:4px}.tile[aria-current=true] .label{color:var(--fg)}.tile[aria-current=true] .label b{font-weight:700}.tile.add{min-height:100px;color:var(--muted);background:0 0;justify-content:center;align-items:center;gap:6px;font-size:15px}.tile.add svg{width:18px}.tile.add:hover{color:var(--fg)}.keys{color:var(--muted);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px 28px;margin-top:clamp(26px,4vw,40px);font-size:15px;display:grid}.keys p{margin:0}.keys .credit{grid-column:1/-1;margin-top:18px;font-size:14px}.keys .credit a{color:var(--fg);text-underline-offset:3px;text-decoration:underline}.keys .credit a:hover{color:var(--accent)}.touch-only{display:none}@media (pointer:coarse){.touch-only{display:block}.keys .desk,.switch kbd{display:none}}.designer{--c:var(--line);z-index:20;background:var(--bg);overscroll-behavior:contain;width:min(430px,100vw);box-shadow:calc(var(--b) * -1) 0 0 0 var(--c);padding:22px 24px 0;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.designer[hidden]{display:none}body.designing .page{padding-right:calc(min(430px,100vw) + 24px)}.d-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.d-head h2{margin:0;font-size:24px;font-weight:700}.d-intro{color:var(--muted);margin:0 0 18px;font-size:15px}.d-section{border-top:2px solid var(--line);padding:16px 0 18px}.d-section h3{margin:0 0 12px;font-size:18px;font-weight:700}.d-row{margin-bottom:14px}.d-row>.d-label{justify-content:space-between;align-items:baseline;margin-bottom:7px;font-size:15px;display:flex}.d-label small{color:var(--muted);font-size:13px}.field input{--b:2px;--c:var(--line);background:var(--bg);border:0;width:100%;padding:8px 10px;font-size:17px}.field input:focus{--c:var(--fg);outline:none}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{--b:2px;--c:var(--line);background:var(--bg);cursor:pointer;border:0;align-items:center;gap:6px;padding:4px 9px;font-size:14px;line-height:1.3;display:inline-flex}.chip:hover{--c:var(--muted)}.chip[aria-pressed=true]{--c:var(--fg);background:var(--fg);color:var(--bg)}.chip.sprite{padding:3px}.chip.sprite canvas{width:40px;height:40px;image-rendering:pixelated;display:block}.chip.sprite[aria-pressed=true]{background:var(--bg);--c:var(--accent);--b:3px}.emoji-row{align-items:center;gap:10px;margin-top:10px;display:flex}.emoji-in{--b:2px;--c:var(--line);background:var(--bg);border:0;width:108px;padding:5px 8px;font-size:18px}.emoji-in:focus{--c:var(--fg);outline:none}.emoji-in.active{--c:var(--accent);--b:3px}.mini{color:var(--muted);cursor:pointer;align-items:center;gap:6px;font-size:14px;display:inline-flex}.mini input{accent-color:var(--fg)}.emoji-suggest{flex-wrap:wrap;gap:2px;display:flex}.emoji-suggest button{cursor:pointer;background:0 0;border:0;padding:2px 3px;font-size:19px;line-height:1.2}.emoji-suggest button:hover{transform:translateY(-1px)}.swatches{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.swatch-wrap{color:var(--muted);flex-direction:column;gap:6px;font-size:14px;display:flex}.swatch{--b:2px;--c:var(--line);cursor:pointer;height:34px;position:relative}.swatch input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.swatch:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.d-inline{flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;display:flex}.d-inline select{background:var(--panel);border:0;padding:6px 8px;font-size:14px}.d-foot{background:var(--bg);border-top:2px solid var(--line);flex-wrap:wrap;gap:12px;margin-top:4px;padding:16px 0 20px;display:flex;position:sticky;bottom:0}.d-foot .grow{flex:1}.btn.danger{color:#c0392b;--c:currentColor}@media (width<=760px){.designer{width:100vw;height:62dvh;box-shadow:0 calc(var(--b) * -1) 0 0 var(--c);padding:16px 16px 0;top:auto;left:0}body.designing .page{padding-bottom:64dvh;padding-right:clamp(16px,3.2vw,40px)}.d-foot{gap:10px;padding:12px 0 14px}.d-foot .btn{padding:7px 11px;font-size:15px}.now{grid-template-columns:auto minmax(0,1fr) auto}.now-actions{grid-column:1/-1;justify-self:start}.skin-name svg{height:26px}.rail{scroll-snap-type:x mandatory;gap:14px;margin:0 -4px;padding:6px 4px 10px;display:flex;overflow-x:auto}.tile{scroll-snap-align:start;flex:0 0 132px}.wordmark svg{height:22px}.wordmark svg+svg{height:11px}}.visually-hidden{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.upload-row{flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;display:flex}.chip.upload{cursor:pointer}.chip.upload.on{--c:var(--accent)}.chip.upload:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.linkish{color:var(--muted);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0;font-size:14px;text-decoration:underline}.linkish:hover{color:var(--fg)}.hint{color:var(--muted);margin:6px 0 0;font-size:13px}.role-row{margin:-6px -6px 14px;padding:6px}.role-row.drop{outline:3px dashed var(--accent);outline-offset:2px}.img-panel,.duck-row{align-items:flex-start;gap:14px;margin-top:12px;display:flex}.img-preview{--b:2px;--c:var(--line);height:auto;image-rendering:pixelated;box-shadow:0 calc(var(--b) * -1) 0 0 var(--c), 0 var(--b) 0 0 var(--c), calc(var(--b) * -1) 0 0 0 var(--c), var(--b) 0 0 0 var(--c);flex:none}.img-meta{min-width:0;font-size:14px}.img-meta b{font-weight:700}.img-meta p{color:var(--muted);margin:2px 0 8px;font-size:13px}.img-opts{flex-wrap:wrap;align-items:center;gap:6px 14px;display:flex}.mini input:disabled+*{opacity:.55}.mini:has(input:disabled){opacity:.55}.toast{--c:var(--fg);z-index:40;background:var(--fg);color:var(--bg);opacity:0;pointer-events:none;max-width:calc(100vw - 32px);padding:9px 16px;font-size:16px;transition:opacity .2s,transform .2s;position:fixed;bottom:28px;left:50%;transform:translate(-50%,16px)}.toast.show{opacity:1;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){body,.toast,.page{transition:none}}