.dice-container[data-theme=white]{--diceEdgeClr:#fff;--faceClr:#ececec;--faceBeatClr:linear-gradient(to bottom right,#140f0f,#140a0a)}.dice{--wh:80px;width:var(--wh);height:var(--wh);background:var(--diceEdgeClr);transform-style:preserve-3d;transition:all 1s cubic-bezier(.23,1,.32,1.2);position:relative}.dice .face{background:var(--faceClr);border:2px solid var(--diceEdgeClr);width:100%;height:100%;transform-style:preserve-3d;border-radius:1rem;place-items:center;padding:.75rem;display:grid;position:absolute}.dice .face span{--wh:.8rem;width:var(--wh);height:var(--wh);background:var(--faceBeatClr);border-radius:50%;box-shadow:inset 0 0 4px #0000004d}.dice .face span:first-of-type{grid-area:a}.dice .face span:nth-of-type(2){grid-area:b}.dice .face span:nth-of-type(3){grid-area:c}.dice .face span:nth-of-type(4){grid-area:d}.dice .face span:nth-of-type(5){grid-area:e}.dice .face span:nth-of-type(6){grid-area:f}.dice .face:before{content:"";background:var(--diceEdgeClr);border-radius:inherit;width:100%;height:100%;position:absolute;transform:translateZ(-2px)scale(1.08)}.front{transform:translateZ(calc(var(--wh)/2 + 1px));grid-template-areas:". . ."".a."". . ."}.top{transform:rotateX(90deg)translateZ(calc(var(--wh)/2 + 1px));grid-template-areas:"a. ."". . ."". .b"}.left{transform:rotateY(-90deg)translateZ(calc(var(--wh)/2 + 1px));grid-template-areas:"a. ."".b."". .c"}.right{transform:rotateY(90deg)translateZ(calc(var(--wh)/2 + 1px));grid-template-areas:"a.b"". . .""c.d"}.bottom{transform:rotateX(-90deg)translateZ(calc(var(--wh)/2 + 1px));grid-template-areas:"a.b"".c.""d.e"}.back{transform:rotateY(180deg)translateZ(calc(var(--wh)/2 + 1px));grid-template-areas:"a.b""c.d""e.f"}