.scene{width:250px;height:250px;perspective:800px}.dice{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:translateZ(-125px)}.face{position:absolute;width:250px;height:250px;background:white;border:2px solid #1e293b;border-radius:10px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:20px;box-shadow:inset 0 0 25px rgba(0,0,0,.1)}.dark .face{background:#1e293b;border-color:#f8fafc}.dot{background-color:#1e293b;border-radius:50%;align-self:center;justify-self:center;width:40px;height:40px}.dark .dot{background-color:#f8fafc}.front{transform:rotateY(0deg) translateZ(125px)}.back{transform:rotateY(180deg) translateZ(125px)}.right{transform:rotateY(-90deg) translateZ(125px)}.left{transform:rotateY(90deg) translateZ(125px)}.top{transform:rotateX(-90deg) translateZ(125px)}.bottom{transform:rotateX(90deg) translateZ(125px)}.front .dot:first-child{grid-area:2/2}.left .dot:first-child{grid-area:1/1}.left .dot:nth-child(2){grid-area:3/3}.top .dot:first-child{grid-area:1/1}.top .dot:nth-child(2){grid-area:2/2}.top .dot:nth-child(3){grid-area:3/3}.bottom .dot:first-child{grid-area:1/1}.bottom .dot:nth-child(2){grid-area:1/3}.bottom .dot:nth-child(3){grid-area:3/1}.bottom .dot:nth-child(4){grid-area:3/3}.right .dot:first-child{grid-area:1/1}.right .dot:nth-child(2){grid-area:1/3}.right .dot:nth-child(3){grid-area:2/2}.right .dot:nth-child(4){grid-area:3/1}.right .dot:nth-child(5){grid-area:3/3}.back .dot:first-child{grid-area:1/1}.back .dot:nth-child(2){grid-area:1/3}.back .dot:nth-child(3){grid-area:2/1}.back .dot:nth-child(4){grid-area:2/3}.back .dot:nth-child(5){grid-area:3/1}.back .dot:nth-child(6){grid-area:3/3}@keyframes slow-spin-dice{0%{transform:translateZ(-125px) rotateX(0deg) rotateY(0deg)}to{transform:translateZ(-125px) rotateX(1turn) rotateY(1turn)}}.animate-slow-spin-dice{animation:slow-spin-dice 12s linear infinite}