Two-column layout: controls left, sticky visualisation right

Wraps the envelope and sound panels in a controls column and puts the
visualisation in a sticky right column so it stays in view while
tweaking parameters. Stacks vertically with viz on top below 1024px.
Bumps the page max-width from 960 to 1400 to give both columns room.

Author: kieranhj

index.html

@@ -15,33 +15,39 @@ <h1>BBC Micro <code>ENVELOPE</code> editor</h1>
         </p>
       </header>
 
-      <section class="panel" id="envelope-panel">
-        <h2>Envelope (N=1)</h2>
-        <h3>Pitch envelope</h3>
-        <div class="grid" id="pitch-grid"></div>
-        <h3>Amplitude envelope</h3>
-        <div class="grid" id="amp-grid"></div>
-        <div class="basic-row">
-          <input type="text" class="basic-line" id="envelope-line" spellcheck="false" autocomplete="off" />
-          <button class="copy-btn" data-copy="envelope-line" title="Copy ENVELOPE statement" aria-label="Copy ENVELOPE statement"></button>
-        </div>
-      </section>
+      <div class="layout">
+        <div class="controls">
+          <section class="panel" id="envelope-panel">
+            <h2>Envelope (N=1)</h2>
+            <h3>Pitch envelope</h3>
+            <div class="grid" id="pitch-grid"></div>
+            <h3>Amplitude envelope</h3>
+            <div class="grid" id="amp-grid"></div>
+            <div class="basic-row">
+              <input type="text" class="basic-line" id="envelope-line" spellcheck="false" autocomplete="off" />
+              <button class="copy-btn" data-copy="envelope-line" title="Copy ENVELOPE statement" aria-label="Copy ENVELOPE statement"></button>
+            </div>
+          </section>
 
-      <section class="panel">
-        <h2>Sound parameters</h2>
-        <div class="grid" id="sound-grid"></div>
-        <div class="basic-row">
-          <input type="text" class="basic-line" id="sound-line" spellcheck="false" autocomplete="off" />
-          <button class="copy-btn" data-copy="sound-line" title="Copy SOUND statement" aria-label="Copy SOUND statement"></button>
+          <section class="panel">
+            <h2>Sound parameters</h2>
+            <div class="grid" id="sound-grid"></div>
+            <div class="basic-row">
+              <input type="text" class="basic-line" id="sound-line" spellcheck="false" autocomplete="off" />
+              <button class="copy-btn" data-copy="sound-line" title="Copy SOUND statement" aria-label="Copy SOUND statement"></button>
+            </div>
+            <button id="play">Play</button>
+            <button id="stop">Stop</button>
+          </section>
         </div>
-        <button id="play">Play</button>
-        <button id="stop">Stop</button>
-      </section>
 
-      <section class="panel">
-        <h2>Visualisation</h2>
-        <canvas id="viz" width="900" height="320"></canvas>
-      </section>
+        <div class="viz-col">
+          <section class="panel viz-panel">
+            <h2>Visualisation</h2>
+            <canvas id="viz" width="900" height="320"></canvas>
+          </section>
+        </div>
+      </div>
     </main>
     <script type="module" src="/src/main.ts"></script>
   </body>

src/style.css

@@ -8,11 +8,30 @@
 body { margin: 0; }
 
 main {
-  max-width: 960px;
+  max-width: 1400px;
   margin: 0 auto;
   padding: 24px 16px 64px;
 }
 
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-areas: "controls viz";
+  gap: 16px;
+  align-items: start;
+}
+.controls { grid-area: controls; }
+.viz-col { grid-area: viz; }
+.viz-panel { position: sticky; top: 16px; }
+
+@media (max-width: 1024px) {
+  .layout {
+    grid-template-columns: 1fr;
+    grid-template-areas: "viz" "controls";
+  }
+  .viz-panel { position: static; }
+}
+
 h1 { font-size: 1.4rem; margin: 0 0 4px; }
 h2 { font-size: 1rem; margin: 0 0 12px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.05em; }
 h3 { font-size: 0.8rem; margin: 14px 0 8px; color: #58a6ff; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }