body{--paper:#fff3c4;--tile-bg:#dff1ff;background:var(--paper);transition:background-color .6s}.slide{position:absolute;inset:0;overflow:hidden}.stage{align-items:center;gap:var(--gap-board);padding-top:var(--pad-top);flex-direction:column;display:flex;position:absolute;inset:84px 16px 16px}.slide.is-landscape .stage{flex-direction:row;justify-content:center}.tools{flex:none;align-items:center;gap:36px;display:flex}.slide.is-landscape .tools{flex-direction:column}.sample{width:var(--sample);height:var(--sample);background:var(--tile-bg);cursor:pointer;border:0;border-radius:50%;flex:none;padding:0;box-shadow:0 4px #3b335526,0 2px 8px #3b335526}.sample svg{width:100%;height:100%}.tool{width:var(--tool);height:var(--tool);color:#5c7cfa;cursor:pointer;background:#fff;border:0;border-radius:50%;flex:none;place-items:center;padding:0;display:grid;box-shadow:0 4px #3b335526,0 2px 8px #3b335526}.tool svg{width:58%;height:58%}.tool-hint svg{width:72%}.tool-next{--hold:0;background:var(--next-bg,#fff);touch-action:none;position:relative}.next-face{position:absolute;inset:8%}.next-face svg{width:100%;height:100%;display:block}.next-badge{background:#5c7cfa;border-radius:50%;place-items:center;width:42%;height:42%;display:grid;position:absolute;bottom:-6%;right:-6%;box-shadow:0 0 0 2.5px #fff}.next-badge svg{width:70%;height:70%}.tool-next .ring{pointer-events:none;width:calc(100% + 10px);height:calc(100% + 10px);position:absolute;inset:-5px;rotate:-90deg}.ring-fill{fill:none;stroke:#5c7cfa;stroke-width:6px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--hold));opacity:calc(var(--hold) * 20)}.tool-next{z-index:1;transition:scale .15s ease-out}.tool-next.is-holding{z-index:2;scale:2}.tool-next.is-nudging{animation:.5s ease-in-out nudge}.tool-next.is-nudging .ring-fill{animation:.8s ease-in-out ring-peek}.tool-next.is-done{animation:.4s ease-out pop}@keyframes nudge{20%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}}@keyframes ring-peek{0%,to{stroke-dashoffset:1px;opacity:0}40%,60%{stroke-dashoffset:.7px;opacity:1}}.tool:disabled{opacity:.35;box-shadow:none;cursor:default}.sample:active,.tool:not(:disabled):active{transform:translateY(3px)scale(.92);box-shadow:0 1px #3b335526}.board{--gap:max(3px, calc(var(--cell) * .035));width:calc(var(--cell) * 3);height:calc(var(--cell) * 3);border-radius:calc(var(--cell) * .12 + var(--gap));background:color-mix(in srgb, var(--paper) 70%, #3b3355);flex:none;position:relative;box-shadow:inset 0 3px 6px #3b33554d}.tile{width:var(--cell);height:var(--cell);padding:var(--gap);box-sizing:border-box;touch-action:none;transition:transform .16s ease-out,padding .3s;position:absolute;top:0;left:0}.tile.is-dragging{z-index:2;transition:padding .3s}.board.is-shuffling .tile{transition:transform var(--step,80ms) linear, padding .3s}.board.is-shuffling .tile.is-home .tile-face{box-shadow:0 3px #3b33552e}.tile-face{--r:calc(var(--cell) * .12);border-radius:var(--r);background:var(--tile-bg);width:100%;height:100%;transition:border-radius .3s,box-shadow .3s;overflow:hidden;box-shadow:0 3px #3b33552e}.tile-face svg{width:100%;height:100%;display:block}.tile.is-home .tile-face{box-shadow:0 3px 0 #3b33552e, 0 0 0 calc(var(--gap) * .9) #fffffff2, 0 0 calc(var(--gap) * 4) #ffec99e6}.board.is-whole .tile{padding:0}.board.is-whole .tile-face{box-shadow:none;border-radius:0}.board.is-whole .tile[data-tile="0"] .tile-face{border-top-left-radius:var(--r)}.board.is-whole .tile[data-tile="2"] .tile-face{border-top-right-radius:var(--r)}.board.is-whole .tile[data-tile="6"] .tile-face{border-bottom-left-radius:var(--r)}.board.is-whole .tile[data-tile="8"] .tile-face{border-bottom-right-radius:var(--r)}.tile.is-last{opacity:0;pointer-events:none;transition:transform .16s ease-out,padding .3s,opacity .3s,scale .35s cubic-bezier(.3,1.6,.5,1);scale:.5}.board.is-whole .tile.is-last{opacity:1;scale:1}.board.is-popping{animation:.45s ease-out pop}.board.is-hopping{animation:.5s ease-out 3 hop}.board.is-waiting{cursor:pointer;animation:1.6s ease-in-out infinite waiting}.board.is-pressed{animation:.22s ease-out pressed}@keyframes waiting{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-2.5%)scale(1.02)}}@keyframes pressed{50%{transform:scale(.94)}}.tile-face.is-landing{animation:.22s ease-out land}.tile-face.is-wiggling{animation:.4s ease-in-out wiggle}@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes hop{40%{transform:translateY(-8%)scale(1.03)}70%{transform:translateY(0)scale(1.03,.97)}}@keyframes land{40%{transform:scale(.9)}}@keyframes wiggle{20%{transform:rotate(-8deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}}.star{z-index:5;width:calc(var(--cell) * .35);height:calc(var(--cell) * .35);margin:calc(var(--cell) * -.175) 0 0 calc(var(--cell) * -.175);background:hsl(var(--hue) 90% 65%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);pointer-events:none;animation:.9s ease-out forwards burst;position:absolute}@keyframes burst{0%{opacity:1;transform:translate(0)scale(.3)rotate(0)}80%{opacity:1}to{transform:translate(var(--tx), var(--ty)) scale(1) rotate(180deg);opacity:0}}.ghost{z-index:3;border-radius:calc(var(--cell) * .12 + var(--gap));background:var(--tile-bg);opacity:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.ghost.is-showing{animation:1.2s ease-in-out ghost}@keyframes ghost{20%,75%{opacity:.85}}.ghost svg{width:100%;height:100%}.hint{--hx:0px;--hy:0px;z-index:4;pointer-events:none;opacity:0;width:0;height:0;transition:opacity .3s;position:absolute}.hint.is-visible{opacity:1}.hint-hand{filter:drop-shadow(0 3px 4px #3b335559);width:72px;height:90px;position:absolute;top:-5px;left:-34px;overflow:visible}.hint-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}.hint.is-visible .hint-hand{animation:1.8s ease-in-out infinite hint-drag}@keyframes hint-drag{0%{opacity:0;transform:translateY(12px)}20%{opacity:1;transform:translate(0)}65%{transform:translate(var(--hx), var(--hy));opacity:1}85%,to{transform:translate(var(--hx), var(--hy));opacity:0}}.tile.is-hinted .tile-face{animation:1.8s ease-in-out infinite hinted}@keyframes hinted{0%,to{box-shadow:0 3px #3b33552e,0 0 #ffe06600}50%{box-shadow:0 3px 0 #3b33552e, 0 0 0 calc(var(--gap) * 1.2) #ffe066, 0 0 calc(var(--gap) * 6) #ffe066}}.hint.is-visible.is-tapping .hint-hand{animation:1.2s ease-in-out infinite hint-tap}@keyframes hint-tap{0%,to{transform:translateY(18px)scale(1)}40%{transform:translate(0)scale(.92)}55%{transform:translate(0)scale(.92)}}