[hidden] { display: none !important; }
/* ---------- 3D viewer ---------- */
.m3d { margin-top: 40px; }
.hero-3d.m3d { margin-top: 0; }
.m3d-stage {
  position: relative; aspect-ratio: 16 / 8;
  background: radial-gradient(ellipse at 50% 55%, var(--surface) 0%, var(--bg) 70%);
  border: 1px solid var(--faint);
  cursor: grab; overflow: hidden;
}
.m3d-stage:active { cursor: grabbing; }
.m3d-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.m3d-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.m3d-hint { position: absolute; left: 16px; bottom: 14px; transition: opacity .4s; pointer-events: none; }
.m3d:not(.ready) .m3d-hint, .m3d.touched .m3d-hint { opacity: 0; }
.m3d-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.m3d-reset { background: none; border: 0; color: var(--dim); cursor: pointer; border-bottom: 1px solid var(--faint); padding: 4px 0; }
.m3d-reset:hover { color: var(--ink); border-color: var(--hot); }
@media (max-width: 860px) { .m3d-stage { aspect-ratio: 4 / 3; } }