.demo{margin:0 0 12px}.dm-steps{margin:0;padding:0;list-style:none;display:grid}.dm-step{opacity:0;grid-area:1/1;transition:opacity .2s}.dm-step.is-on{opacity:1}.dm-scene{border:1.5px dashed var(--line);background:#00000038;border-radius:8px;justify-content:center;align-items:center;gap:14px;height:92px;font-size:40px;line-height:1;display:flex;overflow:hidden}.dm-cap{text-align:center;margin:8px 0 0;font-size:17px;font-weight:700;line-height:1.25}.dm-cap b{min-width:22px;font-family:var(--mono);background:var(--postit);color:#111;border-radius:50%;margin-right:4px;padding:2px 0 0;font-size:15px;display:inline-block}.dm-dots{justify-content:center;gap:6px;margin:6px 0 0;display:flex}.dm-dots i{background:var(--line);border-radius:50%;width:7px;height:7px;transition:background .2s}.dm-dots i.is-on{background:var(--postit)}.demo-rules{margin:0 0 12px;font-size:14px}.demo-rules summary{cursor:pointer;color:var(--muted);font-size:13px}.demo-rules>:not(summary){margin-top:8px}.demo.is-still .dm-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.demo.is-still .dm-step{opacity:1;grid-area:auto}.demo.is-still .dm-scene{gap:6px;height:64px;font-size:26px}.demo.is-still .dm-cap{font-size:13px}.demo.is-still .dm-dots{display:none}.dm-panel{gap:6px;display:flex}.dm-panel i{font-style:normal;font-family:var(--mono);border:2px solid var(--line);border-radius:50%;place-items:center;width:34px;height:34px;font-size:18px;display:grid}.dm-finger{font-size:34px;transform:translate(-30px,30px)}.is-on .dm-finger{animation:1.2s ease-out both dm-press}.is-on .dm-target{animation:1.2s step-end both dm-light}@keyframes dm-press{0%{transform:translate(-120px,30px)}45%{transform:translate(-40px,14px)}60%{transform:translate(-40px,8px)scale(.9)}to{transform:translate(-40px,14px)}}@keyframes dm-light{0%{background:0 0}55%{background:var(--postit);color:#111;border-color:var(--postit)}}.dm-bar{border:2px solid var(--line);border-radius:7px;width:80px;height:14px;overflow:hidden}.dm-bar i{background:#e5484d;width:20%;height:100%;display:block}.is-on .dm-bar i{animation:1.2s ease-in-out both dm-pressure}@keyframes dm-pressure{0%{width:20%}55%{width:95%}70%,to{background:#3ddc84;width:25%}}.dm-puff{opacity:0}.is-on .dm-puff{animation:1.2s ease-out both dm-puff}@keyframes dm-puff{0%,55%{opacity:0;transform:translate(-20px)scale(.5)}75%{opacity:1;transform:translate(0)scale(1.2)}to{opacity:0;transform:translate(20px)scale(1.5)}}.is-on .dm-point{animation:1.2s ease-in-out both dm-poke}@keyframes dm-poke{0%,20%{transform:translate(-10px)}35%,to{transform:translate(6px)}}.dm-swap{display:grid}.dm-swap b{grid-area:1/1;font-weight:400}.dm-swap b+b{opacity:0}.is-on .dm-swap b+b{animation:1.2s step-end both dm-green}@keyframes dm-green{0%{opacity:0}40%{opacity:1}}.dm-hand{flex-direction:column;align-items:center;font-size:30px;display:inline-flex}.dm-hand b{margin-top:-8px;font-size:34px;font-weight:400}.is-on .dm-hand{animation:1.2s ease-in-out both dm-swing}@keyframes dm-swing{0%,to{transform:translate(-60px)}50%{transform:translate(60px)}}.dm-pile{flex-direction:column;align-items:center;display:flex}.is-on .dm-drop{animation:1.2s cubic-bezier(.5,0,1,1) both dm-drop}@keyframes dm-drop{0%{transform:translateY(-70px)}50%,to{transform:translateY(0)}}.dm-tip{transform-origin:0 100%;display:inline-block}.is-on .dm-tip{animation:1.2s ease-in both dm-tip}@keyframes dm-tip{0%{transform:rotate(0)}50%,to{transform:translate(34px)translateY(14px)rotate(80deg)}}.dm-bump{opacity:0;font-size:30px}.is-on .dm-bump{animation:1.2s step-end both dm-boom}@keyframes dm-boom{0%{opacity:0}50%{opacity:1}}.dm-gauge{border:2px solid var(--line);background:#ffffff0f;border-radius:8px;width:110px;height:16px;position:relative}.dm-gauge b{background:#3ddc84;width:18%;position:absolute;top:0;bottom:0;left:58%}.dm-gauge i{background:var(--postit);border-radius:2px;width:4px;position:absolute;top:-5px;bottom:-5px;left:0}@keyframes dm-torque{0%{left:0}60%,to{left:66%}}.is-on .dm-nut{animation:1.2s ease-in both dm-turn}@keyframes dm-turn{0%{transform:rotate(0)}60%,to{transform:rotate(140deg)}}.dm-star{width:80px;height:80px}.dm-star-line{fill:none;stroke:var(--postit);stroke-width:4px;stroke-linejoin:round;stroke-dasharray:360;stroke-dashoffset:0}.is-on .dm-star-line{animation:1.2s linear both dm-draw}@keyframes dm-draw{0%{stroke-dashoffset:360px}}.dm-star-nuts circle{fill:#cfd5db;stroke:#111;stroke-width:2.5px}.dm-wheel{display:inline-block}.is-on .dm-wheel{animation:1.2s ease-in both dm-roll}@keyframes dm-roll{0%{transform:translate(-70px)rotate(0)}50%,to{transform:translate(10px)rotate(300deg)}}.dm-scene:has(.dm-rope){border-top:4px solid #ffc21a;align-items:flex-start}.dm-rope{transform-origin:top;flex-direction:column;align-items:center;display:inline-flex}.dm-rope i{background:var(--fg);width:2px;height:34px}.dm-rope b{margin-top:-4px;font-size:34px;font-weight:400}.is-on .dm-k-run{animation:1.2s ease-in-out both dm-k-run}@keyframes dm-k-run{0%{transform:translate(-70px)rotate(0)}45%{transform:translate(0)rotate(16deg)}75%{transform:translate(50px)rotate(-14deg)}to{transform:translate(60px)rotate(4deg)}}.is-on .dm-k-calm{animation:1.2s ease-out both dm-k-calm}@keyframes dm-k-calm{0%{transform:rotate(-18deg)}30%{transform:rotate(9deg)}60%{transform:rotate(-3deg)}to{transform:rotate(0)}}.dm-k-thumb{opacity:0;align-self:center}.is-on .dm-k-thumb{animation:1.2s step-end both dm-boom}@media (prefers-reduced-motion:reduce){.demo *{transition:none!important;animation:none!important}}.dm-back{align-items:center;gap:4px;display:inline-flex;transform:scaleX(-1)}.dm-back b{font-weight:400}.is-on .dm-fly{animation:1.2s ease-in-out both dm-fly}@keyframes dm-fly{0%{opacity:0;transform:translate(-40px,20px)rotate(-10deg)}30%{opacity:1}to{opacity:0;transform:translate(50px,-20px)rotate(10deg)}}.dm-ahem{font-size:40px}.is-on .dm-ahem{animation:1.2s ease-out both dm-pop}@keyframes dm-pop{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.1)}35%,to{transform:scale(1)}}.is-on .dm-freeze{animation:1.2s steps(2,end) both dm-shiver}@keyframes dm-shiver{0%,30%{transform:translate(-3px)rotate(-6deg)}40%,to{filter:grayscale(.4);transform:none}}.is-on .dm-stare{animation:1.2s ease-in-out both dm-glare}@keyframes dm-glare{0%,40%{transform:scale(1.2)}70%,to{opacity:.5;transform:scale(.9)}}.is-on .dm-cookie{animation:1.2s ease-out both dm-slide}@keyframes dm-slide{0%{transform:translate(60px)rotate(0)}60%,to{transform:translate(0)rotate(-200deg)}}.dm-bed{border:2px solid var(--line);border-radius:4px;grid-template-columns:repeat(3,26px);gap:3px;padding:3px;display:inline-grid}.dm-bed i{background:#ffffff14;border-radius:2px;height:46px}.is-on .dm-lane{animation:1.2s step-end both dm-lane}@keyframes dm-lane{0%{background:#ffffff14}55%{background:var(--postit)}}.dm-tapper{font-size:30px}.is-on .dm-tapper{animation:1.2s ease-out both dm-tapper}@keyframes dm-tapper{0%{transform:translate(-90px,20px)}25%{transform:translate(-90px,6px)scale(.9)}50%,to{transform:translate(-54px,10px)}}.dm-bed-side{justify-content:flex-start;align-items:center;width:170px;height:54px;padding:0 4px;display:inline-flex}.dm-piano{font-size:36px;font-weight:400}.is-on .dm-piano{animation:1.2s cubic-bezier(.2,.7,.3,1) both dm-slide-in}@keyframes dm-slide-in{0%{transform:translate(0)}70%,to{transform:translate(96px)}}.dm-wall{background:var(--line);width:8px;height:44px;margin-left:auto}.is-on .dm-rev{animation:1.2s ease-in-out both dm-rev}@keyframes dm-rev{0%{transform:translate(-40px)scaleX(-1)}to{transform:translate(30px)scaleX(-1)}}.dm-piep{color:var(--postit);opacity:0;font-size:22px}.is-on .dm-piep{animation:.4s step-end infinite dm-piep}.is-on .dm-piep+.dm-piep{animation-delay:.13s}.is-on .dm-piep+.dm-piep+.dm-piep{animation-delay:.26s}@keyframes dm-piep{0%{opacity:1}50%{opacity:0}}.is-on .dm-vac{animation:1.2s linear both dm-vroom}@keyframes dm-vroom{0%,to{transform:translate(-6px)rotate(-8deg)}25%,75%{transform:translate(6px)rotate(8deg)}50%{transform:translate(-6px)rotate(-8deg)}}.dm-ticket{display:inline-block;position:relative}.dm-ticket b{font-size:22px;font-weight:400;position:absolute;top:-6px;right:-34px;transform:rotate(8deg)}.is-on .dm-ticket b{animation:1.2s ease-out both dm-pop}.is-on .dm-grill{animation:1.2s steps(6,end) both dm-sizzle}@keyframes dm-sizzle{0%{filter:saturate(.4)brightness(1.5)}to{filter:none;transform:translateY(-2px)}}.dm-gauge{background:linear-gradient(90deg,#f19aa8 0 20%,#c85a5e 20% 40%,#9a5b3a 40% 60%,#6a3c22 60% 80%,#262220 80%);position:relative}.dm-gauge i{position:absolute;top:-2px;bottom:-2px;left:0;background:#fff!important;width:3px!important}.is-on .dm-gauge i{animation:1.2s ease-out both dm-needle}@keyframes dm-needle{0%{left:0}70%,to{left:50%}}.is-on .dm-bell{animation:1.2s ease-out both dm-ring}@keyframes dm-ring{0%,20%{transform:none}30%{transform:rotate(-18deg)scale(1.1)}40%{transform:rotate(16deg)}50%{transform:rotate(-10deg)}60%,to{transform:none}}.dm-shout{opacity:0}.is-on .dm-shout{animation:1.2s step-end both dm-boom}.dm-glass{vertical-align:middle;background:linear-gradient(135deg,#cdeaf5,#8ec5dc);border:4px solid #9aa4ab;border-radius:3px;width:62px;height:74px;display:inline-block;position:relative;overflow:hidden}.dm-grime{background:radial-gradient(circle at 30% 40%,#6e5634bf 0 30%,#0000 32%),radial-gradient(circle at 70% 70%,#6e5634b3 0 26%,#0000 28%);position:absolute;inset:0}.dm-squee{background:#222;border-radius:3px;height:6px;position:absolute;top:2px;left:8px;right:8px}.is-on .dm-squee{animation:1.2s ease-in both dm-pull}.is-on .dm-grime{animation:1.2s ease-in both dm-wiped}@keyframes dm-pull{0%,30%{top:2px}85%,to{top:calc(100% - 6px)}}@keyframes dm-wiped{0%,30%{clip-path:inset(0)}85%,to{clip-path:inset(100% 0 0)}}.is-on .dm-edge{animation:1.2s step-end both dm-edge}@keyframes dm-edge{0%{border-bottom-color:#9aa4ab}85%{border-bottom-color:#ffd84a}}.dm-level{vertical-align:middle;background:linear-gradient(90deg,#e05a4a 0 36%,#4fc160 36% 64%,#e05a4a 64%);border:3px solid #222;border-radius:9px;width:64px;height:16px;margin-right:10px;display:inline-block;position:relative}.dm-level i{background:#fff;border-radius:50%;width:12px;height:8px;position:absolute;top:1px;left:4px}.is-on .dm-level i{animation:1.2s ease-out both dm-bubble}@keyframes dm-bubble{0%{left:2px}30%,to{left:23px}}.dm-mirror{color:#222;background:#ffe066;padding:6px 2px;font-size:10px;position:absolute;top:22px;left:6px;transform:scaleX(-1)}.dm-knock{vertical-align:middle;margin-left:-8px;font-size:30px;display:inline-block}.is-on .dm-knock{animation:1.2s ease-in-out both dm-knock}@keyframes dm-knock{0%,20%,40%,60%{transform:translate(0)}10%,30%,50%{transform:translate(-10px)}}.demo.is-still .dm-glass{border-width:3px;width:42px;height:52px}.demo.is-still .dm-level{width:40px;margin-right:4px}.dm-zs-folder{display:inline-block}.is-on .dm-zs-folder{animation:1.2s ease-out both dm-zs-slide}@keyframes dm-zs-slide{0%{transform:translate(-70px)rotate(-8deg)}60%,to{transform:translate(10px)rotate(4deg)}}.dm-zs-say{opacity:0}.is-on .dm-zs-say{animation:1.2s step-end both dm-boom}.is-on .dm-zs-doubt{animation:1.2s ease-out both dm-pop}.dm-zs-stamp{border:3px solid var(--blood);border-radius:6px;padding:2px 6px;display:inline-block;transform:rotate(-12deg)}.is-on .dm-zs-stamp{animation:.6s cubic-bezier(.3,1.6,.5,1) both dm-zs-stamp}@keyframes dm-zs-stamp{0%{opacity:0;transform:scale(2.2)rotate(-12deg)}to{opacity:1;transform:scale(1)rotate(-12deg)}}.dm-zs-pile{letter-spacing:-10px;font-size:26px}