diff --git a/moonlight-sonata/index.html b/moonlight-sonata/index.html
index 61a30da..7661753 100644
--- a/moonlight-sonata/index.html
+++ b/moonlight-sonata/index.html
@@ -446,19 +446,16 @@ function tick(now) {
 // ── Version switching ─────────────────────────────────────────────────────────
 let currentVersion = 'sparse';
 
-function setVersion(v) {
+function setVersion(v, pushHash) {
+  if (!['sparse','lush','wall'].includes(v)) v = 'sparse';
   if (v === currentVersion) return;
   stop();
   currentVersion = v;
   ['sparse','lush','wall'].forEach(x => {
     document.getElementById('v-'+x).classList.toggle('active', x === v);
   });
-
-  if (v === 'wall') {
-    loadVersion(WALL_NOTES);
-  } else {
-    loadVersion(v === 'sparse' ? SPARSE_NOTES : LUSH_NOTES);
-  }
+  if (pushHash !== false) history.replaceState(null, '', '#' + v);
+  loadVersion(v === 'wall' ? WALL_NOTES : v === 'lush' ? LUSH_NOTES : SPARSE_NOTES);
 }
 
 function loadVersion(notes) {
@@ -467,11 +464,18 @@ function loadVersion(notes) {
 }
 
 // ── Init ──────────────────────────────────────────────────────────────────────
+window.addEventListener('hashchange', () => {
+  setVersion(window.location.hash.slice(1), false);
+});
+
 window.addEventListener('DOMContentLoaded', () => {
   initSizes();
   drawRuler();
   drawKeys(new Set());
-  loadVersion(SPARSE_NOTES);
+  const initV = ['sparse','lush','wall'].includes(window.location.hash.slice(1))
+    ? window.location.hash.slice(1) : 'sparse';
+  currentVersion = '';   // force setVersion to run
+  setVersion(initV, false);
 
   // sync ruler scroll with roll scroll
   rollOuter.addEventListener('scroll', () => {