:root{--cube-size:45vw;--cube-half-size:calc(var(--cube-size) / 2);--cube-face-font-size:calc(var(--cube-size) / 10)}@media (min-width:500px){:root{--cube-size:35vw}}@media (min-width:800px){:root{--cube-size:300px}}.scene{width:var(--cube-size);height:var(--cube-size);perspective:1000px;perspective-origin:50%;touch-action:none}.cube-zone{touch-action:none;user-select:none;cursor:grab}.cube-zone.cube--dragging{cursor:grabbing}.cube{width:var(--cube-size);height:var(--cube-size);position:relative;transform-style:preserve-3d;transform:none;touch-action:none;will-change:transform}.face{backface-visibility:hidden;transform-origin:center;position:absolute;width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:var(--cube-face-font-size)}.face--front{transform:translateZ(var(--cube-half-size))}.face--back{transform:translateZ(calc(var(--cube-half-size) * -1)) rotateY(180deg)}.face--right{transform:translateX(var(--cube-half-size)) rotateY(90deg)}.face--left{transform:translateX(calc(var(--cube-half-size) * -1)) rotateY(-90deg)}.face--top{transform:translateY(calc(var(--cube-half-size) * -1)) rotateX(90deg)}.face--bottom{transform:translateY(var(--cube-half-size)) rotateX(-90deg)}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes overlay-zoom-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.overlay-backdrop{animation:overlay-fade-in .2s ease-out both}.overlay-content{animation:overlay-zoom-in .2s ease-out both}