docs: document machine federation

docs/styles.css

@@ -201,8 +201,10 @@ video {
   display: flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
   color: var(--muted);
   font-size: 0.95rem;
+  white-space: nowrap;
 }
 
 .nav-links a,
@@ -856,6 +858,7 @@ code .comment,
 
 .footer-links {
   display: flex;
+  flex-wrap: wrap;
   gap: 14px;
 }
 
@@ -1062,11 +1065,7 @@ html[data-theme="light"] .comment {
   }
 }
 
-@media (max-width: 680px) {
-  .container {
-    width: min(100% - 28px, 1120px);
-  }
-
+@media (max-width: 820px) {
   .nav {
     position: relative;
     align-items: stretch;
@@ -1085,7 +1084,9 @@ html[data-theme="light"] .comment {
     flex-wrap: nowrap;
     overflow-x: auto;
     width: 100%;
+    padding-bottom: 2px;
     scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
   }
 
   .nav-links a:not(.github-link) {
@@ -1124,6 +1125,12 @@ html[data-theme="light"] .comment {
   .nav-links .theme-toggle [data-theme-label] {
     display: none;
   }
+}
+
+@media (max-width: 680px) {
+  .container {
+    width: min(100% - 28px, 1120px);
+  }
 
   .hero {
     padding-top: 52px;