
.s3d { position: relative; isolation: isolate; display: block; height: 280px; margin: 0; padding: 0; overflow: hidden; background: var(--s3d-bg, transparent); }
.s3d::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--s3d-accent, currentColor) 30%, var(--s3d-accent, currentColor) 70%, transparent); opacity: .55; }

.s3d-box { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; pointer-events: none; }
.s3d-box img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.s3d-box canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 1024px) { .s3d { height: 360px; } }
@media (prefers-reduced-motion: reduce) { .s3d-box canvas { display: none; } }
