img{max-height:15rem}.example{position:relative;width:14.25rem;height:14.25rem;padding:4rem;margin:4rem auto;perspective:none;container-type:size;outline:1px solid var(--foreground);border-radius:1rem}@keyframes roll{0%{transform:rotateX(-20deg)rotateY(0)}50%{transform:rotateX(20deg)rotateY(180deg)}100%{transform:rotateX(-20deg)rotateY(360deg)}}.d6{width:100px;height:100px;transform-style:preserve-3d;animation:roll 5s infinite linear}.d6>*{position:absolute;width:100%;height:100%;display:grid;place-items:center;background:var(--comment);border:2px solid var(--foreground);color:var(--foreground);font-size:2rem;font-weight:700}.d6 .face-1{transform:rotateY(0)translateZ(50px)}.d6 .face-2{transform:rotateY(90deg)translateZ(50px)}.d6 .face-3{transform:rotateY(180deg)translateZ(50px)}.d6 .face-4{transform:rotateY(-90deg)translateZ(50px)}.d6 .face-5{transform:rotateX(90deg)translateZ(50px)}.d6 .face-6{transform:rotateX(-90deg)translateZ(50px)}:root{--phi:calc((1 + sqrt(5)) / 2)}.die{position:absolute;top:50%;left:50%;font-size:22.5cqh;font-weight:700;width:var(--size);height:var(--size);translate:-50% calc(var(--center-y) - 100%);transform-style:preserve-3d}.die>*{position:absolute;width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% var(--center-y),var(--comment),color-mix(in srgb,var(--comment) 55%,var(--background)));color:var(--foreground);transform:translateY(calc(50% - var(--center-y)))var(--rotate,rotate(0))translateZ(var(--inradius))scale(var(--face-overdraw,1.01));transform-origin:50% var(--center-y)0}[class*="-6"],[class*="-9"]{text-decoration:underline}.example .d20{--face-overdraw:0.95}.d20{height:calc(var(--size) * sqrt(3)/2);--size:75cqw;--center-y:calc(200% / 3);--inradius:calc(var(--size) * pow(var(--phi), 2) / (2 * sqrt(3)));--dihedral-angle:acos(-1 * sqrt(5) / 3);--tetrahedral-angle:acos(1 / 3);--tetrahedral-skew:acos(sqrt(5 / 8))}.d20>*{opacity:.1;backface-visibility:hidden;padding-top:25%;clip-path:polygon(50% 0%,100% 100%,0% 100%)}.d20>.face-2{--rotate:rotateZ(60deg) rotateX(calc(0deg - var(--dihedral-angle)))}.d20>.face-3{backface-visibility:visible;opacity:1;animation:move-to-d20-face-3-place 8s infinite ease}.d20>.face-4{--rotate:rotateZ(calc(120deg + var(--tetrahedral-skew))) rotateX(calc(180deg - var(--tetrahedral-angle))) rotateZ(calc(180deg - var(--tetrahedral-skew)))}.d20>.face-5{--rotate:rotateZ(calc(180deg - var(--tetrahedral-skew))) rotateX(var(--tetrahedral-angle)) rotateZ(calc(0deg - var(--tetrahedral-skew)))}.d20>.face-6{--rotate:rotateZ(calc(120deg - var(--tetrahedral-skew))) rotateX(calc(180deg - var(--tetrahedral-angle))) rotateZ(calc(180deg + var(--tetrahedral-skew)))}.d20>.face-7{--rotate:rotateZ(-60deg) rotateX(calc(180deg - var(--dihedral-angle)))}.d20>.face-8{--rotate:rotateZ(180deg) rotateX(calc(0deg - var(--dihedral-angle)))}.d20>.face-9{--rotate:rotateZ(calc(60deg + var(--tetrahedral-skew))) rotateX(var(--tetrahedral-angle)) rotateZ(var(--tetrahedral-skew))}.d20>.face-10{--rotate:rotateZ(var(--tetrahedral-skew)) rotateX(calc(180deg - var(--tetrahedral-angle))) rotateZ(calc(180deg - var(--tetrahedral-skew)))}.d20>.face-11{--rotate:rotateZ(calc(180deg + var(--tetrahedral-skew))) rotateX(var(--tetrahedral-angle)) rotateZ(var(--tetrahedral-skew))}.d20>.face-12{--rotate:rotateZ(calc(-120deg + var(--tetrahedral-skew))) rotateX(calc(180deg - var(--tetrahedral-angle))) rotateZ(calc(180deg - var(--tetrahedral-skew)))}.d20>.face-13{--rotate:rotateZ(180deg) rotateX(calc(180deg - var(--dihedral-angle)))}.d20>.face-14{--rotate:rotateZ(-60deg) rotateX(calc(0deg - var(--dihedral-angle)))}.d20>.face-15{--rotate:rotateZ(calc(-60deg - var(--tetrahedral-skew))) rotateX(var(--tetrahedral-angle)) rotateZ(calc(0deg - var(--tetrahedral-skew)))}.d20>.face-16{--rotate:rotateZ(calc(0deg - var(--tetrahedral-skew))) rotateX(calc(180deg - var(--tetrahedral-angle))) rotateZ(calc(180deg + var(--tetrahedral-skew)))}.d20>.face-17{--rotate:rotateZ(calc(-60deg + var(--tetrahedral-skew))) rotateX(var(--tetrahedral-angle)) rotateZ(var(--tetrahedral-skew))}.d20>.face-18{--rotate:rotateZ(calc(-120deg - var(--tetrahedral-skew))) rotateX(calc(180deg - var(--tetrahedral-angle))) rotateZ(calc(180deg + var(--tetrahedral-skew)))}.d20>.face-19{--rotate:rotateZ(60deg) rotateX(calc(180deg - var(--dihedral-angle)))}.d20>.face-20{--rotate:rotateX(180deg)}@keyframes move-to-d20-face-3-place{0%{transform:scale(var(--face-overdraw,1.01));opacity:0}10%{transform:scale(var(--face-overdraw,1.01));opacity:1}20%{transform:translateY(calc(50% - var(--center-y)))scale(var(--face-overdraw,1.01));opacity:1}30%{transform:translateY(calc(50% - var(--center-y)))rotateZ(calc(60deg - var(--tetrahedral-skew)))scale(var(--face-overdraw,1.01));opacity:1}40%{transform:translateY(calc(50% - var(--center-y)))rotateZ(calc(60deg - var(--tetrahedral-skew)))rotateX(var(--tetrahedral-angle))scale(var(--face-overdraw,1.01));opacity:1}50%{transform:translateY(calc(50% - var(--center-y)))rotateZ(calc(60deg - var(--tetrahedral-skew)))rotateX(var(--tetrahedral-angle))rotateZ(calc(0deg - var(--tetrahedral-skew)))scale(var(--face-overdraw,1.01));opacity:1}80%,90%{transform:translateY(calc(50% - var(--center-y)))rotateZ(calc(60deg - var(--tetrahedral-skew)))rotateX(var(--tetrahedral-angle))rotateZ(calc(0deg - var(--tetrahedral-skew)))translateZ(var(--inradius))scale(var(--face-overdraw,1.01));opacity:1}100%{transform:translateY(calc(50% - var(--center-y)))rotateZ(calc(60deg - var(--tetrahedral-skew)))rotateX(var(--tetrahedral-angle))rotateZ(calc(0deg - var(--tetrahedral-skew)))translateZ(var(--inradius))scale(var(--face-overdraw,1.01));opacity:0}}