style: blend heaven rituals into paper surface

static/heaven-loading.js

@@ -1,20 +1,23 @@
 (function exposeHeavenLoading(global) {
   "use strict";
 
-  const DARK_INK = "#0b0e1e";
+  const PAPER = "#fdfcf8";
-  const INK = "#e6c37a";
+  const PAPER_CENTER = "#f1e8d9";
-  const INK_BRIGHT = "#f7e3b4";
+  const NODE_TEXT = "#fffaf0";
-  const GOLD = "#e6c37a";
+  const INK = "#68493d";
-  const GOLD_BRIGHT = "#f7e3b4";
+  const INK_BRIGHT = "#963f37";
-  const CINNABAR = "#d8564a";
+  const GOLD = "#80533e";
-  const DIM = "rgba(216,205,180,0.55)";
+  const GOLD_BRIGHT = "#b64e43";
+  const CINNABAR = "#b94038";
+  const DIM = "rgba(68,57,49,0.62)";
+  const PARTICLE_COLORS = ["#a94b42", "#456b62", "#506b85"];
   const SERIF = '"Noto Serif SC","Songti SC","STSong","SimSun",serif';
   const ELEMENT_COLORS = {
-    木: "#7fb069",
+    木: "#4f7a4a",
-    火: "#d8564a",
+    火: "#b3483d",
-    土: "#d9a441",
+    土: "#96702c",
-    金: "#e6dec4",
+    金: "#70685b",
-    水: "#5b84b8",
+    水: "#496d92",
   };
   const QI6 = [
     { name: "厥阴风木", element: "木" },
@@ -101,6 +104,7 @@
         radius: 0.3 + random() * 1.3,
         phase: random() * Math.PI * 2,
         speed: 0.00015 + random() * 0.0004,
+        colorIndex: Math.floor(random() * PARTICLE_COLORS.length),
       }));
     }
 
@@ -202,16 +206,16 @@
       const cx = width / 2;
       const cy = height * 0.44;
       const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(width, height) * 0.75);
-      gradient.addColorStop(0, "#10142a");
+      gradient.addColorStop(0, PAPER_CENTER);
-      gradient.addColorStop(0.45, "#0b0e1e");
+      gradient.addColorStop(0.52, "#faf7ef");
-      gradient.addColorStop(1, "#05060d");
+      gradient.addColorStop(1, PAPER);
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, width, height);
       for (const star of this.stars) {
         const twinkle = 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(star.phase + now * 0.0012));
         const alpha = twinkle * 0.5;
         ctx.globalAlpha = alpha;
-        ctx.fillStyle = GOLD;
+        ctx.fillStyle = PARTICLE_COLORS[star.colorIndex];
         const y = ((star.y + now * star.speed) % 1) * height;
         ctx.fillRect(star.x * width, y, star.radius, star.radius);
       }
@@ -459,7 +463,7 @@
             if (freshness > 0) {
               const ctx = this.context;
               const gradient = ctx.createLinearGradient(cx, cy, x, y);
-              gradient.addColorStop(0, "rgba(230,195,122,0)");
+              gradient.addColorStop(0, "rgba(128,83,62,0)");
               gradient.addColorStop(1, GOLD);
               this.line(cx, cy, x, y, gradient, alpha * freshness * 0.35);
             }
@@ -527,7 +531,7 @@
         const y = degrees === null ? cy : cy + Math.sin(degrees * Math.PI / 180) * radius * progress;
         positions[element] = [x, y];
         this.node(x, y, nodeRadius * progress, ELEMENT_COLORS[element], alpha * progress, 16);
-        this.label(element, x, y + 0.5, Math.round(nodeRadius * 1.15), DARK_INK, alpha * progress, "600");
+        this.label(element, x, y + 0.5, Math.round(nodeRadius * 1.15), NODE_TEXT, alpha * progress, "600");
         const direction = element === "土" ? "中央土" : { 木: "东方木", 火: "南方火", 金: "西方金", 水: "北方水" }[element];
         this.label(direction, x, y + nodeRadius + 14, 12, ELEMENT_COLORS[element], alpha * progress * 0.75);
       });

static/styles.css

@@ -11825,7 +11825,7 @@ button.account-role-badge:focus-visible { outline: 2px solid var(--blue); outlin
   min-height: 360px;
   position: relative;
   overflow: hidden;
-  background: #05060d;
+  background: #fdfcf8;
 }
 .heaven-reading-loading[hidden] { display: none; }
 .heaven-reading-loading canvas {