prevent mobile viewport auto-zoom on input focus (#5152)

Mobile WebKit/Blink engines (such as Safari and Chrome on iOS) automatically
zoom in the entire page viewport when a text or numeric input is focused if
the computed font-size is strictly less than 16px. This page-level zoom remains
locked even after the input is blurred, disrupting the layout and forcing
users to manually pinch-to-zoom out to return to normal dimensions.
This change fixes the issue globally for the documentation examples and
provides educational guidelines for developers copying the patterns:
1. Systemic Styles Guard: Added a scoped style rule in examples.css setting
   'font-size: 16px' for all inputs and selects inside floating '.controls'
   containers. This covers active widgets (e.g. Model Transformations,
   Post-Processing, variant swapping) across almost all example pages
   without impacting other standard utility forms.

2. Developer Guidance Tip: Appended an educational "Mobile WebUX Tip" callout
   under the Model Transformations demo text block inside scenegraph/index.html,
   explaining the 16px browser threshold quirk to developers who copy-paste
   the custom markup blocks for their own standalone applications.
Verified layout presentation and viewport locking (locked at stable 1.0x scale)
under small-screen interaction models. Playwright test suite passes cleanly.

Author: diegoteran

packages/modelviewer.dev/examples/scenegraph/index.html

@@ -156,6 +156,7 @@ <h2 class="demo-title">Model Transformations</h2>
                 <code>ios-src</code> is not specified, since in this case a USDZ
                 will be generated on the fly from the current state.
               </p>
+              <p><b>Tip:</b> When building custom interactive overlay controls with text or numeric input fields on mobile, ensure your inputs are styled with a CSS rule setting <code>font-size: 16px;</code> (or larger). If a focused text field's computed font size is below 16px, mobile WebKit browsers (like iOS Safari and Chrome) will automatically zoom in the entire viewport, which does not automatically reset when the input is blurred and can break the page layout.</p>
             </div>
             <example-snippet stamp-to="transforms" highlight-as="html">
               <template>

packages/modelviewer.dev/styles/examples.css

@@ -1049,4 +1049,10 @@ paper-button {
     width: var(--og-sidebar-width);
     box-shadow: 2px 0 4px rgba(0,0,0,0.1);
   }
+}
+
+/* Prevent iOS mobile auto-viewport zoom on user interactions with input/select controls */
+.controls input,
+.controls select {
+  font-size: 16px;
 }