diff --git a/index.html b/index.html
index 47a21d0..a4ec435 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <title>Zero Width Unicode Standard</title>
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=inter:400,700,900" rel="stylesheet" />
@@ -11,36 +11,55 @@
             box-sizing: border-box;
             -webkit-tap-highlight-color: transparent;
         }
-        body, html {
+
+        html, body {
             margin: 0;
             padding: 0;
             width: 100%;
-            height: 100%;
-            overflow: hidden;
+            min-height: 100%;
             background-color: #ffffff;
             color: #000000;
             font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            -webkit-text-size-adjust: 100%;
+        }
+
+        .page {
+            min-height: 100vh;
+            min-height: 100svh;
+            min-height: 100dvh;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             text-align: center;
+            overflow-x: hidden;
+            overflow-y: auto;
+            padding:
+                max(16px, env(safe-area-inset-top))
+                16px
+                max(20px, env(safe-area-inset-bottom));
         }
+
         h1 {
-            font-size: 2.5rem;
+            font-size: clamp(2rem, 8vw, 2.6rem);
             font-weight: 900;
             line-height: 1.1;
-            margin: 0 0 2.5rem 0;
-            padding: 0 1.5rem;
+            margin: 0 0 2.2rem 0;
+            padding: 0 1rem;
             max-width: 600px;
         }
+
         .grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 0.75rem;
-            width: 340px;
-            margin-bottom: 2.5rem;
+            width: min(100%, 340px);
+            margin-bottom: 2.2rem;
         }
+
         .grid a {
             display: inline-flex;
             align-items: center;
@@ -51,41 +70,52 @@
             font-size: 0.95rem;
             padding: 0.85rem 1rem;
             border-radius: 9999px;
-            transition: transform 0.1s ease, opacity 0.15s ease;
+            transition: transform 0.1s ease, opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
             white-space: nowrap;
         }
+
         .grid a:active {
             transform: scale(0.95);
         }
+
         .grid a img {
             width: 20px;
             height: 20px;
+            object-fit: contain;
+            flex: 0 0 20px;
         }
+
         .filled {
             color: #ffffff;
             background-color: #000000;
         }
+
         .filled.rust {
             background-color: #ce412b;
         }
+
         .filled .logo-invert {
             filter: invert(1);
         }
+
         .outlined {
             color: #000000;
             background-color: transparent;
             border: 2px solid #000000;
         }
+
         .outlined:hover {
             background-color: #000000;
             color: #ffffff;
         }
+
         .divider {
             grid-column: 1 / -1;
             height: 1px;
             background: #e0e0e0;
             margin: 0.25rem 0;
         }
+
         .playground {
             display: flex;
             flex-direction: column;
@@ -94,15 +124,19 @@
             font-size: 0.95rem;
             color: #666;
         }
+
         .playground img {
             width: 36px;
             height: 36px;
             margin-bottom: 0.6rem;
             border-radius: 8px;
+            display: block;
         }
+
         .playground p {
             margin: 0;
         }
+
         .playground a {
             color: #000000;
             font-weight: 700;
@@ -110,39 +144,47 @@
             text-underline-offset: 4px;
         }
 
+        /* Keep desktop centered, but on phones move content upward naturally */
+        @media (max-width: 768px) {
+            .page {
+                justify-content: flex-start;
+                padding-top: max(48px, env(safe-area-inset-top));
+            }
+        }
+
         @media (max-width: 380px) {
             h1 { font-size: 2rem; }
-            .grid { width: 290px; }
+            .grid { width: min(100%, 290px); }
             .grid a { font-size: 0.8rem; padding: 0.7rem 0.6rem; }
         }
     </style>
 </head>
 <body>
+    <main class="page">
+        <h1>Zero Width Unicode Standard</h1>
 
-    <h1>Zero Width Unicode Standard</h1>
+        <div class="grid">
+            <a href="https://www.npmjs.com/package/zwus" target="_blank" rel="noopener noreferrer" class="filled">
+                <img src="assets/npm-logo-black.svg" alt="npm" class="logo-invert"> npm
+            </a>
+            <a href="https://crates.io/crates/zwus" target="_blank" rel="noopener noreferrer" class="filled rust">
+                <img src="assets/Cargo-Logo-Small.png" alt="Cargo"> crates.io
+            </a>
 
-    <div class="grid">
-        <a href="https://www.npmjs.com/package/zwus" target="_blank" rel="noopener noreferrer" class="filled">
-            <img src="assets/npm-logo-black.svg" alt="npm" class="logo-invert"> npm
-        </a>
-        <a href="https://crates.io/crates/zwus" target="_blank" rel="noopener noreferrer" class="filled rust">
-            <img src="assets/Cargo-Logo-Small.png" alt="Cargo"> crates.io
-        </a>
+            <div class="divider"></div>
 
-        <div class="divider"></div>
-
-        <a href="https://addons.mozilla.org/en-US/firefox/addon/in0sight/" target="_blank" rel="noopener noreferrer" class="outlined">
-            <img src="assets/Firefox_logo,_2019.svg" alt="Firefox"> Firefox Add-on
-        </a>
-        <a href="https://chromewebstore.google.com/detail/acnmohbphjmnbaboacmecidopeplkhog" target="_blank" rel="noopener noreferrer" class="outlined">
-            <img src="assets/Google_Chrome_icon_(February_2022).svg.png" alt="Chrome"> Chrome Extension
-        </a>
-    </div>
-
-    <div class="playground">
-        <img src="https://raw.githubusercontent.com/planetrenox/inzerosight/main/icon_128.png" alt="inØsight logo">
-        <p>playground: <a href="https://inzerosight.pages.dev" target="_blank" rel="noopener noreferrer">inzerosight.pages.dev</a></p>
-    </div>
+            <a href="https://addons.mozilla.org/en-US/firefox/addon/in0sight/" target="_blank" rel="noopener noreferrer" class="outlined">
+                <img src="assets/Firefox_logo,_2019.svg" alt="Firefox"> Firefox Add-on
+            </a>
+            <a href="https://chromewebstore.google.com/detail/acnmohbphjmnbaboacmecidopeplkhog" target="_blank" rel="noopener noreferrer" class="outlined">
+                <img src="assets/Google_Chrome_icon_(February_2022).svg.png" alt="Chrome"> Chrome Extension
+            </a>
+        </div>
 
+        <div class="playground">
+            <img src="https://raw.githubusercontent.com/planetrenox/inzerosight/main/icon_128.png" alt="inØsight logo">
+            <p>playground: <a href="https://inzerosight.pages.dev" target="_blank" rel="noopener noreferrer">inzerosight.pages.dev</a></p>
+        </div>
+    </main>
 </body>
 </html>
