body{background:linear-gradient(#f1e3d3,#e6d3bd)}.wipe{place-items:center;padding:76px 16px 24px;display:grid;position:absolute;inset:0}.window{background:#c8895a;border-radius:18px;width:min(100%,720px);height:min(100%,720px);padding:16px;box-shadow:inset 0 0 0 4px #a66a3f,0 10px 24px #3b335540}.pane{touch-action:none;border-radius:8px;width:100%;height:100%;position:relative;overflow:hidden}.pane canvas{width:100%;height:100%;position:absolute;inset:0}.mud{transition:opacity .4s}.mud.is-fading{opacity:0}.pane.is-hit{animation:.25s ease-out hit}@keyframes hit{30%{transform:scale(.97)rotate(-.6deg)}}.shine{pointer-events:none;background:linear-gradient(115deg,#0000 35%,#ffffffd9 50%,#0000 65%);position:absolute;inset:0;transform:translate(-120%)}.pane.is-shining .shine{animation:.9s ease-out .2s shine}@keyframes shine{to{transform:translate(120%)}}.hint{pointer-events:none;opacity:0;width:0;height:0;transition:opacity .3s;position:absolute}.hint.is-visible{opacity:1}.hint-ripple{opacity:0;background:#ffffff4d;border:6px solid #fff;border-radius:50%;width:100px;height:100px;position:absolute;top:-50px;left:-50px;box-shadow:0 0 0 3px #3b335566,inset 0 0 0 3px #3b335566}.hint-hand{transform-origin:34px 5px;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.6s ease-in-out infinite hint-tap}.hint.is-visible .hint-ripple{animation:1.6s ease-out infinite hint-ripple}@keyframes hint-tap{0%{transform:translate(18px,28px)rotate(-12deg)}30%{transform:translate(0)rotate(-12deg)}38%{transform:translate(0)rotate(-12deg)scale(.88)}50%{transform:translate(0)rotate(-12deg)}to{transform:translate(18px,28px)rotate(-12deg)}}@keyframes hint-ripple{0%,34%{opacity:0;transform:scale(.2)}38%{opacity:1}65%{opacity:.9}85%,to{opacity:0;transform:scale(1.3)}}.rag,.wipe-hint-rag{box-sizing:border-box;background:repeating-linear-gradient(90deg,#0000 0 7px,#868e962e 7px 8px),repeating-linear-gradient(0deg,#0000 0 7px,#868e962e 7px 8px),#e9ecef;border:4px solid #868e96;border-radius:10px 14px 9px 12px;box-shadow:0 4px 8px #3b33554d}.rag{z-index:5;pointer-events:none;opacity:0;will-change:transform;transition:opacity .15s;position:fixed;top:0;left:0}.rag:after,.wipe-hint-rag:after{content:"";opacity:.8;border:2px dashed #868e96;border-radius:6px;position:absolute;inset:5px}.rag.is-visible{opacity:.95}.wipe-hint{--amp:60px;z-index:2;pointer-events:none;opacity:0;width:0;height:0;transition:opacity .3s;position:absolute}.wipe-hint.is-visible{opacity:1}.wipe-hint-move{position:absolute}.wipe-hint.is-visible .wipe-hint-move{animation:1.4s ease-in-out infinite hint-wipe}.wipe-hint-rag{left:calc(var(--rag-w) / -2);top:calc(var(--rag-h) / -2);width:var(--rag-w);height:var(--rag-h);opacity:.95;position:absolute}.wipe-hint .hint-hand{transform:rotate(-12deg)}@keyframes hint-wipe{0%,to{transform:translateX(calc(var(--amp) * -1))}50%{transform:translateX(var(--amp))}}