.project-canvas { position: relative; }
.project-canvas > canvas {
  position: absolute; inset: 0; display: block;
  /* The 3D viewer (renderer.setSize) writes inline pixel width/height onto its
     own <canvas> on every resize; those inline styles outspecify this rule, so
     !important is required to keep the canvas filling .project-canvas instead
     of freezing at the last pixel size the renderer set. */
  width: 100% !important; height: 100% !important;
}
.project-canvas.viewer-mounted {
  background: radial-gradient(circle at 50% 34%, #eef1f5, #d3d7df);
}
.project-canvas.viewer-mounted > picture,
.project-canvas.viewer-mounted > img { visibility: hidden; }

/* Optional Next Seed control: a [data-next-seed] button placed inside the
   container is auto-wired by viewerAutoInit and shown only once the viewer
   mounts (hidden in the fallback). A subtle glass pill in the corner. */
.project-canvas [data-next-seed] { display: none; }
.project-canvas.viewer-mounted [data-next-seed] {
  display: inline-block; position: absolute; right: 16px; bottom: 16px; z-index: 2;
  padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 13px/1 system-ui, sans-serif; color: #1b2130;
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(20, 30, 60, 0.14); transition: background 0.15s, transform 0.1s;
}
.project-canvas.viewer-mounted [data-next-seed]:hover { background: rgba(255, 255, 255, 0.92); }
.project-canvas.viewer-mounted [data-next-seed]:active { transform: translateY(1px); }