.cube-wrapper{perspective:1400px;justify-content:center;align-items:center;width:280px;height:280px;display:flex}.cube{width:100%;height:100%;transform-style:preserve-3d;animation:10s cubic-bezier(.4,.1,.2,1) infinite rotateCube;position:relative}.face{letter-spacing:2px;width:280px;height:280px;color:var(--cube-text,#00eaff);background:var(--cube-bg,#00142847);border:2px solid var(--cube-border,#00ffff59);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 25px var(--cube-glow,#00c8ff73),inset 0 0 30px var(--cube-glow,#00c8ff59);text-shadow:0 0 14px var(--cube-text,#00ffffe6);border-radius:12px;justify-content:center;align-items:center;font-size:34px;font-weight:900;transition:background .3s,border .3s,color .3s;display:flex;position:absolute}.light .face{--cube-text:#006b78;--cube-border:#00788c73;--cube-bg:#ffffff2e;--cube-glow:#008ca040}.dark .face{--cube-text:#00eaff;--cube-border:#00ffff73;--cube-bg:#00142852;--cube-glow:#00c8ff8c}.front{transform:translateZ(140px)}.back{transform:rotateY(180deg)translateZ(140px)}.right{transform:rotateY(90deg)translateZ(140px)}.left{transform:rotateY(-90deg)translateZ(140px)}.top{transform:rotateX(90deg)translateZ(140px)}.bottom{transform:rotateX(-90deg)translateZ(140px)}@keyframes rotateCube{0%{transform:rotateX(0)rotateY(0)}50%{transform:rotateX(200deg)rotateY(160deg)}to{transform:rotateX(360deg)rotateY(360deg)}}