body{background:linear-gradient(#2b1b4a,#4a2a7a)}.magic{position:absolute;inset:0;overflow:hidden}.stars,.stars:after{background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,#0000),radial-gradient(1px 1px at 28% 62%,#fff,#0000),radial-gradient(2px 2px at 47% 34%,#ffe8a3,#0000),radial-gradient(1px 1px at 66% 12%,#fff,#0000),radial-gradient(1.5px 1.5px at 81% 48%,#fff,#0000),radial-gradient(1px 1px at 92% 80%,#fff,#0000),radial-gradient(2px 2px at 8% 86%,#d0bfff,#0000),radial-gradient(1px 1px at 55% 90%,#fff,#0000);background-size:320px 320px;animation:5s ease-in-out infinite alternate twinkle;position:absolute;inset:0}.stars:after{content:"";background-position:160px 110px;animation-delay:-2.5s}@keyframes twinkle{0%{opacity:.35}to{opacity:1}}.sky,.circles,.animals{width:100%;height:100%;position:absolute;inset:0}.circles,.animals,.hint{pointer-events:none}.circle{--level:0;--gold:#ffe8a3;--lilac:#e5dbff;left:var(--x);top:var(--y);width:calc(120px + 120px * var(--level));aspect-ratio:1;filter:drop-shadow(0 0 calc(4px + 14px * var(--level)) #d0bfff);position:absolute;translate:-50% -50%}.circle:before{content:"";opacity:0;background:radial-gradient(closest-side,#d0bfff73,#0000);border-radius:50%;transition:opacity .6s ease-out;position:absolute;inset:-60%}.circle.stage-3:before{opacity:calc(.4 + .6 * var(--level))}.circle-body{fill:none;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;position:relative;overflow:visible}.circle-glow{fill:#b197fc;opacity:calc(.15 + .35 * var(--level));transition:opacity .3s}.circle-outer{stroke:var(--gold);stroke-width:4px;stroke-dasharray:100;animation:.9s ease-out both circle-draw}@keyframes circle-draw{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}.circle-ring,.circle-star{transform-box:fill-box;transform-origin:50%;opacity:0;transition:opacity .4s ease-out,scale .4s ease-out;scale:.6}.stage-2 :is(.circle-ring,.circle-star),.stage-3 :is(.circle-ring,.circle-star){opacity:1;scale:1}.circle-ring circle{stroke:var(--lilac);stroke-width:2.5px;stroke-dasharray:6 5}.circle-runes{fill:var(--gold)}.circle-star path{stroke:var(--gold);stroke-width:3px}.circle-ring{animation:9s linear infinite circle-spin}.circle-star{animation:12s linear infinite reverse circle-spin}.stage-3 .circle-ring{animation-duration:3s}.stage-3 .circle-star{animation-duration:4.5s}@keyframes circle-spin{to{rotate:360deg}}.circle.is-pulse .circle-body{animation:.35s ease-out circle-pulse}@keyframes circle-pulse{50%{scale:1.25}}.circle.is-leaving{animation:.3s ease-in forwards circle-leave}@keyframes circle-leave{to{opacity:0;scale:.4}}.animal{left:var(--x);top:var(--y);width:var(--size);height:var(--size);position:absolute;translate:-50% -50%}.animal-face{background:radial-gradient(closest-side,#ffffff8c,#fff0 100%);border-radius:50%;width:100%;height:100%}.animal-face svg{width:100%;height:100%}.stage-1 .animal-face{animation:.45s cubic-bezier(.3,1.6,.5,1) both animal-pop}.stage-2 .animal-face{animation:.45s cubic-bezier(.3,1.6,.5,1) both animal-pop,.5s ease-in-out .45s 2 animal-hop}.stage-3 .animal-face{animation:.5s cubic-bezier(.3,1.6,.5,1) both animal-pop,1.2s ease-in-out .5s animal-spin,.5s ease-in-out 1.7s 2 animal-hop}@keyframes animal-pop{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@keyframes animal-hop{50%{translate:0 -18%}}@keyframes animal-spin{to{rotate:720deg}}.animal.is-leaving{animation:.4s ease-in forwards animal-leave}@keyframes animal-leave{to{opacity:0;scale:0}}.hint{left:var(--x);top:var(--y);z-index:4;opacity:0;width:0;height:0;transition:opacity .3s;position:absolute}.hint.is-visible{opacity:1}.hint-hand{filter:drop-shadow(0 3px 4px #0006);opacity:.6;width:72px;height:90px;transition:transform .3s ease-out,opacity .3s;position:absolute;top:-5px;left:-34px;overflow:visible;transform:translateY(24px)}.hint-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}.hint.is-pressing .hint-hand{opacity:1;transform:translate(0)scale(.92)}.door-scene{z-index:5;background:linear-gradient(#0000 78%,#e8a76a 78%,#d9965a 100%),repeating-linear-gradient(90deg,#ffe3c2 0 46px,#ffdcb5 46px 92px);transition:opacity .8s ease-out .5s;position:absolute;inset:0;overflow:hidden}.door-room{transform-origin:50% calc(50% + 20px);place-items:center;padding-top:40px;transition:scale .8s ease-out .5s;display:grid;position:absolute;inset:0}.doorway{aspect-ratio:3/5;perspective:900px;background:radial-gradient(1.5px 1.5px at 30% 30%,#fff,#0000),radial-gradient(1px 1px at 70% 22%,#fff,#0000),radial-gradient(2px 2px at 55% 60%,#ffe8a3,#0000),radial-gradient(1px 1px at 25% 75%,#fff,#0000),linear-gradient(#2b1b4a,#4a2a7a);border-radius:50% 50% 4px 4px/30% 30% 4px 4px;width:min(56vw,36vh,260px);position:relative;box-shadow:0 0 0 12px #8a5a33,0 0 0 16px #6e4527}.door{border-radius:inherit;cursor:pointer;transform-origin:0;background:radial-gradient(circle at 84% 56%,#ffe066 0 5%,#c99a2e 5.5% 7%,#0000 7.5%),repeating-linear-gradient(90deg,#c8854a 0 23%,#b8743d 23% 25%);border:none;padding:0;transition:transform .7s cubic-bezier(.5,0,.3,1);position:absolute;inset:0;box-shadow:inset 0 0 0 4px #6e452780}.door:focus-visible{outline-offset:20px;outline:4px solid #ffe066}.door-hint{pointer-events:none;width:0;height:0;transition:opacity .15s;position:absolute;top:58%;left:60%}.door-hand{filter:drop-shadow(0 3px 4px #3b335559);width:72px;height:90px;animation:1.6s ease-in-out infinite door-tap;position:absolute;top:-5px;left:-34px;overflow:visible}.door-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}@keyframes door-tap{0%,to{transform:translate(18px,28px)rotate(-12deg)}35%{transform:translate(0)rotate(-12deg)}45%{transform:translate(0)rotate(-12deg)scale(.88)}55%{transform:translate(0)rotate(-12deg)}}.door-scene.is-opening{opacity:0;pointer-events:none}.is-opening .door{transform:rotateY(-105deg)}.is-opening .door-hint{opacity:0}.is-opening .door-room{scale:1.15}