:root{--dice-bg: #ffffff;--pip: #2c2c2e;--size: 5em;--half-size: calc(var(--size) / 2);--radius: calc(var(--size) * .16);--pip-size: calc(var(--size) * .12);--padding: calc(var(--size) * .18);--min-width: min(300px, 50vw);--min-width: min(300px, 50dvw)}body{margin:0;height:100vh;height:100dvh;overflow:hidden}.dice-container{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:2em;gap:1em}.stepper{display:flex;align-items:center;justify-content:space-between;width:var(--min-width)}.stepper span{font-weight:500;text-align:center;font-size:1.25em}.tray{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;flex:1;gap:2em;min-height:9.375em;width:100%;perspective:62.5em}.scene{width:var(--size);height:var(--size);transform-style:preserve-3d}.shake-container{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(12deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}.shake-container.shuffling{animation:smoothTumble 2.5s linear infinite}.scene:nth-child(2) .shake-container.shuffling{animation-duration:2s;animation-direction:reverse}.scene:nth-child(3) .shake-container.shuffling{animation-duration:3s}@keyframes smoothTumble{0%{transform:rotateX(-8deg) rotateY(12deg) rotate(0)}to{transform:rotateX(352deg) rotateY(372deg) rotate(360deg)}}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.16,1,.3,1)}.core{position:absolute;width:100%;height:100%;background:var(--dice-bg)}.c-x{transform:rotateY(0)}.c-y{transform:rotateY(90deg)}.c-z{transform:rotateX(90deg)}.face{position:absolute;width:var(--size);height:var(--size);background:var(--dice-bg);border-radius:var(--radius);box-shadow:inset 0 .0625em .125em #fffc,inset 0 -.0625em .1875em #0000000d,0 .25em .875em #00000012;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:var(--padding);box-sizing:border-box}.f-1{--pip: rgb(227, 0, 44);transform:rotateY(0) translateZ(var(--half-size))}.f-6{transform:rotateY(180deg) translateZ(var(--half-size))}.f-2{transform:rotateY(90deg) translateZ(var(--half-size))}.f-5{transform:rotateY(-90deg) translateZ(var(--half-size))}.f-3{transform:rotateX(90deg) translateZ(var(--half-size))}.f-4{--pip: rgb(227, 0, 44);transform:rotateX(-90deg) translateZ(var(--half-size))}.pip{display:block;background-color:var(--pip);border-radius:50%;width:var(--pip-size);height:var(--pip-size);justify-self:center;align-self:center}.action-deck{display:flex;flex-direction:column;gap:.5em;min-width:var(--min-width)}.history-strip{display:flex;align-items:center;justify-content:center;gap:1em;height:2em;font-variant-numeric:tabular-nums}.history-item{font-size:1rem;font-weight:var(--font-weight);opacity:0;transition:font-size .4s ease,font-weight .4s ease,opacity .4s ease;white-space:nowrap;display:inline-flex;justify-content:center;align-items:center}@keyframes slideInFromCenter{0%{max-width:0;margin-left:-.5em;margin-right:-.5em;transform:scale(0);opacity:0}to{max-width:4em;margin-left:0;margin-right:0;transform:scale(1);opacity:1}}.history-item:nth-child(1){font-size:1.5rem;font-weight:600;animation:slideInFromCenter .4s cubic-bezier(.25,1,.5,1) forwards;overflow:hidden}.history-item:nth-child(2){opacity:.5}.history-item:nth-child(3){opacity:.25}