#spline-wrap {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  z-index: 800;
  pointer-events: none;
  will-change: width, height, top, transform;
}

/* Cube size and position are controlled by hype-spline.js (hero vs sticky, breakpoints).
   Do not set width/height/left/top/transform in media queries or they will override JS. */

#canvas3d {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
}

body.is-cube-sticky #spline-wrap {
  pointer-events: none;
}

/* Mobile: Force pointer-events: none on all cube elements to allow scrolling */
@media (max-width: 767px), (pointer: coarse) {
  #canvas3d {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  #spline-wrap,
  .spline-wrap {
    pointer-events: none !important;
  }

  /* Ensure parent containers also don't block touch */
  .spline-container {
    pointer-events: none !important;
  }
}

#cubeDebug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9999;
  font: 12px/1.4 monospace;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 10px;
  pointer-events: none;
  white-space: pre;
  display: block;
}