{"index.html":"\n\n\n \n \n Prime Spiral Garden 🌸\n \n\n\n

Prime Spiral Garden

The Ulam spiral in bloom — scroll: zoom · drag: pan · hover: inspect

\n Color\n \n \n Numbers\n \n \n \n \n \n

\n\n

What is this?

In 1963, mathematician Stanisław Ulam got bored during\n a meeting. He doodled the integers in a spiral and circled the primes…\n and mysterious diagonals appeared — still unexplained\n today.

Those diagonals follow polynomials like n² + n + 41,\n strangely rich in primes. Twin primes (p, p+2), like 11\n and 13, are conjectured to be infinite — nobody has proved it.

🔍 Zoom in to read the numbers, hover to inspect any cell, and turn on\n the sound: every prime that blooms plays a note.

\n\n \n

\n\n \n\n\n","style.css":":root {\n --bg0: #05070f;\n --bg1: #0d1428;\n --ink: #e8edfa;\n --muted: #93a3c8;\n --leaf: #5ce0a5;\n --bloom: #ff6fae;\n --gold: #f2c37b;\n --line: rgba(147, 163, 200, 0.22);\n --glass: rgba(8, 12, 26, 0.78);\n}\n\n* { box-sizing: border-box; }\n\nhtml, body {\n margin: 0;\n height: 100%;\n}\n\nbody {\n display: flex;\n flex-direction: column;\n background: var(--bg0);\n color: var(--ink);\n font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n overflow: hidden;\n}\n\n/* ---------- top bar ---------- */\n.bar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 10px 24px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--line);\n background: rgba(5, 7, 15, 0.85);\n z-index: 5;\n}\n\nh1 {\n margin: 0;\n font-family: Georgia, \"Times New Roman\", serif;\n font-weight: 400;\n font-size: clamp(20px, 3vw, 28px);\n letter-spacing: 0.02em;\n background: linear-gradient(90deg, var(--leaf), var(--gold), var(--bloom));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\nh1 em { font-style: italic; }\n\n.tag {\n margin: 2px 0 0;\n font-size: 12px;\n color: var(--muted);\n}\n\n.controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n}\n\n.controls label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--muted);\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\nselect, button {\n font: inherit;\n font-size: 13px;\n color: var(--ink);\n background: var(--bg1);\n border: 1px solid var(--line);\n border-radius: 999px;\n padding: 7px 14px;\n cursor: pointer;\n transition: border-color 0.15s, transform 0.1s;\n}\n\nselect:hover, button:hover { border-color: var(--gold); }\nbutton:active { transform: scale(0.96); }\nselect:focus-visible, button:focus-visible, summary:focus-visible {\n outline: 2px solid var(--gold);\n outline-offset: 2px;\n}\n\n@keyframes pulseGlow {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 195, 123, 0.0); }\n 50% { box-shadow: 0 0 18px 2px rgba(242, 195, 123, 0.45); }\n}\n.pulse { animation: pulseGlow 2.2s ease-in-out infinite; border-color: var(--gold); }\n\n/* ---------- stage ---------- */\n.stage {\n position: relative;\n flex: 1;\n overflow: hidden;\n background:\n radial-gradient(1200px 800px at 28% 18%, #101a38 0%, transparent 60%),\n radial-gradient(1000px 700px at 76% 82%, #1a1030 0%, transparent 55%),\n var(--bg0);\n}\n\n#garden {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n cursor: crosshair;\n touch-action: none;\n}\n\n#growbar {\n position: absolute;\n top: 0;\n left: 0;\n height: 2px;\n width: 0%;\n background: linear-gradient(90deg, var(--leaf), var(--gold), var(--bloom));\n transition: width 0.1s linear;\n}\n\n/* ---------- floating panels ---------- */\n.panel {\n position: absolute;\n background: var(--glass);\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 10px 14px;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n font-size: 12.5px;\n}\n\n.legend { top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; }\n\n.chip { display: flex; align-items: center; gap: 8px; }\n.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }\n.gradbar {\n width: 150px; height: 10px; border-radius: 5px;\n background: linear-gradient(90deg,\n hsl(24 85% 62%), hsl(96 85% 62%), hsl(168 85% 62%),\n hsl(240 85% 62%), hsl(312 85% 62%));\n}\n\n.stats {\n bottom: 14px;\n right: 14px;\n font-variant-numeric: tabular-nums;\n color: var(--muted);\n}\n.stats strong { color: var(--ink); }\n\n.info { bottom: 14px; left: 14px; max-width: 350px; }\n.info summary {\n cursor: pointer;\n color: var(--gold);\n font-weight: 600;\n letter-spacing: 0.03em;\n}\n.info p { margin: 8px 0 0; line-height: 1.55; font-size: 13px; color: var(--ink); }\n.info code {\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n color: var(--leaf);\n background: rgba(92, 224, 165, 0.1);\n padding: 1px 5px;\n border-radius: 4px;\n}\n\n/* ---------- tooltip ---------- */\n#tooltip {\n position: fixed;\n z-index: 10;\n pointer-events: none;\n background: var(--glass);\n border: 1px solid var(--gold);\n border-radius: 12px;\n padding: 10px 14px;\n min-width: 190px;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);\n}\n#tooltip .n {\n font-family: Georgia, serif;\n font-size: 24px;\n font-variant-numeric: tabular-nums;\n}\n#tooltip .row { font-size: 12.5px; color: var(--muted); margin-top: 3px; }\n#tooltip .row strong { color: var(--ink); }\n#tooltip .prime { color: var(--leaf); font-weight: 600; }\n#tooltip .twin { color: var(--bloom); font-weight: 600; }\n\n@media (max-width: 700px) {\n .info { max-width: 62vw; }\n .tag { display: none; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .pulse { animation: none; }\n #growbar { transition: none; }\n}\n","script.js":"'use strict';\n\n/* ================= Prime Spiral Garden =================\n Interactive Ulam spiral: primes bloom outward from the\n center. Zoom, pan, hover, generative music.\n ======================================================= */\n\nconst $ = id => document.getElementById(id);\nconst canvas = $('garden');\nconst ctx = canvas.getContext('2d');\nconst stage = $('stage');\nconst tooltip = $('tooltip');\nconst legendEl = $('legend');\nconst statsEl = $('stats');\nconst growbar = $('growbar');\n\nconst fmt = n => n.toLocaleString('en-US');\nconst REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches;\nconst SUP = { 0: '⁰', 1: '¹', 2: '²', 3: '³', 4: '⁴', 5: '⁵', 6: '⁶', 7: '⁷', 8: '⁸', 9: '⁹' };\n\nconst COLORS = { leaf: '#5ce0a5', bloom: '#ff6fae', dust: 'rgba(150,180,235,0.16)' };\n\nconst state = {\n N: 5000,\n mode: 'twin',\n reveal: 0,\n playing: true,\n sound: false,\n primeCount: 0,\n twinCount: 0,\n cam: { x: 0, y: 0, scale: 10 },\n};\n\n/* ---------- arithmetic data ---------- */\nlet spf, xs, ys, twin, gapArr, cellMap, buckets, twinsArr;\n\nconst isPrime = n => n > 1 && spf[n] === n;\nconst digitSum = n => { let s = 0; while (n > 0) { s += n % 10; n = (n / 10) | 0; } return s; };\nconst cellKey = (x, y) => ((x + 512) << 11) | (y + 512);\n\nfunction build(N) {\n // smallest prime factor (sieve)\n spf = new Int32Array(N + 1);\n for (let i = 2; i <= N; i++) {\n if (spf[i] === 0) for (let j = i; j <= N; j += i) if (spf[j] === 0) spf[j] = i;\n }\n // spiral coordinates (1 at the center, square turns)\n xs = new Int16Array(N + 1);\n ys = new Int16Array(N + 1);\n cellMap = new Map();\n let x = 0, y = 0, dx = 1, dy = 0, seg = 1, passed = 0, turns = 0;\n for (let n = 1; n <= N; n++) {\n xs[n] = x; ys[n] = y;\n cellMap.set(cellKey(x, y), n);\n x += dx; y += dy; passed++;\n if (passed === seg) {\n passed = 0;\n const t = dx; dx = -dy; dy = t; // 90° turn\n if (++turns % 2 === 0) seg++;\n }\n }\n // twins + gap from the previous prime\n twin = new Uint8Array(N + 1);\n gapArr = new Int16Array(N + 1);\n let prev = 0;\n for (let n = 2; n <= N; n++) {\n if (!isPrime(n)) continue;\n twin[n] = (n - 2 >= 2 && isPrime(n - 2)) || (n + 2 <= N && isPrime(n + 2)) ? 1 : 0;\n gapArr[n] = prev ? n - prev : 0;\n prev = n;\n }\n rebuildBuckets();\n}\n\nfunction colorOf(n) {\n if (state.mode === 'twin') return twin[n] ? COLORS.bloom : COLORS.leaf;\n if (state.mode === 'digit') return `hsl(${(digitSum(n) * 24) % 360} 85% 62%)`;\n const hue = Math.max(15, Math.min(265, 15 + gapArr[n] * 7));\n return `hsl(${hue} 85% 60%)`;\n}\n\n// group primes by color → a single fillStyle per batch\nfunction rebuildBuckets() {\n buckets = new Map();\n twinsArr = [];\n for (let n = 2; n <= state.N; n++) {\n if (!isPrime(n)) continue;\n const c = colorOf(n);\n let arr = buckets.get(c);\n if (!arr) buckets.set(c, arr = []);\n arr.push(n);\n if (twin[n]) twinsArr.push(n);\n }\n}\n\n/* ---------- camera & rendering ---------- */\nlet W = 0, H = 0, DPR = 1;\n\nfunction resize() {\n DPR = Math.min(2, devicePixelRatio || 1);\n W = stage.clientWidth; H = stage.clientHeight;\n canvas.width = W * DPR; canvas.height = H * DPR;\n}\nnew ResizeObserver(resize).observe(stage);\n\nfunction fitCamera() {\n const half = Math.ceil(Math.sqrt(state.N)) / 2 + 3;\n state.cam.x = 0; state.cam.y = 0;\n state.cam.scale = Math.min(W, H) / (half * 2) || 10;\n}\n\nconst toScreen = (wx, wy) => [(wx - state.cam.x) * state.cam.scale + W / 2,\n (wy - state.cam.y) * state.cam.scale + H / 2];\nconst toWorld = (sx, sy) => [(sx - W / 2) / state.cam.scale + state.cam.x,\n (sy - H / 2) / state.cam.scale + state.cam.y];\n\nlet hoverN = 0;\n\nfunction draw(time) {\n ctx.setTransform(DPR, 0, 0, DPR, 0, 0);\n ctx.clearRect(0, 0, W, H);\n const { scale: s } = state.cam;\n const [minX, minY] = toWorld(-s, -s);\n const [maxX, maxY] = toWorld(W + s, H + s);\n\n // stardust: the composites\n ctx.fillStyle = COLORS.dust;\n const d = Math.max(1, s * 0.2);\n for (let n = 1; n <= state.reveal; n++) {\n if (isPrime(n)) continue;\n const x = xs[n], y = ys[n];\n if (x < minX || x > maxX || y < minY || y > maxY) continue;\n const [px, py] = toScreen(x, y);\n ctx.fillRect(px - d / 2, py - d / 2, d, d);\n }\n\n // blooms: the primes, batched by color\n const r = Math.max(1.2, s * 0.32);\n for (const [color, arr] of buckets) {\n ctx.fillStyle = color;\n for (const n of arr) {\n if (n > state.reveal) break;\n const x = xs[n], y = ys[n];\n if (x < minX || x > maxX || y < minY || y > maxY) continue;\n const [px, py] = toScreen(x, y);\n const rr = twin[n] ? r * 1.35 : r;\n if (s >= 5) { ctx.beginPath(); ctx.arc(px, py, rr, 0, 6.2832); ctx.fill(); }\n else ctx.fillRect(px - rr, py - rr, rr * 2, rr * 2);\n }\n }\n\n // twinkling halo around twins (twin mode)\n if (state.mode === 'twin' && s >= 3) {\n ctx.save();\n ctx.globalCompositeOperation = 'lighter';\n ctx.fillStyle = COLORS.bloom;\n for (const n of twinsArr) {\n if (n > state.reveal) break;\n const x = xs[n], y = ys[n];\n if (x < minX || x > maxX || y < minY || y > maxY) continue;\n const [px, py] = toScreen(x, y);\n ctx.globalAlpha = REDUCED ? 0.12 : 0.09 + 0.08 * Math.sin(time * 0.002 + n);\n ctx.beginPath(); ctx.arc(px, py, r * 2.4, 0, 6.2832); ctx.fill();\n }\n ctx.restore();\n }\n\n // readable number labels when zoomed in\n if (s >= 30) {\n ctx.font = `${Math.floor(s * 0.3)}px ui-monospace, Menlo, monospace`;\n ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n for (let gx = Math.floor(minX); gx <= Math.ceil(maxX); gx++) {\n for (let gy = Math.floor(minY); gy <= Math.ceil(maxY); gy++) {\n const n = cellMap.get(cellKey(gx, gy));\n if (!n || n > state.reveal) continue;\n const [px, py] = toScreen(gx, gy);\n ctx.fillStyle = isPrime(n) ? '#06121c' : 'rgba(200,215,255,0.45)';\n ctx.fillText(n, px, py);\n }\n }\n }\n\n // hover ring\n if (hoverN) {\n const [px, py] = toScreen(xs[hoverN], ys[hoverN]);\n ctx.strokeStyle = '#f2c37b';\n ctx.lineWidth = 2;\n ctx.beginPath(); ctx.arc(px, py, Math.max(r * 1.9, 8), 0, 6.2832); ctx.stroke();\n }\n}\n\n/* ---------- animated growth ---------- */\nlet lastNote = 0;\n\nfunction advance() {\n if (!state.playing || state.reveal >= state.N) return;\n const step = REDUCED ? state.N : Math.max(2, Math.round(state.N / 900));\n const to = Math.min(state.N, state.reveal + step);\n let notePrime = 0;\n for (let n = state.reveal + 1; n <= to; n++) {\n if (isPrime(n)) {\n state.primeCount++;\n if (twin[n]) state.twinCount++;\n notePrime = n;\n }\n }\n state.reveal = to;\n if (notePrime && state.sound && performance.now() - lastNote > 85) {\n lastNote = performance.now();\n pluck(notePrime);\n }\n updateStats();\n if (state.reveal >= state.N && state.sound) [2, 3, 5].forEach((p, i) => setTimeout(() => pluck(p * 7), i * 130));\n}\n\nfunction updateStats() {\n const pct = state.reveal ? (state.primeCount / state.reveal) * 100 : 0;\n statsEl.innerHTML =\n `🌿 ${fmt(state.primeCount)} primes · ` +\n `🌸 ${fmt(state.twinCount)} twins · ` +\n `density ${pct.toFixed(1)}% ` +\n `(${fmt(state.reveal)}/${fmt(state.N)})`;\n growbar.style.width = (state.reveal / state.N) * 100 + '%';\n}\n\nfunction loop(time) {\n advance();\n draw(time);\n requestAnimationFrame(loop);\n}\n\n/* ---------- interactions ---------- */\nlet dragging = false, lastMX = 0, lastMY = 0, pinchDist = 0;\n\nfunction zoomAt(sx, sy, factor) {\n const [wx, wy] = toWorld(sx, sy);\n state.cam.scale = Math.max(1, Math.min(90, state.cam.scale * factor));\n const [nsx, nsy] = toScreen(wx, wy);\n state.cam.x += (nsx - sx) / state.cam.scale;\n state.cam.y += (nsy - sy) / state.cam.scale;\n}\n\ncanvas.addEventListener('wheel', e => {\n e.preventDefault();\n zoomAt(e.offsetX, e.offsetY, Math.exp(-e.deltaY * 0.0012));\n}, { passive: false });\n\ncanvas.addEventListener('mousedown', e => { dragging = true; lastMX = e.clientX; lastMY = e.clientY; });\naddEventListener('mouseup', () => { dragging = false; });\n\ncanvas.addEventListener('mousemove', e => {\n if (dragging) {\n state.cam.x -= (e.clientX - lastMX) / state.cam.scale;\n state.cam.y -= (e.clientY - lastMY) / state.cam.scale;\n lastMX = e.clientX; lastMY = e.clientY;\n hideTooltip();\n return;\n }\n inspect(e.offsetX, e.offsetY, e.clientX, e.clientY);\n});\ncanvas.addEventListener('mouseleave', hideTooltip);\n\n// touch: one finger = pan + inspect, two fingers = pinch zoom\ncanvas.addEventListener('touchstart', e => {\n if (e.touches.length === 2) {\n pinchDist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX,\n e.touches[0].clientY - e.touches[1].clientY);\n } else {\n lastMX = e.touches[0].clientX; lastMY = e.touches[0].clientY;\n const r = canvas.getBoundingClientRect();\n inspect(lastMX - r.left, lastMY - r.top, lastMX, lastMY);\n }\n}, { passive: true });\n\ncanvas.addEventListener('touchmove', e => {\n e.preventDefault();\n if (e.touches.length === 2) {\n const nd = Math.hypot(e.touches[0].clientX - e.touches[1].clientX,\n e.touches[0].clientY - e.touches[1].clientY);\n const cx = (e.touches[0].clientX + e.touches[1].clientX) / 2;\n const cy = (e.touches[0].clientY + e.touches[1].clientY) / 2;\n const r = canvas.getBoundingClientRect();\n if (pinchDist) zoomAt(cx - r.left, cy - r.top, nd / pinchDist);\n pinchDist = nd;\n } else {\n const t = e.touches[0];\n state.cam.x -= (t.clientX - lastMX) / state.cam.scale;\n state.cam.y -= (t.clientY - lastMY) / state.cam.scale;\n lastMX = t.clientX; lastMY = t.clientY;\n }\n}, { passive: false });\n\nfunction factorize(n) {\n if (n === 1) return 'unit';\n const parts = [];\n while (n > 1) {\n const p = spf[n];\n let e = 0;\n while (n % p === 0) { n /= p; e++; }\n parts.push(e > 1 ? p + String(e).split('').map(c => SUP[c]).join('') : String(p));\n }\n return parts.join(' × ');\n}\n\nfunction inspect(sx, sy, clientX, clientY) {\n const [wx, wy] = toWorld(sx, sy);\n const gx = Math.round(wx), gy = Math.round(wy);\n const n = cellMap.get(cellKey(gx, gy));\n if (!n || n > state.reveal) { hideTooltip(); return; }\n if (n !== hoverN) {\n hoverN = n;\n if (isPrime(n) && state.sound) pluck(n, true);\n let html = `

${fmt(n)}

`;\n if (n === 1) {\n html += `

Neither prime nor composite — the unit, seed of the garden.

`;\n } else if (isPrime(n)) {\n html += `

🌿 Prime number

`;\n if (twin[n]) {\n const other = (n - 2 >= 2 && isPrime(n - 2)) ? n - 2 : n + 2;\n html += `

🌸 Twin with ${fmt(other)}

`;\n }\n if (gapArr[n]) html += `

Gap from previous prime: ${gapArr[n]}

`;\n } else {\n html += `

✨ Composite = ${factorize(n)}

`;\n }\n html += `

Digit sum: ${digitSum(n)}

`;\n tooltip.innerHTML = html;\n tooltip.hidden = false;\n }\n const tx = Math.min(clientX + 18, innerWidth - 230);\n const ty = Math.min(clientY + 18, innerHeight - 140);\n tooltip.style.left = tx + 'px';\n tooltip.style.top = ty + 'px';\n}\n\nfunction hideTooltip() { hoverN = 0; tooltip.hidden = true; }\n\n/* ---------- generative music (Web Audio) ---------- */\nlet AC = null, master, delaySend;\nconst SCALE = [0, 2, 4, 7, 9, 12, 14, 16, 19, 21, 24]; // major pentatonic, 2 octaves\n\nfunction initAudio() {\n AC = new (window.AudioContext || window.webkitAudioContext)();\n master = AC.createGain();\n master.gain.value = 0.5;\n const comp = AC.createDynamicsCompressor();\n master.connect(comp);\n comp.connect(AC.destination);\n\n // spatial echo\n const delay = AC.createDelay(1);\n delay.delayTime.value = 0.28;\n const fb = AC.createGain(); fb.gain.value = 0.34;\n delay.connect(fb); fb.connect(delay);\n delay.connect(master);\n delaySend = AC.createGain(); delaySend.gain.value = 0.5;\n delaySend.connect(delay);\n\n // deep garden drone\n const drone = AC.createOscillator();\n drone.type = 'sine'; drone.frequency.value = 49;\n const dg = AC.createGain(); dg.gain.value = 0.025;\n drone.connect(dg); dg.connect(master);\n drone.start();\n const drone2 = AC.createOscillator();\n drone2.type = 'sine'; drone2.frequency.value = 98.2;\n const dg2 = AC.createGain(); dg2.gain.value = 0.014;\n drone2.connect(dg2); dg2.connect(master);\n drone2.start();\n}\n\nfunction pluck(p, high = false) {\n if (!AC || !state.sound) return;\n const t = AC.currentTime;\n const semi = SCALE[p % SCALE.length] + (high ? 12 : 0);\n const osc = AC.createOscillator();\n osc.type = 'triangle';\n osc.frequency.value = 196 * Math.pow(2, semi / 12);\n const g = AC.createGain();\n g.gain.setValueAtTime(0, t);\n g.gain.linearRampToValueAtTime(high ? 0.07 : 0.12, t + 0.012);\n g.gain.exponentialRampToValueAtTime(0.0001, t + 0.7);\n osc.connect(g); g.connect(master); g.connect(delaySend);\n osc.start(t); osc.stop(t + 0.8);\n}\n\n/* ---------- legend & controls ---------- */\nfunction updateLegend() {\n const m = state.mode;\n if (m === 'twin') {\n legendEl.innerHTML =\n `

Twin primes (p, p±2)

` +\n `

Other primes

` +\n `

Composites (stardust)

`;\n } else if (m === 'digit') {\n legendEl.innerHTML =\n `

Hue = digit sum

` +\n `

mod 9 patterns → diagonals!

`;\n } else {\n legendEl.innerHTML =\n `

Hue = gap from previous prime

` +\n `

warm = close · cool = isolated

`;\n }\n}\n\nfunction replant() {\n state.reveal = 0;\n state.primeCount = 0;\n state.twinCount = 0;\n state.playing = true;\n $('btnPlay').textContent = '⏸ Pause';\n hideTooltip();\n}\n\n$('selMode').addEventListener('change', e => {\n state.mode = e.target.value;\n rebuildBuckets();\n updateLegend();\n});\n\n$('selN').addEventListener('change', e => {\n state.N = +e.target.value;\n build(state.N);\n fitCamera();\n replant();\n});\n\n$('btnPlay').addEventListener('click', () => {\n if (state.reveal >= state.N) { replant(); return; }\n state.playing = !state.playing;\n $('btnPlay').textContent = state.playing ? '⏸ Pause' : '▶ Resume';\n});\n\n$('btnReplant').addEventListener('click', replant);\n\n$('btnSound').addEventListener('click', () => {\n if (!AC) initAudio();\n if (AC.state === 'suspended') AC.resume();\n state.sound = !state.sound;\n master.gain.value = state.sound ? 0.5 : 0;\n const b = $('btnSound');\n b.textContent = state.sound ? '🔊 Music on' : '🔇 Music off';\n b.classList.remove('pulse');\n});\n\n/* ---------- boot ---------- */\nif (innerWidth < 700) $('info').removeAttribute('open');\nresize();\nbuild(state.N);\nfitCamera();\nupdateLegend();\nupdateStats();\nrequestAnimationFrame(loop);\n"}

sash_the_slash's submission — PRIME SPIRAL GARDEN