Add Zoom and Pan Navigation

Add zoom and pan controls to my org chart so users can navigate large hierarchies.

Framework: [React, Vue, vanilla JS, etc.]
Current code: [paste your existing org chart code or describe it]

Requirements:
1. Zoom in/out buttons (or pinch-to-zoom on mobile)
2. Pan by dragging the background (not nodes)
3. "Fit to screen" button to reset view
4. Smooth animations when zooming
5. Show current zoom level (optional)

Also handle:
- Minimum and maximum zoom limits (don't zoom to infinity!)
- Mobile touch gestures
- Keyboard shortcuts (+ and - keys)

Keep the code simple. I want to understand how zoom/pan works with my existing chart.

I'm learning, so explain the zoom math simply.