@layer viewer-3d {
  .viewer-3d {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
  }

  .viewer-3d__canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ── Loading spinner ── */

  .viewer-3d.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: viewer-spin 0.9s linear infinite;
    pointer-events: none;
  }

  @keyframes viewer-spin {
    to { transform: rotate(360deg); }
  }
}