diff --git a/apps/site/src/App.tsx b/apps/site/src/App.tsx
index 9c02205..e034279 100644
--- a/apps/site/src/App.tsx
+++ b/apps/site/src/App.tsx
@@ -384,6 +384,7 @@ export default function App() {
         }}
       >
         <div
+          className="site-header-row"
           style={{
             maxWidth: 1180,
             margin: '0 auto',
@@ -408,7 +409,7 @@ export default function App() {
             <Logo size={26} />
             Visimer
           </a>
-          <nav style={{ display: 'flex', gap: 22, marginLeft: 6, fontSize: 14.5 }}>
+          <nav className="site-nav" style={{ display: 'flex', gap: 22, marginLeft: 6, fontSize: 14.5 }}>
             <a href="#demo" style={{ color: '#6B6559' }}>
               Playground
             </a>
@@ -444,6 +445,7 @@ export default function App() {
             </a>
             <div
               aria-hidden
+              className="site-star-hint"
               style={{
                 position: 'absolute',
                 top: 'calc(100% + 14px)',
diff --git a/apps/site/src/site.css b/apps/site/src/site.css
index 82a52ef..cea9251 100644
--- a/apps/site/src/site.css
+++ b/apps/site/src/site.css
@@ -165,3 +165,16 @@ textarea {
 .demo-pane-dark .demo-cm .tok-bracket {
   color: #9c968a;
 }
+
+/* Mobile: hide the middle nav links + the "Leave a star!" hint so the
+   navbar has room for the wordmark + GitHub star + npm install button. */
+@media (max-width: 640px) {
+  .site-nav,
+  .site-star-hint {
+    display: none !important;
+  }
+  .site-header-row {
+    padding: 12px 16px !important;
+    gap: 10px !important;
+  }
+}