:root{--dice-container-width:200px;--dice-container-height:200px;--dice-face-width:100px;--dice-face-height:86px;--dice-transition-duration:0.5s}.dice-wrapper{width:60px;height:60px;display:flex;align-items:center;justify-content:center}.dice-content{width:var(--dice-container-width);height:var(--dice-container-height);transform:scale(.3);transform-origin:center left}.die{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--dice-transition-duration) ease-out;transform:rotateX(-53deg);cursor:pointer;will-change:transform}.face{position:absolute;left:50%;top:0;margin:0 calc(var(--dice-face-width) / -2);border-left:calc(var(--dice-face-width) / 2) solid transparent;border-right:calc(var(--dice-face-width) / 2) solid transparent;border-bottom:var(--dice-face-height) solid var(--dice-color);width:0;height:0;transform-style:preserve-3d;backface-visibility:hidden;filter:drop-shadow(0 0 0 black) drop-shadow(0 0 1px black)}.face::before{content:attr(data-letter);position:absolute;top:calc(var(--dice-face-height) * 0.22);left:calc(var(--dice-face-width) * -1);color:var(--dice-letter,#fff);text-shadow:0 1px 2px rgba(0,0,0,0.55);text-shadow:0 1px 2px color-mix(in oklab,var(--bg) 60%,transparent);font-size:calc(var(--dice-face-height) * 0.5);text-align:center;line-height:calc(var(--dice-face-height) * 0.9);width:calc(var(--dice-face-width) * 2);height:var(--dice-face-height);pointer-events:none}.face:nth-child(1){transform:rotateY(0deg) translateZ(33.5px) translateY(-12.9px) rotateZ(0deg) rotateX(53deg)}.face:nth-child(2){transform:rotateY(-72deg) translateZ(33.5px) translateY(-12.9px) rotateZ(0deg) rotateX(53deg)}.face:nth-child(3){transform:rotateY(-144deg) translateZ(33.5px) translateY(-12.9px) rotateZ(0deg) rotateX(53deg)}.face:nth-child(4){transform:rotateY(-216deg) translateZ(33.5px) translateY(-12.9px) rotateZ(0deg) rotateX(53deg)}.face:nth-child(5){transform:rotateY(-288deg) translateZ(33.5px) translateY(-12.9px) rotateZ(0deg) rotateX(53deg)}.face:nth-child(6){transform:rotateY(360deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg)}.face:nth-child(7){transform:rotateY(288deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg)}.face:nth-child(8){transform:rotateY(216deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg)}.face:nth-child(9){transform:rotateY(144deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg)}.face:nth-child(10){transform:rotateY(72deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg)}.face:nth-child(11){transform:rotateY(252deg) translateZ(75px) translateY(54.18px) rotateZ(0deg) rotateX(-11deg)}.face:nth-child(12){transform:rotateY(324deg) translateZ(75px) translateY(54.18px) rotateZ(0deg) rotateX(-11deg)}.face:nth-child(13){transform:rotateY(396deg) translateZ(75px) translateY(54.18px) rotateZ(0deg) rotateX(-11deg)}.face:nth-child(14){transform:rotateY(468deg) translateZ(75px) translateY(54.18px) rotateZ(0deg) rotateX(-11deg)}.face:nth-child(15){transform:rotateY(540deg) translateZ(75px) translateY(54.18px) rotateZ(0deg) rotateX(-11deg)}.face:nth-child(16){transform:rotateY(-108deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg)}.face:nth-child(17){transform:rotateY(-36deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg)}.face:nth-child(18){transform:rotateY(36deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg)}.face:nth-child(19){transform:rotateY(108deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg)}.face:nth-child(20){transform:rotateY(180deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg)}