body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
    background-size: 400% 400%;
    animation: bgMove 15s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Segoe UI', sans-serif;
    cursor: crosshair;
  }
  
  @keyframes bgMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .scene {
    width: 200px;
    height: 200px;
    perspective: 600px;
  }
  
  .cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-30deg);
    animation: rotate 15s infinite linear;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  }
  
  @keyframes rotate {
    0%   { transform: rotateX(-30deg) rotateY(0deg); }
    100% { transform: rotateX(-30deg) rotateY(360deg); }
  }
  
  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, #0f0c29, #302b63, #24243e);
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    text-align: center;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 0 10px #ffffff20;
  }
  
  .face:hover {
    box-shadow: 0 0 20px #ffffff70, 0 0 40px #ffffff30;
    text-shadow: 1px 1px 8px #ffffffaa;
  }
  
  .front  { transform: rotateY(  0deg) translateZ(100px); }
  .back   { transform: rotateY(180deg) translateZ(100px); }
  .right  { transform: rotateY( 90deg) translateZ(100px); }
  .left   { transform: rotateY(-90deg) translateZ(100px); }
  .top    { transform: rotateX( 90deg) translateZ(100px); }
  .bottom { transform: rotateX(-90deg) translateZ(100px); }