diff --git a/index.html b/index.html
index 99245b2..71987c6 100644
--- a/index.html
+++ b/index.html
@@ -63,6 +63,7 @@
.sub { color:var(--muted); font-size:12px; margin-bottom:18px; }
.kbd-legend { color:var(--muted); font-size:13px; font-family:"Courier New",monospace; text-align:left; line-height:1.75; }
.kbd-legend span { white-space:nowrap; } /* wrap only between shortcut groups, never mid-token */
+ .appheader-ctrls { margin-left:auto; } /* push controls right on wide; narrow media query resets to left */
#app { display:flex; gap:18px; max-width:1400px; margin:0 auto; align-items:flex-start; justify-content:center; }
.device { flex:1 1 auto; min-width:0; max-width:1000px; background:linear-gradient(180deg, var(--panel), var(--bg));
border:1px solid var(--edge); border-radius:16px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); }
@@ -180,6 +181,10 @@
/* when the practice column wraps under the others, swap its side rule for a top one */
.practice-col { border-left:none; padding-left:0; border-top:1px solid var(--edge); padding-top:12px; margin-top:4px; }
}
+ @media (max-width: 580px) { /* narrow: stack the header with logo + buttons above the title */
+ .appheader { flex-direction: column-reverse; align-items: flex-start !important; flex-wrap: nowrap !important; } /* !important beats the inline align-items/flex-wrap */
+ .appheader .appheader-ctrls { margin-left: 0; }
+ }
@media (max-width: 620px) {
#routineTray { width:100%; }
.meter-card .led { width:24px; height:24px; }
@@ -210,9 +215,9 @@