updated UI

static/app.js

@@ -3,109 +3,153 @@
 ══════════════════════════════════════ */
 (function () {
   const cells = document.querySelectorAll('.hg-cell');
+  if (!cells.length) return;
   function randomLit() {
     cells.forEach(c => c.classList.remove('lit'));
     const count = 3 + Math.floor(Math.random() * 3);
-    const indices = [...Array(cells.length).keys()]
+    [...Array(cells.length).keys()]
       .sort(() => Math.random() - 0.5)
-      .slice(0, count);
-    indices.forEach(i => cells[i].classList.add('lit'));
+      .slice(0, count)
+      .forEach(i => cells[i].classList.add('lit'));
   }
   randomLit();
   setInterval(randomLit, 1800);
 })();
 
 /* ══════════════════════════════════════
-   CANVAS DRAWING
+   CANVAS SETUP
+   Key fix: never accumulate ctx.scale().
+   Instead, always setTransform() to start fresh.
 ══════════════════════════════════════ */
 const canvas = document.getElementById('draw-canvas');
-const ctx = canvas.getContext('2d');
+const ctx    = canvas.getContext('2d');
+const DPR    = window.devicePixelRatio || 1;
 
-// Size canvas to its CSS display size
 function resizeCanvas() {
+  // Read the CSS-rendered size
   const rect = canvas.getBoundingClientRect();
-  canvas.width  = rect.width  * window.devicePixelRatio;
-  canvas.height = rect.height * window.devicePixelRatio;
-  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-  ctx.fillStyle = '#080a08';
-  ctx.fillRect(0, 0, rect.width, rect.height);
+  const w = Math.round(rect.width);
+  const h = Math.round(rect.height);
+
+  // Save current drawing as image before resizing
+  let snapshot = null;
+  if (canvas.width > 0 && canvas.height > 0) {
+    try { snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height); } catch (_) {}
+  }
+
+  // Resize the backing buffer
+  canvas.width  = w * DPR;
+  canvas.height = h * DPR;
+
+  // Reset transform cleanly — no cumulative scaling
+  ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+
+  // Fill background
+  ctx.fillStyle = '#070908';
+  ctx.fillRect(0, 0, w, h);
+
+  // Restore drawing (best-effort; ignored if sizes differ)
+  if (snapshot) {
+    try { ctx.putImageData(snapshot, 0, 0); } catch (_) {}
+  }
 }
+
 resizeCanvas();
-window.addEventListener('resize', resizeCanvas);
 
-// Drawing state
-let drawing = false;
+// Debounce resize to avoid jank during orientation change
+let resizeTimer;
+window.addEventListener('resize', () => {
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(resizeCanvas, 80);
+});
+
+/* ══════════════════════════════════════
+   DRAWING
+══════════════════════════════════════ */
+let isDrawing = false;
 let lastX = 0, lastY = 0;
 let hasDrawn = false;
 
+/**
+ * Get pointer position relative to canvas CSS size.
+ * Works for both mouse and touch (single touch).
+ */
 function getPos(e) {
   const rect = canvas.getBoundingClientRect();
-  if (e.touches) {
-    return {
-      x: e.touches[0].clientX - rect.left,
-      y: e.touches[0].clientY - rect.top
-    };
-  }
-  return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  const src  = e.touches ? e.touches[0] : e;
+  return {
+    x: src.clientX - rect.left,
+    y: src.clientY - rect.top,
+  };
 }
 
 function startDraw(e) {
   e.preventDefault();
-  drawing = true;
-  hasDrawn = true;
+  isDrawing = true;
+  hasDrawn  = true;
   const { x, y } = getPos(e);
   lastX = x; lastY = y;
+
+  // Draw a dot on tap/click so single points register
   ctx.beginPath();
   ctx.arc(x, y, 10, 0, Math.PI * 2);
   ctx.fillStyle = '#d4f5d0';
   ctx.fill();
 }
 
-function draw(e) {
-  if (!drawing) return;
+function moveDraw(e) {
+  if (!isDrawing) return;
   e.preventDefault();
   const { x, y } = getPos(e);
+
   ctx.beginPath();
   ctx.moveTo(lastX, lastY);
   ctx.lineTo(x, y);
-  ctx.strokeStyle = '#d4f5d0';
-  ctx.lineWidth = 20;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
+  ctx.strokeStyle  = '#d4f5d0';
+  ctx.lineWidth    = 20;
+  ctx.lineCap      = 'round';
+  ctx.lineJoin     = 'round';
   ctx.stroke();
+
   lastX = x; lastY = y;
 }
 
-function endDraw() { drawing = false; }
+function endDraw(e) {
+  isDrawing = false;
+}
 
+// Mouse
 canvas.addEventListener('mousedown',  startDraw);
-canvas.addEventListener('mousemove',  draw);
+canvas.addEventListener('mousemove',  moveDraw);
 canvas.addEventListener('mouseup',    endDraw);
 canvas.addEventListener('mouseleave', endDraw);
+
+// Touch — passive:false lets us call e.preventDefault() to stop scroll
 canvas.addEventListener('touchstart', startDraw, { passive: false });
-canvas.addEventListener('touchmove',  draw,       { passive: false });
-canvas.addEventListener('touchend',   endDraw);
+canvas.addEventListener('touchmove',  moveDraw,  { passive: false });
+canvas.addEventListener('touchend',   endDraw,   { passive: false });
+canvas.addEventListener('touchcancel',endDraw,   { passive: false });
 
 /* ══════════════════════════════════════
    CLEAR
 ══════════════════════════════════════ */
 document.getElementById('clearBtn').addEventListener('click', () => {
   const rect = canvas.getBoundingClientRect();
-  ctx.fillStyle = '#080a08';
+  ctx.fillStyle = '#070908';
   ctx.fillRect(0, 0, rect.width, rect.height);
   hasDrawn = false;
   showEmpty();
 });
 
 /* ══════════════════════════════════════
-   RESULTS RENDERING
+   UI STATE HELPERS
 ══════════════════════════════════════ */
 function showEmpty() {
   document.getElementById('results-area').innerHTML = `
-    <div class="empty-state" id="emptyState">
+    <div class="empty-state">
       <div class="empty-icon">◎</div>
       <div class="empty-title">No prediction yet</div>
-      <div class="empty-sub">Draw a digit on the left,<br>then click Run Inference</div>
+      <div class="empty-sub">Draw a digit above,<br>then tap <strong>Run Inference</strong></div>
     </div>`;
 }
 
@@ -117,15 +161,22 @@ function showLoading() {
     </div>`;
 }
 
+function showError(msg) {
+  document.getElementById('results-area').innerHTML = `
+    <div class="empty-state">
+      <div class="empty-icon" style="color:#ff8080;border-color:rgba(255,80,80,0.2);background:rgba(255,80,80,0.07);">⚠</div>
+      <div class="empty-title" style="color:#ff9999;">${msg}</div>
+      <div class="empty-sub">Make sure the server is running</div>
+    </div>`;
+}
+
 function showResults(data) {
-  const pred  = data.prediction;
-  const conf  = data.confidence;
-  const probs = data.probabilities;
+  const pred    = data.prediction;
+  const conf    = data.confidence;
+  const probs   = data.probabilities;
   const confPct = (conf * 100).toFixed(1);
 
-  // Sort all 10 digits by probability descending
-  const sorted = Object.entries(probs)
-    .sort((a, b) => b[1] - a[1]);
+  const sorted = Object.entries(probs).sort((a, b) => b[1] - a[1]);
 
   const barsHTML = sorted.map(([digit, prob]) => {
     const isTop = parseInt(digit) === pred;
@@ -151,44 +202,31 @@ function showResults(data) {
           <div class="conf-track">
             <div class="conf-fill" style="width:${confPct}%"></div>
           </div>
-          <div class="conf-range">
-            <span>0%</span>
-            <span>50%</span>
-            <span>100%</span>
-          </div>
+          <div class="conf-range"><span>0%</span><span>50%</span><span>100%</span></div>
         </div>
       </div>
-
       <div class="probs-section">
         <div class="probs-label">Full probability distribution</div>
-        <div class="probs-grid">
-          ${barsHTML}
-        </div>
+        <div class="probs-grid">${barsHTML}</div>
       </div>
     </div>`;
-}
 
-function showError(msg) {
-  document.getElementById('results-area').innerHTML = `
-    <div class="empty-state">
-      <div class="empty-icon" style="color:#ff6b6b;border-color:rgba(255,107,107,0.2);background:rgba(255,107,107,0.07);">⚠</div>
-      <div class="empty-title" style="color:#ff9999;">${msg}</div>
-      <div class="empty-sub">Check that the server is running</div>
-    </div>`;
+  // Scroll results into view on mobile
+  if (window.innerWidth <= 680) {
+    document.getElementById('results-area').scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
 }
 
 /* ══════════════════════════════════════
    PREDICT
 ══════════════════════════════════════ */
-document.getElementById('predictBtn').addEventListener('click', async () => {
-  if (!hasDrawn) {
-    showError('Draw a digit first');
-    return;
-  }
+document.getElementById('predictBtn').addEventListener('click', () => {
+  if (!hasDrawn) { showError('Draw a digit first'); return; }
 
+  const btn = document.getElementById('predictBtn');
+  btn.disabled = true;
   showLoading();
 
-  // Export canvas to blob
   canvas.toBlob(async (blob) => {
     const fd = new FormData();
     fd.append('file', blob, 'digit.png');
@@ -200,12 +238,14 @@ document.getElementById('predictBtn').addEventListener('click', async () => {
       showResults(data);
     } catch (err) {
       showError(err.message || 'Request failed');
+    } finally {
+      btn.disabled = false;
     }
   }, 'image/png');
 });
 
 /* ══════════════════════════════════════
-   NAV TABS (cosmetic)
+   NAV TABS (cosmetic only)
 ══════════════════════════════════════ */
 document.querySelectorAll('.nav-tab').forEach(tab => {
   tab.addEventListener('click', () => {

static/index.html

@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Numera - Digit Classifier</title>
-  <link rel="stylesheet" href="static/style.css" />
+  <title>Numera — Digit Recognition</title>
+  <link rel="stylesheet" href="/static/style.css" />
 </head>
 <body>
 
@@ -16,6 +16,15 @@
     <div class="nav-logo-mark">🧿</div>
     <span class="nav-logo-text">Numera</span>
   </div>
+
+  <div class="nav-right">
+    <span class="nav-pill">v1.0 · MNIST</span>
+    <a class="nav-github" href="https://github.com/abdurafay19/Digit-Classifier" title="GitHub">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
+      </svg>
+    </a>
+  </div>
 </nav>
 
 <!-- ══════════════════════════════════════
@@ -32,7 +41,7 @@
       recognition, <em>instantly.</em>
     </h1>
     <p class="hero-sub">
-      Draw any digit from 0 to 9 and prediction in real time — with full probability
+      Draw any digit from 0 to 9 and get prediction in real time — with full probability
       distribution across all classes.
     </p>
     <div class="hero-stats">
@@ -45,7 +54,7 @@
         <div class="stat-label">Training samples</div>
       </div>
       <div>
-        <div class="stat-val">&lt; 1 sec</div>
+        <div class="stat-val">&lt;50ms</div>
         <div class="stat-label">Inference time</div>
       </div>
     </div>
@@ -71,7 +80,7 @@
 ══════════════════════════════════════ -->
 <div class="section-divider">
   <div class="div-line"></div>
-  <span class="div-label">Classifier</span>
+  <span class="div-label">Live classifier</span>
   <div class="div-line"></div>
 </div>
 
@@ -88,7 +97,7 @@
         <div class="bar-dot dot-y"></div>
         <div class="bar-dot dot-g"></div>
       </div>
-      <span class="bar-title">digit-classifier.app</span>
+      <span class="bar-title">numera — digit-classifier.app</span>
       <div class="bar-status">
         <span class="bar-status-dot"></span>
         model ready
@@ -150,11 +159,13 @@
 ══════════════════════════════════════ -->
 <footer>
   <div class="footer-left">
+    <span class="footer-logo">Numera</span>
+    <span class="footer-sep">·</span>
     <span class="footer-note">PyTorch · MNIST · FastAPI</span>
   </div>
   <div class="footer-right">Built with ♥ by Abdul Rafay</div>
 </footer>
 
-<script src="static/app.js"></script>
+<script src="/static/app.js"></script>
 </body>
 </html>

static/style.css

@@ -1,35 +1,27 @@
 @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap');
 
-/* ══════════════════════════════════════
-   TOKENS
-══════════════════════════════════════ */
 :root {
-  --bg:           #080909;
-  --bg2:          #0c0d0e;
-  --surface:      #111314;
-  --surface2:     #181b1d;
-  --surface3:     #1e2225;
-  --border:       rgba(255,255,255,0.06);
-  --border2:      rgba(255,255,255,0.10);
-  --border3:      rgba(255,255,255,0.16);
-  --accent:       #a8f0a0;
-  --accent2:      #6ee87a;
-  --accent-glow:  rgba(168,240,160,0.18);
-  --accent-dim:   rgba(168,240,160,0.07);
-  --text:         #eeeef0;
-  --text-sec:     #7e8590;
-  --text-muted:   #40464f;
-  --radius:       18px;
-  --radius-sm:    10px;
-  --radius-xs:    7px;
-  --ease:         cubic-bezier(0.4,0,0.2,1);
+  --bg:          #080909;
+  --bg2:         #0c0d0e;
+  --surface:     #111314;
+  --surface2:    #181b1d;
+  --surface3:    #1e2225;
+  --border:      rgba(255,255,255,0.06);
+  --border2:     rgba(255,255,255,0.10);
+  --border3:     rgba(255,255,255,0.16);
+  --accent:      #a8f0a0;
+  --accent2:     #6ee87a;
+  --accent-dim:  rgba(168,240,160,0.07);
+  --text:        #eeeef0;
+  --text-sec:    #7e8590;
+  --text-muted:  #40464f;
+  --radius-sm:   10px;
+  --radius-xs:   7px;
+  --ease:        cubic-bezier(0.4,0,0.2,1);
 }
 
-/* ══════════════════════════════════════
-   RESET & BASE
-══════════════════════════════════════ */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { scroll-behavior: smooth; font-size: 16px; }
+html { scroll-behavior: smooth; }
 
 body {
   background: var(--bg);
@@ -38,15 +30,13 @@ body {
   line-height: 1.5;
   min-height: 100vh;
   overflow-x: hidden;
-  cursor: default;
   -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
 }
 
-/* subtle grid texture on bg */
 body::before {
   content: '';
-  position: fixed;
-  inset: 0;
+  position: fixed; inset: 0;
   background-image:
     linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
@@ -55,669 +45,459 @@ body::before {
   z-index: 0;
 }
 
-/* ══════════════════════════════════════
-   NAV
-══════════════════════════════════════ */
+/* ══ NAV ══ */
 nav {
   position: fixed;
-  top: 0; left: 0; right: 0;
-  z-index: 200;
-  height: 58px;
+  top: 0; left: 0; right: 0; z-index: 200;
+  height: 54px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 32px;
-  background: rgba(8,9,9,0.75);
+  padding: 0 20px;
+  background: rgba(8,9,9,0.88);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border-bottom: 1px solid var(--border);
+  gap: 12px;
 }
 
-.nav-logo {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
+.nav-logo { display:flex; align-items:center; gap:9px; flex-shrink:0; }
 .nav-logo-mark {
-  width: 30px; height: 30px;
-  background: linear-gradient(135deg, var(--accent) 0%, #4dd65a 100%);
-  border-radius: 8px;
-  display: grid;
-  place-items: center;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.78rem;
-  font-weight: 500;
-  color: #060907;
-  letter-spacing: -0.04em;
-  flex-shrink: 0;
-}
-.nav-logo-text {
-  font-weight: 600;
-  font-size: 0.9rem;
-  letter-spacing: -0.01em;
-  color: var(--text);
+  width:28px; height:28px;
+  background: linear-gradient(135deg, var(--accent), #4dd65a);
+  border-radius:7px;
+  display:grid; place-items:center;
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.7rem; font-weight:500;
+  color:#060907; letter-spacing:-0.04em;
 }
+.nav-logo-text { font-weight:600; font-size:0.9rem; color:var(--text); }
 
-.nav-center {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  border-radius: 100px;
-  padding: 4px;
-}
 .nav-tab {
-  font-size: 0.78rem;
-  font-weight: 500;
-  color: var(--text-sec);
-  padding: 5px 16px;
-  border-radius: 100px;
-  cursor: pointer;
-  transition: all 0.18s var(--ease);
-  letter-spacing: 0.005em;
-  border: none;
-  background: none;
-}
-.nav-tab:hover { color: var(--text); }
-.nav-tab.active {
-  background: var(--surface3);
-  color: var(--text);
-  border: 1px solid var(--border2);
-}
-
-.nav-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
+  font-size:0.75rem; font-weight:500;
+  color:var(--text-sec);
+  padding:5px 14px;
+  border-radius:100px;
+  cursor:pointer;
+  transition:all 0.18s var(--ease);
+  border:none; background:none;
+  white-space:nowrap;
+  -webkit-tap-highlight-color:transparent;
+}
+.nav-tab:hover { color:var(--text); }
+.nav-tab.active { background:var(--surface3); color:var(--text); border:1px solid var(--border2); }
+
+.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
 .nav-pill {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.66rem;
-  letter-spacing: 0.08em;
-  color: var(--accent);
-  border: 1px solid rgba(168,240,160,0.2);
-  background: var(--accent-dim);
-  padding: 4px 12px;
-  border-radius: 100px;
-}
-
-/* ══════════════════════════════════════
-   HERO
-══════════════════════════════════════ */
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.62rem; letter-spacing:0.06em;
+  color:var(--accent);
+  border:1px solid rgba(168,240,160,0.2);
+  background:var(--accent-dim);
+  padding:4px 10px; border-radius:100px;
+  white-space:nowrap;
+}
+.nav-github {
+  width:30px; height:30px;
+  border-radius:7px;
+  border:1px solid var(--border2);
+  background:var(--surface);
+  display:grid; place-items:center;
+  cursor:pointer;
+  transition:all 0.18s var(--ease);
+  color:var(--text-sec); text-decoration:none;
+  -webkit-tap-highlight-color:transparent;
+}
+.nav-github:hover { border-color:var(--border3); color:var(--text); }
+.nav-github svg { width:14px; height:14px; fill:currentColor; }
+
+/* ══ HERO ══ */
 .hero {
-  position: relative;
-  z-index: 1;
-  padding: 130px 32px 70px;
-  max-width: 1080px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 64px;
-  align-items: center;
+  position:relative; z-index:1;
+  padding:100px 20px 50px;
+  max-width:1080px; margin:0 auto;
+  display:grid;
+  grid-template-columns:1fr auto;
+  gap:48px;
+  align-items:center;
 }
-
-/* radial glow behind hero */
 .hero::before {
-  content: '';
-  position: absolute;
-  top: 80px; left: 50%;
-  transform: translateX(-50%);
-  width: 600px; height: 300px;
-  background: radial-gradient(ellipse, rgba(168,240,160,0.07) 0%, transparent 70%);
-  pointer-events: none;
+  content:'';
+  position:absolute; top:60px; left:50%;
+  transform:translateX(-50%);
+  width:500px; height:260px;
+  background:radial-gradient(ellipse,rgba(168,240,160,0.07) 0%,transparent 70%);
+  pointer-events:none;
 }
 
 .hero-eyebrow {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.68rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--accent);
-  margin-bottom: 22px;
+  display:inline-flex; align-items:center; gap:8px;
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase;
+  color:var(--accent); margin-bottom:18px;
 }
 .eyebrow-dot {
-  width: 5px; height: 5px;
-  background: var(--accent);
-  border-radius: 50%;
-  animation: blink 2.4s ease-in-out infinite;
-}
-@keyframes blink {
-  0%,100% { opacity:1; } 50% { opacity:0.25; }
+  width:5px; height:5px;
+  background:var(--accent); border-radius:50%;
+  animation:blink 2.4s ease-in-out infinite; flex-shrink:0;
 }
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }
 
 .hero-title {
-  font-family: 'Instrument Serif', serif;
-  font-size: clamp(2.6rem, 5vw, 4rem);
-  font-weight: 400;
-  line-height: 1.08;
-  letter-spacing: -0.025em;
-  color: var(--text);
-  margin-bottom: 20px;
-}
-.hero-title em {
-  font-style: italic;
-  color: var(--accent);
+  font-family:'Instrument Serif',serif;
+  font-size:clamp(2rem,5vw,3.8rem);
+  font-weight:400; line-height:1.1;
+  letter-spacing:-0.025em; color:var(--text); margin-bottom:16px;
 }
+.hero-title em { font-style:italic; color:var(--accent); }
 
 .hero-sub {
-  font-size: 1.0rem;
-  color: var(--text-sec);
-  line-height: 1.72;
-  max-width: 440px;
-  margin-bottom: 36px;
+  font-size:0.95rem; color:var(--text-sec);
+  line-height:1.72; max-width:420px; margin-bottom:30px;
 }
 
 .hero-stats {
-  display: flex;
-  gap: 36px;
-  padding-top: 30px;
-  border-top: 1px solid var(--border);
-}
-.stat-val {
-  font-family: 'Instrument Serif', serif;
-  font-size: 1.7rem;
-  color: var(--text);
-  line-height: 1;
-  margin-bottom: 4px;
+  display:flex; gap:28px; flex-wrap:wrap;
+  padding-top:24px; border-top:1px solid var(--border);
 }
+.stat-val { font-family:'Instrument Serif',serif; font-size:1.6rem; color:var(--text); margin-bottom:4px; }
 .stat-label {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.63rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--text-muted);
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
 }
 
-/* digit grid on right */
 .hero-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 48px);
-  grid-template-rows: repeat(2, 48px);
-  gap: 7px;
-  flex-shrink: 0;
+  display:grid;
+  grid-template-columns:repeat(5,46px);
+  grid-template-rows:repeat(2,46px);
+  gap:6px; flex-shrink:0;
 }
 .hg-cell {
-  width: 48px; height: 48px;
-  border-radius: 10px;
-  border: 1px solid var(--border2);
-  background: var(--surface);
-  display: grid;
-  place-items: center;
-  font-family: 'Instrument Serif', serif;
-  font-size: 1.4rem;
-  color: var(--text-muted);
-  transition: all 0.4s var(--ease);
-  user-select: none;
+  width:46px; height:46px; border-radius:9px;
+  border:1px solid var(--border2); background:var(--surface);
+  display:grid; place-items:center;
+  font-family:'Instrument Serif',serif; font-size:1.3rem; color:var(--text-muted);
+  transition:all 0.4s var(--ease); user-select:none;
 }
 .hg-cell.lit {
-  border-color: rgba(168,240,160,0.3);
-  background: var(--accent-dim);
-  color: var(--accent);
-  box-shadow: 0 0 16px rgba(168,240,160,0.12);
+  border-color:rgba(168,240,160,0.3); background:var(--accent-dim);
+  color:var(--accent); box-shadow:0 0 14px rgba(168,240,160,0.12);
 }
 
-/* ══════════════════════════════════════
-   DIVIDER
-══════════════════════════════════════ */
+/* ══ DIVIDER ══ */
 .section-divider {
-  position: relative;
-  z-index: 1;
-  max-width: 1080px;
-  margin: 0 auto 20px;
-  padding: 0 32px;
-  display: flex;
-  align-items: center;
-  gap: 14px;
+  position:relative; z-index:1;
+  max-width:1080px; margin:0 auto 16px;
+  padding:0 20px;
+  display:flex; align-items:center; gap:14px;
 }
-.div-line { flex:1; height:1px; background: var(--border); }
+.div-line { flex:1; height:1px; background:var(--border); }
 .div-label {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.63rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  white-space: nowrap;
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase;
+  color:var(--text-muted); white-space:nowrap;
 }
 
-/* ══════════════════════════════════════
-   APP CARD
-══════════════════════════════════════ */
+/* ══ APP CARD ══ */
 .app-wrap {
-  position: relative;
-  z-index: 1;
-  max-width: 1080px;
-  margin: 0 auto 100px;
-  padding: 0 32px;
+  position:relative; z-index:1;
+  max-width:1080px; margin:0 auto 80px;
+  padding:0 20px;
 }
-
 .app-card {
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  border-radius: 22px;
-  overflow: hidden;
+  background:var(--surface);
+  border:1px solid var(--border2);
+  border-radius:20px; overflow:hidden;
   box-shadow:
     0 0 0 1px rgba(255,255,255,0.025),
-    0 32px 80px rgba(0,0,0,0.55),
-    0 0 120px rgba(168,240,160,0.03);
+    0 24px 64px rgba(0,0,0,0.5),
+    0 0 100px rgba(168,240,160,0.03);
 }
 
-/* macOS-style title bar */
+/* title bar */
 .card-bar {
-  height: 44px;
-  background: var(--bg2);
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 18px;
-  gap: 12px;
-}
-.bar-dots { display:flex; gap:7px; align-items:center; }
-.bar-dot {
-  width: 11px; height: 11px;
-  border-radius: 50%;
-}
-.dot-r { background: #ff5f57; }
-.dot-y { background: #ffbd2e; }
-.dot-g { background: #29c940; }
-
+  height:42px; background:var(--bg2);
+  border-bottom:1px solid var(--border);
+  display:flex; align-items:center;
+  justify-content:space-between;
+  padding:0 16px; gap:12px;
+}
+.bar-dots { display:flex; gap:6px; align-items:center; }
+.bar-dot  { width:10px; height:10px; border-radius:50%; }
+.dot-r { background:#ff5f57; }
+.dot-y { background:#ffbd2e; }
+.dot-g { background:#29c940; }
 .bar-title {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.7rem;
-  letter-spacing: 0.06em;
-  color: var(--text-muted);
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.65rem; letter-spacing:0.06em; color:var(--text-muted);
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
 }
 .bar-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.66rem;
-  color: var(--accent);
-  letter-spacing: 0.05em;
+  display:flex; align-items:center; gap:6px;
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.62rem; color:var(--accent); letter-spacing:0.05em;
+  flex-shrink:0; white-space:nowrap;
 }
 .bar-status-dot {
-  width: 5px; height: 5px;
-  background: var(--accent);
-  border-radius: 50%;
-  animation: blink 2.4s ease-in-out infinite;
+  width:5px; height:5px; background:var(--accent); border-radius:50%;
+  animation:blink 2.4s ease-in-out infinite;
 }
 
-/* two-col layout */
+/* two-col desktop layout */
 .app-grid {
-  display: grid;
-  grid-template-columns: 300px 1fr;
+  display:grid;
+  grid-template-columns:300px 1fr;
 }
 
 /* ── LEFT PANE ── */
-.left-pane {
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-}
-.pane-head {
-  padding: 16px 18px 14px;
-  border-bottom: 1px solid var(--border);
-}
+.left-pane { border-right:1px solid var(--border); display:flex; flex-direction:column; }
+.pane-head { padding:14px 16px 12px; border-bottom:1px solid var(--border); }
 .pane-eyebrow {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.6rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  margin-bottom: 3px;
-}
-.pane-name {
-  font-size: 0.88rem;
-  font-weight: 600;
-  color: var(--text);
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase;
+  color:var(--text-muted); margin-bottom:2px;
 }
+.pane-name { font-size:0.85rem; font-weight:600; color:var(--text); }
 
 .canvas-wrap {
-  flex: 1;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  background: var(--bg2);
+  flex:1; padding:14px;
+  display:flex; flex-direction:column; gap:10px;
+  background:var(--bg2);
 }
 
-/* The actual HTML5 canvas drawing area */
 #draw-canvas {
-  width: 100%;
-  aspect-ratio: 1;
-  border-radius: 12px;
-  border: 1px solid var(--border2);
-  background: #080a08;
-  cursor: crosshair;
-  display: block;
-  touch-action: none;
+  width:100%;
+  aspect-ratio:1/1;
+  border-radius:10px;
+  border:1px solid var(--border2);
+  background:#070908;
+  cursor:crosshair;
+  display:block;
+  touch-action:none;                /* stops page scroll on touch */
+  -webkit-touch-callout:none;       /* no iOS long-press popup */
+  -webkit-user-select:none;
+  user-select:none;
 }
 
 .canvas-hint {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.64rem;
-  letter-spacing: 0.06em;
-  color: var(--text-muted);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xs);
-  padding: 8px 12px;
-}
-.hint-icon { font-size: 0.8rem; opacity: 0.5; }
-
-.btn-row {
-  display: flex;
-  gap: 8px;
+  display:flex; align-items:center; gap:8px;
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.6rem; letter-spacing:0.05em; color:var(--text-muted);
+  background:var(--surface); border:1px solid var(--border);
+  border-radius:var(--radius-xs); padding:7px 10px;
 }
+.hint-icon { opacity:0.5; }
+
+.btn-row { display:flex; gap:8px; }
 .btn {
-  font-family: 'Instrument Sans', sans-serif;
-  font-size: 0.82rem;
-  font-weight: 600;
-  border-radius: var(--radius-xs);
-  height: 40px;
-  border: none;
-  cursor: pointer;
-  transition: all 0.18s var(--ease);
-  letter-spacing: 0.01em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
+  font-family:'Instrument Sans',sans-serif;
+  font-size:0.84rem; font-weight:600;
+  border-radius:var(--radius-xs);
+  height:46px;            /* tall = good mobile tap target */
+  border:none; cursor:pointer;
+  transition:all 0.18s var(--ease);
+  display:flex; align-items:center; justify-content:center; gap:6px;
+  -webkit-tap-highlight-color:transparent;
 }
 .btn-primary {
-  flex: 1;
-  background: var(--accent);
-  color: #060907;
-  box-shadow: 0 0 24px rgba(168,240,160,0.18);
-}
-.btn-primary:hover {
-  background: #bdf6b5;
-  box-shadow: 0 0 32px rgba(168,240,160,0.3);
-  transform: translateY(-1px);
-}
-.btn-primary:active { transform: translateY(0); box-shadow: none; }
-.btn-primary:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
+  flex:1;
+  background:var(--accent); color:#060907;
+  box-shadow:0 0 20px rgba(168,240,160,0.15);
 }
+.btn-primary:hover  { background:#bdf6b5; box-shadow:0 0 28px rgba(168,240,160,0.28); transform:translateY(-1px); }
+.btn-primary:active { transform:translateY(0); box-shadow:none; }
+.btn-primary:disabled { opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; }
 
 .btn-secondary {
-  width: 40px;
-  background: var(--surface);
-  color: var(--text-sec);
-  border: 1px solid var(--border2);
-}
-.btn-secondary:hover {
-  background: var(--surface2);
-  color: var(--text);
-  border-color: var(--border3);
+  width:46px;
+  background:var(--surface); color:var(--text-sec);
+  border:1px solid var(--border2);
 }
+.btn-secondary:hover  { background:var(--surface2); color:var(--text); border-color:var(--border3); }
+.btn-secondary:active { background:var(--surface3); }
 
 /* ── RIGHT PANE ── */
-.right-pane {
-  display: flex;
-  flex-direction: column;
-  min-height: 520px;
-}
-
-#results-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
+.right-pane { display:flex; flex-direction:column; min-height:480px; }
+#results-area { flex:1; display:flex; flex-direction:column; }
 
-/* empty state */
 .empty-state {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 60px 40px;
-  color: var(--text-muted);
+  flex:1; display:flex; flex-direction:column;
+  align-items:center; justify-content:center;
+  gap:10px; padding:48px 24px; text-align:center;
 }
 .empty-icon {
-  width: 56px; height: 56px;
-  border-radius: 14px;
-  border: 1px solid var(--border2);
-  background: var(--surface2);
-  display: grid;
-  place-items: center;
-  font-size: 1.4rem;
-  margin-bottom: 4px;
-}
-.empty-title {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--text-sec);
+  width:52px; height:52px; border-radius:13px;
+  border:1px solid var(--border2); background:var(--surface2);
+  display:grid; place-items:center; font-size:1.3rem; margin-bottom:4px;
 }
+.empty-title { font-size:0.82rem; font-weight:600; color:var(--text-sec); }
 .empty-sub {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.65rem;
-  letter-spacing: 0.06em;
-  color: var(--text-muted);
-  text-align: center;
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.63rem; letter-spacing:0.06em; color:var(--text-muted); line-height:1.7;
+}
+
+.loading-state {
+  flex:1; display:flex; flex-direction:column;
+  align-items:center; justify-content:center; gap:14px; padding:60px;
+}
+.spinner {
+  width:30px; height:30px;
+  border:2px solid var(--border2); border-top-color:var(--accent);
+  border-radius:50%; animation:spin 0.7s linear infinite;
+}
+@keyframes spin { to{transform:rotate(360deg)} }
+.loading-text {
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
 }
 
-/* results content */
 .results-content {
-  padding: 24px 28px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  animation: fadeIn 0.3s var(--ease);
+  padding:20px 22px; display:flex; flex-direction:column; gap:20px;
+  animation:fadeIn 0.28s var(--ease);
 }
-@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
+@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
 
-/* prediction hero */
 .pred-hero {
-  display: flex;
-  align-items: center;
-  gap: 22px;
-  padding-bottom: 22px;
-  border-bottom: 1px solid var(--border);
+  display:flex; align-items:center; gap:18px;
+  padding-bottom:18px; border-bottom:1px solid var(--border);
 }
 .pred-digit {
-  width: 88px; height: 88px;
-  border-radius: 16px;
-  background: var(--accent-dim);
-  border: 1px solid rgba(168,240,160,0.18);
-  display: grid;
-  place-items: center;
-  font-family: 'Instrument Serif', serif;
-  font-size: 3.8rem;
-  color: var(--accent);
-  flex-shrink: 0;
-  box-shadow:
-    0 0 40px rgba(168,240,160,0.1),
-    inset 0 1px 0 rgba(255,255,255,0.04);
-  position: relative;
-  overflow: hidden;
+  width:82px; height:82px; border-radius:14px;
+  background:var(--accent-dim); border:1px solid rgba(168,240,160,0.18);
+  display:grid; place-items:center;
+  font-family:'Instrument Serif',serif; font-size:3.5rem; color:var(--accent);
+  flex-shrink:0;
+  box-shadow:0 0 36px rgba(168,240,160,0.09),inset 0 1px 0 rgba(255,255,255,0.04);
 }
-.pred-digit::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(circle at 30% 20%, rgba(168,240,160,0.08), transparent 60%);
-}
-
 .pred-info { flex:1; min-width:0; }
 .pred-label {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.6rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  margin-bottom: 6px;
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase;
+  color:var(--text-muted); margin-bottom:5px;
 }
 .pred-conf {
-  font-family: 'Instrument Serif', serif;
-  font-size: 2.2rem;
-  color: var(--text);
-  line-height: 1;
-  margin-bottom: 12px;
+  font-family:'Instrument Serif',serif; font-size:2rem; color:var(--text);
+  line-height:1; margin-bottom:10px;
 }
 .pred-conf small {
-  font-family: 'Instrument Sans', sans-serif;
-  font-size: 1rem;
-  font-weight: 400;
-  color: var(--text-sec);
+  font-family:'Instrument Sans',sans-serif; font-size:0.95rem;
+  font-weight:400; color:var(--text-sec);
 }
 .conf-track {
-  height: 3px;
-  background: var(--surface3);
-  border-radius: 2px;
-  overflow: hidden;
-  margin-bottom: 6px;
+  height:3px; background:var(--surface3); border-radius:2px;
+  overflow:hidden; margin-bottom:5px;
 }
 .conf-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent2), var(--accent));
-  border-radius: 2px;
-  transition: width 0.55s var(--ease);
+  height:100%;
+  background:linear-gradient(90deg,var(--accent2),var(--accent));
+  border-radius:2px; transition:width 0.55s var(--ease);
 }
 .conf-range {
-  display: flex;
-  justify-content: space-between;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.58rem;
-  color: var(--text-muted);
-  letter-spacing: 0.06em;
+  display:flex; justify-content:space-between;
+  font-family:'JetBrains Mono',monospace; font-size:0.55rem; color:var(--text-muted);
 }
 
-/* probability distribution */
-.probs-section {}
 .probs-label {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.6rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  margin-bottom: 14px;
-}
-.probs-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase;
+  color:var(--text-muted); margin-bottom:10px;
 }
+.probs-grid { display:flex; flex-direction:column; gap:5px; }
 .prob-row {
-  display: grid;
-  grid-template-columns: 18px 1fr 58px;
-  align-items: center;
-  gap: 12px;
-  padding: 6px 10px;
-  border-radius: var(--radius-xs);
-  transition: background 0.15s;
-}
-.prob-row:hover { background: var(--surface2); }
-.prob-row.is-top {
-  background: var(--accent-dim);
-  border: 1px solid rgba(168,240,160,0.12);
-}
-.prob-num {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.72rem;
-  color: var(--text-muted);
-  text-align: right;
-  line-height: 1;
-}
-.prob-row.is-top .prob-num { color: var(--accent); font-weight: 500; }
-
-.prob-bar-track {
-  height: 4px;
-  background: var(--surface3);
-  border-radius: 2px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-}
-.prob-bar-fill {
-  height: 100%;
-  background: var(--surface3);
-  border-radius: 2px;
-  transition: width 0.55s var(--ease);
-}
-.prob-row.is-top .prob-bar-fill {
-  background: linear-gradient(90deg, var(--accent2), var(--accent));
-}
-.prob-pct {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.68rem;
-  color: var(--text-muted);
-  text-align: right;
-  white-space: nowrap;
-}
-.prob-row.is-top .prob-pct { color: var(--accent); font-weight: 500; }
-
-/* loading spinner */
-.loading-state {
-  flex:1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 14px;
-  padding: 60px;
-}
-.spinner {
-  width: 32px; height: 32px;
-  border: 2px solid var(--border2);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.7s linear infinite;
+  display:grid;
+  grid-template-columns:18px 1fr 54px;
+  align-items:center; gap:10px;
+  padding:6px 9px; border-radius:var(--radius-xs);
+  transition:background 0.15s;
+}
+.prob-row:hover { background:var(--surface2); }
+.prob-row.is-top { background:var(--accent-dim); border:1px solid rgba(168,240,160,0.12); }
+.prob-num { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--text-muted); text-align:right; }
+.prob-row.is-top .prob-num { color:var(--accent); font-weight:500; }
+.prob-bar-track { height:4px; background:var(--surface3); border-radius:2px; overflow:hidden; border:1px solid var(--border); }
+.prob-bar-fill  { height:100%; background:var(--surface3); border-radius:2px; transition:width 0.55s var(--ease); }
+.prob-row.is-top .prob-bar-fill { background:linear-gradient(90deg,var(--accent2),var(--accent)); }
+.prob-pct { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--text-muted); text-align:right; white-space:nowrap; }
+.prob-row.is-top .prob-pct { color:var(--accent); font-weight:500; }
+
+/* ══ FOOTER ══ */
+footer {
+  position:relative; z-index:1;
+  border-top:1px solid var(--border);
+  padding:18px 20px;
+  display:flex; align-items:center;
+  justify-content:space-between;
+  flex-wrap:wrap; gap:8px;
 }
-@keyframes spin { to { transform: rotate(360deg); } }
-.loading-text {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.68rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--text-muted);
+.footer-left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
+.footer-logo { font-weight:600; font-size:0.8rem; color:var(--text-sec); }
+.footer-sep  { color:var(--text-muted); }
+.footer-note, .footer-right {
+  font-family:'JetBrains Mono',monospace;
+  font-size:0.6rem; letter-spacing:0.07em; color:var(--text-muted);
 }
 
 /* ══════════════════════════════════════
-   FOOTER
+   MOBILE  ≤ 680px
 ══════════════════════════════════════ */
-footer {
-  position: relative;
-  z-index: 1;
-  border-top: 1px solid var(--border);
-  padding: 20px 32px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+@media (max-width: 680px) {
+
+  /* Nav — hide tabs & pill, keep logo + github */
+  .nav-center, .nav-pill { display:none; }
+  nav { padding:0 16px; }
+
+  /* Hero — single column */
+  .hero {
+    grid-template-columns:1fr;
+    padding:80px 16px 36px;
+    gap:24px;
+  }
+  .hero-grid { display:none; }        /* decorative only, hide on mobile */
+  .hero-title { font-size:clamp(1.9rem,8vw,2.6rem); }
+  .hero-sub   { font-size:0.88rem; max-width:100%; }
+
+  .section-divider { padding:0 12px; }
+
+  /* App card */
+  .app-wrap { padding:0 12px; margin-bottom:60px; }
+
+  /* Stack panes vertically — canvas on top, results below */
+  .app-grid { grid-template-columns:1fr; }
+  .left-pane { border-right:none; border-bottom:1px solid var(--border); }
+
+  /* Canvas: centred, max size that fits comfortably */
+  .canvas-wrap { padding:12px; }
+  #draw-canvas {
+    max-width:min(340px, 100%);
+    margin:0 auto;
+  }
+
+  /* Bigger tap targets */
+  .btn { height:50px; font-size:0.9rem; }
+  .btn-secondary { width:50px; }
+
+  /* Results */
+  .results-content { padding:14px 14px; gap:16px; }
+  .pred-digit { width:64px; height:64px; font-size:2.8rem; border-radius:11px; }
+  .pred-conf  { font-size:1.6rem; }
+  .right-pane { min-height:unset; }
+
+  .footer-right { display:none; }
+  .bar-title    { display:none; }   /* too cramped on mobile title bar */
 }
-.footer-left {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-.footer-logo {
-  font-weight: 600;
-  font-size: 0.82rem;
-  color: var(--text-sec);
-  letter-spacing: -0.01em;
-}
-.footer-sep { color: var(--text-muted); font-size: 0.8rem; }
-.footer-note {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.62rem;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-}
-.footer-right {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.62rem;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
+
+/* ══════════════════════════════════════
+   TABLET  681px – 900px
+══════════════════════════════════════ */
+@media (min-width:681px) and (max-width:900px) {
+  .nav-center { display:none; }
+  .hero { padding:100px 24px 48px; gap:32px; }
+  .hero-grid {
+    grid-template-columns:repeat(5,40px);
+    grid-template-rows:repeat(2,40px);
+    gap:5px;
+  }
+  .hg-cell { width:40px; height:40px; font-size:1.1rem; }
+  .app-wrap { padding:0 16px; }
+  .app-grid { grid-template-columns:260px 1fr; }
 }