diff --git a/lyra/web/static/recorder.css b/lyra/web/static/recorder.css
index d6b85b3..21c3c1f 100644
--- a/lyra/web/static/recorder.css
+++ b/lyra/web/static/recorder.css
@@ -25,6 +25,7 @@
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
+  padding-top: calc(12px + env(safe-area-inset-top));   /* clear the notch/status bar */
   border-bottom: 1px solid var(--border, #2a1d12);
 }
 .rec-title { font-weight: 700; color: var(--accent, #ff7a00); }
@@ -94,9 +95,15 @@
 .rec-ln.brd { display: flex; gap: 4px; align-items: center; color: var(--text-fade, #8a8a8a); }
 .rec-ln b { color: var(--accent, #ff7a00); font-weight: 700; }
 
-.rec-foot { padding: 12px 14px; border-top: 1px solid var(--border, #2a1d12); }
-.rec-save { width: 100%; padding: 14px; border-radius: 10px; background: var(--accent, #ff7a00); color: #111; border: none; font-weight: 700; font-size: 1rem; }
+.rec-foot {
+  display: flex; gap: 10px;
+  padding: 12px 14px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--border, #2a1d12);
+}
+.rec-save { flex: 1; padding: 14px; border-radius: 10px; background: var(--accent, #ff7a00); color: #111; border: none; font-weight: 700; font-size: 1rem; }
 .rec-save:disabled { opacity: .6; }
+.rec-cancel { padding: 14px 18px; border-radius: 10px; background: var(--bg-elev, #0e0e0e); color: var(--text-fade, #8a8a8a); border: 1px solid var(--border, #2a1d12); font-weight: 600; font-size: 1rem; }
 
 .rec-undo { background: none; border: none; color: var(--text-fade, #8a8a8a); font-size: .75rem; padding: 0 4px; }
 
diff --git a/lyra/web/static/recorder.js b/lyra/web/static/recorder.js
index 074c196..c5e3eda 100644
--- a/lyra/web/static/recorder.js
+++ b/lyra/web/static/recorder.js
@@ -209,6 +209,7 @@
       </div>
 
       <div class="rec-foot">
+        <button class="rec-cancel" data-act="close">Cancel</button>
         <button class="rec-save" data-act="save">Save &amp; replay</button>
       </div>
     `;