PICK SKY: natal wheel icon + palette sprint — inline SVG zodiac icons, per-planet alchemical colors

- Replace Unicode glyph text elements with inline SVG <path> icons loaded from icons/zodiac-signs/*.svg files
- NatusWheel.preload() fetches + caches all 12 zodiac SVG paths before first draw; auto-detects static base URL from <script src>
- Per-element (fire/stone/air/water) colored circles behind zodiac icons; icon fill colors use element palette vars
- PLANET_ELEMENTS map (au/ag/hg/cu/fe/sn/pb/u/np/pu) drives per-planet circle + label CSS modifier classes
- Planet circles: ternary fill + senary stroke per alchemical metal palette; labels: senary fill + stroke halo
- Zodiac icon scale = 85% of circle diameter (15% inset so icons breathe inside circles)
- Zodiac + house segment bg opacity 0.5; all ring/segment borders --terUser

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/static_src/scss/_natus.scss

@@ -359,35 +359,76 @@ html.natus-open .natus-modal-wrap {
 
 .nw-outer-ring {
     fill: none;
-    stroke: rgba(var(--quaUser), 0.6);
-    stroke-width: 1px;
+    stroke: rgba(var(--terUser), 1);
+    stroke-width: 1.5px;
 }
 
 .nw-inner-disc {
     fill: rgba(var(--quaUser), 0.6);
+    stroke: rgba(var(--terUser), 1);
+    stroke-width: 0.75px;
 }
 
 // Axes (ASC / DSC / MC / IC)
 .nw-axis-line  { stroke: rgba(var(--secUser), 1); stroke-width: 1.5px; }
 .nw-axis-label { fill:   rgba(var(--secUser), 1); }
 
-// Sign ring — vars are RGB tuples ("R, G, B"), must be wrapped in rgba()
-.nw-sign--fire  { fill: rgba(var(--priRd,  192,  64,  64), 0.75); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
-.nw-sign--stone { fill: rgba(var(--priFs,  122,  96,  64), 0.75); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
-.nw-sign--air   { fill: rgba(var(--priCy,   64, 144, 176), 0.75); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
-.nw-sign--water { fill: rgba(var(--priId,   80,  80, 160), 0.75); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
-.nw-sign-label  { fill: rgba(var(--secUser), 1); }
+// Sign ring — uniform --priMe bg at half opacity
+.nw-sign--fire,
+.nw-sign--stone,
+.nw-sign--air,
+.nw-sign--water {
+    fill: rgba(var(--priMe), 0.25);
+    stroke: rgba(var(--terUser), 1);
+    stroke-width: 0.75px;
+}
 
-// House ring
-.nw-house-cusp      { stroke: rgba(var(--quaUser), 0.8); stroke-width: 0.8px; }
-.nw-house-num       { fill:   rgba(var(--quiUser), 1); }
-.nw-house-fill--even { fill: rgba(var(--quaUser), 0.45); }
-.nw-house-fill--odd  { fill: rgba(var(--quiUser), 0.35); }
+// Icon bg circles — element fill + matching border
+.nw-sign-icon-bg--fire  { fill: rgba(var(--terRd), 1); stroke: rgba(var(--priOr), 1); stroke-width: 1px; }
+.nw-sign-icon-bg--stone { fill: rgba(var(--priYl), 1); stroke: rgba(var(--priLm), 1); stroke-width: 1px; }
+.nw-sign-icon-bg--air   { fill: rgba(var(--terGn), 1); stroke: rgba(var(--priTk), 1); stroke-width: 1px; }
+.nw-sign-icon-bg--water { fill: rgba(var(--priCy), 1); stroke: rgba(var(--priBl), 1); stroke-width: 1px; }
 
-// Planets
-.nw-planet-circle     { fill: rgba(var(--quiUser), 1); }
-.nw-planet-circle--rx { fill: rgba(var(--quiUser), 1); }
-.nw-planet-label      { fill: rgba(var(--quaUser), 1); stroke: rgba(var(--quaUser), 0.6); stroke-width: 0.4px; paint-order: stroke fill; }
+// Inline SVG path icons — per-element colors
+.nw-sign-icon--fire  { fill: rgba(var(--priOr), 1); }
+.nw-sign-icon--stone { fill: rgba(var(--terLm), 1); }
+.nw-sign-icon--air   { fill: rgba(var(--priTk), 1); }
+.nw-sign-icon--water { fill: rgba(var(--terBl), 1); }
+
+// House ring — uniform --priFs bg
+.nw-house-cusp       { stroke: rgba(var(--terUser), 1); stroke-width: 1.2px; }
+.nw-house-num        { fill:   rgba(var(--ninUser), 1); }
+.nw-house-fill--even { fill: rgba(var(--priFs), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
+.nw-house-fill--odd  { fill: rgba(var(--priFs), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
+
+// Planets — base geometry
+.nw-planet-circle,
+.nw-planet-circle--rx { stroke-width: 1px; }
+.nw-planet-label      { stroke-width: 0.4px; paint-order: stroke fill; }
+
+// Per-planet circle: fill = ternary, border = senary
+.nw-planet--au { fill: rgba(var(--terAu), 1); stroke: rgba(var(--sixAu), 1); }  // Sun
+.nw-planet--ag { fill: rgba(var(--terAg), 1); stroke: rgba(var(--sixAg), 1); }  // Moon
+.nw-planet--hg { fill: rgba(var(--terHg), 1); stroke: rgba(var(--sixHg), 1); }  // Mercury
+.nw-planet--cu { fill: rgba(var(--terCu), 1); stroke: rgba(var(--sixCu), 1); }  // Venus
+.nw-planet--fe { fill: rgba(var(--terFe), 1); stroke: rgba(var(--sixFe), 1); }  // Mars
+.nw-planet--sn { fill: rgba(var(--terSn), 1); stroke: rgba(var(--sixSn), 1); }  // Jupiter
+.nw-planet--pb { fill: rgba(var(--terPb), 1); stroke: rgba(var(--sixPb), 1); }  // Saturn
+.nw-planet--u  { fill: rgba(var(--terU),  1); stroke: rgba(var(--sixU),  1); }  // Uranus
+.nw-planet--np { fill: rgba(var(--terNp), 1); stroke: rgba(var(--sixNp), 1); }  // Neptune
+.nw-planet--pu { fill: rgba(var(--terPu), 1); stroke: rgba(var(--sixPu), 1); }  // Pluto
+
+// Per-planet label: fill + stroke halo = senary
+.nw-planet-label--au { fill: rgba(var(--sixAu), 1); stroke: rgba(var(--sixAu), 0.6); }
+.nw-planet-label--ag { fill: rgba(var(--sixAg), 1); stroke: rgba(var(--sixAg), 0.6); }
+.nw-planet-label--hg { fill: rgba(var(--sixHg), 1); stroke: rgba(var(--sixHg), 0.6); }
+.nw-planet-label--cu { fill: rgba(var(--sixCu), 1); stroke: rgba(var(--sixCu), 0.6); }
+.nw-planet-label--fe { fill: rgba(var(--sixFe), 1); stroke: rgba(var(--sixFe), 0.6); }
+.nw-planet-label--sn { fill: rgba(var(--sixSn), 1); stroke: rgba(var(--sixSn), 0.6); }
+.nw-planet-label--pb { fill: rgba(var(--sixPb), 1); stroke: rgba(var(--sixPb), 0.6); }
+.nw-planet-label--u  { fill: rgba(var(--sixU),  1); stroke: rgba(var(--sixU),  0.6); }
+.nw-planet-label--np { fill: rgba(var(--sixNp), 1); stroke: rgba(var(--sixNp), 0.6); }
+.nw-planet-label--pu { fill: rgba(var(--sixPu), 1); stroke: rgba(var(--sixPu), 0.6); }
 .nw-rx                { fill: rgba(var(--terUser), 1); }
 
 // Aspects