git-hash-art 0.7.0 → 0.9.0

package/dist/browser.js

@@ -12,17 +12,22 @@ import $4wRzV$colorscheme from "color-scheme";
  * identically in Node (@napi-rs/canvas) and browsers.
  *
  * Generation pipeline:
- *   1.  Background — radial gradient from hash-derived dark palette
- *   1b. Layered background — large faint shapes / subtle pattern for depth
- *   2.  Composition mode — hash selects: radial, flow-field, spiral, grid-subdivision, or clustered
- *   3.  Focal points + void zones (negative space)
- *   4.  Flow field seed values
- *   5.  Shape layers — blend modes, render styles, weighted selection,
- *       focal-point placement, atmospheric depth, organic edges
+ *   0.  Archetype selection + shape palette + color hierarchy
+ *   1.  Background — style from archetype, gradient mesh for depth
+ *   1b. Layered background — archetype-coherent shapes
+ *   2.  Composition mode + symmetry
+ *   3.  Focal points + void zones + hero avoidance field
+ *   4.  Flow field
+ *   4b. Hero shape
+ *   5.  Shape layers — palette-driven selection, affinity-aware styles,
+ *       size echo, tangent placement, atmospheric depth
  *   5b. Recursive nesting
- *   6.  Flow-line pass — tapered brush-stroke curves
- *   7.  Noise texture overlay
- *   8.  Organic connecting curves
+ *   6.  Flow lines — variable color, branching, pressure simulation
+ *   6b. Symmetry mirroring
+ *   7.  Noise texture
+ *   8.  Vignette
+ *   9.  Organic connecting curves
+ *   10. Post-processing — color grading, chromatic aberration, bloom
  */ 
  // declare module 'color-scheme';
 
@@ -388,6 +393,67 @@ function $b5a262d09b87e373$export$f2121afcad3d553f(hex, alpha) {
     const [r, g, b] = $b5a262d09b87e373$var$hexToRgb(hex);
     return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
 }
+function $b5a262d09b87e373$export$fabac4600b87056(colors, rng) {
+    if (colors.length < 3) return {
+        dominant: colors[0] || "#888888",
+        secondary: colors[1] || colors[0] || "#888888",
+        accent: colors[colors.length - 1] || "#888888",
+        all: colors
+    };
+    // Pick dominant as the color closest to the palette's average hue
+    const hsls = colors.map((c)=>$b5a262d09b87e373$var$hexToHsl(c));
+    const avgHue = hsls.reduce((s, h)=>s + h[0], 0) / hsls.length;
+    let dominantIdx = 0;
+    let minDist = 360;
+    for(let i = 0; i < hsls.length; i++){
+        const d = Math.min(Math.abs(hsls[i][0] - avgHue), 360 - Math.abs(hsls[i][0] - avgHue));
+        if (d < minDist) {
+            minDist = d;
+            dominantIdx = i;
+        }
+    }
+    // Accent is the color most distant from dominant in hue
+    let accentIdx = 0;
+    let maxDist = 0;
+    for(let i = 0; i < hsls.length; i++){
+        if (i === dominantIdx) continue;
+        const d = Math.min(Math.abs(hsls[i][0] - hsls[dominantIdx][0]), 360 - Math.abs(hsls[i][0] - hsls[dominantIdx][0]));
+        if (d > maxDist) {
+            maxDist = d;
+            accentIdx = i;
+        }
+    }
+    // Secondary is the remaining color with highest saturation
+    let secondaryIdx = 0;
+    let maxSat = -1;
+    for(let i = 0; i < hsls.length; i++){
+        if (i === dominantIdx || i === accentIdx) continue;
+        if (hsls[i][1] > maxSat) {
+            maxSat = hsls[i][1];
+            secondaryIdx = i;
+        }
+    }
+    if (secondaryIdx === dominantIdx) secondaryIdx = accentIdx === 0 ? 1 : 0;
+    return {
+        dominant: colors[dominantIdx],
+        secondary: colors[secondaryIdx],
+        accent: colors[accentIdx],
+        all: colors
+    };
+}
+function $b5a262d09b87e373$export$b49f62f0a99da0e8(hierarchy, rng) {
+    const roll = rng();
+    if (roll < 0.60) return hierarchy.dominant;
+    if (roll < 0.85) return hierarchy.secondary;
+    return hierarchy.accent;
+}
+function $b5a262d09b87e373$export$18a34c25ea7e724b(hex, rng, hueAmount = 8, slAmount = 0.06) {
+    const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
+    const newH = (h + (rng() - 0.5) * hueAmount * 2 + 360) % 360;
+    const newS = Math.max(0, Math.min(1, s + (rng() - 0.5) * slAmount * 2));
+    const newL = Math.max(0, Math.min(1, l + (rng() - 0.5) * slAmount * 2));
+    return $b5a262d09b87e373$var$hslToHex(newH, newS, newL);
+}
 function $b5a262d09b87e373$export$59539d800dbe6858(hex, rng, amount = 0.1) {
     const [r, g, b] = $b5a262d09b87e373$var$hexToRgb(hex);
     const jit = ()=>(rng() - 0.5) * 2 * amount * 255;
@@ -427,6 +493,31 @@ function $b5a262d09b87e373$export$90ad0e6170cf6af5(fgHex, bgLuminance, minContra
         return $b5a262d09b87e373$var$hslToHex(h, targetS, targetL);
     }
 }
+function $b5a262d09b87e373$export$4a3734b8c4b5c0e(hex, gradeHue, intensity) {
+    const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
+    // Blend hue toward the grade hue
+    const hueDiff = (gradeHue - h + 540) % 360 - 180;
+    const newH = (h + hueDiff * intensity * 0.3 + 360) % 360;
+    // Slightly unify saturation
+    const newS = Math.max(0, Math.min(1, s + (0.5 - s) * intensity * 0.15));
+    return $b5a262d09b87e373$var$hslToHex(newH, newS, l);
+}
+function $b5a262d09b87e373$export$6d1620b367f86f7a(rng) {
+    // Warm golden, cool blue, rosy, teal, amber
+    const GRADE_HUES = [
+        40,
+        220,
+        340,
+        175,
+        30
+    ];
+    const hue = GRADE_HUES[Math.floor(rng() * GRADE_HUES.length)] + (rng() - 0.5) * 20;
+    const intensity = 0.15 + rng() * 0.25;
+    return {
+        hue: (hue + 360) % 360,
+        intensity: intensity
+    };
+}
 
 
 
@@ -1217,35 +1308,32 @@ const $77711f013715e6da$export$c2fc138f94dd4b2a = {
  */ const $2899cc29bfcdb86b$export$580f80cfb9de73bc = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    const numPoints = 5 + Math.floor(rng() * 5); // 5-9 lobes
+    const numPoints = 5 + Math.floor(rng() * 5);
     const points = [];
     for(let i = 0; i < numPoints; i++){
         const angle = i / numPoints * Math.PI * 2;
-        const jitter = 0.5 + rng() * 0.5; // radius varies 50-100%
+        const jitter = 0.5 + rng() * 0.5;
         points.push({
             x: Math.cos(angle) * r * jitter,
             y: Math.sin(angle) * r * jitter
         });
     }
     ctx.beginPath();
-    // Start at midpoint between last and first point
     const last = points[points.length - 1];
     const first = points[0];
     ctx.moveTo((last.x + first.x) / 2, (last.y + first.y) / 2);
     for(let i = 0; i < numPoints; i++){
         const curr = points[i];
         const next = points[(i + 1) % numPoints];
-        const midX = (curr.x + next.x) / 2;
-        const midY = (curr.y + next.y) / 2;
-        ctx.quadraticCurveTo(curr.x, curr.y, midX, midY);
+        ctx.quadraticCurveTo(curr.x, curr.y, (curr.x + next.x) / 2, (curr.y + next.y) / 2);
     }
     ctx.closePath();
 };
 const $2899cc29bfcdb86b$export$7a6094023f0902a6 = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    const sides = 3 + Math.floor(rng() * 10); // 3-12 sides
-    const jitterAmount = 0.1 + rng() * 0.4; // 10-50% vertex displacement
+    const sides = 3 + Math.floor(rng() * 10);
+    const jitterAmount = 0.1 + rng() * 0.4;
     ctx.beginPath();
     for(let i = 0; i < sides; i++){
         const angle = i / sides * Math.PI * 2 - Math.PI / 2;
@@ -1260,10 +1348,9 @@ const $2899cc29bfcdb86b$export$7a6094023f0902a6 = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$ef56b4a8316e47d5 = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    // Frequency ratios — small integers produce recognizable patterns
-    const freqA = 1 + Math.floor(rng() * 5); // 1-5
-    const freqB = 1 + Math.floor(rng() * 5); // 1-5
-    const phase = rng() * Math.PI; // phase offset
+    const freqA = 1 + Math.floor(rng() * 5);
+    const freqB = 1 + Math.floor(rng() * 5);
+    const phase = rng() * Math.PI;
     const steps = 120;
     ctx.beginPath();
     for(let i = 0; i <= steps; i++){
@@ -1278,7 +1365,6 @@ const $2899cc29bfcdb86b$export$ef56b4a8316e47d5 = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$1db9219b4f34658c = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    // Exponent range: 0.3 (spiky astroid) to 5 (rounded rectangle)
     const n = 0.3 + rng() * 4.7;
     const steps = 120;
     ctx.beginPath();
@@ -1286,7 +1372,6 @@ const $2899cc29bfcdb86b$export$1db9219b4f34658c = (ctx, size, config)=>{
         const t = i / steps * Math.PI * 2;
         const cosT = Math.cos(t);
         const sinT = Math.sin(t);
-        // Superellipse parametric form
         const x = Math.sign(cosT) * Math.pow(Math.abs(cosT), 2 / n) * r;
         const y = Math.sign(sinT) * Math.pow(Math.abs(sinT), 2 / n) * r;
         if (i === 0) ctx.moveTo(x, y);
@@ -1297,11 +1382,9 @@ const $2899cc29bfcdb86b$export$1db9219b4f34658c = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$b027c64d22b01985 = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const scale = size / 2;
-    // R = outer radius, r = inner radius, d = pen distance from inner center
     const R = 1;
-    const r = 0.2 + rng() * 0.6; // 0.2-0.8
-    const d = 0.3 + rng() * 0.7; // 0.3-1.0
-    // Number of full rotations needed to close the curve
+    const r = 0.2 + rng() * 0.6;
+    const d = 0.3 + rng() * 0.7;
     const gcd = (a, b)=>{
         const ai = Math.round(a * 1000);
         const bi = Math.round(b * 1000);
@@ -1309,7 +1392,7 @@ const $2899cc29bfcdb86b$export$b027c64d22b01985 = (ctx, size, config)=>{
         return g(ai, bi) / 1000;
     };
     const period = r / gcd(R, r);
-    const maxT = Math.min(period, 10) * Math.PI * 2; // cap at 10 rotations
+    const maxT = Math.min(period, 10) * Math.PI * 2;
     const steps = Math.min(600, Math.floor(maxT * 20));
     ctx.beginPath();
     for(let i = 0; i <= steps; i++){
@@ -1324,9 +1407,9 @@ const $2899cc29bfcdb86b$export$b027c64d22b01985 = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$7608ccd03bfb705d = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    const rings = 2 + Math.floor(rng() * 4); // 2-5 rings
-    const freq = 3 + Math.floor(rng() * 12); // 3-14 waves per ring
-    const amp = 0.05 + rng() * 0.15; // 5-20% of radius
+    const rings = 2 + Math.floor(rng() * 4);
+    const freq = 3 + Math.floor(rng() * 12);
+    const amp = 0.05 + rng() * 0.15;
     ctx.beginPath();
     for(let ring = 0; ring < rings; ring++){
         const baseR = r * (0.3 + ring / rings * 0.7);
@@ -1344,7 +1427,7 @@ const $2899cc29bfcdb86b$export$7608ccd03bfb705d = (ctx, size, config)=>{
 const $2899cc29bfcdb86b$export$11a377e7498bb523 = (ctx, size, config)=>{
     const rng = config?.rng ?? Math.random;
     const r = size / 2;
-    const k = 2 + Math.floor(rng() * 6); // 2-7 petal parameter
+    const k = 2 + Math.floor(rng() * 6);
     const steps = 200;
     ctx.beginPath();
     for(let i = 0; i <= steps; i++){
@@ -1357,6 +1440,308 @@ const $2899cc29bfcdb86b$export$11a377e7498bb523 = (ctx, size, config)=>{
     }
     ctx.closePath();
 };
+const $2899cc29bfcdb86b$export$76b6526575ea179b = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const shardCount = 4 + Math.floor(rng() * 5); // 4-8 shards
+    ctx.beginPath();
+    for(let s = 0; s < shardCount; s++){
+        const baseAngle = s / shardCount * Math.PI * 2 + (rng() - 0.5) * 0.3;
+        const dist = r * (0.15 + rng() * 0.35);
+        const cx = Math.cos(baseAngle) * dist;
+        const cy = Math.sin(baseAngle) * dist;
+        const shardSize = r * (0.2 + rng() * 0.4);
+        const verts = 3 + Math.floor(rng() * 3); // 3-5 vertices per shard
+        const shardAngleOffset = rng() * Math.PI * 2;
+        for(let v = 0; v < verts; v++){
+            const angle = shardAngleOffset + v / verts * Math.PI * 2;
+            // Elongate shards along their radial direction
+            const stretch = v % 2 === 0 ? 1.0 : 0.3 + rng() * 0.4;
+            const px = cx + Math.cos(angle) * shardSize * stretch;
+            const py = cy + Math.sin(angle) * shardSize * stretch;
+            if (v === 0) ctx.moveTo(px, py);
+            else ctx.lineTo(px, py);
+        }
+        ctx.closePath();
+    }
+};
+const $2899cc29bfcdb86b$export$ed9ff98da5b05073 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const edgeCount = 5 + Math.floor(rng() * 4); // 5-8 edges
+    const points = [];
+    // Generate edge midpoints at varying distances
+    for(let i = 0; i < edgeCount; i++){
+        const angle = i / edgeCount * Math.PI * 2 + (rng() - 0.5) * 0.4;
+        const dist = r * (0.6 + rng() * 0.4);
+        points.push({
+            angle: angle,
+            x: Math.cos(angle) * dist,
+            y: Math.sin(angle) * dist
+        });
+    }
+    // Sort by angle for proper winding
+    points.sort((a, b)=>a.angle - b.angle);
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for(let i = 1; i < points.length; i++)ctx.lineTo(points[i].x, points[i].y);
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$e0452d9a794fe7e5 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const biteSize = 0.6 + rng() * 0.3; // 60-90% of radius
+    const biteOffset = r * (0.3 + rng() * 0.4);
+    const biteAngle = rng() * Math.PI * 2;
+    // Outer circle
+    ctx.beginPath();
+    ctx.arc(0, 0, r, 0, Math.PI * 2);
+    // Subtract inner circle using even-odd rule
+    const bx = Math.cos(biteAngle) * biteOffset;
+    const by = Math.sin(biteAngle) * biteOffset;
+    // Draw inner circle counter-clockwise for subtraction
+    ctx.moveTo(bx + r * biteSize, by);
+    ctx.arc(bx, by, r * biteSize, 0, Math.PI * 2, true);
+};
+const $2899cc29bfcdb86b$export$38bfe5eb52137e01 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const segments = 12 + Math.floor(rng() * 8);
+    const startAngle = rng() * Math.PI * 2;
+    const curvature = (rng() - 0.5) * 0.4;
+    // Build spine points
+    const spine = [];
+    let angle = startAngle;
+    let px = 0, py = 0;
+    for(let i = 0; i <= segments; i++){
+        spine.push({
+            x: px,
+            y: py
+        });
+        const stepLen = r / segments * (1.5 + rng() * 0.5);
+        angle += curvature + (rng() - 0.5) * 0.6;
+        px += Math.cos(angle) * stepLen;
+        py += Math.sin(angle) * stepLen;
+    }
+    // Build tapered outline by offsetting perpendicular to spine
+    ctx.beginPath();
+    const leftSide = [];
+    const rightSide = [];
+    for(let i = 0; i < spine.length; i++){
+        const t = i / (spine.length - 1);
+        const width = r * 0.12 * (1 - t * 0.9); // taper from thick to thin
+        const next = spine[Math.min(i + 1, spine.length - 1)];
+        const dx = next.x - spine[i].x;
+        const dy = next.y - spine[i].y;
+        const len = Math.hypot(dx, dy) || 1;
+        const nx = -dy / len;
+        const ny = dx / len;
+        leftSide.push({
+            x: spine[i].x + nx * width,
+            y: spine[i].y + ny * width
+        });
+        rightSide.push({
+            x: spine[i].x - nx * width,
+            y: spine[i].y - ny * width
+        });
+    }
+    ctx.moveTo(leftSide[0].x, leftSide[0].y);
+    for(let i = 1; i < leftSide.length; i++)ctx.lineTo(leftSide[i].x, leftSide[i].y);
+    for(let i = rightSide.length - 1; i >= 0; i--)ctx.lineTo(rightSide[i].x, rightSide[i].y);
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$105caa8cfd63c422 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const lobeCount = 4 + Math.floor(rng() * 4); // 4-7 lobes
+    const spineAngle = rng() * Math.PI * 2;
+    const spineLen = r * 0.6;
+    ctx.beginPath();
+    for(let i = 0; i < lobeCount; i++){
+        const t = i / (lobeCount - 1) - 0.5; // -0.5 to 0.5
+        const sx = Math.cos(spineAngle) * spineLen * t;
+        const sy = Math.sin(spineAngle) * spineLen * t;
+        // Offset perpendicular for cloud shape
+        const perpAngle = spineAngle + Math.PI / 2;
+        const perpOff = (rng() - 0.3) * r * 0.3;
+        const cx = sx + Math.cos(perpAngle) * perpOff;
+        const cy = sy + Math.sin(perpAngle) * perpOff;
+        const lobeR = r * (0.25 + rng() * 0.2);
+        ctx.moveTo(cx + lobeR, cy);
+        ctx.arc(cx, cy, lobeR, 0, Math.PI * 2);
+    }
+};
+const $2899cc29bfcdb86b$export$e181e5bd3c539569 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const spikeCount = 8 + Math.floor(rng() * 8); // 8-15 spikes
+    const points = [];
+    for(let i = 0; i < spikeCount; i++){
+        const angle = i / spikeCount * Math.PI * 2;
+        const isSpike = i % 2 === 0;
+        const dist = isSpike ? r * (0.5 + rng() * 0.5 // spikes reach 50-100% of radius
+        ) : r * (0.15 + rng() * 0.2); // valleys at 15-35%
+        points.push({
+            x: Math.cos(angle) * dist,
+            y: Math.sin(angle) * dist
+        });
+    }
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for(let i = 0; i < points.length; i++){
+        const curr = points[i];
+        const next = points[(i + 1) % points.length];
+        const cpx = (curr.x + next.x) / 2 + (rng() - 0.5) * r * 0.15;
+        const cpy = (curr.y + next.y) / 2 + (rng() - 0.5) * r * 0.15;
+        ctx.quadraticCurveTo(cpx, cpy, next.x, next.y);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$155b4780b4c6bb7b = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const subdivisions = 1 + Math.floor(rng() * 3); // 1-3
+    // Start with icosahedron vertices projected to 2D
+    const baseVerts = 6 + subdivisions * 4;
+    const points = [];
+    for(let i = 0; i < baseVerts; i++){
+        const angle = i / baseVerts * Math.PI * 2;
+        const ring = i % 2 === 0 ? 1.0 : 0.5 + rng() * 0.3;
+        points.push({
+            x: Math.cos(angle) * r * ring,
+            y: Math.sin(angle) * r * ring
+        });
+    }
+    ctx.beginPath();
+    // Draw triangulated mesh — connect each point to neighbors and center
+    for(let i = 0; i < points.length; i++){
+        const next = points[(i + 1) % points.length];
+        ctx.moveTo(points[i].x, points[i].y);
+        ctx.lineTo(next.x, next.y);
+        // Connect to center
+        ctx.moveTo(points[i].x, points[i].y);
+        ctx.lineTo(0, 0);
+        // Cross-connect to create triangulation
+        if (i % 2 === 0 && i + 2 < points.length) {
+            ctx.moveTo(points[i].x, points[i].y);
+            ctx.lineTo(points[i + 2].x, points[i + 2].y);
+        }
+    }
+    // Outer ring
+    ctx.moveTo(points[0].x, points[0].y);
+    for(let i = 1; i < points.length; i++)ctx.lineTo(points[i].x, points[i].y);
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$9a7e648f11155172 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const phi = (1 + Math.sqrt(5)) / 2; // golden ratio
+    const isKite = rng() < 0.5;
+    ctx.beginPath();
+    if (isKite) {
+        // Kite: two golden triangles joined at base
+        const topY = -r;
+        const bottomY = r * (1 / phi);
+        const midY = r * (1 / phi - 1) * 0.3;
+        const wingX = r * 0.6;
+        ctx.moveTo(0, topY);
+        ctx.lineTo(wingX, midY);
+        ctx.lineTo(0, bottomY);
+        ctx.lineTo(-wingX, midY);
+    } else {
+        // Dart: concave quadrilateral
+        const topY = -r;
+        const bottomY = r * 0.3;
+        const midY = -r * 0.1;
+        const wingX = r * 0.5;
+        ctx.moveTo(0, topY);
+        ctx.lineTo(wingX, midY);
+        ctx.lineTo(0, bottomY);
+        ctx.lineTo(-wingX, midY);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$1fc0aedbabd73399 = (ctx, size, config)=>{
+    const r = size / 2;
+    // Vertices of equilateral triangle
+    const verts = [];
+    for(let i = 0; i < 3; i++){
+        const angle = i / 3 * Math.PI * 2 - Math.PI / 2;
+        verts.push({
+            x: Math.cos(angle) * r * 0.7,
+            y: Math.sin(angle) * r * 0.7
+        });
+    }
+    // Side length = distance between vertices
+    const sideLen = Math.hypot(verts[1].x - verts[0].x, verts[1].y - verts[0].y);
+    ctx.beginPath();
+    for(let i = 0; i < 3; i++){
+        const from = verts[(i + 1) % 3];
+        const to = verts[(i + 2) % 3];
+        const center = verts[i];
+        const startAngle = Math.atan2(from.y - center.y, from.x - center.x);
+        const endAngle = Math.atan2(to.y - center.y, to.x - center.x);
+        if (i === 0) ctx.moveTo(from.x, from.y);
+        ctx.arc(center.x, center.y, sideLen, startAngle, endAngle);
+    }
+    ctx.closePath();
+};
+const $2899cc29bfcdb86b$export$ef7b5e0c19a21fd1 = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const dotCount = 15 + Math.floor(rng() * 25); // 15-39 dots
+    const clusterTightness = 0.3 + rng() * 0.5;
+    ctx.beginPath();
+    for(let i = 0; i < dotCount; i++){
+        // Gaussian-ish distribution via Box-Muller approximation
+        const u1 = Math.max(0.001, rng());
+        const u2 = rng();
+        const mag = Math.sqrt(-2 * Math.log(u1)) * clusterTightness;
+        const angle = u2 * Math.PI * 2;
+        const dx = Math.cos(angle) * mag * r;
+        const dy = Math.sin(angle) * mag * r;
+        const dotR = r * (0.02 + rng() * 0.04);
+        ctx.moveTo(dx + dotR, dy);
+        ctx.arc(dx, dy, dotR, 0, Math.PI * 2);
+    }
+};
+const $2899cc29bfcdb86b$export$f15df8ab60dfcc9a = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const angle1 = rng() * Math.PI;
+    const angle2 = angle1 + Math.PI / 2 + (rng() - 0.5) * 0.3;
+    const spacing = r * (0.08 + rng() * 0.08);
+    const hasCross = rng() < 0.6;
+    // Draw bounding shape (ellipse)
+    const rx = r * (0.7 + rng() * 0.3);
+    const ry = r * (0.5 + rng() * 0.3);
+    // Outer boundary
+    ctx.beginPath();
+    ctx.ellipse(0, 0, rx, ry, 0, 0, Math.PI * 2);
+    // Hatch lines clipped to the ellipse
+    const cos1 = Math.cos(angle1);
+    const sin1 = Math.sin(angle1);
+    for(let d = -r; d <= r; d += spacing){
+        const lx1 = d * cos1 - r * sin1;
+        const ly1 = d * sin1 + r * cos1;
+        const lx2 = d * cos1 + r * sin1;
+        const ly2 = d * sin1 - r * cos1;
+        ctx.moveTo(lx1, ly1);
+        ctx.lineTo(lx2, ly2);
+    }
+    if (hasCross) {
+        const cos2 = Math.cos(angle2);
+        const sin2 = Math.sin(angle2);
+        for(let d = -r; d <= r; d += spacing * 1.3){
+            const lx1 = d * cos2 - r * sin2;
+            const ly1 = d * sin2 + r * cos2;
+            const lx2 = d * cos2 + r * sin2;
+            const ly2 = d * sin2 - r * cos2;
+            ctx.moveTo(lx1, ly1);
+            ctx.lineTo(lx2, ly2);
+        }
+    }
+};
 const $2899cc29bfcdb86b$export$40cfb4c637f2fbb5 = {
     blob: $2899cc29bfcdb86b$export$580f80cfb9de73bc,
     ngon: $2899cc29bfcdb86b$export$7a6094023f0902a6,
@@ -1364,7 +1749,18 @@ const $2899cc29bfcdb86b$export$40cfb4c637f2fbb5 = {
     superellipse: $2899cc29bfcdb86b$export$1db9219b4f34658c,
     spirograph: $2899cc29bfcdb86b$export$b027c64d22b01985,
     waveRing: $2899cc29bfcdb86b$export$7608ccd03bfb705d,
-    rose: $2899cc29bfcdb86b$export$11a377e7498bb523
+    rose: $2899cc29bfcdb86b$export$11a377e7498bb523,
+    shardField: $2899cc29bfcdb86b$export$76b6526575ea179b,
+    voronoiCell: $2899cc29bfcdb86b$export$ed9ff98da5b05073,
+    crescent: $2899cc29bfcdb86b$export$e0452d9a794fe7e5,
+    tendril: $2899cc29bfcdb86b$export$38bfe5eb52137e01,
+    cloudForm: $2899cc29bfcdb86b$export$105caa8cfd63c422,
+    inkSplat: $2899cc29bfcdb86b$export$e181e5bd3c539569,
+    geodesicDome: $2899cc29bfcdb86b$export$155b4780b4c6bb7b,
+    penroseTile: $2899cc29bfcdb86b$export$9a7e648f11155172,
+    reuleauxTriangle: $2899cc29bfcdb86b$export$1fc0aedbabd73399,
+    dotCluster: $2899cc29bfcdb86b$export$ef7b5e0c19a21fd1,
+    crosshatchPatch: $2899cc29bfcdb86b$export$f15df8ab60dfcc9a
 };
 
 
@@ -1399,7 +1795,13 @@ const $e0f99502ff383dd8$var$RENDER_STYLES = [
     "dashed",
     "watercolor",
     "hatched",
-    "incomplete"
+    "incomplete",
+    "stipple",
+    "stencil",
+    "noise-grain",
+    "wood-grain",
+    "marble-vein",
+    "fabric-weave"
 ];
 function $e0f99502ff383dd8$export$9fd4e64b2acd410e(rng) {
     return $e0f99502ff383dd8$var$RENDER_STYLES[Math.floor(rng() * $e0f99502ff383dd8$var$RENDER_STYLES.length)];
@@ -1457,23 +1859,50 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
             break;
         case "watercolor":
             {
-                // Draw 3-4 slightly offset passes at low opacity for a bleed effect
-                const passes = 3 + (rng ? Math.floor(rng() * 2) : 0);
+                // Improved watercolor: edge darkening + radial bleed + layered washes
+                const passes = 4 + (rng ? Math.floor(rng() * 2) : 0);
                 const savedAlpha = ctx.globalAlpha;
-                ctx.globalAlpha = savedAlpha * (0.3 / passes * 2);
+                // Pass 1: Base wash — large, soft fill at low opacity
+                ctx.globalAlpha = savedAlpha * 0.15;
+                ctx.save();
+                const baseScale = 1.08 + (rng ? rng() * 0.04 : 0);
+                ctx.scale(baseScale, baseScale);
+                ctx.fill();
+                ctx.restore();
+                // Pass 2: Multiple offset washes with radial displacement
+                ctx.globalAlpha = savedAlpha * (0.25 / passes * 2);
                 for(let p = 0; p < passes; p++){
-                    const jx = rng ? (rng() - 0.5) * size * 0.06 : 0;
-                    const jy = rng ? (rng() - 0.5) * size * 0.06 : 0;
+                    // Radial outward displacement (not uniform) for organic bleed
+                    const angle = rng ? rng() * Math.PI * 2 : p * Math.PI / 2;
+                    const dist = rng ? rng() * size * 0.05 : size * 0.02;
+                    const jx = Math.cos(angle) * dist;
+                    const jy = Math.sin(angle) * dist;
                     ctx.save();
                     ctx.translate(jx, jy);
                     ctx.fill();
                     ctx.restore();
                 }
+                // Pass 3: Edge darkening — draw a slightly smaller shape with lighter fill
+                // to simulate pigment pooling at boundaries
+                ctx.globalAlpha = savedAlpha * 0.35;
+                ctx.save();
+                const innerScale = 0.85 + (rng ? rng() * 0.08 : 0);
+                ctx.scale(innerScale, innerScale);
+                // Lighten the fill for the inner area
+                const origFill = ctx.fillStyle;
+                if (typeof fillColor === "string") ctx.fillStyle = fillColor.replace(/[\d.]+\)$/, (m)=>{
+                    const v = parseFloat(m);
+                    return Math.min(1, v * 1.4).toFixed(2) + ")";
+                });
+                ctx.fill();
+                ctx.fillStyle = origFill;
+                ctx.restore();
                 ctx.globalAlpha = savedAlpha;
-                // Light stroke on top
-                ctx.globalAlpha *= 0.4;
+                // Soft stroke on top — thinner than normal for delicacy
+                ctx.globalAlpha *= 0.25;
+                ctx.lineWidth = strokeWidth * 0.6;
                 ctx.stroke();
-                ctx.globalAlpha /= 0.4;
+                ctx.globalAlpha /= 0.25;
                 break;
             }
         case "hatched":
@@ -1546,6 +1975,213 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 ctx.lineDashOffset = 0;
                 break;
             }
+        case "stipple":
+            {
+                // Dot-fill texture — clip to shape, then scatter dots
+                const savedAlphaS = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaS * 0.15;
+                ctx.fill(); // ghost fill
+                ctx.globalAlpha = savedAlphaS;
+                ctx.save();
+                ctx.clip();
+                const dotSpacing = Math.max(2, size * 0.03);
+                const extent = size * 0.55;
+                ctx.globalAlpha = savedAlphaS * 0.7;
+                for(let dx = -extent; dx <= extent; dx += dotSpacing)for(let dy = -extent; dy <= extent; dy += dotSpacing){
+                    // Jitter each dot position for organic feel
+                    const jx = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
+                    const jy = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
+                    const dotR = rng ? dotSpacing * (0.15 + rng() * 0.2) : dotSpacing * 0.2;
+                    ctx.beginPath();
+                    ctx.arc(dx + jx, dy + jy, dotR, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaS;
+                // Outline
+                ctx.globalAlpha *= 0.4;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.4;
+                break;
+            }
+        case "stencil":
+            {
+                // Negative-space cutout — fill a rectangle, then erase the shape
+                const savedAlphaSt = ctx.globalAlpha;
+                // Fill a bounding area with the stroke color
+                ctx.globalAlpha = savedAlphaSt * 0.5;
+                ctx.fillStyle = strokeColor;
+                ctx.fillRect(-size * 0.6, -size * 0.6, size * 1.2, size * 1.2);
+                // Cut out the shape using destination-out
+                ctx.globalCompositeOperation = "destination-out";
+                ctx.globalAlpha = 1;
+                ctx.fill();
+                ctx.globalCompositeOperation = "source-over";
+                ctx.globalAlpha = savedAlphaSt;
+                // Subtle outline of the cutout
+                ctx.globalAlpha *= 0.3;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.3;
+                break;
+            }
+        case "noise-grain":
+            {
+                // Procedural noise grain texture clipped to shape boundary
+                const savedAlphaN = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaN * 0.25;
+                ctx.fill(); // base tint
+                ctx.globalAlpha = savedAlphaN;
+                ctx.save();
+                ctx.clip();
+                const grainSpacing = Math.max(1.5, size * 0.015);
+                const extentN = size * 0.55;
+                ctx.globalAlpha = savedAlphaN * 0.6;
+                for(let gx = -extentN; gx <= extentN; gx += grainSpacing)for(let gy = -extentN; gy <= extentN; gy += grainSpacing){
+                    if (!rng) break;
+                    const jx = (rng() - 0.5) * grainSpacing * 1.2;
+                    const jy = (rng() - 0.5) * grainSpacing * 1.2;
+                    const brightness = rng() > 0.5 ? 255 : 0;
+                    const dotAlpha = 0.15 + rng() * 0.35;
+                    ctx.globalAlpha = savedAlphaN * dotAlpha;
+                    ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
+                    const dotSize = grainSpacing * (0.3 + rng() * 0.5);
+                    ctx.fillRect(gx + jx, gy + jy, dotSize, dotSize);
+                }
+                ctx.restore();
+                ctx.fillStyle = fillColor;
+                ctx.globalAlpha = savedAlphaN;
+                ctx.globalAlpha *= 0.4;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.4;
+                break;
+            }
+        case "wood-grain":
+            {
+                // Parallel wavy lines simulating wood grain, clipped to shape
+                const savedAlphaW = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaW * 0.2;
+                ctx.fill(); // base tint
+                ctx.globalAlpha = savedAlphaW;
+                ctx.save();
+                ctx.clip();
+                const grainLineSpacing = Math.max(2, size * 0.035);
+                const extentW = size * 0.55;
+                const waveFreq = rng ? 3 + rng() * 5 : 5;
+                const waveAmp = rng ? size * (0.01 + rng() * 0.03) : size * 0.02;
+                const grainAngle = rng ? rng() * Math.PI : Math.PI * 0.25;
+                ctx.lineWidth = Math.max(0.5, strokeWidth * 0.3);
+                ctx.globalAlpha = savedAlphaW * 0.5;
+                const cosG = Math.cos(grainAngle);
+                const sinG = Math.sin(grainAngle);
+                for(let d = -extentW; d <= extentW; d += grainLineSpacing){
+                    ctx.beginPath();
+                    for(let t = -extentW; t <= extentW; t += 2){
+                        const wave = Math.sin(t / extentW * waveFreq * Math.PI) * waveAmp;
+                        const px = t * cosG - (d + wave) * sinG;
+                        const py = t * sinG + (d + wave) * cosG;
+                        if (t === -extentW) ctx.moveTo(px, py);
+                        else ctx.lineTo(px, py);
+                    }
+                    ctx.stroke();
+                }
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaW;
+                ctx.globalAlpha *= 0.35;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.35;
+                break;
+            }
+        case "marble-vein":
+            {
+                // Branching vein lines on a soft fill, clipped to shape
+                const savedAlphaM = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaM * 0.35;
+                ctx.fill(); // soft base
+                ctx.globalAlpha = savedAlphaM;
+                ctx.save();
+                ctx.clip();
+                const veinCount = rng ? 2 + Math.floor(rng() * 3) : 3;
+                const extentM = size * 0.45;
+                ctx.lineWidth = Math.max(0.5, strokeWidth * 0.5);
+                ctx.globalAlpha = savedAlphaM * 0.4;
+                for(let v = 0; v < veinCount; v++){
+                    const startX = rng ? (rng() - 0.5) * extentM * 2 : 0;
+                    const startY = rng ? -extentM + rng() * extentM * 0.5 : -extentM;
+                    let vx = startX;
+                    let vy = startY;
+                    const steps = 15 + (rng ? Math.floor(rng() * 15) : 10);
+                    const stepLen = size * 0.04;
+                    ctx.beginPath();
+                    ctx.moveTo(vx, vy);
+                    for(let s = 0; s < steps; s++){
+                        const drift = rng ? (rng() - 0.5) * stepLen * 1.5 : 0;
+                        vx += drift;
+                        vy += stepLen;
+                        ctx.lineTo(vx, vy);
+                        // Branch ~20% of the time
+                        if (rng && rng() < 0.2 && s > 2 && s < steps - 3) {
+                            const branchDir = rng() < 0.5 ? -1 : 1;
+                            let bx = vx;
+                            let by = vy;
+                            const bSteps = 3 + Math.floor(rng() * 5);
+                            ctx.moveTo(bx, by);
+                            for(let bs = 0; bs < bSteps; bs++){
+                                bx += branchDir * stepLen * (0.5 + rng() * 0.5);
+                                by += stepLen * 0.6;
+                                ctx.lineTo(bx, by);
+                            }
+                            ctx.moveTo(vx, vy); // return to main vein
+                        }
+                    }
+                    ctx.stroke();
+                }
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaM;
+                ctx.globalAlpha *= 0.3;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.3;
+                break;
+            }
+        case "fabric-weave":
+            {
+                // Interlocking horizontal/vertical threads clipped to shape
+                const savedAlphaF = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaF * 0.15;
+                ctx.fill(); // ghost base
+                ctx.globalAlpha = savedAlphaF;
+                ctx.save();
+                ctx.clip();
+                const threadSpacing = Math.max(2, size * 0.04);
+                const extentF = size * 0.55;
+                ctx.lineWidth = Math.max(0.8, threadSpacing * 0.5);
+                ctx.globalAlpha = savedAlphaF * 0.55;
+                // Horizontal threads
+                for(let y = -extentF; y <= extentF; y += threadSpacing * 2){
+                    ctx.beginPath();
+                    ctx.moveTo(-extentF, y);
+                    ctx.lineTo(extentF, y);
+                    ctx.stroke();
+                }
+                // Vertical threads (offset by half spacing for weave effect)
+                ctx.globalAlpha = savedAlphaF * 0.45;
+                ctx.strokeStyle = fillColor;
+                for(let x = -extentF; x <= extentF; x += threadSpacing * 2){
+                    ctx.beginPath();
+                    for(let y = -extentF; y <= extentF; y += threadSpacing * 2){
+                        // Over-under: draw segment, skip segment
+                        ctx.moveTo(x, y);
+                        ctx.lineTo(x, y + threadSpacing);
+                    }
+                    ctx.stroke();
+                }
+                ctx.strokeStyle = strokeColor;
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaF;
+                ctx.globalAlpha *= 0.3;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.3;
+                break;
+            }
         case "fill-and-stroke":
         default:
             ctx.fill();
@@ -1592,77 +2228,1076 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     });
     ctx.restore();
 }
+function $e0f99502ff383dd8$export$8bd8bbd1a8e53689(ctx, shape, x, y, config) {
+    const { mirrorAxis: mirrorAxis = "horizontal", mirrorGap: mirrorGap = 0 } = config;
+    // Draw the primary shape
+    $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config);
+    // Draw the mirrored copy
+    ctx.save();
+    const savedAlpha = ctx.globalAlpha;
+    ctx.globalAlpha = savedAlpha * 0.7; // mirror is slightly softer
+    switch(mirrorAxis){
+        case "horizontal":
+            // Reflect across vertical axis at shape position
+            $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y + mirrorGap, {
+                ...config,
+                rotation: -(config.rotation || 0),
+                size: config.size * 0.95
+            });
+            break;
+        case "vertical":
+            $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x + mirrorGap, y, {
+                ...config,
+                rotation: 180 - (config.rotation || 0),
+                size: config.size * 0.95
+            });
+            break;
+        case "diagonal":
+            // Reflect across 45° axis
+            $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x + mirrorGap * 0.7, y + mirrorGap * 0.7, {
+                ...config,
+                rotation: 90 - (config.rotation || 0),
+                size: config.size * 0.9
+            });
+            break;
+        case "radial-4":
+            // Four-way radial mirror
+            for(let i = 1; i < 4; i++){
+                const angle = i / 4 * Math.PI * 2;
+                const mx = x + Math.cos(angle) * mirrorGap;
+                const my = y + Math.sin(angle) * mirrorGap;
+                ctx.globalAlpha = savedAlpha * (0.7 - i * 0.1);
+                $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, mx, my, {
+                    ...config,
+                    rotation: (config.rotation || 0) + i * 90,
+                    size: config.size * (0.95 - i * 0.05)
+                });
+            }
+            break;
+    }
+    ctx.globalAlpha = savedAlpha;
+    ctx.restore();
+}
+function $e0f99502ff383dd8$export$879206e23912d1a9(rng) {
+    const roll = rng();
+    if (roll < 0.60) return null;
+    if (roll < 0.75) return "horizontal";
+    if (roll < 0.87) return "vertical";
+    if (roll < 0.95) return "diagonal";
+    return "radial-4";
+}
 
 
 
-
-/**
- * Configuration options for image generation.
- */ const $81c1b644006d48ec$export$c2f8e0cc249a8d8f = {
-    width: 2048,
-    height: 2048,
-    gridSize: 5,
-    layers: 4,
-    minShapeSize: 30,
-    maxShapeSize: 400,
-    baseOpacity: 0.7,
-    opacityReduction: 0.12,
-    shapesPerLayer: 0
-};
-
-
 /**
- * Visual archetypes — fundamentally different rendering personalities
- * selected deterministically from the hash.
+ * Shape affinity system — controls which shapes look good together,
+ * quality tiers for different rendering contexts, and size preferences.
  *
- * Each archetype overrides key rendering parameters to produce images
- * that look like they came from different generators entirely.
- */ // ── Archetype definitions ───────────────────────────────────────────
-const $68a238ccd77f2bcd$var$ARCHETYPES = [
-    {
-        name: "dense-chaotic",
-        gridSize: 9,
-        layers: 5,
-        baseOpacity: 0.5,
-        opacityReduction: 0.06,
-        minShapeSize: 10,
-        maxShapeSize: 200,
-        backgroundStyle: "radial-dark",
-        paletteMode: "harmonious",
-        preferredStyles: [
-            "fill-and-stroke",
-            "watercolor",
-            "fill-only"
+ * This replaces the naive "pick any shape" approach with intentional
+ * curation that produces more cohesive compositions.
+ */ // ── Quality tiers ───────────────────────────────────────────────────
+// Not all shapes render equally well at all sizes or in all contexts.
+// Tier 1 shapes are visually strong at any size; Tier 3 shapes need
+// specific conditions to look good.
+const $8286059160ee2e04$export$4343b39fe47bd82c = {
+    // ── Basic shapes ──────────────────────────────────────────────
+    circle: {
+        tier: 1,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "blob",
+            "hexagon",
+            "flowerOfLife",
+            "seedOfLife"
         ],
-        flowLineMultiplier: 2.5,
-        heroShape: false,
-        glowMultiplier: 0.5,
-        sizePower: 1.2,
-        invertForeground: false
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
     },
-    {
-        name: "minimal-spacious",
-        gridSize: 2,
-        layers: 2,
-        baseOpacity: 0.85,
-        opacityReduction: 0.05,
-        minShapeSize: 150,
-        maxShapeSize: 600,
-        backgroundStyle: "solid-light",
-        paletteMode: "duotone",
-        preferredStyles: [
+    square: {
+        tier: 2,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 0.7,
+        affinities: [
+            "square",
+            "diamond",
+            "superellipse",
+            "islamicPattern"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
             "fill-and-stroke",
             "stroke-only",
-            "incomplete"
+            "hatched"
+        ]
+    },
+    triangle: {
+        tier: 1,
+        minSizeFraction: 0.06,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "triangle",
+            "diamond",
+            "hexagon",
+            "merkaba",
+            "sriYantra"
         ],
-        flowLineMultiplier: 0.3,
-        heroShape: true,
-        glowMultiplier: 0,
-        sizePower: 0.8,
-        invertForeground: false
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "watercolor"
+        ]
     },
-    {
-        name: "organic-flow",
+    hexagon: {
+        tier: 1,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "hexagon",
+            "circle",
+            "flowerOfLife",
+            "metatronsCube",
+            "triangle"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "fill-and-stroke",
+            "watercolor"
+        ]
+    },
+    star: {
+        tier: 2,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 0.6,
+        affinities: [
+            "star",
+            "circle",
+            "mandala",
+            "spirograph"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "dashed"
+        ]
+    },
+    "jacked-star": {
+        tier: 3,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.4,
+        affinities: [
+            "star",
+            "circle"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "dashed"
+        ]
+    },
+    heart: {
+        tier: 3,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.5,
+        affinities: [
+            "circle",
+            "blob"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor"
+        ]
+    },
+    diamond: {
+        tier: 2,
+        minSizeFraction: 0.06,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "diamond",
+            "triangle",
+            "square",
+            "merkaba"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "double-stroke"
+        ]
+    },
+    cube: {
+        tier: 3,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 0.5,
+        affinities: [
+            "square",
+            "diamond"
+        ],
+        category: "basic",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "fill-and-stroke"
+        ]
+    },
+    // ── Complex shapes ────────────────────────────────────────────
+    platonicSolid: {
+        tier: 2,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "metatronsCube",
+            "merkaba",
+            "hexagon",
+            "triangle"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "double-stroke",
+            "dashed"
+        ]
+    },
+    fibonacciSpiral: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "rose",
+            "spirograph",
+            "flowerOfLife"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "incomplete",
+            "watercolor"
+        ]
+    },
+    islamicPattern: {
+        tier: 2,
+        minSizeFraction: 0.25,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "square",
+            "hexagon",
+            "star",
+            "mandala"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "hatched"
+        ]
+    },
+    celticKnot: {
+        tier: 2,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 0.7,
+        affinities: [
+            "circle",
+            "lissajous",
+            "spirograph"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "double-stroke"
+        ]
+    },
+    merkaba: {
+        tier: 1,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "triangle",
+            "diamond",
+            "sriYantra",
+            "metatronsCube"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "fill-and-stroke",
+            "double-stroke"
+        ]
+    },
+    mandala: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "flowerOfLife",
+            "spirograph",
+            "rose"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "incomplete"
+        ]
+    },
+    fractal: {
+        tier: 2,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "blob",
+            "lissajous",
+            "circle"
+        ],
+        category: "complex",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "incomplete"
+        ]
+    },
+    // ── Sacred shapes ─────────────────────────────────────────────
+    flowerOfLife: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "hexagon",
+            "seedOfLife",
+            "eggOfLife",
+            "metatronsCube"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "watercolor",
+            "incomplete"
+        ]
+    },
+    treeOfLife: {
+        tier: 2,
+        minSizeFraction: 0.25,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "circle",
+            "flowerOfLife",
+            "metatronsCube"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "double-stroke"
+        ]
+    },
+    metatronsCube: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "hexagon",
+            "flowerOfLife",
+            "platonicSolid",
+            "merkaba"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "incomplete"
+        ]
+    },
+    sriYantra: {
+        tier: 1,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "triangle",
+            "merkaba",
+            "mandala",
+            "diamond"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "fill-and-stroke",
+            "double-stroke"
+        ]
+    },
+    seedOfLife: {
+        tier: 1,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "circle",
+            "flowerOfLife",
+            "eggOfLife",
+            "hexagon"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "watercolor",
+            "fill-only"
+        ]
+    },
+    vesicaPiscis: {
+        tier: 2,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.7,
+        affinities: [
+            "circle",
+            "seedOfLife",
+            "flowerOfLife"
+        ],
+        category: "sacred",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "watercolor"
+        ]
+    },
+    torus: {
+        tier: 3,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 0.6,
+        affinities: [
+            "circle",
+            "spirograph",
+            "waveRing"
+        ],
+        category: "sacred",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "dashed"
+        ]
+    },
+    eggOfLife: {
+        tier: 2,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "circle",
+            "seedOfLife",
+            "flowerOfLife"
+        ],
+        category: "sacred",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "watercolor"
+        ]
+    },
+    // ── Procedural shapes ─────────────────────────────────────────
+    blob: {
+        tier: 1,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "blob",
+            "circle",
+            "superellipse",
+            "waveRing"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    ngon: {
+        tier: 2,
+        minSizeFraction: 0.06,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "hexagon",
+            "triangle",
+            "diamond",
+            "superellipse"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "hatched"
+        ]
+    },
+    lissajous: {
+        tier: 2,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "spirograph",
+            "rose",
+            "celticKnot",
+            "fibonacciSpiral"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "incomplete",
+            "dashed"
+        ]
+    },
+    superellipse: {
+        tier: 1,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "square",
+            "blob",
+            "hexagon"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke",
+            "wood-grain"
+        ]
+    },
+    spirograph: {
+        tier: 1,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "rose",
+            "lissajous",
+            "mandala",
+            "flowerOfLife"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "incomplete",
+            "dashed"
+        ]
+    },
+    waveRing: {
+        tier: 2,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "circle",
+            "blob",
+            "torus",
+            "spirograph"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "incomplete"
+        ]
+    },
+    rose: {
+        tier: 1,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "spirograph",
+            "mandala",
+            "flowerOfLife",
+            "circle"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "fill-only",
+            "watercolor"
+        ]
+    },
+    // ── New procedural shapes ─────────────────────────────────────
+    shardField: {
+        tier: 2,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.7,
+        affinities: [
+            "voronoiCell",
+            "diamond",
+            "triangle",
+            "penroseTile"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "fill-only"
+        ]
+    },
+    voronoiCell: {
+        tier: 1,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "shardField",
+            "ngon",
+            "superellipse",
+            "blob"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "watercolor",
+            "marble-vein"
+        ]
+    },
+    crescent: {
+        tier: 1,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "circle",
+            "blob",
+            "cloudForm",
+            "vesicaPiscis"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    tendril: {
+        tier: 2,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "blob",
+            "inkSplat",
+            "lissajous",
+            "fibonacciSpiral"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    cloudForm: {
+        tier: 1,
+        minSizeFraction: 0.15,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "blob",
+            "circle",
+            "crescent",
+            "superellipse"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor"
+        ]
+    },
+    inkSplat: {
+        tier: 2,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.8,
+        affinities: [
+            "blob",
+            "tendril",
+            "shardField",
+            "star"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "watercolor",
+            "fill-and-stroke"
+        ]
+    },
+    geodesicDome: {
+        tier: 2,
+        minSizeFraction: 0.2,
+        maxSizeFraction: 0.9,
+        affinities: [
+            "metatronsCube",
+            "platonicSolid",
+            "hexagon",
+            "triangle"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "stroke-only",
+            "dashed",
+            "double-stroke"
+        ]
+    },
+    penroseTile: {
+        tier: 2,
+        minSizeFraction: 0.06,
+        maxSizeFraction: 0.6,
+        affinities: [
+            "diamond",
+            "triangle",
+            "shardField",
+            "voronoiCell"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "double-stroke"
+        ]
+    },
+    reuleauxTriangle: {
+        tier: 1,
+        minSizeFraction: 0.08,
+        maxSizeFraction: 1.0,
+        affinities: [
+            "triangle",
+            "circle",
+            "superellipse",
+            "vesicaPiscis"
+        ],
+        category: "procedural",
+        heroCandidate: true,
+        bestStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "watercolor"
+        ]
+    },
+    dotCluster: {
+        tier: 3,
+        minSizeFraction: 0.05,
+        maxSizeFraction: 0.5,
+        affinities: [
+            "cloudForm",
+            "inkSplat",
+            "blob"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "fill-only",
+            "stipple"
+        ]
+    },
+    crosshatchPatch: {
+        tier: 3,
+        minSizeFraction: 0.1,
+        maxSizeFraction: 0.6,
+        affinities: [
+            "voronoiCell",
+            "ngon",
+            "superellipse"
+        ],
+        category: "procedural",
+        heroCandidate: false,
+        bestStyles: [
+            "stroke-only",
+            "hatched",
+            "fabric-weave"
+        ]
+    }
+};
+function $8286059160ee2e04$export$4a95df8944b5033b(rng, shapeNames, archetypeName) {
+    const available = shapeNames.filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s]);
+    // Pick a seed shape — tier 1 shapes that are hero candidates
+    const heroPool = available.filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s].tier === 1 && $8286059160ee2e04$export$4343b39fe47bd82c[s].heroCandidate);
+    const seedShape = heroPool.length > 0 ? heroPool[Math.floor(rng() * heroPool.length)] : available[Math.floor(rng() * available.length)];
+    const seedProfile = $8286059160ee2e04$export$4343b39fe47bd82c[seedShape];
+    // Primary: seed shape + its direct affinities (tier 1-2 only)
+    const primaryCandidates = [
+        seedShape,
+        ...seedProfile.affinities
+    ].filter((s)=>available.includes(s)).filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s].tier <= 2);
+    const primary = [
+        ...new Set(primaryCandidates)
+    ].slice(0, 5);
+    // Supporting: affinities of affinities, plus same-category shapes
+    const supportingSet = new Set();
+    for (const p of primary){
+        const profile = $8286059160ee2e04$export$4343b39fe47bd82c[p];
+        if (!profile) continue;
+        for (const aff of profile.affinities)if (available.includes(aff) && !primary.includes(aff)) supportingSet.add(aff);
+    }
+    // Add same-category tier 1-2 shapes
+    for (const s of available){
+        const p = $8286059160ee2e04$export$4343b39fe47bd82c[s];
+        if (p.category === seedProfile.category && p.tier <= 2 && !primary.includes(s)) supportingSet.add(s);
+    }
+    const supporting = [
+        ...supportingSet
+    ].slice(0, 6);
+    // Accents: tier 1 shapes from other categories for contrast
+    const usedCategories = new Set([
+        ...primary,
+        ...supporting
+    ].map((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s]?.category));
+    const accentCandidates = available.filter((s)=>!primary.includes(s) && !supporting.includes(s) && $8286059160ee2e04$export$4343b39fe47bd82c[s].tier <= 2 && !usedCategories.has($8286059160ee2e04$export$4343b39fe47bd82c[s].category));
+    // Shuffle and take a few
+    const accents = [];
+    const shuffled = [
+        ...accentCandidates
+    ];
+    for(let i = shuffled.length - 1; i > 0; i--){
+        const j = Math.floor(rng() * (i + 1));
+        [shuffled[i], shuffled[j]] = [
+            shuffled[j],
+            shuffled[i]
+        ];
+    }
+    accents.push(...shuffled.slice(0, 3));
+    // For certain archetypes, bias the palette
+    if (archetypeName === "geometric-precision") // Remove blobs and organic shapes from primary
+    return {
+        primary: primary.filter((s)=>$8286059160ee2e04$export$4343b39fe47bd82c[s]?.category !== "procedural" || s === "ngon"),
+        supporting: supporting.filter((s)=>s !== "blob"),
+        accents: accents
+    };
+    if (archetypeName === "organic-flow") {
+        // Boost procedural/organic shapes
+        const organicBoost = available.filter((s)=>[
+                "blob",
+                "superellipse",
+                "waveRing",
+                "rose"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary,
+                ...organicBoost.slice(0, 2)
+            ],
+            supporting: supporting,
+            accents: accents
+        };
+    }
+    if (archetypeName === "shattered-glass") {
+        // Favor angular, fragmented shapes
+        const shardBoost = available.filter((s)=>[
+                "shardField",
+                "voronoiCell",
+                "penroseTile",
+                "diamond",
+                "triangle",
+                "ngon"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary.filter((s)=>s !== "blob" && s !== "cloudForm"),
+                ...shardBoost.slice(0, 3)
+            ],
+            supporting: supporting.filter((s)=>s !== "blob" && s !== "cloudForm"),
+            accents: accents
+        };
+    }
+    if (archetypeName === "botanical") {
+        // Favor organic, flowing shapes
+        const botanicalBoost = available.filter((s)=>[
+                "tendril",
+                "cloudForm",
+                "blob",
+                "crescent",
+                "rose",
+                "inkSplat"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary,
+                ...botanicalBoost.slice(0, 3)
+            ],
+            supporting: supporting,
+            accents: accents
+        };
+    }
+    if (archetypeName === "stipple-portrait") {
+        // Favor small, dot-friendly shapes
+        const stippleBoost = available.filter((s)=>[
+                "dotCluster",
+                "circle",
+                "crosshatchPatch",
+                "voronoiCell",
+                "blob"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary,
+                ...stippleBoost.slice(0, 3)
+            ],
+            supporting: supporting,
+            accents: accents
+        };
+    }
+    if (archetypeName === "celestial") {
+        // Favor sacred geometry and cosmic shapes
+        const celestialBoost = available.filter((s)=>[
+                "crescent",
+                "geodesicDome",
+                "mandala",
+                "flowerOfLife",
+                "spirograph",
+                "fibonacciSpiral"
+            ].includes(s) && !primary.includes(s));
+        return {
+            primary: [
+                ...primary,
+                ...celestialBoost.slice(0, 3)
+            ],
+            supporting: supporting,
+            accents: accents
+        };
+    }
+    return {
+        primary: primary,
+        supporting: supporting,
+        accents: accents
+    };
+}
+function $8286059160ee2e04$export$3c37d9a045754d0e(palette, rng, sizeFraction) {
+    // Filter each tier by size constraints
+    const validPrimary = palette.primary.filter((s)=>{
+        const p = $8286059160ee2e04$export$4343b39fe47bd82c[s];
+        return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+    });
+    const validSupporting = palette.supporting.filter((s)=>{
+        const p = $8286059160ee2e04$export$4343b39fe47bd82c[s];
+        return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+    });
+    const validAccents = palette.accents.filter((s)=>{
+        const p = $8286059160ee2e04$export$4343b39fe47bd82c[s];
+        return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+    });
+    const roll = rng();
+    if (roll < 0.60 && validPrimary.length > 0) return validPrimary[Math.floor(rng() * validPrimary.length)];
+    if (roll < 0.90 && validSupporting.length > 0) return validSupporting[Math.floor(rng() * validSupporting.length)];
+    if (validAccents.length > 0) return validAccents[Math.floor(rng() * validAccents.length)];
+    // Fallback: any valid primary or supporting
+    const fallback = [
+        ...validPrimary,
+        ...validSupporting
+    ];
+    if (fallback.length > 0) return fallback[Math.floor(rng() * fallback.length)];
+    // Ultimate fallback
+    return palette.primary[0] || "circle";
+}
+function $8286059160ee2e04$export$ab873bb6fb56c1a8(shapeName, layerStyle, rng) {
+    const profile = $8286059160ee2e04$export$4343b39fe47bd82c[shapeName];
+    if (!profile || rng() > 0.7) return layerStyle;
+    return profile.bestStyles[Math.floor(rng() * profile.bestStyles.length)];
+}
+
+
+
+/**
+ * Configuration options for image generation.
+ */ const $81c1b644006d48ec$export$c2f8e0cc249a8d8f = {
+    width: 2048,
+    height: 2048,
+    gridSize: 5,
+    layers: 4,
+    minShapeSize: 30,
+    maxShapeSize: 400,
+    baseOpacity: 0.7,
+    opacityReduction: 0.12,
+    shapesPerLayer: 0
+};
+
+
+/**
+ * Visual archetypes — fundamentally different rendering personalities
+ * selected deterministically from the hash.
+ *
+ * Each archetype overrides key rendering parameters to produce images
+ * that look like they came from different generators entirely.
+ */ // ── Archetype definitions ───────────────────────────────────────────
+const $68a238ccd77f2bcd$var$ARCHETYPES = [
+    {
+        name: "dense-chaotic",
+        gridSize: 9,
+        layers: 5,
+        baseOpacity: 0.5,
+        opacityReduction: 0.06,
+        minShapeSize: 10,
+        maxShapeSize: 200,
+        backgroundStyle: "radial-dark",
+        paletteMode: "harmonious",
+        preferredStyles: [
+            "fill-and-stroke",
+            "watercolor",
+            "fill-only"
+        ],
+        flowLineMultiplier: 2.5,
+        heroShape: false,
+        glowMultiplier: 0.5,
+        sizePower: 1.2,
+        invertForeground: false
+    },
+    {
+        name: "minimal-spacious",
+        gridSize: 2,
+        layers: 2,
+        baseOpacity: 0.85,
+        opacityReduction: 0.05,
+        minShapeSize: 150,
+        maxShapeSize: 600,
+        backgroundStyle: "solid-light",
+        paletteMode: "duotone",
+        preferredStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "incomplete"
+        ],
+        flowLineMultiplier: 0.3,
+        heroShape: true,
+        glowMultiplier: 0,
+        sizePower: 0.8,
+        invertForeground: false
+    },
+    {
+        name: "organic-flow",
         gridSize: 4,
         layers: 3,
         baseOpacity: 0.4,
@@ -1809,6 +3444,69 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
         sizePower: 2.5,
         invertForeground: false
     },
+    {
+        name: "watercolor-wash",
+        gridSize: 3,
+        layers: 3,
+        baseOpacity: 0.25,
+        opacityReduction: 0.03,
+        minShapeSize: 200,
+        maxShapeSize: 700,
+        backgroundStyle: "radial-light",
+        paletteMode: "harmonious",
+        preferredStyles: [
+            "watercolor",
+            "fill-only",
+            "incomplete"
+        ],
+        flowLineMultiplier: 0.5,
+        heroShape: false,
+        glowMultiplier: 0.3,
+        sizePower: 0.6,
+        invertForeground: false
+    },
+    {
+        name: "op-art",
+        gridSize: 8,
+        layers: 2,
+        baseOpacity: 0.95,
+        opacityReduction: 0.05,
+        minShapeSize: 20,
+        maxShapeSize: 200,
+        backgroundStyle: "solid-light",
+        paletteMode: "high-contrast",
+        preferredStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "dashed"
+        ],
+        flowLineMultiplier: 0,
+        heroShape: false,
+        glowMultiplier: 0,
+        sizePower: 0.4,
+        invertForeground: false
+    },
+    {
+        name: "collage",
+        gridSize: 4,
+        layers: 3,
+        baseOpacity: 0.9,
+        opacityReduction: 0.08,
+        minShapeSize: 80,
+        maxShapeSize: 500,
+        backgroundStyle: "solid-light",
+        paletteMode: "duotone",
+        preferredStyles: [
+            "fill-and-stroke",
+            "fill-only",
+            "double-stroke"
+        ],
+        flowLineMultiplier: 0,
+        heroShape: true,
+        glowMultiplier: 0,
+        sizePower: 0.7,
+        invertForeground: false
+    },
     {
         name: "classic",
         gridSize: 5,
@@ -1829,6 +3527,91 @@ const $68a238ccd77f2bcd$var$ARCHETYPES = [
         glowMultiplier: 1,
         sizePower: 1.8,
         invertForeground: false
+    },
+    {
+        name: "shattered-glass",
+        gridSize: 8,
+        layers: 3,
+        baseOpacity: 0.85,
+        opacityReduction: 0.1,
+        minShapeSize: 15,
+        maxShapeSize: 250,
+        backgroundStyle: "solid-dark",
+        paletteMode: "high-contrast",
+        preferredStyles: [
+            "fill-and-stroke",
+            "stroke-only",
+            "fill-only"
+        ],
+        flowLineMultiplier: 0,
+        heroShape: false,
+        glowMultiplier: 0.3,
+        sizePower: 1.0,
+        invertForeground: false
+    },
+    {
+        name: "botanical",
+        gridSize: 4,
+        layers: 4,
+        baseOpacity: 0.5,
+        opacityReduction: 0.06,
+        minShapeSize: 30,
+        maxShapeSize: 400,
+        backgroundStyle: "radial-light",
+        paletteMode: "earth",
+        preferredStyles: [
+            "watercolor",
+            "fill-only",
+            "incomplete"
+        ],
+        flowLineMultiplier: 3,
+        heroShape: true,
+        glowMultiplier: 0.2,
+        sizePower: 1.6,
+        invertForeground: false
+    },
+    {
+        name: "stipple-portrait",
+        gridSize: 9,
+        layers: 2,
+        baseOpacity: 0.8,
+        opacityReduction: 0.05,
+        minShapeSize: 5,
+        maxShapeSize: 120,
+        backgroundStyle: "solid-light",
+        paletteMode: "monochrome",
+        preferredStyles: [
+            "stipple",
+            "fill-only",
+            "hatched"
+        ],
+        flowLineMultiplier: 0,
+        heroShape: false,
+        glowMultiplier: 0,
+        sizePower: 2.8,
+        invertForeground: false
+    },
+    {
+        name: "celestial",
+        gridSize: 7,
+        layers: 5,
+        baseOpacity: 0.45,
+        opacityReduction: 0.04,
+        minShapeSize: 8,
+        maxShapeSize: 450,
+        backgroundStyle: "radial-dark",
+        paletteMode: "neon",
+        preferredStyles: [
+            "fill-only",
+            "watercolor",
+            "stroke-only",
+            "incomplete"
+        ],
+        flowLineMultiplier: 2,
+        heroShape: true,
+        glowMultiplier: 2.5,
+        sizePower: 2.2,
+        invertForeground: false
     }
 ];
 function $68a238ccd77f2bcd$export$f1142fd7da4d6590(rng) {
@@ -1836,26 +3619,7 @@ function $68a238ccd77f2bcd$export$f1142fd7da4d6590(rng) {
 }
 
 
-// ── Shape categories for weighted selection ─────────────────────────
-const $1f63dc64b5593c73$var$BASIC_SHAPES = [
-    "circle",
-    "square",
-    "triangle",
-    "hexagon",
-    "diamond",
-    "cube"
-];
-const $1f63dc64b5593c73$var$COMPLEX_SHAPES = [
-    "star",
-    "jacked-star",
-    "heart",
-    "platonicSolid",
-    "fibonacciSpiral",
-    "islamicPattern",
-    "celticKnot",
-    "merkaba",
-    "fractal"
-];
+// ── Shape categories for weighted selection (legacy fallback) ───────
 const $1f63dc64b5593c73$var$SACRED_SHAPES = [
     "mandala",
     "flowerOfLife",
@@ -1867,15 +3631,6 @@ const $1f63dc64b5593c73$var$SACRED_SHAPES = [
     "torus",
     "eggOfLife"
 ];
-const $1f63dc64b5593c73$var$PROCEDURAL_SHAPES = [
-    "blob",
-    "ngon",
-    "lissajous",
-    "superellipse",
-    "spirograph",
-    "waveRing",
-    "rose"
-];
 const $1f63dc64b5593c73$var$COMPOSITION_MODES = [
     "radial",
     "flow-field",
@@ -1883,23 +3638,6 @@ const $1f63dc64b5593c73$var$COMPOSITION_MODES = [
     "grid-subdivision",
     "clustered"
 ];
-// ── Helper: pick shape with layer-aware weighting ───────────────────
-function $1f63dc64b5593c73$var$pickShape(rng, layerRatio, shapeNames) {
-    const basicW = 1 - layerRatio * 0.6;
-    const complexW = 0.3 + layerRatio * 0.3;
-    const sacredW = 0.1 + layerRatio * 0.4;
-    const proceduralW = 0.25 + layerRatio * 0.2; // always present, grows with depth
-    const total = basicW + complexW + sacredW + proceduralW;
-    const roll = rng() * total;
-    let pool;
-    if (roll < basicW) pool = $1f63dc64b5593c73$var$BASIC_SHAPES;
-    else if (roll < basicW + complexW) pool = $1f63dc64b5593c73$var$COMPLEX_SHAPES;
-    else if (roll < basicW + complexW + sacredW) pool = $1f63dc64b5593c73$var$SACRED_SHAPES;
-    else pool = $1f63dc64b5593c73$var$PROCEDURAL_SHAPES;
-    const available = pool.filter((s)=>shapeNames.includes(s));
-    if (available.length === 0) return shapeNames[Math.floor(rng() * shapeNames.length)];
-    return available[Math.floor(rng() * available.length)];
-}
 // ── Helper: get position based on composition mode ──────────────────
 function $1f63dc64b5593c73$var$getCompositionPosition(mode, rng, width, height, shapeIndex, totalShapes, cx, cy) {
     switch(mode){
@@ -1958,22 +3696,28 @@ function $1f63dc64b5593c73$var$getCompositionPosition(mode, rng, width, height,
             };
     }
 }
-// ── Helper: positional color blending ───────────────────────────────
-function $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, colors, rng) {
-    const nx = x / width;
-    const ny = y / height;
-    const posIndex = (nx * 0.6 + ny * 0.4) * (colors.length - 1);
-    const baseIdx = Math.floor(posIndex) % colors.length;
-    return (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[baseIdx], rng, 0.08);
+// ── Helper: positional color from hierarchy ─────────────────────────
+function $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, hierarchy, rng) {
+    // Blend position into color selection — shapes near center lean dominant
+    const distFromCenter = Math.hypot(x - width / 2, y - height / 2) / Math.hypot(width / 2, height / 2);
+    // Center = more dominant, edges = more accent
+    if (distFromCenter < 0.35) return (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(hierarchy.dominant, rng, 10, 0.08);
+    else if (distFromCenter < 0.7) return (0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(hierarchy, rng), rng, 8, 0.06);
+    else {
+        // Edges: bias toward secondary/accent
+        const roll = rng();
+        const color = roll < 0.4 ? hierarchy.secondary : roll < 0.75 ? hierarchy.accent : hierarchy.dominant;
+        return (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(color, rng, 12, 0.08);
+    }
 }
-// ── Helper: check if a position is inside a void zone (Feature E) ───
+// ── Helper: check if a position is inside a void zone ───────────────
 function $1f63dc64b5593c73$var$isInVoidZone(x, y, voidZones) {
     for (const zone of voidZones){
         if (Math.hypot(x - zone.x, y - zone.y) < zone.radius) return true;
     }
     return false;
 }
-// ── Helper: density check for negative space (Feature E) ────────────
+// ── Helper: density check ───────────────────────────────────────────
 function $1f63dc64b5593c73$var$localDensity(x, y, positions, radius) {
     let count = 0;
     for (const p of positions)if (Math.hypot(x - p.x, y - p.y) < radius) count++;
@@ -2047,6 +3791,135 @@ function $1f63dc64b5593c73$var$drawBackground(ctx, style, bgStart, bgEnd, width,
             }
     }
 }
+const $1f63dc64b5593c73$var$CONSTELLATIONS = [
+    {
+        name: "flanked-triangle",
+        build: (rng, baseSize)=>{
+            const gap = baseSize * (0.6 + rng() * 0.3);
+            return [
+                {
+                    dx: 0,
+                    dy: 0,
+                    shape: "triangle",
+                    size: baseSize,
+                    rotation: rng() * 360
+                },
+                {
+                    dx: -gap,
+                    dy: gap * 0.3,
+                    shape: "circle",
+                    size: baseSize * 0.35,
+                    rotation: 0
+                },
+                {
+                    dx: gap,
+                    dy: gap * 0.3,
+                    shape: "circle",
+                    size: baseSize * 0.35,
+                    rotation: 0
+                }
+            ];
+        }
+    },
+    {
+        name: "hexagon-ring",
+        build: (rng, baseSize)=>{
+            const members = [];
+            const count = 5 + Math.floor(rng() * 2);
+            const ringR = baseSize * 0.6;
+            for(let i = 0; i < count; i++){
+                const angle = i / count * Math.PI * 2;
+                members.push({
+                    dx: Math.cos(angle) * ringR,
+                    dy: Math.sin(angle) * ringR,
+                    shape: "hexagon",
+                    size: baseSize * (0.25 + rng() * 0.1),
+                    rotation: angle * 180 / Math.PI
+                });
+            }
+            return members;
+        }
+    },
+    {
+        name: "spiral-dots",
+        build: (rng, baseSize)=>{
+            const members = [];
+            const count = 7 + Math.floor(rng() * 5);
+            const turns = 1.5 + rng();
+            for(let i = 0; i < count; i++){
+                const t = i / count;
+                const angle = t * Math.PI * 2 * turns;
+                const r = t * baseSize * 0.7;
+                members.push({
+                    dx: Math.cos(angle) * r,
+                    dy: Math.sin(angle) * r,
+                    shape: "circle",
+                    size: baseSize * (0.08 + (1 - t) * 0.12),
+                    rotation: 0
+                });
+            }
+            return members;
+        }
+    },
+    {
+        name: "diamond-cluster",
+        build: (rng, baseSize)=>{
+            const gap = baseSize * 0.45;
+            return [
+                {
+                    dx: 0,
+                    dy: -gap,
+                    shape: "diamond",
+                    size: baseSize * 0.4,
+                    rotation: 0
+                },
+                {
+                    dx: gap,
+                    dy: 0,
+                    shape: "diamond",
+                    size: baseSize * 0.35,
+                    rotation: 15
+                },
+                {
+                    dx: 0,
+                    dy: gap,
+                    shape: "diamond",
+                    size: baseSize * 0.3,
+                    rotation: 30
+                },
+                {
+                    dx: -gap,
+                    dy: 0,
+                    shape: "diamond",
+                    size: baseSize * 0.35,
+                    rotation: -15
+                }
+            ];
+        }
+    },
+    {
+        name: "crescent-pair",
+        build: (rng, baseSize)=>{
+            const gap = baseSize * 0.5;
+            return [
+                {
+                    dx: -gap * 0.4,
+                    dy: 0,
+                    shape: "crescent",
+                    size: baseSize * 0.5,
+                    rotation: rng() * 30
+                },
+                {
+                    dx: gap * 0.4,
+                    dy: 0,
+                    shape: "crescent",
+                    size: baseSize * 0.45,
+                    rotation: 180 + rng() * 30
+                }
+            ];
+        }
+    }
+];
 function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const finalConfig = {
         ...(0, $81c1b644006d48ec$export$c2f8e0cc249a8d8f),
@@ -2069,7 +3942,15 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const [bgStart, bgEnd] = colorScheme.getBackgroundColorsByMode(archetype.paletteMode);
     const tempMode = colorScheme.getTemperatureMode();
     const fgTempTarget = tempMode === "warm-bg" ? "cool" : tempMode === "cool-bg" ? "warm" : null;
+    // ── 0b. Color hierarchy — dominant/secondary/accent weighting ──
+    const colorHierarchy = (0, $b5a262d09b87e373$export$fabac4600b87056)(colors, rng);
+    // ── 0c. Shape palette — curated shapes that work well together ──
     const shapeNames = Object.keys((0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5));
+    const shapePalette = (0, $8286059160ee2e04$export$4a95df8944b5033b)(rng, shapeNames, archetype.name);
+    // ── 0d. Color grading — unified tone for the whole image ───────
+    const colorGrade = (0, $b5a262d09b87e373$export$6d1620b367f86f7a)(rng);
+    // ── 0e. Light direction — consistent shadow angle ──────────────
+    const lightAngle = rng() * Math.PI * 2;
     const scaleFactor = Math.min(width, height) / 1024;
     const adjustedMinSize = minShapeSize * scaleFactor;
     const adjustedMaxSize = maxShapeSize * scaleFactor;
@@ -2078,27 +3959,45 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     // ── 1. Background ──────────────────────────────────────────────
     const bgRadius = Math.hypot(cx, cy);
     $1f63dc64b5593c73$var$drawBackground(ctx, archetype.backgroundStyle, bgStart, bgEnd, width, height, cx, cy, bgRadius, rng, colors);
+    // Gradient mesh overlay — 3-4 color control points for richer backgrounds
+    const meshPoints = 3 + Math.floor(rng() * 2);
+    ctx.globalCompositeOperation = "soft-light";
+    for(let i = 0; i < meshPoints; i++){
+        const mx = rng() * width;
+        const my = rng() * height;
+        const mRadius = Math.min(width, height) * (0.3 + rng() * 0.4);
+        const mColor = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng);
+        const grad = ctx.createRadialGradient(mx, my, 0, mx, my, mRadius);
+        grad.addColorStop(0, (0, $b5a262d09b87e373$export$f2121afcad3d553f)(mColor, 0.08 + rng() * 0.06));
+        grad.addColorStop(1, "rgba(0,0,0,0)");
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, width, height);
+    }
+    ctx.globalCompositeOperation = "source-over";
     // Compute average background luminance for contrast enforcement
     const bgLum = ((0, $b5a262d09b87e373$export$5c6e3c2b59b7fbbe)(bgStart) + (0, $b5a262d09b87e373$export$5c6e3c2b59b7fbbe)(bgEnd)) / 2;
-    // ── 1b. Layered background (Feature G) ─────────────────────────
-    // Draw large, very faint shapes to give the background texture
+    // ── 1b. Layered background — archetype-coherent shapes ─────────
     const bgShapeCount = 3 + Math.floor(rng() * 4);
     ctx.globalCompositeOperation = "soft-light";
     for(let i = 0; i < bgShapeCount; i++){
         const bx = rng() * width;
         const by = rng() * height;
         const bSize = width * 0.3 + rng() * width * 0.5;
-        const bColor = colors[Math.floor(rng() * colors.length)];
+        const bColor = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng);
         ctx.globalAlpha = 0.03 + rng() * 0.05;
         ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(bColor, 0.15);
         ctx.beginPath();
-        ctx.arc(bx, by, bSize / 2, 0, Math.PI * 2);
+        // Use archetype-appropriate background shapes
+        if (archetype.name === "geometric-precision" || archetype.name === "op-art") // Rectangular shapes for geometric archetypes
+        ctx.rect(bx - bSize / 2, by - bSize / 2, bSize, bSize * (0.5 + rng() * 0.5));
+        else ctx.arc(bx, by, bSize / 2, 0, Math.PI * 2);
         ctx.fill();
     }
     // Subtle concentric rings from center
     const ringCount = 2 + Math.floor(rng() * 3);
     ctx.globalAlpha = 0.02 + rng() * 0.03;
-    ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colors[0], 0.1);
+    ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
     ctx.lineWidth = 1 * scaleFactor;
     for(let i = 1; i <= ringCount; i++){
         const r = Math.min(width, height) * 0.15 * i;
@@ -2107,12 +4006,70 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.stroke();
     }
     ctx.globalCompositeOperation = "source-over";
+    // ── 1c. Background pattern layer — subtle textured paper ───────
+    const bgPatternRoll = rng();
+    if (bgPatternRoll < 0.6) {
+        ctx.save();
+        ctx.globalCompositeOperation = "soft-light";
+        const patternOpacity = 0.02 + rng() * 0.04;
+        const patternColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.15);
+        if (bgPatternRoll < 0.2) {
+            // Dot grid
+            const dotSpacing = Math.max(8, Math.min(width, height) * (0.015 + rng() * 0.015));
+            const dotR = dotSpacing * 0.08;
+            ctx.globalAlpha = patternOpacity;
+            ctx.fillStyle = patternColor;
+            for(let px = 0; px < width; px += dotSpacing)for(let py = 0; py < height; py += dotSpacing){
+                ctx.beginPath();
+                ctx.arc(px, py, dotR, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        } else if (bgPatternRoll < 0.4) {
+            // Diagonal lines
+            const lineSpacing = Math.max(6, Math.min(width, height) * (0.02 + rng() * 0.02));
+            ctx.globalAlpha = patternOpacity;
+            ctx.strokeStyle = patternColor;
+            ctx.lineWidth = 0.5 * scaleFactor;
+            const diag = Math.hypot(width, height);
+            for(let d = -diag; d < diag; d += lineSpacing){
+                ctx.beginPath();
+                ctx.moveTo(d, 0);
+                ctx.lineTo(d + height, height);
+                ctx.stroke();
+            }
+        } else {
+            // Tessellation — hexagonal grid of tiny shapes
+            const tessSize = Math.max(10, Math.min(width, height) * (0.025 + rng() * 0.02));
+            const tessH = tessSize * Math.sqrt(3);
+            ctx.globalAlpha = patternOpacity * 0.7;
+            ctx.strokeStyle = patternColor;
+            ctx.lineWidth = 0.4 * scaleFactor;
+            for(let row = 0; row * tessH < height + tessH; row++){
+                const offsetX = row % 2 * tessSize * 0.75;
+                for(let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5; col++){
+                    const hx = col * tessSize * 1.5 + offsetX;
+                    const hy = row * tessH;
+                    ctx.beginPath();
+                    for(let s = 0; s < 6; s++){
+                        const angle = Math.PI / 3 * s - Math.PI / 6;
+                        const vx = hx + Math.cos(angle) * tessSize * 0.5;
+                        const vy = hy + Math.sin(angle) * tessSize * 0.5;
+                        if (s === 0) ctx.moveTo(vx, vy);
+                        else ctx.lineTo(vx, vy);
+                    }
+                    ctx.closePath();
+                    ctx.stroke();
+                }
+            }
+        }
+        ctx.restore();
+    }
+    ctx.globalCompositeOperation = "source-over";
     // ── 2. Composition mode ────────────────────────────────────────
     const compositionMode = $1f63dc64b5593c73$var$COMPOSITION_MODES[Math.floor(rng() * $1f63dc64b5593c73$var$COMPOSITION_MODES.length)];
     const symRoll = rng();
     const symmetryMode = symRoll < 0.10 ? "bilateral-x" : symRoll < 0.20 ? "bilateral-y" : symRoll < 0.25 ? "quad" : "none";
     // ── 3. Focal points + void zones ───────────────────────────────
-    // Rule-of-thirds intersection points for intentional composition
     const THIRDS_POINTS = [
         {
             x: 1 / 3,
@@ -2133,10 +4090,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     ];
     const numFocal = 1 + Math.floor(rng() * 2);
     const focalPoints = [];
-    for(let f = 0; f < numFocal; f++)// 70% chance to snap to a rule-of-thirds point, 30% free placement
-    if (rng() < 0.7) {
+    for(let f = 0; f < numFocal; f++)if (rng() < 0.7) {
         const tp = THIRDS_POINTS[Math.floor(rng() * THIRDS_POINTS.length)];
-        // Small jitter around the thirds point so it's not robotic
         focalPoints.push({
             x: width * (tp.x + (rng() - 0.5) * 0.08),
             y: height * (tp.y + (rng() - 0.5) * 0.08),
@@ -2147,7 +4102,6 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         y: height * (0.2 + rng() * 0.6),
         strength: 0.3 + rng() * 0.4
     });
-    // Feature E: 1-2 void zones where shapes are sparse (negative space)
     const numVoids = Math.floor(rng() * 2) + 1;
     const voidZones = [];
     for(let v = 0; v < numVoids; v++)voidZones.push({
@@ -2179,20 +4133,24 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     }
     // Track all placed shapes for density checks and connecting curves
     const shapePositions = [];
+    // Hero avoidance radius — shapes near the hero orient toward it
+    let heroCenter = null;
     // ── 4b. Hero shape — a dominant focal element ───────────────────
     if (archetype.heroShape && rng() < 0.6) {
         const heroFocal = focalPoints[0];
+        // Use shape palette hero candidates
         const heroPool = [
-            ...$1f63dc64b5593c73$var$SACRED_SHAPES,
-            "fibonacciSpiral",
-            "merkaba",
-            "fractal"
-        ];
-        const heroShape = heroPool.filter((s)=>shapeNames.includes(s))[Math.floor(rng() * heroPool.filter((s)=>shapeNames.includes(s)).length)] || shapeNames[Math.floor(rng() * shapeNames.length)];
+            ...shapePalette.primary,
+            ...shapePalette.supporting
+        ].filter((s)=>(0, $8286059160ee2e04$export$4343b39fe47bd82c)[s]?.heroCandidate && shapeNames.includes(s));
+        const heroShape = heroPool.length > 0 ? heroPool[Math.floor(rng() * heroPool.length)] : shapeNames[Math.floor(rng() * shapeNames.length)];
         const heroSize = adjustedMaxSize * (0.8 + rng() * 0.5);
         const heroRotation = rng() * 360;
-        const heroFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), bgLum), 0.15 + rng() * 0.2);
-        const heroStroke = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), bgLum);
+        const heroFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(colorHierarchy.dominant, rng, 6, 0.05), bgLum), 0.15 + rng() * 0.2);
+        const heroStroke = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(colorHierarchy.accent, rng, 6, 0.05), bgLum);
+        // Get best style for this hero shape
+        const heroProfile = (0, $8286059160ee2e04$export$4343b39fe47bd82c)[heroShape];
+        const heroStyle = heroProfile ? heroProfile.bestStyles[Math.floor(rng() * heroProfile.bestStyles.length)] : rng() < 0.4 ? "watercolor" : "fill-and-stroke";
         ctx.globalAlpha = 0.5 + rng() * 0.2;
         (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, heroShape, heroFocal.x, heroFocal.y, {
             fillColor: heroFill,
@@ -2203,14 +4161,20 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             proportionType: "GOLDEN_RATIO",
             glowRadius: (12 + rng() * 20) * scaleFactor,
             glowColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(heroStroke, 0.4),
-            gradientFillEnd: (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1),
-            renderStyle: rng() < 0.4 ? "watercolor" : "fill-and-stroke",
+            gradientFillEnd: (0, $b5a262d09b87e373$export$18a34c25ea7e724b)(colorHierarchy.secondary, rng, 10, 0.1),
+            renderStyle: heroStyle,
             rng: rng
         });
-        shapePositions.push({
+        heroCenter = {
             x: heroFocal.x,
             y: heroFocal.y,
             size: heroSize
+        };
+        shapePositions.push({
+            x: heroFocal.x,
+            y: heroFocal.y,
+            size: heroSize,
+            shape: heroShape
         });
     }
     // ── 5. Shape layers ────────────────────────────────────────────
@@ -2221,46 +4185,64 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const numShapes = shapesPerLayer + Math.floor(rng() * shapesPerLayer * 0.3);
         const layerOpacity = Math.max(0.15, baseOpacity - layer * opacityReduction);
         const layerSizeScale = 1 - layer * 0.15;
-        // Feature B: per-layer blend mode
+        // Per-layer blend mode
         const layerBlend = (0, $e0f99502ff383dd8$export$7bb7bff4e26fa06b)(rng);
         ctx.globalCompositeOperation = layerBlend;
-        // Feature C: per-layer render style bias — prefer archetype styles
+        // Per-layer render style bias — prefer archetype styles
         const layerRenderStyle = rng() < 0.6 ? archetype.preferredStyles[Math.floor(rng() * archetype.preferredStyles.length)] : (0, $e0f99502ff383dd8$export$9fd4e64b2acd410e)(rng);
-        // Feature D: atmospheric desaturation for later layers
-        const atmosphericDesat = layerRatio * 0.3; // 0 for first layer, up to 0.3 for last
+        // Atmospheric desaturation for later layers
+        const atmosphericDesat = layerRatio * 0.3;
+        // Depth-of-field simulation — later layers are "further away"
+        // Reduce stroke widths and shift colors toward the background
+        const dofFactor = 1 - layerRatio * 0.5; // 1.0 for front layer, 0.5 for back
+        const dofStrokeScale = 0.4 + dofFactor * 0.6; // strokes thin out with depth
+        const dofContrastReduction = layerRatio * 0.2; // colors fade toward bg
         for(let i = 0; i < numShapes; i++){
             // Position from composition mode, then focal bias
             const rawPos = $1f63dc64b5593c73$var$getCompositionPosition(compositionMode, rng, width, height, i, numShapes, cx, cy);
             const [x, y] = applyFocalBias(rawPos.x, rawPos.y);
-            // Feature E: skip shapes in void zones, reduce in dense areas
+            // Skip shapes in void zones, reduce in dense areas
             if ($1f63dc64b5593c73$var$isInVoidZone(x, y, voidZones)) {
-                // 85% chance to skip — allows a few shapes to bleed in
                 if (rng() < 0.85) continue;
             }
             if ($1f63dc64b5593c73$var$localDensity(x, y, shapePositions, densityCheckRadius) > maxLocalDensity) {
-                if (rng() < 0.6) continue; // thin out dense areas
+                if (rng() < 0.6) continue;
             }
-            // Weighted shape selection
-            const shape = $1f63dc64b5593c73$var$pickShape(rng, layerRatio, shapeNames);
             // Power distribution for size — archetype controls the curve
             const sizeT = Math.pow(rng(), archetype.sizePower);
             const size = (adjustedMinSize + sizeT * (adjustedMaxSize - adjustedMinSize)) * layerSizeScale;
+            // Size fraction for affinity-aware shape selection
+            const sizeFraction = size / adjustedMaxSize;
+            // Palette-driven shape selection (replaces naive pickShape)
+            const shape = (0, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, sizeFraction);
             // Flow-field rotation in flow-field mode, random otherwise
-            const rotation = compositionMode === "flow-field" ? flowAngle(x, y) * 180 / Math.PI + (rng() - 0.5) * 30 : rng() * 360;
-            // Positional color blending + jitter
-            let fillBase = $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, colors, rng);
-            const strokeBase = colors[Math.floor(rng() * colors.length)];
-            // Feature D: desaturate colors on later layers for depth
+            let rotation = compositionMode === "flow-field" ? flowAngle(x, y) * 180 / Math.PI + (rng() - 0.5) * 30 : rng() * 360;
+            // Hero avoidance: shapes near the hero orient toward it
+            if (heroCenter) {
+                const distToHero = Math.hypot(x - heroCenter.x, y - heroCenter.y);
+                const heroInfluence = heroCenter.size * 1.5;
+                if (distToHero < heroInfluence && distToHero > 0) {
+                    const angleToHero = Math.atan2(heroCenter.y - y, heroCenter.x - x) * 180 / Math.PI;
+                    const blendFactor = 1 - distToHero / heroInfluence;
+                    rotation = rotation + (angleToHero - rotation) * blendFactor * 0.4;
+                }
+            }
+            // Positional color from hierarchy + jitter
+            let fillBase = $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, colorHierarchy, rng);
+            const strokeBase = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng);
+            // Desaturate colors on later layers for depth
             if (atmosphericDesat > 0) fillBase = (0, $b5a262d09b87e373$export$fb75607d98509d9)(fillBase, atmosphericDesat);
             // Temperature contrast: shift foreground shapes opposite to background
             if (fgTempTarget) fillBase = (0, $b5a262d09b87e373$export$51ea55f869b7e0d3)(fillBase, fgTempTarget, 0.15 + layerRatio * 0.1);
-            const fillColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(fillBase, rng, 0.06), bgLum);
-            const strokeColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(strokeBase, rng, 0.05), bgLum);
+            const fillColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(fillBase, rng, 6, 0.05), bgLum);
+            const strokeColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(strokeBase, rng, 5, 0.04), bgLum);
             // Semi-transparent fill
             const fillAlpha = 0.2 + rng() * 0.5;
             const transparentFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, fillAlpha);
-            const strokeWidth = (0.5 + rng() * 2.0) * scaleFactor;
-            ctx.globalAlpha = layerOpacity * (0.5 + rng() * 0.5);
+            const strokeWidth = (0.5 + rng() * 2.0) * scaleFactor * dofStrokeScale;
+            // Depth-of-field: reduce opacity slightly for distant layers
+            const dofOpacityScale = 1 - dofContrastReduction;
+            ctx.globalAlpha = layerOpacity * (0.5 + rng() * 0.5) * dofOpacityScale;
             // Glow on sacred shapes more often — scaled by archetype
             const isSacred = $1f63dc64b5593c73$var$SACRED_SHAPES.includes(shape);
             const baseGlowChance = isSacred ? 0.45 : 0.2;
@@ -2269,58 +4251,177 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const glowRadius = hasGlow ? (8 + rng() * 20) * scaleFactor : 0;
             // Gradient fill on ~30%
             const hasGradient = rng() < 0.3;
-            const gradientEnd = hasGradient ? (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1) : undefined;
-            // Feature C: per-shape render style (70% use layer style, 30% pick their own)
-            const shapeRenderStyle = rng() < 0.7 ? layerRenderStyle : (0, $e0f99502ff383dd8$export$9fd4e64b2acd410e)(rng);
-            // Feature F: organic edge jitter — applied via watercolor style on ~15% of shapes
+            const gradientEnd = hasGradient ? (0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 10, 0.1) : undefined;
+            // Affinity-aware render style selection
+            const shapeRenderStyle = (0, $8286059160ee2e04$export$ab873bb6fb56c1a8)(shape, layerRenderStyle, rng);
+            // Organic edge jitter — applied via watercolor style on ~15% of shapes
             const useOrganicEdges = rng() < 0.15 && shapeRenderStyle === "fill-and-stroke";
             const finalRenderStyle = useOrganicEdges ? "watercolor" : shapeRenderStyle;
-            (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, x, y, {
+            // Consistent light direction — subtle shadow offset
+            const shadowDist = hasGlow ? 0 : size * 0.02;
+            const shadowOffX = shadowDist * Math.cos(lightAngle);
+            const shadowOffY = shadowDist * Math.sin(lightAngle);
+            // ── 5a. Tangent placement — nudge toward nearest shape edge ──
+            let finalX = x;
+            let finalY = y;
+            if (shapePositions.length > 0 && rng() < 0.25) {
+                // Find nearest placed shape
+                let nearestDist = Infinity;
+                let nearestPos = null;
+                for (const sp of shapePositions){
+                    const d = Math.hypot(x - sp.x, y - sp.y);
+                    if (d < nearestDist && d > 0) {
+                        nearestDist = d;
+                        nearestPos = sp;
+                    }
+                }
+                if (nearestPos) {
+                    // Target distance: edges kissing (sum of half-sizes)
+                    const targetDist = (size + nearestPos.size) * 0.5;
+                    if (nearestDist > targetDist * 0.5 && nearestDist < targetDist * 3) {
+                        const angle = Math.atan2(y - nearestPos.y, x - nearestPos.x);
+                        finalX = nearestPos.x + Math.cos(angle) * targetDist;
+                        finalY = nearestPos.y + Math.sin(angle) * targetDist;
+                        // Keep in bounds
+                        finalX = Math.max(0, Math.min(width, finalX));
+                        finalY = Math.max(0, Math.min(height, finalY));
+                    }
+                }
+            }
+            // ── 5b. Shape mirroring — basic shapes get reflected copies ──
+            const mirrorAxis = (0, $e0f99502ff383dd8$export$879206e23912d1a9)(rng);
+            const isBasicShape = [
+                "circle",
+                "triangle",
+                "square",
+                "hexagon",
+                "star",
+                "diamond",
+                "crescent",
+                "penroseTile",
+                "reuleauxTriangle"
+            ].includes(shape);
+            const shouldMirror = mirrorAxis !== null && isBasicShape && size > adjustedMaxSize * 0.2;
+            const shapeConfig = {
                 fillColor: transparentFill,
                 strokeColor: strokeColor,
                 strokeWidth: strokeWidth,
                 size: size,
                 rotation: rotation,
                 proportionType: "GOLDEN_RATIO",
-                glowRadius: glowRadius,
-                glowColor: hasGlow ? (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, 0.6) : undefined,
+                glowRadius: glowRadius || (shadowDist > 0 ? shadowDist * 2 : 0),
+                glowColor: hasGlow ? (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, 0.6) : shadowDist > 0 ? "rgba(0,0,0,0.08)" : undefined,
                 gradientFillEnd: gradientEnd,
                 renderStyle: finalRenderStyle,
                 rng: rng
+            };
+            if (shouldMirror) (0, $e0f99502ff383dd8$export$8bd8bbd1a8e53689)(ctx, shape, finalX, finalY, {
+                ...shapeConfig,
+                mirrorAxis: mirrorAxis,
+                mirrorGap: size * (0.1 + rng() * 0.3)
             });
+            else (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, shapeConfig);
             shapePositions.push({
-                x: x,
-                y: y,
-                size: size
+                x: finalX,
+                y: finalY,
+                size: size,
+                shape: shape
             });
-            // ── 5b. Recursive nesting ──────────────────────────────────
+            // ── 5c. Size echo — large shapes spawn trailing smaller copies ──
+            if (size > adjustedMaxSize * 0.5 && rng() < 0.2) {
+                const echoCount = 2 + Math.floor(rng() * 2);
+                const echoAngle = rng() * Math.PI * 2;
+                for(let e = 0; e < echoCount; e++){
+                    const echoScale = 0.3 - e * 0.08;
+                    const echoDist = size * (0.6 + e * 0.4);
+                    const echoX = finalX + Math.cos(echoAngle) * echoDist;
+                    const echoY = finalY + Math.sin(echoAngle) * echoDist;
+                    const echoSize = size * Math.max(0.1, echoScale);
+                    if (echoX < 0 || echoX > width || echoY < 0 || echoY > height) continue;
+                    ctx.globalAlpha = layerOpacity * (0.4 - e * 0.1);
+                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, echoX, echoY, {
+                        fillColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, fillAlpha * 0.6),
+                        strokeColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(strokeColor, 0.4),
+                        strokeWidth: strokeWidth * 0.6,
+                        size: echoSize,
+                        rotation: rotation + (e + 1) * 15,
+                        proportionType: "GOLDEN_RATIO",
+                        renderStyle: finalRenderStyle,
+                        rng: rng
+                    });
+                    shapePositions.push({
+                        x: echoX,
+                        y: echoY,
+                        size: echoSize,
+                        shape: shape
+                    });
+                }
+            }
+            // ── 5d. Recursive nesting ──────────────────────────────────
             if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
                 const innerCount = 1 + Math.floor(rng() * 3);
                 for(let n = 0; n < innerCount; n++){
-                    const innerShape = $1f63dc64b5593c73$var$pickShape(rng, Math.min(1, layerRatio + 0.3), shapeNames);
+                    // Pick inner shape from palette affinities
+                    const innerSizeFraction = size * 0.25 / adjustedMaxSize;
+                    const innerShape = (0, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, innerSizeFraction);
                     const innerSize = size * (0.15 + rng() * 0.25);
                     const innerOffX = (rng() - 0.5) * size * 0.4;
                     const innerOffY = (rng() - 0.5) * size * 0.4;
                     const innerRot = rng() * 360;
-                    const innerFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1), 0.3 + rng() * 0.4);
+                    const innerFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 10, 0.1), 0.3 + rng() * 0.4);
                     ctx.globalAlpha = layerOpacity * 0.7;
-                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, innerShape, x + innerOffX, y + innerOffY, {
+                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, innerShape, finalX + innerOffX, finalY + innerOffY, {
                         fillColor: innerFill,
                         strokeColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(strokeColor, 0.5),
                         strokeWidth: strokeWidth * 0.6,
                         size: innerSize,
                         rotation: innerRot,
                         proportionType: "GOLDEN_RATIO",
-                        renderStyle: shapeRenderStyle,
+                        renderStyle: (0, $8286059160ee2e04$export$ab873bb6fb56c1a8)(innerShape, layerRenderStyle, rng),
+                        rng: rng
+                    });
+                }
+            }
+            // ── 5e. Shape constellations — pre-composed groups ─────────
+            if (size > adjustedMaxSize * 0.35 && rng() < 0.12) {
+                const constellation = $1f63dc64b5593c73$var$CONSTELLATIONS[Math.floor(rng() * $1f63dc64b5593c73$var$CONSTELLATIONS.length)];
+                const members = constellation.build(rng, size);
+                const groupRotation = rng() * Math.PI * 2;
+                const cosR = Math.cos(groupRotation);
+                const sinR = Math.sin(groupRotation);
+                for (const member of members){
+                    // Rotate the group offset by the group rotation
+                    const mx = finalX + member.dx * cosR - member.dy * sinR;
+                    const my = finalY + member.dx * sinR + member.dy * cosR;
+                    if (mx < 0 || mx > width || my < 0 || my > height) continue;
+                    const memberFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), rng, 8, 0.06), fillAlpha * 0.8);
+                    const memberStroke = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)(strokeBase, rng, 5, 0.04), bgLum);
+                    ctx.globalAlpha = layerOpacity * 0.6;
+                    // Use the member's shape if available, otherwise fall back to palette
+                    const memberShape = shapeNames.includes(member.shape) ? member.shape : (0, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, member.size / adjustedMaxSize);
+                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, memberShape, mx, my, {
+                        fillColor: memberFill,
+                        strokeColor: memberStroke,
+                        strokeWidth: strokeWidth * 0.7,
+                        size: member.size,
+                        rotation: member.rotation + groupRotation * 180 / Math.PI,
+                        proportionType: "GOLDEN_RATIO",
+                        renderStyle: (0, $8286059160ee2e04$export$ab873bb6fb56c1a8)(memberShape, layerRenderStyle, rng),
                         rng: rng
                     });
+                    shapePositions.push({
+                        x: mx,
+                        y: my,
+                        size: member.size,
+                        shape: memberShape
+                    });
                 }
             }
         }
     }
     // Reset blend mode for post-processing passes
     ctx.globalCompositeOperation = "source-over";
-    // ── 6. Flow-line pass (Feature H: tapered brush strokes) ───────
+    // ── 6. Flow-line pass — variable color, branching, pressure ────
     const baseFlowLines = 6 + Math.floor(rng() * 10);
     const numFlowLines = Math.round(baseFlowLines * archetype.flowLineMultiplier);
     for(let i = 0; i < numFlowLines; i++){
@@ -2329,9 +4430,13 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const steps = 30 + Math.floor(rng() * 40);
         const stepLen = (3 + rng() * 5) * scaleFactor;
         const startWidth = (1 + rng() * 3) * scaleFactor;
-        const lineColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)(colors[Math.floor(rng() * colors.length)], bgLum), 0.4);
+        // Variable color: interpolate between two hierarchy colors along the stroke
+        const lineColorStart = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum);
+        const lineColorEnd = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum);
         const lineAlpha = 0.06 + rng() * 0.1;
-        // Draw as individual segments with tapering width
+        // Pressure simulation: sinusoidal width variation
+        const pressureFreq = 2 + rng() * 4;
+        const pressurePhase = rng() * Math.PI * 2;
         let prevX = fx;
         let prevY = fy;
         for(let s = 0; s < steps; s++){
@@ -2339,37 +4444,61 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             fx += Math.cos(angle) * stepLen;
             fy += Math.sin(angle) * stepLen;
             if (fx < 0 || fx > width || fy < 0 || fy > height) break;
-            // Taper: thick at start, thin at end
-            const taper = 1 - s / steps * 0.8;
+            const t = s / steps;
+            // Taper + pressure
+            const taper = 1 - t * 0.8;
+            const pressure = 0.6 + 0.4 * Math.sin(t * pressureFreq * Math.PI + pressurePhase);
             ctx.globalAlpha = lineAlpha * taper;
+            // Interpolate color along stroke
+            const lineColor = t < 0.5 ? (0, $b5a262d09b87e373$export$f2121afcad3d553f)(lineColorStart, 0.4 + t * 0.2) : (0, $b5a262d09b87e373$export$f2121afcad3d553f)(lineColorEnd, 0.4 + (1 - t) * 0.2);
             ctx.strokeStyle = lineColor;
-            ctx.lineWidth = startWidth * taper;
+            ctx.lineWidth = startWidth * taper * pressure;
             ctx.lineCap = "round";
             ctx.beginPath();
             ctx.moveTo(prevX, prevY);
             ctx.lineTo(fx, fy);
             ctx.stroke();
+            // Branching: ~12% chance per step to spawn a thinner child stroke
+            if (rng() < 0.12 && s > 5 && s < steps - 10) {
+                const branchAngle = angle + (rng() < 0.5 ? 1 : -1) * (0.3 + rng() * 0.5);
+                let bx = fx;
+                let by = fy;
+                let bPrevX = fx;
+                let bPrevY = fy;
+                const branchSteps = 5 + Math.floor(rng() * 10);
+                const branchWidth = startWidth * taper * 0.4;
+                for(let bs = 0; bs < branchSteps; bs++){
+                    const bAngle = branchAngle + (rng() - 0.5) * 0.2;
+                    bx += Math.cos(bAngle) * stepLen * 0.8;
+                    by += Math.sin(bAngle) * stepLen * 0.8;
+                    if (bx < 0 || bx > width || by < 0 || by > height) break;
+                    const bTaper = 1 - bs / branchSteps * 0.9;
+                    ctx.globalAlpha = lineAlpha * taper * bTaper * 0.6;
+                    ctx.lineWidth = branchWidth * bTaper;
+                    ctx.beginPath();
+                    ctx.moveTo(bPrevX, bPrevY);
+                    ctx.lineTo(bx, by);
+                    ctx.stroke();
+                    bPrevX = bx;
+                    bPrevY = by;
+                }
+            }
             prevX = fx;
             prevY = fy;
         }
     }
     // ── 6b. Apply symmetry mirroring ─────────────────────────────────
-    // Mirror the rendered content (shapes + flow lines) before post-processing.
-    // Uses ctx.canvas which is available in both Node (@napi-rs/canvas) and browsers.
     if (symmetryMode !== "none") {
         const canvas = ctx.canvas;
         ctx.save();
         if (symmetryMode === "bilateral-x" || symmetryMode === "quad") {
-            // Mirror left half onto right half
             ctx.save();
             ctx.translate(width, 0);
             ctx.scale(-1, 1);
-            // Draw the left half (0 to cx) onto the mirrored right side
             ctx.drawImage(canvas, 0, 0, Math.ceil(cx), height, 0, 0, Math.ceil(cx), height);
             ctx.restore();
         }
         if (symmetryMode === "bilateral-y" || symmetryMode === "quad") {
-            // Mirror top half onto bottom half
             ctx.save();
             ctx.translate(0, height);
             ctx.scale(1, -1);
@@ -2392,7 +4521,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     }
     // ── 8. Vignette — darken edges to draw the eye inward ───────────
     ctx.globalAlpha = 1;
-    const vignetteStrength = 0.25 + rng() * 0.2; // 25-45% edge darkening
+    const vignetteStrength = 0.25 + rng() * 0.2;
     const vigGrad = ctx.createRadialGradient(cx, cy, Math.min(width, height) * 0.3, cx, cy, bgRadius);
     vigGrad.addColorStop(0, "rgba(0,0,0,0)");
     vigGrad.addColorStop(0.6, "rgba(0,0,0,0)");
@@ -2418,13 +4547,57 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const cpx = mx + -dy / (dist || 1) * bulge;
             const cpy = my + dx / (dist || 1) * bulge;
             ctx.globalAlpha = 0.06 + rng() * 0.1;
-            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)(colors[Math.floor(rng() * colors.length)], bgLum), 0.3);
+            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
             ctx.beginPath();
             ctx.moveTo(a.x, a.y);
             ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);
             ctx.stroke();
         }
     }
+    // ── 10. Post-processing ────────────────────────────────────────
+    // 10a. Color grading — unified tone across the whole image
+    // Apply as a semi-transparent overlay in the grade hue
+    ctx.globalAlpha = colorGrade.intensity * 0.25;
+    ctx.globalCompositeOperation = "soft-light";
+    const gradeHsl = `hsl(${Math.round(colorGrade.hue)}, 40%, 50%)`;
+    ctx.fillStyle = gradeHsl;
+    ctx.fillRect(0, 0, width, height);
+    ctx.globalCompositeOperation = "source-over";
+    // 10b. Chromatic aberration — subtle RGB channel offset at edges
+    // Only apply for neon/cosmic/ethereal archetypes where it fits
+    const chromaArchetypes = [
+        "neon-glow",
+        "cosmic",
+        "ethereal"
+    ];
+    if (chromaArchetypes.includes(archetype.name)) {
+        const chromaOffset = Math.ceil(2 * scaleFactor);
+        const canvas = ctx.canvas;
+        // Shift red channel slightly
+        ctx.globalAlpha = 0.03;
+        ctx.globalCompositeOperation = "screen";
+        ctx.drawImage(canvas, chromaOffset, 0, width, height, 0, 0, width, height);
+        // Shift blue channel opposite
+        ctx.drawImage(canvas, -chromaOffset, 0, width, height, 0, 0, width, height);
+        ctx.globalCompositeOperation = "source-over";
+    }
+    // 10c. Bloom — soft glow on bright areas for neon/cosmic archetypes
+    const bloomArchetypes = [
+        "neon-glow",
+        "cosmic"
+    ];
+    if (bloomArchetypes.includes(archetype.name)) {
+        const canvas = ctx.canvas;
+        ctx.globalAlpha = 0.08;
+        ctx.globalCompositeOperation = "screen";
+        // Draw the image slightly scaled up and blurred via shadow
+        ctx.save();
+        ctx.shadowBlur = 30 * scaleFactor;
+        ctx.shadowColor = "rgba(255,255,255,0.3)";
+        ctx.drawImage(canvas, 0, 0, width, height);
+        ctx.restore();
+        ctx.globalCompositeOperation = "source-over";
+    }
     ctx.globalAlpha = 1;
 }