.perspective-\[1000px\]{perspective:1000px}.perspective-\[800px\]{perspective:800px}.die-cube{position:relative;transform-style:preserve-3d;transition:transform 2.5s cubic-bezier(.25,1,.5,1);transform:rotateX(0) rotateY(0) rotate(0)}.die-cube.is-rolling{animation:spin 2.5s linear infinite}.die-cube.is-settling{animation:settle 2.5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:inherit}.die-face{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:hsl(var(--secondary));border:1px solid hsl(var(--primary)/.5);border-radius:8px;color:hsl(var(--primary));backface-visibility:hidden;box-shadow:inset 0 0 10px hsl(var(--primary)/.2),0 0 20px -5px black;--size-tiny:2rem;--size-sm:2.5rem;--size-md:4rem;--size-lg:6rem;--size-icon:1.5rem;--translate-z-tiny:calc(var(--size-tiny) / 2);--translate-z-sm:calc(var(--size-sm) / 2);--translate-z-md:calc(var(--size-md) / 2);--translate-z-lg:calc(var(--size-lg) / 2);--translate-z-icon:calc(var(--size-icon) / 2)}.die-face.size-default{--translate-z:var(--translate-z-md)}.die-face.size-large{--translate-z:var(--translate-z-lg)}.die-face.size-small{--translate-z:var(--translate-z-sm)}.die-face.size-icon{--translate-z:var(--translate-z-icon)}.die-face.size-tiny{--translate-z:var(--translate-z-tiny)}.face-1{transform:rotateY(0deg) translateZ(var(--translate-z))}.face-2{transform:rotateY(180deg) translateZ(var(--translate-z))}.face-3{transform:rotateY(90deg) translateZ(var(--translate-z))}.face-4{transform:rotateY(-90deg) translateZ(var(--translate-z))}.face-5{transform:rotateX(90deg) translateZ(var(--translate-z))}.face-6{transform:rotateX(-90deg) translateZ(var(--translate-z))}@keyframes spin{0%{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(2turn) rotateY(3turn)}}@keyframes settle{0%{transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}60%{transform:rotateX(var(--random-x)) rotateY(var(--random-y)) rotate(var(--random-z))}to{transform:var(--final-transform);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}}