.g3d { position: relative; width: 100%; height: 500px; }
.g3d__canvas { display: block; width: 100%; height: 100%; background: transparent; cursor: grab; }
.g3d__canvas:active { cursor: grabbing; }
.g3d__markers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.g3d__marker { position: absolute; left: 0; top: 0; transition: opacity .15s ease-out; }
.g3d__marker.is-hidden { opacity: 0; }
.g3d__marker.is-hidden .g3d__dot { pointer-events: none; }
.g3d__dot { width: 100%; height: 100%; overflow: hidden; border-radius: 9999px; background: #171717; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); cursor: pointer; pointer-events: auto; transition: transform .2s; }
.g3d__dot.is-hover { transform: scale(1.25); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.g3d__dot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g3d__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; }
.g3d__loading span { font-size: 14px; line-height: 20px; color: #a3a3a3; }