html: fit long IPv6 addresses in hero field

html/index.html

@@ -294,5 +294,24 @@ <h2>FAQ</h2>
       </footer>
 
     </div>
+    <script>
+      // Shrink the IP field's font size so long IPv6 addresses fit on any screen.
+      (function () {
+        var input = document.querySelector('.ip-input');
+        if (!input) return;
+        var maxSize = 2.5; // rem
+        var minSize = 0.85; // rem
+        function fit() {
+          var size = maxSize;
+          input.style.fontSize = size + 'rem';
+          while (input.scrollWidth > input.clientWidth && size > minSize) {
+            size -= 0.05;
+            input.style.fontSize = size + 'rem';
+          }
+        }
+        fit();
+        window.addEventListener('resize', fit);
+      })();
+    </script>
   </body>
 </html>

html/styles.html

@@ -154,7 +154,8 @@
     border: 1px solid var(--border);
     border-radius: 8px;
     text-align: center;
-    width: 75%;
+    width: 100%;
+    max-width: 100%;
     padding: 0.35rem 0.75rem;
     outline: none;
     transition: border-color 0.15s;