Undo the bad quad, and paint the page background where it shows

The triangle was mine. Extending the out-area quad to z=60 put it past camZ
(48), and proj() divides by (camZ - z) — so the scale explodes at the camera
plane and goes negative beyond it, folding the quad's far edge back above the
screen. The quad goes back to z=30; the full-frame clear is what covers the
screen, so it never needed extending in the first place.

The bottom still not being green was a second bug, in the previous commit. The
gradient was set on body, but the ROOT element's background is what paints the
viewport, and index.html gives html a background too — so body's never
propagated and painted only its own box, which has no height because the canvas
is position:fixed. It goes on documentElement now, and html gets an explicit
height, because a gradient is laid out in the root's own box and that box
collapses for the same reason.

Verified with the canvas deliberately ending 40px short: root box fills the
viewport, gradient's lower stop is rgb(41,92,45), the canvas's bottom row is
the same, and the seam is invisible.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

index.html

@@ -20,6 +20,10 @@
                src: url('assets/fonts/Silkscreen-Regular.ttf') format('truetype'); }
   @font-face { font-family: 'Silkscreen'; font-weight: 700; font-display: block;
                src: url('assets/fonts/Silkscreen-Bold.ttf') format('truetype'); }
+  /* html needs a real HEIGHT: the root element's background paints the viewport, but a GRADIENT is
+     laid out in the root's own box — and with the canvas position:fixed the root has no content and
+     collapses, so the gradient render.js sets had nowhere to go. */
+  html { height: 100%; height: 100dvh; }
   html, body { margin: 0; padding: 0; background: #10141c; overflow: hidden; }
   /* invisible probe: env() is only readable from CSS, so park the insets on an element and let
      render.js measure them. The canvas stays FULL-BLEED (the stands under the notch look good) —
@@ -40,6 +44,7 @@
            top: env(safe-area-inset-top, 0px);
            left: env(safe-area-inset-left, 0px);
            width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
+           height: calc(100vh - env(safe-area-inset-top, 0px));
            height: calc(100dvh - env(safe-area-inset-top, 0px)); }
   #hint { position: fixed; bottom: 8px; width: 100%; text-align: center;
           font: 400 10px Silkscreen, monospace; color: #6b7688; }
@@ -80,6 +85,6 @@
     <p class="start">TAP TO START</p>
   </div>
 </div>
-<script type="module" src="main.js?v=49"></script>
+<script type="module" src="main.js?v=50"></script>
 </body>
 </html>