ai generated solutions to our ai generated problems

frontend/src/App.jsx

@@ -54,6 +54,25 @@ const siteGateEnabled = String(import.meta.env.VITE_SITE_GATE || 'false').toLowe
 const staticDataBase = (import.meta.env.VITE_STATIC_DATA_BASE || '/data').replace(/\/+$/, '')
 const staticDataEnabled = String(import.meta.env.VITE_STATIC_DATA || 'false').toLowerCase() === 'true'
 const missingStaticDataPaths = new Set()
+const pixelSunSvg = `data:image/svg+xml,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges">
+  <rect width="16" height="16" fill="none"/>
+  <path fill="#ffb24d" d="M6 0h4v2h2v2h2v2h2v4h-2v2h-2v2h-2v2H6v-2H4v-2H2v-2H0V6h2V4h2V2h2z"/>
+  <path fill="#ffe06b" d="M5 3h6v1h2v3h1v3h-1v2h-3v1H5v-1H4v-2H3V6h1V4h1z"/>
+  <path fill="#fff7c9" d="M5 3h4v1h2v2H8v1H5z"/>
+  <path fill="#f58f33" d="M11 10h2v2h-3v1H6v-1h3v-1h2z"/>
+</svg>
+`)}`
+const pixelMoonSvg = `data:image/svg+xml,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges">
+  <rect width="16" height="16" fill="none"/>
+  <path fill="#fff6df" d="M7 1h5v1h2v2h1v7h-1v2h-2v1H6v-1H4v-2H3V5h1V3h3z"/>
+  <path fill="#8fb2d9" d="M5 4h2v2H5zm5-1h2v1h1v2h-2V5h-1zm-4 6h2v2H6zm4 2h3v1h-1v1h-2zM4 7h1v3H4z"/>
+  <path fill="#5f83b1" d="M5 10h1v2h2v1H6v-1H5zm7-5h1v2h-2V6h1zM8 3h1v2H7V4h1z"/>
+  <path fill="#1f2749" d="M7 0h5v1h2v1h1v2h1v7h-1v2h-1v1h-2v1H6v-1H4v-1H3v-2H2V5h1V3h1V2h3zm0 1v1H5v1H4v2H3v6h1v2h2v1h6v-1h2v-2h1V4h-1V2h-2V1z"/>
+  <path fill="#ffffff" d="M6 3h2v1H7v2H5V5h1zm4 4h2v1h1v1h-3zM8 11h1v1H7v-1z"/>
+</svg>
+`)}`
 
 const defaultAnalyticsPreferences = {
   chosen: false,
@@ -2881,8 +2900,9 @@ function PixelMountains() {
         ref={skyRef}
         style={skyPaths}
       >
-        <span className="pixel-sun" />
-        <span className="pixel-moon">
+        <img alt="" className="pixel-sun" src={pixelSunSvg} />
+        <img alt="" className="pixel-moon" src={pixelMoonSvg} />
+        <span className="pixel-stars">
           <span className="pixel-star pixel-star-a" />
           <span className="pixel-star pixel-star-b" />
           <span className="pixel-star pixel-star-c" />

frontend/src/styles.css

@@ -204,6 +204,7 @@ h3 {
   position: absolute;
   display: block;
   image-rendering: pixelated;
+  image-rendering: crisp-edges;
   transform: translate(-50%, -50%);
   will-change: left, opacity, top, transform;
 }
@@ -211,134 +212,30 @@ h3 {
 .pixel-sun {
   left: 78%;
   top: 18%;
-  width: 96px;
-  height: 96px;
-  background: var(--color-fury-glow);
-  clip-path: polygon(
-    33.333% 0,
-    66.666% 0,
-    66.666% 8.333%,
-    83.333% 8.333%,
-    83.333% 16.666%,
-    91.666% 16.666%,
-    91.666% 33.333%,
-    100% 33.333%,
-    100% 66.666%,
-    91.666% 66.666%,
-    91.666% 83.333%,
-    83.333% 83.333%,
-    83.333% 91.666%,
-    66.666% 91.666%,
-    66.666% 100%,
-    33.333% 100%,
-    33.333% 91.666%,
-    16.666% 91.666%,
-    16.666% 83.333%,
-    8.333% 83.333%,
-    8.333% 66.666%,
-    0 66.666%,
-    0 33.333%,
-    8.333% 33.333%,
-    8.333% 16.666%,
-    16.666% 16.666%,
-    16.666% 8.333%,
-    33.333% 8.333%
-  );
-  box-shadow:
-    0 -40px 0 -32px var(--color-fury-glow),
-    0 40px 0 -32px var(--color-fury-glow),
-    -40px 0 0 -32px var(--color-fury-glow),
-    40px 0 0 -32px var(--color-fury-glow),
-    32px 32px 0 -34px var(--color-fury-violet),
-    -32px 32px 0 -34px var(--color-fury-violet),
-    32px -32px 0 -34px var(--color-fury-violet),
-    -32px -32px 0 -34px var(--color-fury-violet),
-    inset -12px -12px 0 0 var(--color-soft-apricot-300);
-}
-
-.pixel-sun::after {
-  position: absolute;
-  left: 24px;
-  top: 20px;
-  width: 24px;
-  height: 24px;
-  background: var(--color-soft-apricot-50);
-  clip-path: polygon(0 0, 100% 0, 100% 66.666%, 66.666% 66.666%, 66.666% 100%, 0 100%);
-  content: "";
+  width: 128px;
+  height: 128px;
 }
 
 .pixel-moon {
   left: 78%;
   top: 18%;
-  width: 88px;
-  height: 88px;
-  background: var(--color-soft-apricot-50);
-  clip-path: polygon(
-    36.363% 0,
-    72.727% 0,
-    72.727% 9.09%,
-    90.909% 9.09%,
-    90.909% 27.272%,
-    100% 27.272%,
-    100% 72.727%,
-    90.909% 72.727%,
-    90.909% 90.909%,
-    72.727% 90.909%,
-    72.727% 100%,
-    36.363% 100%,
-    36.363% 90.909%,
-    18.181% 90.909%,
-    18.181% 72.727%,
-    0 72.727%,
-    0 27.272%,
-    18.181% 27.272%,
-    18.181% 9.09%,
-    36.363% 9.09%
-  );
-  box-shadow:
-    inset -8px -8px 0 0 var(--color-soft-apricot-100),
-    24px 20px 0 -18px var(--color-soft-apricot-100);
+  width: 136px;
+  height: 136px;
 }
 
-.pixel-moon::after {
+.pixel-stars {
   position: absolute;
-  left: 34px;
-  top: -10px;
-  width: 82px;
-  height: 82px;
-  background: var(--color-bg);
-  clip-path: polygon(
-    36.363% 0,
-    72.727% 0,
-    72.727% 9.09%,
-    90.909% 9.09%,
-    90.909% 27.272%,
-    100% 27.272%,
-    100% 72.727%,
-    90.909% 72.727%,
-    90.909% 90.909%,
-    72.727% 90.909%,
-    72.727% 100%,
-    36.363% 100%,
-    36.363% 90.909%,
-    18.181% 90.909%,
-    18.181% 72.727%,
-    0 72.727%,
-    0 27.272%,
-    18.181% 27.272%,
-    18.181% 9.09%,
-    36.363% 9.09%
-  );
-  content: "";
+  left: 78%;
+  top: 18%;
 }
 
 .pixel-star {
   position: absolute;
   display: block;
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
   background: var(--color-soft-apricot-100);
-  box-shadow: 8px 0 0 -2px var(--color-fury-glow), 0 8px 0 -2px var(--color-fury-glow);
+  box-shadow: 12px 0 0 -4px var(--color-fury-glow), 0 12px 0 -4px var(--color-fury-glow);
 }
 
 .pixel-star-a {