T45b Site · Iso: diagonal cells in order, the pointer meets only grown cells, motion follows the system live, replay by key, the header fits 280px

frontend/src/styles.css

@@ -71,7 +71,10 @@ main { min-height: 100vh; }
 /* Pages */
 .hero { position: relative; min-height: 100vh; display: grid; align-content: end; justify-items: start; gap: 24px; padding: 96px 64px; }
 .hero-iso { position: absolute; top: 64px; right: 0; width: 64%; height: calc(100% - 64px); cursor: crosshair; }
-.hero > :not(canvas) { position: relative; z-index: 1; max-width: 44%; }
+.iso { display: block; padding: 0; border: 1px solid transparent; }
+.iso canvas { display: block; width: 100%; height: 100%; }
+.iso:focus-visible { outline: none; border-color: var(--accent); }
+.hero > :not(.iso) { position: relative; z-index: 1; max-width: 44%; }
 .hero h1 { font-size: clamp(48px, 8vw, 128px); line-height: 0.95; font-weight: 800; letter-spacing: -0.045em; }
 .hero p { font-size: 20px; line-height: 30px; }
 
@@ -115,12 +118,13 @@ img.shot { display: block; max-width: 100%; height: auto; }
 .foot a { text-decoration: underline; text-underline-offset: 3px; }
 
 @media (max-width: 767px) {
-  .bar { padding: 0 16px; gap: 20px; }
+  .bar { padding: 0 16px; gap: 12px; }
+  .bar .end { gap: 0; }
   .hero, .chapters, .story, .missing { padding-left: 20px; padding-right: 20px; }
   .foot { padding: 32px 20px; }
   .chapters .name { font-size: 22px; }
   .hero-iso { width: 100%; height: 55%; }
-  .hero > :not(canvas) { max-width: none; }
+  .hero > :not(.iso) { max-width: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {