Create a single-file D3 v7 HTML comparison using 4-6 labeled nodes or panels, directional connectors where sequence matters, direct labels on every mark, one primary red emphasis mark, neutral supporting marks, and no unlabeled boxes. The figure should represent: split diagram showing Microsoft's desktop-first architecture (file goes to local disk goes to optional OneDrive sync) vs. Google's cloud-first architecture (browser goes to cloud document goes to multiple simultaneous editors). Use inline CSS, the pinned D3 CDN, responsive ResizeObserver redraw, SVG title/desc accessibility, keyboard-reachable interactive marks, dark-mode CSS variables, and reduced-motion suppression.

Create a single-file D3 v7 HTML comparison using 4-6 labeled nodes or panels, directional connectors where sequence matters, direct labels on every mark, one primary red emphasis mark, neutral supporting marks, and no unlabeled boxes. The figure should represent: split diagram showing Microsoft's desktop-first architecture (file goes to local disk goes to optional OneDrive sync) vs. Google's cloud-first architecture (browser goes to cloud document goes to multiple simultaneous editors). Use inline CSS, the pinned D3 CDN, responsive ResizeObserver redraw, SVG title/desc accessibility, keyboard-reachable interactive marks, dark-mode CSS variables, and reduced-motion suppression.