.scene{width:200px;height:200px;perspective:600px;filter:drop-shadow(0 20px 20px rgb(0 0 0/.25))}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .1s linear}.cube__face{position:absolute;width:200px;height:200px;border:none;background-color:hsl(var(--background)/.8);backdrop-filter:blur(15px);opacity:.8}.cube__face--front{transform:rotateY(0deg) translateZ(100px);background-image:linear-gradient(to bottom right,#f8ab3e,#f59926)}.cube__face--back{transform:rotateY(180deg) translateZ(100px);background-image:linear-gradient(to bottom right,#de9d3c,#e4e3da)}.cube__face--right{transform:rotateY(90deg) translateZ(100px);background-image:linear-gradient(to bottom right,#fcdb0c,#fffb18)}.cube__face--left{transform:rotateY(-90deg) translateZ(100px);background-image:linear-gradient(to bottom right,#f8d111,#fae91b)}.cube__face--top{transform:rotateX(90deg) translateZ(100px);background-image:linear-gradient(to bottom right,#faea1b,#de9e3e)}.cube__face--bottom{transform:rotateX(-90deg) translateZ(100px);background-image:linear-gradient(to bottom right,#fcda0d,#f59c04)}