.sbx{--sky-top:#8fc3e6;--sky-horizon:#e3efe9;--hill-far:#b7d3b4;--hill-near:#9dc594;--floor:#8ab981;--cloud:#ffffffe6;--pal-w:272px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sbx{--sky-top:#0d1628;--sky-horizon:#263447;--hill-far:#1f3130;--hill-near:#1a2b25;--floor:#15231d;--cloud:#aabedc29}}:root[data-theme=dark] .sbx{--sky-top:#0d1628;--sky-horizon:#263447;--hill-far:#1f3130;--hill-near:#1a2b25;--floor:#15231d;--cloud:#aabedc29}.sbx-bg{--hz:62%;background:var(--floor);position:absolute;inset:0;overflow:hidden}.sbx-bg>*{position:absolute}.sbx-bg .sky{height:max(0%, var(--hz));background:linear-gradient(var(--sky-top), var(--sky-horizon));top:0;left:0;right:0}.sbx-bg .floor{bottom:0;left:0;right:0;top:calc(var(--hz) - 2%);background:linear-gradient(var(--hill-near), var(--floor) 45%)}.sbx-bg .hills{transform:translateX(calc(var(--pan,0%) * -1));left:-10%;right:-10%}.sbx-bg .hills.far{bottom:calc(100% - var(--hz));background:var(--hill-far);height:12%;transform:translateX(calc(var(--pan,0%) * -.6));-webkit-mask:radial-gradient(60% 100% at 18% 100%,#000 98%,#0000),radial-gradient(45% 80% at 62% 100%,#000 98%,#0000),radial-gradient(40% 90% at 96% 100%,#000 98%,#0000);mask:radial-gradient(60% 100% at 18% 100%,#000 98%,#0000),radial-gradient(45% 80% at 62% 100%,#000 98%,#0000),radial-gradient(40% 90% at 96% 100%,#000 98%,#0000)}.sbx-bg .hills.near{bottom:calc(98% - var(--hz));background:var(--hill-near);height:8%;-webkit-mask:radial-gradient(55% 100% at 40% 100%,#000 98%,#0000),radial-gradient(50% 100% at 88% 100%,#000 98%,#0000),radial-gradient(30% 100% at 2% 100%,#000 98%,#0000);mask:radial-gradient(55% 100% at 40% 100%,#000 98%,#0000),radial-gradient(50% 100% at 88% 100%,#000 98%,#0000),radial-gradient(30% 100% at 2% 100%,#000 98%,#0000)}.sbx-bg .cloud{background:var(--cloud);border-radius:999px;width:180px;height:44px;animation:linear infinite sbx-drift;left:0}.sbx-bg .cloud:before,.sbx-bg .cloud:after{content:"";background:inherit;border-radius:50%;position:absolute}.sbx-bg .cloud:before{width:78px;height:64px;top:-30px;left:30px}.sbx-bg .cloud:after{width:58px;height:48px;top:-20px;left:92px}.sbx-bg .c1{top:calc(var(--hz) - 52%);animation-duration:140s;animation-delay:-30s}.sbx-bg .c2{top:calc(var(--hz) - 40%);opacity:.8;animation-duration:190s;animation-delay:-120s;scale:.7}.sbx-bg .c3{top:calc(var(--hz) - 56%);opacity:.7;animation-duration:230s;animation-delay:-60s;scale:.55}.sbx-bg .c4{top:calc(var(--hz) - 32%);opacity:.85;animation-duration:170s;animation-delay:-150s;scale:.85}@keyframes sbx-drift{0%{transform:translate(-260px)}to{transform:translate(calc(100vw + 60px))}}.sbx-bg .shade{width:46vmax;height:30vmax;opacity:var(--down,0);background:radial-gradient(closest-side,#1432141a,#1432140d 60%,#0000);border-radius:50%;animation:linear infinite sbx-drift-shade;left:0}.sbx-bg .s1{animation-duration:150s;animation-delay:-40s;top:8%}.sbx-bg .s2{animation-duration:210s;animation-delay:-150s;top:52%;scale:.75}@keyframes sbx-drift-shade{0%{transform:translate(-50vmax)}to{transform:translate(calc(100vw + 4vmax))}}@media (prefers-reduced-motion:reduce){.sbx-bg :is(.cloud,.shade){animation-play-state:paused}}#c[data-tool=paint]{cursor:copy}#c[data-tool=erase]{cursor:crosshair}.sbx[data-view=walk] #c{cursor:grab}.sbx[data-view=walk] #c:active{cursor:grabbing}#c:focus{outline:none}.sbx-view{box-sizing:border-box;border-radius:14px;gap:2px;height:46px;padding:3px;display:flex}.sbx-view button{color:var(--ink-2);cursor:pointer;font:600 13px/1 var(--body);background:0 0;border:0;border-radius:11px;align-items:center;gap:7px;padding:0 12px 0 9px;transition:background .15s,color .15s;display:flex}.sbx-view button:hover{background:var(--panel-2);color:var(--ink)}.sbx-view button[aria-checked=true]{background:var(--ink);color:var(--panel)}.sbx-view svg{fill:currentColor;flex:none;width:20px;height:20px}.sbx-view button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.sbx-pal,.sbx-bar,#bUndo,#bRedo{transition:opacity .25s ease, translate .3s var(--ease), visibility .25s}.sbx[data-view=walk] :is(.sbx-pal,.sbx-bar,#bUndo,#bRedo){opacity:0;visibility:hidden;pointer-events:none}.sbx[data-view=walk] .sbx-pal{translate:-24px}.sbx[data-view=walk] .sbx-bar{translate:0 24px}.sbx-help .for-walk,.sbx[data-view=walk] .sbx-help .for-board{display:none}.sbx[data-view=walk] .sbx-help .for-walk{display:grid}.sbx-stick,.sbx-jump{display:none}.sbx.touch[data-view=walk] :is(.sbx-stick,.sbx-jump){display:grid}.sbx.touch[data-view=walk] .sbx-help{display:none}.sbx-stick{z-index:3;left:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));touch-action:none;border-radius:50%;place-items:center;width:132px;height:132px;position:absolute}.sbx-stick i{background:var(--panel);width:54px;height:54px;box-shadow:var(--shadow);pointer-events:none;border-radius:50%}.sbx-jump{z-index:3;right:24px;bottom:calc(36px + env(safe-area-inset-bottom,0px));width:84px;height:84px;color:var(--ink);cursor:pointer;touch-action:none;border-radius:50%;place-items:center;position:absolute}.sbx-jump:active{transform:scale(.94)}.sbx-jump svg{fill:currentColor;width:34px;height:34px}.sbx-top{z-index:3;left:16px;top:calc(16px + env(safe-area-inset-top,0px));align-items:center;gap:8px;display:flex;position:absolute}.sbx-top .btn.glass{width:46px;height:46px;color:var(--ink)}.sbx-title{box-sizing:border-box;border-radius:14px;align-items:center;gap:10px;height:46px;padding:0 16px;display:flex}.sbx-title b{font:600 17px/1 var(--display);letter-spacing:.01em;cursor:text;-webkit-user-select:text;user-select:text;white-space:nowrap;text-overflow:ellipsis;border-radius:6px;outline:none;max-width:220px;margin:0 -4px;padding:2px 4px;overflow:hidden}.sbx-title b:hover{background:var(--panel-2)}.sbx-title b:focus{background:var(--panel);box-shadow:0 0 0 2px var(--lamp);text-overflow:clip}.sbx-title .stats{color:var(--muted);font:500 13px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}.sbx-menu{border-radius:var(--r);width:250px;animation:settings-in .18s var(--ease);transform-origin:100% 0;gap:2px;padding:6px;display:grid;position:absolute;top:56px;right:0}.sbx-menu[hidden]{display:none}.sbx-menu button{text-align:left;color:var(--ink);font:500 14px/1.2 var(--body);cursor:pointer;background:0 0;border:0;border-radius:10px;padding:11px 12px}.sbx-menu button:hover{background:var(--panel-2)}.sbx-menu .danger{color:var(--accent)}.sbx-menu .s-row{min-height:44px;padding:0 12px;font-size:14px}.sbx-menu>.s-row:first-of-type{border-top:1px solid var(--line);margin-top:4px}.sbx-menu .s-label{border-top:1px solid var(--line);margin:6px 12px 2px;padding-top:10px}.sbx-pal{z-index:3;left:16px;top:calc(16px + 46px + 12px + env(safe-area-inset-top,0px));max-height:calc(100% - 16px - 46px - 12px - 16px - env(safe-area-inset-top,0px));width:var(--pal-w);box-sizing:border-box;border-radius:var(--r-lg);flex-direction:column;gap:8px;min-height:0;padding:10px;display:flex;position:absolute}.chips{flex-wrap:wrap;gap:4px;display:flex}.chips button{color:var(--ink-2);font:500 13px/1 var(--body);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:8px 10px}.chips button:hover{background:var(--panel-2)}.chips button[aria-selected=true]{background:var(--ink);color:var(--panel)}.parts{overscroll-behavior:contain;flex:0 auto;grid-template-columns:repeat(4,1fr);align-content:start;gap:4px;min-height:120px;margin:0 -2px;padding:2px;display:grid;position:relative;overflow-y:auto}.parts button{aspect-ratio:1;background:var(--panel-2);cursor:pointer;border:0;border-radius:12px;place-items:center;padding:4px;transition:background .12s,box-shadow .12s;display:grid;position:relative}.parts button:hover{background:var(--panel-3)}.parts button[aria-selected=true]{background:var(--panel);box-shadow:0 0 0 2px var(--lamp), var(--shadow)}.parts img{object-fit:contain;pointer-events:none;width:100%;height:100%}.parts small{color:var(--muted);font:500 10px/1 var(--mono);position:absolute;bottom:3px;right:5px}.parts em.n{font:600 10.5px/1 var(--mono);color:var(--ink-2);font-style:normal;position:absolute;top:4px;left:5px}.parts em.n.out{color:var(--muted)}.parts button.out img{opacity:.35;filter:saturate(.3)}.pal-note{color:var(--muted);font:400 12.5px/1.35 var(--body);margin:0}.pal-note[hidden]{display:none}.sbx-pal.trophies .parts{grid-template-columns:repeat(2,1fr);gap:6px}.parts .trophy{aspect-ratio:auto;text-align:left;flex-direction:column;align-items:stretch;gap:2px;padding:4px 4px 8px;display:flex}.parts .trophy img{aspect-ratio:4/3;border-radius:8px;height:auto}.parts .trophy b{font:600 12.5px/1.2 var(--body);color:var(--ink);white-space:nowrap;text-overflow:ellipsis;padding:0 4px;overflow:hidden}.parts .trophy small{font:500 11px/1.2 var(--body);padding:0 4px;position:static}.parts .trophy.locked img{filter:grayscale()contrast(.8);opacity:.4}.parts .trophy.locked b{color:var(--muted)}.parts .trophy.used img{opacity:.55}.sbx-pal .s-label{gap:8px;margin:6px 0 0;display:flex}.sbx-pal .s-label span{text-transform:none;letter-spacing:0;color:var(--ink-2);font-weight:500}.colors{grid-template-columns:repeat(8,1fr);gap:5px;display:grid}.colors button{aspect-ratio:1;cursor:pointer;background:var(--c);border:0;border-radius:8px;transition:transform .1s;box-shadow:inset 0 -3px #00000024,inset 0 0 0 1px #00000014}.colors button.trans{background:linear-gradient(135deg, var(--c) 45%, color-mix(in srgb, var(--c) 35%, transparent) 55%)}.colors button{position:relative}.colors button:hover{transform:translateY(-1px)}.colors button:disabled{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent);opacity:.5;cursor:default;background:0 0;transform:none}.colors em{box-sizing:border-box;background:var(--panel);min-width:14px;color:var(--ink-2);font:600 9.5px/1 var(--mono);box-shadow:0 0 0 1px var(--line);border-radius:6px;padding:2px 3px;font-style:normal;position:absolute;bottom:-3px;right:-3px}.colors[hidden],.sbx-pal .s-label[hidden]{display:none}.colors button[aria-selected=true]{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--ink)}:is(.chips button,.parts button,.colors button,.tools button,.sbx-menu button):focus-visible{outline:2px solid var(--focus);outline-offset:2px}.sbx-bar{z-index:3;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:calc(16px + var(--pal-w) + 16px);max-width:calc(100% - var(--pal-w) - 64px - 250px);box-sizing:border-box;border-radius:18px;align-items:center;gap:6px;padding:5px;display:flex;position:absolute}.tools{background:var(--panel-2);border-radius:13px;padding:3px;display:flex}.tools button{color:var(--ink-2);font:600 13px/1 var(--body);cursor:pointer;background:0 0;border:0;border-radius:10px;padding:11px 13px}.tools button[aria-checked=true]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}.cur{min-width:0;color:var(--ink-2);font:500 13px/1.2 var(--body);align-items:center;gap:8px;padding:0 10px 0 4px;display:flex}.cur i{background:var(--c);border-radius:5px;flex:none;width:16px;height:16px;box-shadow:inset 0 -2px #00000026}.cur span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sbx-help{z-index:2;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));border-radius:var(--r);color:var(--ink-2);font:400 12.5px/1.2 var(--body);padding:12px 14px;transition:opacity .2s;position:absolute}.sbx-help.off{opacity:0;pointer-events:none}.sbx-help dl{grid-template-columns:auto auto;gap:6px 12px;margin:0;display:grid}.sbx-help dt{font:500 11.5px/1.2 var(--mono);color:var(--ink)}.sbx-help dd{margin:0}.sbx-code{z-index:6;box-sizing:border-box;border-radius:var(--r-lg);flex-direction:column;gap:10px;width:min(640px,100vw - 32px);height:min(480px,100% - 32px);padding:12px;display:flex;position:absolute;top:50%;left:50%;translate:-50% -50%}.sbx-code[hidden]{display:none}.sbx-code textarea{resize:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 12px/1.5 var(--mono);-webkit-user-select:text;user-select:text;border-radius:12px;flex:1;padding:12px}.sbx-code .row{justify-content:space-between;align-items:center;gap:12px;display:flex}.sbx-code small{color:var(--muted);font-size:13px}.sbx-code .quiet{border:1px solid var(--line-2);color:var(--ink);cursor:pointer;font:600 13px/1 var(--body);background:0 0;border-radius:10px;padding:10px 14px}.sbx-toast{z-index:7;left:50%;top:calc(16px + 46px + 12px + env(safe-area-inset-top,0px));background:var(--ink);color:var(--panel);font:500 13.5px/1.2 var(--body);opacity:0;pointer-events:none;transition:opacity .2s, translate .25s var(--ease);box-sizing:border-box;text-align:center;border-radius:12px;width:max-content;max-width:min(560px,100vw - 32px);padding:11px 16px;position:absolute;translate:-50% -12px}.sbx-toast.on{opacity:1;translate:-50%}@media (width<=900px){.sbx-title .stats{display:none}}@media (width<=760px){.sbx{--pal-h:214px}.sbx-view{z-index:3;right:8px;bottom:calc(8px + var(--pal-h) + 8px + env(safe-area-inset-bottom,0px));border-radius:18px;height:51px;padding:5px;position:fixed}.sbx-view button{padding:0 10px}.sbx-view span{display:none}.sbx[data-view=walk] .sbx-view{bottom:calc(36px + 84px + 16px + env(safe-area-inset-bottom,0px));right:16px}.sbx[data-view=walk] .sbx-pal{translate:0 24px}.sbx-title{padding:0 12px}.sbx-title .stats{display:none}.sbx-title b{max-width:120px}.sbx-pal.trophies .parts{height:132px}.sbx-pal.trophies .parts button{width:124px;height:128px}.parts .trophy img{aspect-ratio:auto;height:80px}.sbx-pal{top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;height:var(--pal-h);gap:6px;padding:8px}.chips{scrollbar-width:none;flex-wrap:nowrap;flex:none;overflow-x:auto}.parts{scrollbar-width:none;flex:none;height:72px;min-height:0;display:flex;overflow:auto hidden}.parts button{flex:none;width:72px;height:72px}.colors{scrollbar-width:none;flex:none;padding:4px 2px;display:flex;overflow-x:auto}.colors button{flex:none;width:32px;height:32px}.sbx-bar{max-width:none;left:8px;right:116px;bottom:calc(8px + var(--pal-h) + 8px + env(safe-area-inset-bottom,0px))}.cur{display:none}.tools{flex:1}.tools button{white-space:nowrap;flex:1;padding:11px 6px}.sbx-help{display:none}.sbx-toast{top:calc(16px + 46px + 10px + env(safe-area-inset-top,0px))}}