sweep: normalize — safe-area insets on crystal + voronoi fixed UI

Author: OpenClaw Agent

gallery/crystal.html

@@ -12,7 +12,7 @@
   body { background: #020408; display: flex; align-items: center; justify-content: center; height:100dvh; overflow: hidden; }
   canvas { display: block; image-rendering: pixelated; touch-action: none; }
   #ui {
-    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
+    position: fixed; bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
     display: flex; gap: 0.75rem; align-items: center; z-index: 10;
   }
   button {

gallery/voronoi.html

@@ -12,14 +12,14 @@
   body { background: #0a0a0a; overflow: hidden; cursor: crosshair; touch-action: none; height:100dvh}
   canvas { display: block; }
   .label {
-    position: fixed; bottom: 1rem; left: 1rem;
+    position: fixed; bottom: max(1rem, env(safe-area-inset-bottom, 0px)); left: max(1rem, env(safe-area-inset-left, 0px));
     font: 0.75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
     color: #888; background: rgba(10,10,10,0.85);
     padding: 0.4rem 0.7rem; border-radius: 4px;
     pointer-events: none;
   }
   .back {
-    position: fixed; top: 1rem; left: 1rem;
+    position: fixed; top: max(1rem, env(safe-area-inset-top, 0px)); left: max(1rem, env(safe-area-inset-left, 0px));
     font: 0.8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
     color: #aaa; background: rgba(10,10,10,0.85);
     padding: 0.5rem 0.8rem; border-radius: 4px;