/* ============================================================
   Cube side panels
   ------------------------------------------------------------
   Decorative reaction-diffusion "cube" grids (from the
   poolside.ai/models effect) placed in the margins to the
   left/right of the centered page content.

   - Width is driven by js/cube-sides.js so the NUMBER of cubes
     scales with the available space while each cube keeps a
     constant on-screen size (the effect re-frames its camera
     instead of stretching the cubes).
   - Panels are hidden entirely when there is no room for at
     least one cube.
   - Default display:none; js/cube-sides.js reveals them only
     when there is enough space (so they never show empty /
     zero-size canvases if JS fails to load).
   ============================================================ */

.cube-side {
  display: none;                 /* revealed by js/cube-sides.js */
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  z-index: -1;                 /* sit behind page content; body bg is transparent */
  overflow: hidden;
  pointer-events: auto;          /* allow hover / reseed interaction */
  background: transparent;
  contain: layout paint;         /* avoid affecting page layout/scroll */
}

.cube-side--left  { left: 0; }
.cube-side--right { right: 0; }

.cube-side canvas {
  display: block;
  width: 100% !important;   /* track the panel; CubeField no longer writes inline size */
  height: 100% !important;
}