From 1be692082762d423377f889944f12a19b917f9ce Mon Sep 17 00:00:00 2001
From: Me Here <me@here>
Date: Mon, 25 May 2026 07:39:21 -0500
Subject: [PATCH] Bigger display + legend text; switch play/stop from Space to
 P (Space conflicted with focused controls)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 index.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index a6dae2b..ce014b8 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,7 @@
   }
   h1 { font-size:18px; font-weight:600; letter-spacing:.5px; margin:0 0 2px; }
   .sub { color:var(--muted); font-size:12px; margin-bottom:18px; }
-  .kbd-legend { color:var(--muted); font-size:11px; font-family:"Courier New",monospace; text-align:right; }
+  .kbd-legend { color:var(--muted); font-size:13px; font-family:"Courier New",monospace; text-align:right; }
   #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); }
@@ -54,10 +54,10 @@
   .card { background:var(--panel-2); border:1px solid var(--edge); border-radius:12px; padding:13px; flex:1; min-width:240px; }
   .card h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; }
   .display { background:#0a0d11; border:1px solid #000; border-radius:8px; padding:8px 14px; text-align:center; box-shadow:inset 0 2px 10px rgba(0,0,0,.7); }
-  .display .big { font-family:"Courier New",monospace; font-weight:700; font-size:40px; color:#ffd166; letter-spacing:3px; text-shadow:0 0 12px rgba(255,209,102,.5); }
-  .display .dtimers { font-family:"Courier New",monospace; font-size:13px; color:#4dd0e1; margin:3px 0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
+  .display .big { font-family:"Courier New",monospace; font-weight:700; font-size:58px; color:#ffd166; letter-spacing:2px; line-height:1.05; text-shadow:0 0 12px rgba(255,209,102,.5); }
+  .display .dtimers { font-family:"Courier New",monospace; font-size:18px; color:#4dd0e1; margin:4px 0; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
   .display .dtimers[hidden] { display:none; }
-  .display .ctx { font-family:"Courier New",monospace; font-size:12px; color:#4dd0e1; min-height:15px; line-height:1.3; }
+  .display .ctx { font-family:"Courier New",monospace; font-size:15px; color:#4dd0e1; min-height:18px; line-height:1.3; }
   .display .ctx.muted-cue { color:#ffb454; }
   .knob { margin-bottom:10px; }
   .knob label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
@@ -180,7 +180,7 @@
   <div class="row" style="align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:12px">
     <h1 style="margin:0">Stackable Metronome <span class="lane-meta" id="appVersion" title="build version">v0.0.1-dev</span></h1>
     <div style="display:flex; align-items:center; gap:10px">
-      <span class="kbd-legend">Space play · T tap · ↑↓ tempo (⇧×10) · A add · N next · ? help</span>
+      <span class="kbd-legend">P play · T tap · ↑↓ tempo (⇧×10) · A add · N next · ? help</span>
       <button id="themeBtn" title="toggle light / dark theme">☀</button>
       <button id="helpBtn" title="keyboard shortcuts (?)">?</button>
     </div>
@@ -190,7 +190,7 @@
   <div class="row">
     <div class="card" style="flex:1">
       <div class="row" style="gap:22px; align-items:flex-start">
-        <div style="flex:0 0 190px; min-width:170px">
+        <div style="flex:0 0 212px; min-width:190px">
           <div class="display">
             <div class="big" id="bpmDisplay">120</div>
             <div class="dtimers" id="dtimers">
@@ -302,7 +302,7 @@
   <div class="overlay-box">
     <div class="tray-head"><h2 style="margin:0">Keyboard shortcuts</h2><button class="x" id="shortcutsClose" style="margin-left:0">✕</button></div>
     <table class="kbd-table">
-      <tr><td><kbd>Space</kbd></td><td>Start / stop</td></tr>
+      <tr><td><kbd>P</kbd></td><td>Play / stop</td></tr>
       <tr><td><kbd>T</kbd></td><td>Tap tempo</td></tr>
       <tr><td><kbd>↑</kbd> <kbd>↓</kbd></td><td>Tempo ±1 BPM</td></tr>
       <tr><td><kbd>⇧↑</kbd> <kbd>⇧↓</kbd></td><td>Tempo ±10 BPM</td></tr>
@@ -1128,7 +1128,7 @@ window.addEventListener("keydown", (e) => {
   const k = e.key;
   if (e.altKey && (k === "ArrowUp" || k === "ArrowDown")) { e.preventDefault(); moveActiveItem(k === "ArrowUp" ? -1 : 1); return; }  // reorder selected item
   if (e.metaKey || e.ctrlKey || e.altKey) return;
-  if (e.code === "Space") { e.preventDefault(); toggleTransport(); }
+  if (k === "p" || k === "P") { e.preventDefault(); toggleTransport(); }
   else if (k === "t" || k === "T") { tapTempo(); }
   else if (k === "ArrowUp") { e.preventDefault(); setBpm(state.bpm + (e.shiftKey ? 10 : 1)); }
   else if (k === "ArrowDown") { e.preventDefault(); setBpm(state.bpm - (e.shiftKey ? 10 : 1)); }