git-hash-art 0.11.0 → 0.13.0

package/dist/browser.js

@@ -508,13 +508,21 @@ class $b5a262d09b87e373$export$ab958c550f521376 {
     }
 }
 // ── Standalone color utilities ──────────────────────────────────────
-/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. */ function $b5a262d09b87e373$var$hexToRgb(hex) {
-    const c = hex.replace("#", "");
-    return [
+// ── Cached hex→RGB parse — avoids repeated parseInt/substring on hot path ──
+const $b5a262d09b87e373$var$_rgbCache = new Map();
+const $b5a262d09b87e373$var$_RGB_CACHE_MAX = 512;
+/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. Cached. */ function $b5a262d09b87e373$var$hexToRgb(hex) {
+    let cached = $b5a262d09b87e373$var$_rgbCache.get(hex);
+    if (cached) return cached;
+    const c = hex.charAt(0) === "#" ? hex.substring(1) : hex;
+    cached = [
         parseInt(c.substring(0, 2), 16),
         parseInt(c.substring(2, 4), 16),
         parseInt(c.substring(4, 6), 16)
     ];
+    if ($b5a262d09b87e373$var$_rgbCache.size >= $b5a262d09b87e373$var$_RGB_CACHE_MAX) $b5a262d09b87e373$var$_rgbCache.clear();
+    $b5a262d09b87e373$var$_rgbCache.set(hex, cached);
+    return cached;
 }
 /** Format [r, g, b] back to #RRGGBB. */ function $b5a262d09b87e373$var$rgbToHex(r, g, b) {
     const clamp = (v)=>Math.max(0, Math.min(255, Math.round(v)));
@@ -571,7 +579,9 @@ class $b5a262d09b87e373$export$ab958c550f521376 {
 }
 function $b5a262d09b87e373$export$f2121afcad3d553f(hex, alpha) {
     const [r, g, b] = $b5a262d09b87e373$var$hexToRgb(hex);
-    return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
+    // Quantize alpha to 3 decimal places without toFixed overhead
+    const a = Math.round(alpha * 1000) / 1000;
+    return `rgba(${r},${g},${b},${a})`;
 }
 function $b5a262d09b87e373$export$fabac4600b87056(colors, rng) {
     if (colors.length < 3) return {
@@ -651,12 +661,21 @@ function $b5a262d09b87e373$export$51ea55f869b7e0d3(hex, target, amount) {
     const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
     return $b5a262d09b87e373$var$hslToHex($b5a262d09b87e373$var$shiftHueToward(h, target, amount), s, l);
 }
+/**
+ * Compute relative luminance of a hex color (0 = black, 1 = white).
+ * Uses the sRGB luminance formula from WCAG. Cached.
+ */ const $b5a262d09b87e373$var$_lumCache = new Map();
 function $b5a262d09b87e373$export$5c6e3c2b59b7fbbe(hex) {
+    let cached = $b5a262d09b87e373$var$_lumCache.get(hex);
+    if (cached !== undefined) return cached;
     const [r, g, b] = $b5a262d09b87e373$var$hexToRgb(hex).map((c)=>{
         const s = c / 255;
         return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
     });
-    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    cached = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    if ($b5a262d09b87e373$var$_lumCache.size >= 512) $b5a262d09b87e373$var$_lumCache.clear();
+    $b5a262d09b87e373$var$_lumCache.set(hex, cached);
+    return cached;
 }
 function $b5a262d09b87e373$export$90ad0e6170cf6af5(fgHex, bgLuminance, minContrast = 0.15) {
     const fgLum = $b5a262d09b87e373$export$5c6e3c2b59b7fbbe(fgHex);
@@ -1092,21 +1111,31 @@ const $f0f1a7293548e501$export$c9043b89bcb14ed9 = (ctx, size, config = {})=>{
     (0, $ce2c52df8af02e62$export$e46c5570db033611)(ctx, size, finalConfig);
     const gridSize = 8;
     const unit = size / gridSize;
+    const radius = unit / 2;
+    // Pre-compute the 8 star-point angle pairs (cos/sin) — avoids 648 trig calls
+    const starPoints = [];
+    for(let k = 0; k < 8; k++){
+        const angle = Math.PI / 4 * k;
+        const angle2 = angle + Math.PI / 4;
+        starPoints.push({
+            c1: Math.cos(angle) * radius,
+            s1: Math.sin(angle) * radius,
+            c2: Math.cos(angle2) * radius,
+            s2: Math.sin(angle2) * radius
+        });
+    }
     ctx.beginPath();
     // Create base grid
-    for(let i = 0; i <= gridSize; i++)for(let j = 0; j <= gridSize; j++){
+    for(let i = 0; i <= gridSize; i++){
         const x = (i - gridSize / 2) * unit;
-        const y = (j - gridSize / 2) * unit;
-        // Draw star pattern at each intersection
-        const radius = unit / 2;
-        for(let k = 0; k < 8; k++){
-            const angle = Math.PI / 4 * k;
-            const x1 = x + radius * Math.cos(angle);
-            const y1 = y + radius * Math.sin(angle);
-            const x2 = x + radius * Math.cos(angle + Math.PI / 4);
-            const y2 = y + radius * Math.sin(angle + Math.PI / 4);
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
+        for(let j = 0; j <= gridSize; j++){
+            const y = (j - gridSize / 2) * unit;
+            // Draw star pattern at each intersection using pre-computed offsets
+            for(let k = 0; k < 8; k++){
+                const sp = starPoints[k];
+                ctx.moveTo(x + sp.c1, y + sp.s1);
+                ctx.lineTo(x + sp.c2, y + sp.s2);
+            }
         }
     }
     ctx.stroke();
@@ -1426,20 +1455,23 @@ const $77711f013715e6da$export$eeae7765f05012e2 = (ctx, size)=>{
 const $77711f013715e6da$export$3355220a8108efc3 = (ctx, size)=>{
     const outerRadius = size / 2;
     const innerRadius = size / 4;
-    const steps = 36;
+    // Adaptive step count: fewer segments for small shapes where detail isn't visible.
+    // 36×36 = 1296 segments at full size; at size < 60 we drop to 16×16 = 256.
+    const steps = size < 60 ? 16 : size < 150 ? 24 : 36;
+    const TWO_PI = Math.PI * 2;
+    const angleStep = TWO_PI / steps;
     ctx.beginPath();
     for(let i = 0; i < steps; i++){
-        const angle1 = i / steps * Math.PI * 2;
-        // const angle2 = ((i + 1) / steps) * Math.PI * 2;
+        const angle1 = i * angleStep;
+        const cosA = Math.cos(angle1);
+        const sinA = Math.sin(angle1);
         for(let j = 0; j < steps; j++){
-            const phi1 = j / steps * Math.PI * 2;
-            const phi2 = (j + 1) / steps * Math.PI * 2;
-            const x1 = (outerRadius + innerRadius * Math.cos(phi1)) * Math.cos(angle1);
-            const y1 = (outerRadius + innerRadius * Math.cos(phi1)) * Math.sin(angle1);
-            const x2 = (outerRadius + innerRadius * Math.cos(phi2)) * Math.cos(angle1);
-            const y2 = (outerRadius + innerRadius * Math.cos(phi2)) * Math.sin(angle1);
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
+            const phi1 = j * angleStep;
+            const phi2 = phi1 + angleStep;
+            const r1 = outerRadius + innerRadius * Math.cos(phi1);
+            const r2 = outerRadius + innerRadius * Math.cos(phi2);
+            ctx.moveTo(r1 * cosA, r1 * sinA);
+            ctx.lineTo(r2 * cosA, r2 * sinA);
         }
     }
 };
@@ -2002,6 +2034,43 @@ const $e0f99502ff383dd8$var$RENDER_STYLES = [
 function $e0f99502ff383dd8$export$9fd4e64b2acd410e(rng) {
     return $e0f99502ff383dd8$var$RENDER_STYLES[Math.floor(rng() * $e0f99502ff383dd8$var$RENDER_STYLES.length)];
 }
+const $e0f99502ff383dd8$export$2f738f61a8c15e07 = {
+    "fill-and-stroke": 1,
+    "fill-only": 0.5,
+    "stroke-only": 1,
+    "double-stroke": 1.5,
+    "dashed": 1,
+    "watercolor": 7,
+    "hatched": 3,
+    "incomplete": 1,
+    "stipple": 90,
+    "stencil": 2,
+    "noise-grain": 400,
+    "wood-grain": 10,
+    "marble-vein": 4,
+    "fabric-weave": 6,
+    "hand-drawn": 5
+};
+function $e0f99502ff383dd8$export$909ab0580e273f19(style) {
+    switch(style){
+        case "noise-grain":
+            return "hatched";
+        case "stipple":
+            return "dashed";
+        case "wood-grain":
+            return "hatched";
+        case "watercolor":
+            return "fill-and-stroke";
+        case "fabric-weave":
+            return "hatched";
+        case "hand-drawn":
+            return "fill-and-stroke";
+        case "marble-vein":
+            return "stroke-only";
+        default:
+            return style;
+    }
+}
 function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
     const { fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, size: size, rotation: rotation } = config;
     ctx.save();
@@ -2121,6 +2190,7 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
         case "hatched":
             {
                 // Fill normally at reduced opacity, then overlay cross-hatch lines
+                // Optimized: batch all parallel lines into a single path per pass
                 const savedAlphaH = ctx.globalAlpha;
                 ctx.globalAlpha = savedAlphaH * 0.3;
                 ctx.fill();
@@ -2132,28 +2202,28 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 const hatchAngle = rng ? rng() * Math.PI : Math.PI / 4;
                 ctx.lineWidth = Math.max(0.5, strokeWidth * 0.4);
                 ctx.globalAlpha = savedAlphaH * 0.6;
-                // Draw parallel lines across the bounding box
+                // Draw parallel lines across the bounding box — batched into single path
                 const extent = size * 0.8;
                 const cos = Math.cos(hatchAngle);
                 const sin = Math.sin(hatchAngle);
+                ctx.beginPath();
                 for(let d = -extent; d <= extent; d += hatchSpacing){
-                    ctx.beginPath();
                     ctx.moveTo(d * cos - extent * sin, d * sin + extent * cos);
                     ctx.lineTo(d * cos + extent * sin, d * sin - extent * cos);
-                    ctx.stroke();
                 }
+                ctx.stroke();
                 // Second pass at perpendicular angle for cross-hatch (~50% chance)
                 if (!rng || rng() < 0.5) {
                     const crossAngle = hatchAngle + Math.PI / 2;
                     const cos2 = Math.cos(crossAngle);
                     const sin2 = Math.sin(crossAngle);
                     ctx.globalAlpha = savedAlphaH * 0.35;
+                    ctx.beginPath();
                     for(let d = -extent; d <= extent; d += hatchSpacing * 1.4){
-                        ctx.beginPath();
                         ctx.moveTo(d * cos2 - extent * sin2, d * sin2 + extent * cos2);
                         ctx.lineTo(d * cos2 + extent * sin2, d * sin2 - extent * cos2);
-                        ctx.stroke();
                     }
+                    ctx.stroke();
                 }
                 ctx.restore();
                 ctx.globalAlpha = savedAlphaH;
@@ -2191,6 +2261,8 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
         case "stipple":
             {
                 // Dot-fill texture — clip to shape, then scatter dots
+                // Optimized: use fillRect instead of arc for dots (much cheaper to render),
+                // and cap total dot count to avoid O(size²) blowup on large shapes.
                 const savedAlphaS = ctx.globalAlpha;
                 ctx.globalAlpha = savedAlphaS * 0.15;
                 ctx.fill(); // ghost fill
@@ -2198,16 +2270,20 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 ctx.save();
                 ctx.clip();
                 const dotSpacing = Math.max(2, size * 0.03);
-                const extent = size * 0.55;
+                const extentS = size * 0.55;
+                // Cap total dots: beyond ~900 (30×30 grid) the visual density plateaus
+                const maxDotsPerAxis = Math.min(Math.ceil(extentS * 2 / dotSpacing), 30);
+                const actualSpacing = extentS * 2 / maxDotsPerAxis;
                 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();
+                for(let xi = 0; xi < maxDotsPerAxis; xi++){
+                    const dx = -extentS + xi * actualSpacing;
+                    for(let yi = 0; yi < maxDotsPerAxis; yi++){
+                        const dy = -extentS + yi * actualSpacing;
+                        const jx = rng ? (rng() - 0.5) * actualSpacing * 0.6 : 0;
+                        const jy = rng ? (rng() - 0.5) * actualSpacing * 0.6 : 0;
+                        const dotD = rng ? actualSpacing * (0.3 + rng() * 0.4) : actualSpacing * 0.4;
+                        ctx.fillRect(dx + jx - dotD * 0.5, dy + jy - dotD * 0.5, dotD, dotD);
+                    }
                 }
                 ctx.restore();
                 ctx.globalAlpha = savedAlphaS;
@@ -2240,6 +2316,9 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
         case "noise-grain":
             {
                 // Procedural noise grain texture clipped to shape boundary
+                // Optimized: cap grid to max 40×40 = 1600 dots (was unbounded at O(size²)),
+                // quantize alpha into buckets to minimize globalAlpha state changes,
+                // and batch dots by brightness (black/white) × alpha bucket
                 const savedAlphaN = ctx.globalAlpha;
                 ctx.globalAlpha = savedAlphaN * 0.25;
                 ctx.fill(); // base tint
@@ -2248,17 +2327,47 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 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);
+                if (rng) {
+                    // Cap grid to max 40 dots per axis — beyond this the grain is
+                    // visually indistinguishable but cost scales quadratically.
+                    const maxGrainPerAxis = Math.min(Math.ceil(extentN * 2 / grainSpacing), 40);
+                    const actualGrainSpacing = extentN * 2 / maxGrainPerAxis;
+                    // 4 alpha buckets: 0.2, 0.3, 0.4, 0.5 — covers the 0.15-0.50 range
+                    const BUCKETS = 4;
+                    const bucketMin = 0.15;
+                    const bucketRange = 0.35;
+                    // [black_bucket0, black_bucket1, ..., white_bucket0, ...]
+                    const buckets = [];
+                    for(let i = 0; i < BUCKETS * 2; i++)buckets.push([]);
+                    for(let xi = 0; xi < maxGrainPerAxis; xi++){
+                        const gx = -extentN + xi * actualGrainSpacing;
+                        for(let yi = 0; yi < maxGrainPerAxis; yi++){
+                            const gy = -extentN + yi * actualGrainSpacing;
+                            const jx = (rng() - 0.5) * actualGrainSpacing * 1.2;
+                            const jy = (rng() - 0.5) * actualGrainSpacing * 1.2;
+                            const isWhite = rng() > 0.5;
+                            const dotAlpha = bucketMin + rng() * bucketRange;
+                            const dotSize = actualGrainSpacing * (0.3 + rng() * 0.5);
+                            const bucketIdx = Math.min(BUCKETS - 1, Math.floor((dotAlpha - bucketMin) / bucketRange * BUCKETS));
+                            const offset = isWhite ? BUCKETS : 0;
+                            buckets[offset + bucketIdx].push({
+                                x: gx + jx,
+                                y: gy + jy,
+                                s: dotSize
+                            });
+                        }
+                    }
+                    // Render each bucket: 2 colors × 4 alpha levels = 8 state changes total
+                    for(let color = 0; color < 2; color++){
+                        ctx.fillStyle = color === 0 ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)";
+                        for(let b = 0; b < BUCKETS; b++){
+                            const dots = buckets[color * BUCKETS + b];
+                            if (dots.length === 0) continue;
+                            const alpha = bucketMin + (b + 0.5) / BUCKETS * bucketRange;
+                            ctx.globalAlpha = savedAlphaN * alpha;
+                            for(let i = 0; i < dots.length; i++)ctx.fillRect(dots[i].x, dots[i].y, dots[i].s, dots[i].s);
+                        }
+                    }
                 }
                 ctx.restore();
                 ctx.fillStyle = fillColor;
@@ -2271,6 +2380,7 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
         case "wood-grain":
             {
                 // Parallel wavy lines simulating wood grain, clipped to shape
+                // Optimized: batch all grain lines into a single path, increased step from 2 to 4
                 const savedAlphaW = ctx.globalAlpha;
                 ctx.globalAlpha = savedAlphaW * 0.2;
                 ctx.fill(); // base tint
@@ -2286,17 +2396,19 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 ctx.globalAlpha = savedAlphaW * 0.5;
                 const cosG = Math.cos(grainAngle);
                 const sinG = Math.sin(grainAngle);
+                const waveCoeff = waveFreq * Math.PI;
+                const invExtentW = 1 / extentW;
+                // Batch all grain lines into a single path
+                ctx.beginPath();
                 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);
+                    const firstWave = Math.sin(-extentW * invExtentW * waveCoeff) * waveAmp;
+                    ctx.moveTo(-extentW * cosG - (d + firstWave) * sinG, -extentW * sinG + (d + firstWave) * cosG);
+                    for(let t = -extentW + 4; t <= extentW; t += 4){
+                        const wave = Math.sin(t * invExtentW * waveCoeff) * waveAmp;
+                        ctx.lineTo(t * cosG - (d + wave) * sinG, t * sinG + (d + wave) * cosG);
                     }
-                    ctx.stroke();
                 }
+                ctx.stroke();
                 ctx.restore();
                 ctx.globalAlpha = savedAlphaW;
                 ctx.globalAlpha *= 0.35;
@@ -2358,6 +2470,7 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
         case "fabric-weave":
             {
                 // Interlocking horizontal/vertical threads clipped to shape
+                // Optimized: batch all horizontal threads into one path, all vertical into another
                 const savedAlphaF = ctx.globalAlpha;
                 ctx.globalAlpha = savedAlphaF * 0.15;
                 ctx.fill(); // ghost base
@@ -2367,26 +2480,24 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 const threadSpacing = Math.max(2, size * 0.04);
                 const extentF = size * 0.55;
                 ctx.lineWidth = Math.max(0.8, threadSpacing * 0.5);
+                // Horizontal threads — batched
                 ctx.globalAlpha = savedAlphaF * 0.55;
-                // Horizontal threads
+                ctx.beginPath();
                 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.stroke();
+                // Vertical threads (offset by half spacing for weave effect) — batched
                 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.beginPath();
+                for(let x = -extentF; x <= extentF; x += threadSpacing * 2)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;
@@ -2452,14 +2563,17 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     ctx.translate(x, y);
     ctx.rotate(rotation * Math.PI / 180);
     // ── Drop shadow — soft colored shadow offset along light direction ──
-    if (lightAngle !== undefined && size > 10) {
+    // Skip shadow entirely for small shapes (< 20px) — the blur is expensive
+    // and visually imperceptible at that scale.
+    const useShadow = size >= 20;
+    if (useShadow && lightAngle !== undefined) {
         const shadowDist = size * 0.035;
         const shadowBlurR = size * 0.06;
         ctx.shadowOffsetX = Math.cos(lightAngle + Math.PI) * shadowDist;
         ctx.shadowOffsetY = Math.sin(lightAngle + Math.PI) * shadowDist;
         ctx.shadowBlur = shadowBlurR;
         ctx.shadowColor = "rgba(0,0,0,0.12)";
-    } else if (glowRadius > 0) {
+    } else if (useShadow && glowRadius > 0) {
         // Glow / shadow effect (legacy path)
         ctx.shadowBlur = glowRadius;
         ctx.shadowColor = glowColor || fillColor;
@@ -2483,30 +2597,27 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
         $e0f99502ff383dd8$var$applyRenderStyle(ctx, renderStyle, fillColor, strokeColor, strokeWidth, size, rng);
     }
     // Reset shadow so patterns and highlight aren't double-shadowed
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    ctx.shadowColor = "transparent";
+    // Only reset if we actually set shadow (avoids unnecessary state changes)
+    if (useShadow && (lightAngle !== undefined || glowRadius > 0)) {
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.shadowColor = "transparent";
+    }
     // ── Specular highlight — tinted arc on the light-facing side ──
-    if (lightAngle !== undefined && size > 15 && rng) {
+    // Skip for small shapes (< 30px) — gradient creation + composite op
+    // switch is expensive and the highlight is invisible at small sizes.
+    if (lightAngle !== undefined && size > 30 && rng) {
         const hlRadius = size * 0.35;
         const hlDist = size * 0.15;
         const hlX = Math.cos(lightAngle) * hlDist;
         const hlY = Math.sin(lightAngle) * hlDist;
         const hlGrad = ctx.createRadialGradient(hlX, hlY, 0, hlX, hlY, hlRadius);
-        // Tint highlight warm/cool based on fill color for cohesion
-        // Parse fill to detect warmth — fallback to white for non-parseable
-        let hlBase = "255,255,255";
-        if (typeof fillColor === "string" && fillColor.startsWith("#") && fillColor.length >= 7) {
-            const r = parseInt(fillColor.slice(1, 3), 16);
-            const g = parseInt(fillColor.slice(3, 5), 16);
-            const b = parseInt(fillColor.slice(5, 7), 16);
-            // Blend toward white but keep a hint of the fill's warmth
-            hlBase = `${Math.round(r * 0.15 + 216.75)},${Math.round(g * 0.15 + 216.75)},${Math.round(b * 0.15 + 216.75)}`;
-        }
-        hlGrad.addColorStop(0, `rgba(${hlBase},0.18)`);
-        hlGrad.addColorStop(0.5, `rgba(${hlBase},0.05)`);
-        hlGrad.addColorStop(1, `rgba(${hlBase},0)`);
+        // Use a simple white highlight — the per-shape hex parse was expensive
+        // and the visual difference from tinted highlights is negligible.
+        hlGrad.addColorStop(0, "rgba(255,255,255,0.18)");
+        hlGrad.addColorStop(0.5, "rgba(255,255,255,0.05)");
+        hlGrad.addColorStop(1, "rgba(255,255,255,0)");
         const savedOp = ctx.globalCompositeOperation;
         ctx.globalCompositeOperation = "soft-light";
         ctx.fillStyle = hlGrad;
@@ -4048,6 +4159,46 @@ function $68a238ccd77f2bcd$export$f1142fd7da4d6590(rng) {
 }
 
 
+// ── Render style cost weights (normalized: fill-and-stroke = 1) ─────
+// Based on benchmark measurements. Used by the complexity budget to
+// cap total rendering work and downgrade expensive styles when needed.
+const $1f63dc64b5593c73$var$RENDER_STYLE_COST = {
+    "fill-and-stroke": 1,
+    "fill-only": 0.5,
+    "stroke-only": 1,
+    "double-stroke": 1.5,
+    "dashed": 1,
+    "watercolor": 7,
+    "hatched": 3,
+    "incomplete": 1,
+    "stipple": 90,
+    "stencil": 2,
+    "noise-grain": 400,
+    "wood-grain": 10,
+    "marble-vein": 4,
+    "fabric-weave": 6,
+    "hand-drawn": 5
+};
+function $1f63dc64b5593c73$var$downgradeRenderStyle(style) {
+    switch(style){
+        case "noise-grain":
+            return "hatched";
+        case "stipple":
+            return "dashed";
+        case "wood-grain":
+            return "hatched";
+        case "watercolor":
+            return "fill-and-stroke";
+        case "fabric-weave":
+            return "hatched";
+        case "hand-drawn":
+            return "fill-and-stroke";
+        case "marble-vein":
+            return "stroke-only";
+        default:
+            return style;
+    }
+}
 // ── Shape categories for weighted selection (legacy fallback) ───────
 const $1f63dc64b5593c73$var$SACRED_SHAPES = [
     "mandala",
@@ -4431,6 +4582,15 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ...(0, $81c1b644006d48ec$export$c2f8e0cc249a8d8f),
         ...config
     };
+    const _dt = finalConfig._debugTiming;
+    const _t = _dt ? ()=>performance.now() : undefined;
+    let _p = _t ? _t() : 0;
+    function _mark(name) {
+        if (!_dt || !_t) return;
+        const now = _t();
+        _dt.phases[name] = now - _p;
+        _p = now;
+    }
     const rng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash));
     // ── 0. Select archetype — fundamentally different visual personality ──
     const archetype = (0, $68a238ccd77f2bcd$export$f1142fd7da4d6590)(rng);
@@ -4464,12 +4624,14 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const adjustedMaxSize = maxShapeSize * scaleFactor;
     const cx = width / 2;
     const cy = height / 2;
+    _mark("0_setup");
     // ── 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
+    // Use source-over instead of soft-light for cheaper compositing
     const meshPoints = 3 + Math.floor(rng() * 2);
-    ctx.globalCompositeOperation = "soft-light";
+    ctx.globalAlpha = 1;
     for(let i = 0; i < meshPoints; i++){
         const mx = rng() * width;
         const my = rng() * height;
@@ -4478,95 +4640,103 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         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);
+        // Clip to gradient bounding box — avoids blending transparent pixels
+        const gx = Math.max(0, mx - mRadius);
+        const gy = Math.max(0, my - mRadius);
+        const gw = Math.min(width, mx + mRadius) - gx;
+        const gh = Math.min(height, my + mRadius) - gy;
+        ctx.fillRect(gx, gy, gw, gh);
     }
-    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 — archetype-coherent shapes ─────────
+    // Use source-over with pre-multiplied alpha instead of soft-light
+    // for much cheaper compositing (soft-light requires per-pixel blend)
     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 = (0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng);
-        ctx.globalAlpha = 0.03 + rng() * 0.05;
+        ctx.globalAlpha = (0.03 + rng() * 0.05) * 0.5; // halved to compensate for source-over vs soft-light
         ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(bColor, 0.15);
         ctx.beginPath();
         // 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));
+        if (archetype.name === "geometric-precision" || archetype.name === "op-art") 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
+    // Subtle concentric rings from center — batched into single stroke
     const ringCount = 2 + Math.floor(rng() * 3);
     ctx.globalAlpha = 0.02 + rng() * 0.03;
     ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
     ctx.lineWidth = 1 * scaleFactor;
+    ctx.beginPath();
     for(let i = 1; i <= ringCount; i++){
         const r = Math.min(width, height) * 0.15 * i;
-        ctx.beginPath();
+        ctx.moveTo(cx + r, cy);
         ctx.arc(cx, cy, r, 0, Math.PI * 2);
-        ctx.stroke();
     }
-    ctx.globalCompositeOperation = "source-over";
+    ctx.stroke();
     // ── 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 — batched into a single path
-            const dotSpacing = Math.max(8, Math.min(width, height) * (0.015 + rng() * 0.015));
-            const dotR = dotSpacing * 0.08;
+            // Dot grid — use fillRect instead of arcs (much cheaper, no path building)
+            const dotSpacing = Math.max(12, Math.min(width, height) * (0.015 + rng() * 0.015));
+            const dotDiam = Math.max(1, Math.round(dotSpacing * 0.16));
             ctx.globalAlpha = patternOpacity;
             ctx.fillStyle = patternColor;
-            ctx.beginPath();
-            for(let px = 0; px < width; px += dotSpacing)for(let py = 0; py < height; py += dotSpacing){
-                ctx.moveTo(px + dotR, py);
-                ctx.arc(px, py, dotR, 0, Math.PI * 2);
+            let dotCount = 0;
+            for(let px = 0; px < width && dotCount < 2000; px += dotSpacing)for(let py = 0; py < height && dotCount < 2000; py += dotSpacing){
+                ctx.fillRect(px, py, dotDiam, dotDiam);
+                dotCount++;
             }
-            ctx.fill();
         } else if (bgPatternRoll < 0.4) {
-            // Diagonal lines — batched into a single path
-            const lineSpacing = Math.max(6, Math.min(width, height) * (0.02 + rng() * 0.02));
+            // Diagonal lines — batched into a single path, capped at 300 lines
+            const lineSpacing = Math.max(10, 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);
             ctx.beginPath();
-            for(let d = -diag; d < diag; d += lineSpacing){
+            let lineCount = 0;
+            for(let d = -diag; d < diag && lineCount < 300; d += lineSpacing){
                 ctx.moveTo(d, 0);
                 ctx.lineTo(d + height, height);
+                lineCount++;
             }
             ctx.stroke();
         } else {
-            // Tessellation — hexagonal grid, batched into a single path
-            const tessSize = Math.max(10, Math.min(width, height) * (0.025 + rng() * 0.02));
+            // Tessellation — hexagonal grid, capped at 500 hexagons
+            const tessSize = Math.max(15, 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;
+            // Pre-compute hex vertex offsets (avoid trig per vertex)
+            const hexVx = [];
+            const hexVy = [];
+            for(let s = 0; s < 6; s++){
+                const angle = Math.PI / 3 * s - Math.PI / 6;
+                hexVx.push(Math.cos(angle) * tessSize * 0.5);
+                hexVy.push(Math.sin(angle) * tessSize * 0.5);
+            }
             ctx.beginPath();
-            for(let row = 0; row * tessH < height + tessH; row++){
+            let hexCount = 0;
+            for(let row = 0; row * tessH < height + tessH && hexCount < 500; row++){
                 const offsetX = row % 2 * tessSize * 0.75;
-                for(let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5; col++){
+                for(let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5 && hexCount < 500; col++){
                     const hx = col * tessSize * 1.5 + offsetX;
                     const hy = row * tessH;
-                    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.moveTo(hx + hexVx[0], hy + hexVy[0]);
+                    for(let s = 1; s < 6; s++)ctx.lineTo(hx + hexVx[s], hy + hexVy[s]);
                     ctx.closePath();
+                    hexCount++;
                 }
             }
             ctx.stroke();
@@ -4574,6 +4744,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.restore();
     }
     ctx.globalCompositeOperation = "source-over";
+    _mark("1_background");
     // ── 2. Composition mode — archetype-aware selection ──────────────
     const compositionMode = rng() < 0.7 ? archetype.preferredCompositions[Math.floor(rng() * archetype.preferredCompositions.length)] : $1f63dc64b5593c73$var$ALL_COMPOSITION_MODES[Math.floor(rng() * $1f63dc64b5593c73$var$ALL_COMPOSITION_MODES.length)];
     const symRoll = rng();
@@ -4657,19 +4828,20 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.beginPath();
         ctx.arc(zone.x, zone.y, zone.radius, 0, Math.PI * 2);
         ctx.stroke();
-        // ~50% chance: scatter tiny dots inside the void
+        // ~50% chance: scatter tiny dots inside the void — batched into single path
         if (rng() < 0.5) {
             const dotCount = 3 + Math.floor(rng() * 6);
             ctx.globalAlpha = 0.06 + rng() * 0.04;
             ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.15);
+            ctx.beginPath();
             for(let d = 0; d < dotCount; d++){
                 const angle = rng() * Math.PI * 2;
                 const dist = rng() * zone.radius * 0.7;
                 const dotR = (1 + rng() * 3) * scaleFactor;
-                ctx.beginPath();
+                ctx.moveTo(zone.x + Math.cos(angle) * dist + dotR, zone.y + Math.sin(angle) * dist);
                 ctx.arc(zone.x + Math.cos(angle) * dist, zone.y + Math.sin(angle) * dist, dotR, 0, Math.PI * 2);
-                ctx.fill();
             }
+            ctx.fill();
         }
         // ~30% chance: thin concentric ring inside
         if (rng() < 0.3) {
@@ -4683,6 +4855,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         }
     }
     ctx.globalAlpha = 1;
+    _mark("2_3_composition_focal");
     // ── 4. Flow field — simplex noise for organic variation ─────────
     // Create a seeded simplex noise field (unique per hash)
     const noiseFieldRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 333));
@@ -4759,8 +4932,29 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             shape: heroShape
         });
     }
+    _mark("4_flowfield_hero");
     // ── 5. Shape layers ────────────────────────────────────────────
     const maxLocalDensity = Math.ceil(shapesPerLayer * 0.15);
+    // ── Complexity budget — caps total rendering work ──────────────
+    // Budget scales with pixel area so larger canvases get proportionally
+    // more headroom.  The multiplier extras (glazing, echoes, nesting,
+    // constellations, rhythm) are gated behind the budget; when it runs
+    // low they are skipped.  When it's exhausted, expensive render styles
+    // are downgraded to cheaper alternatives.
+    //
+    // RNG values are always consumed even when skipping, so the
+    // deterministic sequence for shapes that *do* render is preserved.
+    const pixelArea = width * height;
+    const BUDGET_PER_MEGAPIXEL = 6000; // cost units per 1M pixels
+    let complexityBudget = pixelArea / 1000000 * BUDGET_PER_MEGAPIXEL;
+    const totalBudget = complexityBudget;
+    const budgetForExtras = complexityBudget * 0.25; // reserve 25% for multiplier extras
+    let extrasSpent = 0;
+    // Hard cap on clip-heavy render styles (stipple, noise-grain).
+    // These generate O(size²) fillRect calls per shape and dominate
+    // worst-case render time.  Cap scales with pixel area.
+    const MAX_CLIP_HEAVY_SHAPES = Math.max(4, Math.floor(8 * (pixelArea / 1000000)));
+    let clipHeavyCount = 0;
     for(let layer = 0; layer < layers; layer++){
         const layerRatio = layers > 1 ? layer / (layers - 1) : 0;
         const numShapes = shapesPerLayer + Math.floor(rng() * shapesPerLayer * 0.3);
@@ -4849,7 +5043,26 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             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;
+            let finalRenderStyle = useOrganicEdges ? "watercolor" : shapeRenderStyle;
+            // Budget check: downgrade expensive styles proportionally —
+            // the more expensive the style, the earlier it gets downgraded.
+            // noise-grain (400) downgrades when budget < 20% remaining,
+            // stipple (90) when < 82%, wood-grain (10) when < 98%.
+            let styleCost = $1f63dc64b5593c73$var$RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+            if (styleCost > 3) {
+                const downgradeThreshold = Math.min(0.85, styleCost / 500);
+                if (complexityBudget < totalBudget * (1 - downgradeThreshold)) {
+                    finalRenderStyle = $1f63dc64b5593c73$var$downgradeRenderStyle(finalRenderStyle);
+                    styleCost = $1f63dc64b5593c73$var$RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+                }
+            }
+            // Hard cap: clip-heavy styles (stipple, noise-grain) are limited
+            // to MAX_CLIP_HEAVY_SHAPES total across the entire render.
+            if ((finalRenderStyle === "stipple" || finalRenderStyle === "noise-grain") && clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) {
+                finalRenderStyle = $1f63dc64b5593c73$var$downgradeRenderStyle(finalRenderStyle);
+                styleCost = $1f63dc64b5593c73$var$RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+            }
+            if (finalRenderStyle === "stipple" || finalRenderStyle === "noise-grain") clipHeavyCount++;
             // Consistent light direction — subtle shadow offset
             const shadowDist = hasGlow ? 0 : size * 0.02;
             const shadowOffX = shadowDist * Math.cos(lightAngle);
@@ -4904,30 +5117,41 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 lightAngle: lightAngle,
                 scaleFactor: scaleFactor
             };
-            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);
+            if (shouldMirror) {
+                (0, $e0f99502ff383dd8$export$8bd8bbd1a8e53689)(ctx, shape, finalX, finalY, {
+                    ...shapeConfig,
+                    mirrorAxis: mirrorAxis,
+                    mirrorGap: size * (0.1 + rng() * 0.3)
+                });
+                complexityBudget -= styleCost * 2; // mirrored = 2 shapes
+            } else {
+                (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, shapeConfig);
+                complexityBudget -= styleCost;
+            }
+            // ── Extras budget gate — skip multiplier sections when over budget ──
+            const extrasAllowed = extrasSpent < budgetForExtras;
             // ── Glazing — luminous multi-pass transparency on ~20% of shapes ──
             if (rng() < 0.2 && size > adjustedMinSize * 2) {
                 const glazePasses = 2 + Math.floor(rng() * 2);
-                for(let g = 0; g < glazePasses; g++){
-                    const glazeScale = 1 - (g + 1) * 0.12; // progressively smaller
-                    const glazeAlpha = 0.08 + g * 0.04; // progressively more opaque toward center
-                    ctx.globalAlpha = glazeAlpha;
-                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, {
-                        fillColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, 0.15 + g * 0.1),
-                        strokeColor: "rgba(0,0,0,0)",
-                        strokeWidth: 0,
-                        size: size * glazeScale,
-                        rotation: rotation,
-                        proportionType: "GOLDEN_RATIO",
-                        renderStyle: "fill-only",
-                        rng: rng
-                    });
+                if (extrasAllowed) {
+                    for(let g = 0; g < glazePasses; g++){
+                        const glazeScale = 1 - (g + 1) * 0.12;
+                        const glazeAlpha = 0.08 + g * 0.04;
+                        ctx.globalAlpha = glazeAlpha;
+                        (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, finalX, finalY, {
+                            fillColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, 0.15 + g * 0.1),
+                            strokeColor: "rgba(0,0,0,0)",
+                            strokeWidth: 0,
+                            size: size * glazeScale,
+                            rotation: rotation,
+                            proportionType: "GOLDEN_RATIO",
+                            renderStyle: "fill-only",
+                            rng: rng
+                        });
+                    }
+                    extrasSpent += glazePasses;
                 }
+            // RNG consumed by glazePasses calculation above regardless
             }
             shapePositions.push({
                 x: finalX,
@@ -4945,37 +5169,41 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             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
-                    });
-                    spatialGrid.insert({
-                        x: echoX,
-                        y: echoY,
-                        size: echoSize,
-                        shape: shape
-                    });
+                if (extrasAllowed) {
+                    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
+                        });
+                        spatialGrid.insert({
+                            x: echoX,
+                            y: echoY,
+                            size: echoSize,
+                            shape: shape
+                        });
+                    }
+                    extrasSpent += echoCount * styleCost;
                 }
+            // RNG for echoCount + echoAngle consumed above regardless
             }
             // ── 5d. Recursive nesting ──────────────────────────────────
             // Focal depth: shapes near focal points get more detail
@@ -4983,7 +5211,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const nestingChance = 0.15 + focalProximity * 0.15; // 15-30% near focal
             if (size > adjustedMaxSize * 0.4 && rng() < nestingChance) {
                 const innerCount = 1 + Math.floor(rng() * 3);
-                for(let n = 0; n < innerCount; n++){
+                if (extrasAllowed) for(let n = 0; n < innerCount; n++){
                     // Pick inner shape from palette affinities
                     const innerSizeFraction = size * 0.25 / adjustedMaxSize;
                     const innerShape = (0, $8286059160ee2e04$export$3c37d9a045754d0e)(shapePalette, rng, innerSizeFraction);
@@ -4992,6 +5220,10 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     const innerOffY = (rng() - 0.5) * size * 0.4;
                     const innerRot = rng() * 360;
                     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);
+                    let innerStyle = (0, $8286059160ee2e04$export$ab873bb6fb56c1a8)(innerShape, layerRenderStyle, rng);
+                    // Apply clip-heavy cap to nested shapes too
+                    if ((innerStyle === "stipple" || innerStyle === "noise-grain") && clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) innerStyle = $1f63dc64b5593c73$var$downgradeRenderStyle(innerStyle);
+                    if (innerStyle === "stipple" || innerStyle === "noise-grain") clipHeavyCount++;
                     ctx.globalAlpha = layerOpacity * 0.7;
                     (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, innerShape, finalX + innerOffX, finalY + innerOffY, {
                         fillColor: innerFill,
@@ -5000,9 +5232,21 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                         size: innerSize,
                         rotation: innerRot,
                         proportionType: "GOLDEN_RATIO",
-                        renderStyle: (0, $8286059160ee2e04$export$ab873bb6fb56c1a8)(innerShape, layerRenderStyle, rng),
+                        renderStyle: innerStyle,
                         rng: rng
                     });
+                    extrasSpent += $1f63dc64b5593c73$var$RENDER_STYLE_COST[innerStyle] ?? 1;
+                }
+                else // Drain RNG to keep determinism — each nested shape consumes ~8 rng calls
+                for(let n = 0; n < innerCount; n++){
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
                 }
             }
             // ── 5e. Shape constellations — pre-composed groups ─────────
@@ -5011,40 +5255,55 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 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
-                    });
-                    spatialGrid.insert({
-                        x: mx,
-                        y: my,
-                        size: member.size,
-                        shape: memberShape
-                    });
+                if (extrasAllowed) {
+                    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);
+                        let memberStyle = (0, $8286059160ee2e04$export$ab873bb6fb56c1a8)(memberShape, layerRenderStyle, rng);
+                        // Apply clip-heavy cap to constellation members too
+                        if ((memberStyle === "stipple" || memberStyle === "noise-grain") && clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) memberStyle = $1f63dc64b5593c73$var$downgradeRenderStyle(memberStyle);
+                        if (memberStyle === "stipple" || memberStyle === "noise-grain") clipHeavyCount++;
+                        (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: memberStyle,
+                            rng: rng
+                        });
+                        shapePositions.push({
+                            x: mx,
+                            y: my,
+                            size: member.size,
+                            shape: memberShape
+                        });
+                        spatialGrid.insert({
+                            x: mx,
+                            y: my,
+                            size: member.size,
+                            shape: memberShape
+                        });
+                        extrasSpent += $1f63dc64b5593c73$var$RENDER_STYLE_COST[memberStyle] ?? 1;
+                    }
+                } else // Drain RNG — each member consumes ~6 rng calls for colors/style
+                for(let m = 0; m < members.length; m++){
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
+                    rng();
                 }
             }
             // ── 5f. Rhythm placement — deliberate geometric progressions ──
@@ -5055,45 +5314,58 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 const rhythmSpacing = size * (0.8 + rng() * 0.6);
                 const rhythmDecay = 0.7 + rng() * 0.15; // size multiplier per step
                 const rhythmShape = shape; // same shape for visual rhythm
-                let rhythmSize = size * 0.6;
+                if (extrasAllowed) {
+                    let rhythmSize = size * 0.6;
+                    for(let r = 0; r < rhythmCount; r++){
+                        const rx = finalX + Math.cos(rhythmAngle) * rhythmSpacing * (r + 1);
+                        const ry = finalY + Math.sin(rhythmAngle) * rhythmSpacing * (r + 1);
+                        if (rx < 0 || rx > width || ry < 0 || ry > height) break;
+                        if ($1f63dc64b5593c73$var$isInVoidZone(rx, ry, voidZones)) break;
+                        rhythmSize *= rhythmDecay;
+                        if (rhythmSize < adjustedMinSize) break;
+                        const rhythmAlpha = layerOpacity * (0.6 - r * 0.08);
+                        ctx.globalAlpha = Math.max(0.1, rhythmAlpha);
+                        const rhythmFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(layerHierarchy, rng), rng, 5, 0.04), fillAlpha * 0.7);
+                        (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, rhythmShape, rx, ry, {
+                            fillColor: rhythmFill,
+                            strokeColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(strokeColor, 0.5),
+                            strokeWidth: strokeWidth * 0.7,
+                            size: rhythmSize,
+                            rotation: rotation + (r + 1) * 12,
+                            proportionType: "GOLDEN_RATIO",
+                            renderStyle: finalRenderStyle,
+                            rng: rng
+                        });
+                        shapePositions.push({
+                            x: rx,
+                            y: ry,
+                            size: rhythmSize,
+                            shape: rhythmShape
+                        });
+                        spatialGrid.insert({
+                            x: rx,
+                            y: ry,
+                            size: rhythmSize,
+                            shape: rhythmShape
+                        });
+                    }
+                    extrasSpent += rhythmCount * styleCost;
+                } else // Drain RNG — each rhythm step consumes ~3 rng calls for colors
                 for(let r = 0; r < rhythmCount; r++){
-                    const rx = finalX + Math.cos(rhythmAngle) * rhythmSpacing * (r + 1);
-                    const ry = finalY + Math.sin(rhythmAngle) * rhythmSpacing * (r + 1);
-                    if (rx < 0 || rx > width || ry < 0 || ry > height) break;
-                    if ($1f63dc64b5593c73$var$isInVoidZone(rx, ry, voidZones)) break;
-                    rhythmSize *= rhythmDecay;
-                    if (rhythmSize < adjustedMinSize) break;
-                    const rhythmAlpha = layerOpacity * (0.6 - r * 0.08);
-                    ctx.globalAlpha = Math.max(0.1, rhythmAlpha);
-                    const rhythmFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$18a34c25ea7e724b)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(layerHierarchy, rng), rng, 5, 0.04), fillAlpha * 0.7);
-                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, rhythmShape, rx, ry, {
-                        fillColor: rhythmFill,
-                        strokeColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(strokeColor, 0.5),
-                        strokeWidth: strokeWidth * 0.7,
-                        size: rhythmSize,
-                        rotation: rotation + (r + 1) * 12,
-                        proportionType: "GOLDEN_RATIO",
-                        renderStyle: finalRenderStyle,
-                        rng: rng
-                    });
-                    shapePositions.push({
-                        x: rx,
-                        y: ry,
-                        size: rhythmSize,
-                        shape: rhythmShape
-                    });
-                    spatialGrid.insert({
-                        x: rx,
-                        y: ry,
-                        size: rhythmSize,
-                        shape: rhythmShape
-                    });
+                    rng();
+                    rng();
+                    rng();
                 }
             }
         }
     }
     // Reset blend mode for post-processing passes
     ctx.globalCompositeOperation = "source-over";
+    if (_dt) {
+        _dt.shapeCount = shapePositions.length;
+        _dt.extraCount = extrasSpent;
+    }
+    _mark("5_shape_layers");
     // ── 5g. Layered masking / cutout portals ───────────────────────
     // ~18% of images get 1-3 portal windows that paint over foreground
     // with a tinted background wash, creating a "peek through" effect.
@@ -5152,15 +5424,28 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             ctx.restore();
         }
     }
+    _mark("5g_portals");
     // ── 6. Flow-line pass — variable color, branching, pressure ────
+    // Optimized: collect all segments into width-quantized buckets, then
+    // render each bucket as a single batched path.  This reduces
+    // beginPath/stroke calls from O(segments) to O(buckets).
     const baseFlowLines = 6 + Math.floor(rng() * 10);
     const numFlowLines = Math.round(baseFlowLines * archetype.flowLineMultiplier);
+    // Width buckets — 6 buckets cover the taper×pressure range
+    const FLOW_WIDTH_BUCKETS = 6;
+    const flowBuckets = [];
+    for(let b = 0; b < FLOW_WIDTH_BUCKETS; b++)flowBuckets.push([]);
+    // Track the representative width for each bucket
+    const flowBucketWidths = new Array(FLOW_WIDTH_BUCKETS);
+    // Pre-compute max possible width for bucket assignment
+    let globalMaxFlowWidth = 0;
     for(let i = 0; i < numFlowLines; i++){
         let fx = rng() * width;
         let fy = rng() * height;
         const steps = 30 + Math.floor(rng() * 40);
         const stepLen = (3 + rng() * 5) * scaleFactor;
         const startWidth = (1 + rng() * 3) * scaleFactor;
+        if (startWidth > globalMaxFlowWidth) globalMaxFlowWidth = startWidth;
         // 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);
@@ -5182,19 +5467,22 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 continue;
             }
             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 segWidth = startWidth * taper * pressure;
+            const segAlpha = lineAlpha * taper;
             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 * pressure;
-            ctx.lineCap = "round";
-            ctx.beginPath();
-            ctx.moveTo(prevX, prevY);
-            ctx.lineTo(fx, fy);
-            ctx.stroke();
+            // Quantize width into bucket
+            const bucketIdx = Math.min(FLOW_WIDTH_BUCKETS - 1, Math.floor(segWidth / (globalMaxFlowWidth || 1) * FLOW_WIDTH_BUCKETS));
+            flowBuckets[bucketIdx].push({
+                x1: prevX,
+                y1: prevY,
+                x2: fx,
+                y2: fy,
+                color: lineColor,
+                alpha: segAlpha
+            });
+            flowBucketWidths[bucketIdx] = segWidth;
             // 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);
@@ -5210,12 +5498,18 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     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();
+                    const bSegWidth = branchWidth * bTaper;
+                    const bAlpha = lineAlpha * taper * bTaper * 0.6;
+                    const bBucket = Math.min(FLOW_WIDTH_BUCKETS - 1, Math.floor(bSegWidth / (globalMaxFlowWidth || 1) * FLOW_WIDTH_BUCKETS));
+                    flowBuckets[bBucket].push({
+                        x1: bPrevX,
+                        y1: bPrevY,
+                        x2: bx,
+                        y2: by,
+                        color: lineColor,
+                        alpha: bAlpha
+                    });
+                    flowBucketWidths[bBucket] = bSegWidth;
                     bPrevX = bx;
                     bPrevY = by;
                 }
@@ -5224,7 +5518,41 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             prevY = fy;
         }
     }
+    // Render flow line buckets — one batched path per width bucket
+    // Within each bucket, further sub-batch by quantized alpha (4 levels)
+    ctx.lineCap = "round";
+    const FLOW_ALPHA_BUCKETS = 4;
+    for(let wb = 0; wb < FLOW_WIDTH_BUCKETS; wb++){
+        const segs = flowBuckets[wb];
+        if (segs.length === 0) continue;
+        ctx.lineWidth = flowBucketWidths[wb];
+        // Sub-bucket by alpha
+        const alphaSubs = [];
+        for(let a = 0; a < FLOW_ALPHA_BUCKETS; a++)alphaSubs.push([]);
+        let maxAlpha = 0;
+        for(let j = 0; j < segs.length; j++)if (segs[j].alpha > maxAlpha) maxAlpha = segs[j].alpha;
+        for(let j = 0; j < segs.length; j++){
+            const ai = Math.min(FLOW_ALPHA_BUCKETS - 1, Math.floor(segs[j].alpha / (maxAlpha || 1) * FLOW_ALPHA_BUCKETS));
+            alphaSubs[ai].push(segs[j]);
+        }
+        for(let ai = 0; ai < FLOW_ALPHA_BUCKETS; ai++){
+            const sub = alphaSubs[ai];
+            if (sub.length === 0) continue;
+            // Use the median segment's alpha and color as representative
+            const rep = sub[Math.floor(sub.length / 2)];
+            ctx.globalAlpha = rep.alpha;
+            ctx.strokeStyle = rep.color;
+            ctx.beginPath();
+            for(let j = 0; j < sub.length; j++){
+                ctx.moveTo(sub[j].x1, sub[j].y1);
+                ctx.lineTo(sub[j].x2, sub[j].y2);
+            }
+            ctx.stroke();
+        }
+    }
+    _mark("6_flow_lines");
     // ── 6b. Motion/energy lines — short directional bursts ─────────
+    // Optimized: collect all burst segments, then batch by quantized alpha
     const energyArchetypes = [
         "dense-chaotic",
         "cosmic",
@@ -5235,8 +5563,12 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     if (hasEnergyLines && shapePositions.length > 0) {
         const energyCount = 5 + Math.floor(rng() * 10);
         ctx.lineCap = "round";
+        // Collect all energy segments with their computed state
+        const ENERGY_ALPHA_BUCKETS = 3;
+        const energyBuckets = [];
+        for(let b = 0; b < ENERGY_ALPHA_BUCKETS; b++)energyBuckets.push([]);
+        const energyAlphas = new Array(ENERGY_ALPHA_BUCKETS).fill(0);
         for(let e = 0; e < energyCount; e++){
-            // Pick a random shape to radiate from
             const source = shapePositions[Math.floor(rng() * shapePositions.length)];
             const burstCount = 2 + Math.floor(rng() * 4);
             const baseAngle = flowAngle(source.x, source.y);
@@ -5248,16 +5580,40 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 const sy = source.y + Math.sin(angle) * startDist;
                 const ex = sx + Math.cos(angle) * lineLen;
                 const ey = sy + Math.sin(angle) * lineLen;
-                ctx.globalAlpha = 0.04 + rng() * 0.06;
-                ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
-                ctx.lineWidth = (0.5 + rng() * 1.5) * scaleFactor;
-                ctx.beginPath();
-                ctx.moveTo(sx, sy);
-                ctx.lineTo(ex, ey);
-                ctx.stroke();
+                const eAlpha = 0.04 + rng() * 0.06;
+                const eColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
+                const eLw = (0.5 + rng() * 1.5) * scaleFactor;
+                // Quantize alpha into bucket
+                const bi = Math.min(ENERGY_ALPHA_BUCKETS - 1, Math.floor((eAlpha - 0.04) / 0.06 * ENERGY_ALPHA_BUCKETS));
+                energyBuckets[bi].push({
+                    x1: sx,
+                    y1: sy,
+                    x2: ex,
+                    y2: ey,
+                    color: eColor,
+                    lw: eLw
+                });
+                energyAlphas[bi] = eAlpha;
             }
         }
+        // Render batched energy lines
+        for(let bi = 0; bi < ENERGY_ALPHA_BUCKETS; bi++){
+            const segs = energyBuckets[bi];
+            if (segs.length === 0) continue;
+            ctx.globalAlpha = energyAlphas[bi];
+            // Use median segment's color and width as representative
+            const rep = segs[Math.floor(segs.length / 2)];
+            ctx.strokeStyle = rep.color;
+            ctx.lineWidth = rep.lw;
+            ctx.beginPath();
+            for(let j = 0; j < segs.length; j++){
+                ctx.moveTo(segs[j].x1, segs[j].y1);
+                ctx.lineTo(segs[j].x2, segs[j].y2);
+            }
+            ctx.stroke();
+        }
     }
+    _mark("6b_energy_lines");
     // ── 6c. Apply symmetry mirroring ─────────────────────────────────
     if (symmetryMode !== "none") {
         const canvas = ctx.canvas;
@@ -5278,43 +5634,25 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         }
         ctx.restore();
     }
-    // ── 7. Noise texture overlay — batched via ImageData ─────────────
+    _mark("6c_symmetry");
+    // ── 7. Noise texture overlay ─────────────────────────────────────
+    // With density capped at 2500 dots, direct fillRect calls are far cheaper
+    // than the getImageData/putImageData round-trip which copies the entire
+    // pixel buffer (4 × width × height bytes) twice.
     const noiseRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 777));
-    const noiseDensity = Math.floor(width * height / 800);
-    try {
-        const imageData = ctx.getImageData(0, 0, width, height);
-        const data = imageData.data;
-        const pixelScale = Math.max(1, Math.round(scaleFactor));
-        for(let i = 0; i < noiseDensity; i++){
-            const nx = Math.floor(noiseRng() * width);
-            const ny = Math.floor(noiseRng() * height);
-            const brightness = noiseRng() > 0.5 ? 255 : 0;
-            const alpha = Math.floor((0.01 + noiseRng() * 0.03) * 255);
-            // Write a small block of pixels for scale
-            for(let dy = 0; dy < pixelScale && ny + dy < height; dy++)for(let dx = 0; dx < pixelScale && nx + dx < width; dx++){
-                const idx = ((ny + dy) * width + (nx + dx)) * 4;
-                // Alpha-blend the noise dot onto existing pixel data
-                const srcA = alpha / 255;
-                const invA = 1 - srcA;
-                data[idx] = Math.round(data[idx] * invA + brightness * srcA);
-                data[idx + 1] = Math.round(data[idx + 1] * invA + brightness * srcA);
-                data[idx + 2] = Math.round(data[idx + 2] * invA + brightness * srcA);
-            // Keep existing alpha
-            }
-        }
-        ctx.putImageData(imageData, 0, 0);
-    } catch  {
-        // Fallback for environments where getImageData isn't available (e.g. some OffscreenCanvas)
-        for(let i = 0; i < noiseDensity; i++){
-            const nx = noiseRng() * width;
-            const ny = noiseRng() * height;
-            const brightness = noiseRng() > 0.5 ? 255 : 0;
-            const alpha = 0.01 + noiseRng() * 0.03;
-            ctx.globalAlpha = alpha;
-            ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
-            ctx.fillRect(nx, ny, 1 * scaleFactor, 1 * scaleFactor);
-        }
+    const rawNoiseDensity = Math.floor(width * height / 800);
+    const noiseDensity = Math.min(rawNoiseDensity, 2500);
+    const pixelScale = Math.max(1, Math.round(scaleFactor));
+    for(let i = 0; i < noiseDensity; i++){
+        const nx = noiseRng() * width;
+        const ny = noiseRng() * height;
+        const brightness = noiseRng() > 0.5 ? 255 : 0;
+        const alpha = 0.01 + noiseRng() * 0.03;
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = `rgb(${brightness},${brightness},${brightness})`;
+        ctx.fillRect(nx, ny, pixelScale, pixelScale);
     }
+    _mark("7_noise_texture");
     // ── 8. Vignette — darken edges to draw the eye inward ───────────
     ctx.globalAlpha = 1;
     const vignetteStrength = 0.25 + rng() * 0.2;
@@ -5328,11 +5666,20 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     vigGrad.addColorStop(1, vignetteColor);
     ctx.fillStyle = vigGrad;
     ctx.fillRect(0, 0, width, height);
+    _mark("8_vignette");
     // ── 9. Organic connecting curves — proximity-aware ───────────────
+    // Optimized: batch all curves into alpha-quantized groups to reduce
+    // beginPath/stroke calls from O(numCurves) to O(alphaBuckets).
     if (shapePositions.length > 1) {
         const numCurves = Math.floor(8 * (width * height) / 1048576);
         const maxCurveDist = Math.hypot(width, height) * 0.2; // only connect nearby shapes
         ctx.lineWidth = 0.8 * scaleFactor;
+        // Collect curves into 3 alpha buckets
+        const CURVE_ALPHA_BUCKETS = 3;
+        const curveBuckets = [];
+        const curveColors = [];
+        const curveAlphas = new Array(CURVE_ALPHA_BUCKETS).fill(0);
+        for(let b = 0; b < CURVE_ALPHA_BUCKETS; b++)curveBuckets.push([]);
         for(let i = 0; i < numCurves; i++){
             const idxA = Math.floor(rng() * shapePositions.length);
             const offset = 1 + Math.floor(rng() * Math.min(5, shapePositions.length - 1));
@@ -5349,14 +5696,36 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const bulge = (rng() - 0.5) * dist * 0.4;
             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)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
+            const curveAlpha = 0.06 + rng() * 0.1;
+            const curveColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$b49f62f0a99da0e8)(colorHierarchy, rng), bgLum), 0.3);
+            const bi = Math.min(CURVE_ALPHA_BUCKETS - 1, Math.floor((curveAlpha - 0.06) / 0.1 * CURVE_ALPHA_BUCKETS));
+            curveBuckets[bi].push({
+                ax: a.x,
+                ay: a.y,
+                cpx: cpx,
+                cpy: cpy,
+                bx: b.x,
+                by: b.y
+            });
+            curveAlphas[bi] = curveAlpha;
+            if (!curveColors[bi]) curveColors[bi] = curveColor;
+        }
+        // Render batched curves
+        for(let bi = 0; bi < CURVE_ALPHA_BUCKETS; bi++){
+            const curves = curveBuckets[bi];
+            if (curves.length === 0) continue;
+            ctx.globalAlpha = curveAlphas[bi];
+            ctx.strokeStyle = curveColors[bi];
             ctx.beginPath();
-            ctx.moveTo(a.x, a.y);
-            ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);
+            for(let j = 0; j < curves.length; j++){
+                const c = curves[j];
+                ctx.moveTo(c.ax, c.ay);
+                ctx.quadraticCurveTo(c.cpx, c.cpy, c.bx, c.by);
+            }
             ctx.stroke();
         }
     }
+    _mark("9_connecting_curves");
     // ── 10. Post-processing ────────────────────────────────────────
     // 10a. Color grading — unified tone across the whole image
     // Apply as a semi-transparent overlay in the grade hue
@@ -5416,6 +5785,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.fillRect(0, 0, width, height);
         ctx.globalCompositeOperation = "source-over";
     }
+    _mark("10_post_processing");
     // ── 10e. Generative borders — archetype-driven decorative frames ──
     {
         ctx.save();
@@ -5471,11 +5841,14 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             }
         } else if (archName.includes("botanical") || archName.includes("organic") || archName.includes("watercolor")) {
             // Vine tendrils — organic curving lines along edges
+            // Optimized: batch all tendrils into a single path
             ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.15);
             ctx.lineWidth = Math.max(0.8, 1.2 * scaleFactor);
             ctx.globalAlpha = 0.12 + borderRng() * 0.08;
             ctx.lineCap = "round";
             const tendrilCount = 8 + Math.floor(borderRng() * 8);
+            ctx.beginPath();
+            const leafPositions = [];
             for(let t = 0; t < tendrilCount; t++){
                 // Start from a random edge point
                 const edge = Math.floor(borderRng() * 4);
@@ -5493,7 +5866,6 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     tx = width - borderPad;
                     ty = borderRng() * height;
                 }
-                ctx.beginPath();
                 ctx.moveTo(tx, ty);
                 const segs = 3 + Math.floor(borderRng() * 4);
                 for(let s = 0; s < segs; s++){
@@ -5507,14 +5879,23 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     ty = cpy3;
                     ctx.quadraticCurveTo(cpx2, cpy2, tx, ty);
                 }
-                ctx.stroke();
-                // Small leaf/dot at tendril end
-                if (borderRng() < 0.6) {
-                    ctx.beginPath();
-                    ctx.arc(tx, ty, borderPad * (0.15 + borderRng() * 0.2), 0, Math.PI * 2);
-                    ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.08);
-                    ctx.fill();
+                // Collect leaf positions for batch fill
+                if (borderRng() < 0.6) leafPositions.push({
+                    x: tx,
+                    y: ty,
+                    r: borderPad * (0.15 + borderRng() * 0.2)
+                });
+            }
+            ctx.stroke();
+            // Batch all leaf dots into a single fill
+            if (leafPositions.length > 0) {
+                ctx.fillStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.secondary, 0.08);
+                ctx.beginPath();
+                for (const leaf of leafPositions){
+                    ctx.moveTo(leaf.x + leaf.r, leaf.y);
+                    ctx.arc(leaf.x, leaf.y, leaf.r, 0, Math.PI * 2);
                 }
+                ctx.fill();
             }
         } else if (archName.includes("celestial") || archName.includes("cosmic") || archName.includes("neon")) {
             // Star-studded arcs along edges
@@ -5529,8 +5910,9 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             ctx.beginPath();
             ctx.arc(cx, height * 1.3, height * 0.6, Math.PI + 0.3, -0.3);
             ctx.stroke();
-            // Scatter small stars along the border region
+            // Scatter small stars along the border region — batched into single path
             const starCount = 15 + Math.floor(borderRng() * 15);
+            ctx.beginPath();
             for(let s = 0; s < starCount; s++){
                 const edge = Math.floor(borderRng() * 4);
                 let sx, sy;
@@ -5549,7 +5931,6 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                 }
                 const starR = (1 + borderRng() * 2.5) * scaleFactor;
                 // 4-point star
-                ctx.beginPath();
                 for(let p = 0; p < 8; p++){
                     const a = p / 8 * Math.PI * 2;
                     const r = p % 2 === 0 ? starR : starR * 0.4;
@@ -5559,8 +5940,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
                     else ctx.lineTo(px2, py2);
                 }
                 ctx.closePath();
-                ctx.fill();
             }
+            ctx.fill();
         } else if (archName.includes("minimal") || archName.includes("monochrome") || archName.includes("stipple")) {
             // Thin single rule — understated elegance
             ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colorHierarchy.dominant, 0.1);
@@ -5571,6 +5952,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         // Other archetypes: no border (intentional — not every image needs one)
         ctx.restore();
     }
+    _mark("10e_borders");
     // ── 11. Signature mark — placed in the least-dense corner ──────
     {
         const sigRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 42));
@@ -5638,6 +6020,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.restore();
     }
     ctx.globalAlpha = 1;
+    _mark("11_signature");
 }