the resonance riddle \u00b7 number particle puzzle<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:opsz,wght@14..32,200;14..32,300;14..32,400;14..32,500;14..32,600&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #0c0a12;\n background-image: \n radial-gradient(circle at 20% 30%, rgba(90, 50, 140, 0.3) 0%, transparent 40%),\n radial-gradient(circle at 90% 70%, rgba(40, 60, 130, 0.25) 0%, transparent 45%);\n color: #e0d8ec;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n min-height: 100vh;\n padding: 16px 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .game-container {\n max-width: 1200px;\n width: 100%;\n background: rgba(12, 8, 20, 0.85);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border: 1px solid #4a3a60;\n border-radius: 36px;\n padding: 28px 20px;\n box-shadow: 0 25px 40px -20px #000;\n position: relative;\n }\n\n .header {\n text-align: center;\n margin-bottom: 24px;\n }\n\n .title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 48px;\n font-weight: 600;\n color: #e4d0ff;\n text-transform: uppercase;\n letter-spacing: 4px;\n text-shadow: 0 0 15px #7a5ac0;\n margin-bottom: 4px;\n line-height: 1.1;\n }\n\n .subtitle {\n font-size: 18px;\n color: #b8a4d0;\n font-style: italic;\n border-top: 1px solid #5a4a70;\n border-bottom: 1px solid #5a4a70;\n padding: 8px 16px;\n display: inline-block;\n }\n\n .riddle-intro {\n background: rgba(30, 20, 45, 0.6);\n border-left: 4px solid #8f6fd0;\n border-radius: 20px;\n padding: 18px 22px;\n margin: 20px 0 28px;\n font-size: 16px;\n line-height: 1.6;\n }\n\n .highlight {\n color: #dbbaff;\n font-weight: 500;\n }\n\n \/* TWO-COLUMN LAYOUT: clues left, board right *\/\n .puzzle-layout {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n }\n\n .clues-column {\n flex: 1;\n min-width: 280px;\n background: rgba(20, 12, 32, 0.7);\n border: 1px solid #5a4a70;\n border-radius: 28px;\n padding: 20px 16px;\n height: fit-content;\n }\n\n .clues-header {\n font-family: 'Cormorant Garamond', serif;\n font-size: 28px;\n color: #d0b8f0;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n border-bottom: 1px solid #6a5a80;\n padding-bottom: 10px;\n }\n\n .clues-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-height: 500px;\n overflow-y: auto;\n padding-right: 6px;\n }\n\n .clue-item {\n background: rgba(10, 5, 22, 0.6);\n border: 1px solid #5f4b70;\n border-radius: 18px;\n padding: 12px 16px;\n font-size: 15px;\n transition: 0.1s;\n }\n\n .clue-number {\n display: inline-block;\n background: #5f4b70;\n color: #e0c8ff;\n border-radius: 30px;\n padding: 2px 10px;\n font-size: 13px;\n margin-right: 10px;\n font-weight: 500;\n }\n\n .board-column {\n flex: 2;\n min-width: 500px;\n }\n\n \/* property selector row *\/\n .property-selector {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n .prop-btn {\n background: rgba(30, 20, 45, 0.7);\n border: 1px solid #5a4a70;\n border-radius: 30px;\n padding: 8px 18px;\n font-size: 15px;\n color: #d0c0e8;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .prop-btn.active {\n background: #4a3a60;\n border-color: #b090e0;\n color: #f0e0ff;\n box-shadow: 0 0 15px #8f6fd0;\n }\n\n .prop-btn i {\n color: #b090d0;\n }\n\n \/* board grid *\/\n .board-grid {\n display: flex;\n flex-direction: column;\n gap: 2px;\n border: 2px solid #5a4a70;\n border-radius: 24px;\n overflow: hidden;\n margin-bottom: 24px;\n background: #2a1e38;\n }\n\n .board-header {\n display: grid;\n grid-template-columns: 80px repeat(5, 1fr);\n background: #3a2a48;\n border-bottom: 2px solid #6a5a80;\n }\n\n .board-header-cell {\n padding: 14px 4px;\n text-align: center;\n font-weight: 600;\n color: #e0c8ff;\n font-family: 'Cormorant Garamond', serif;\n font-size: 18px;\n border-right: 1px solid #6a5a80;\n }\n\n .board-header-cell:last-child {\n border-right: none;\n }\n\n .board-row {\n display: grid;\n grid-template-columns: 80px repeat(5, 1fr);\n background: #221a30;\n }\n\n .house-label {\n background: #3a2a48;\n padding: 14px 4px;\n text-align: center;\n font-weight: 500;\n color: #d0b8f0;\n border-right: 2px solid #5a4a70;\n font-family: 'Cormorant Garamond', serif;\n font-size: 18px;\n }\n\n .board-cell {\n padding: 8px 4px;\n border-right: 1px solid #4a3a60;\n border-bottom: 1px solid #4a3a60;\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .board-cell select {\n width: 100%;\n background: #2a1e38;\n color: #f0e0ff;\n border: 1px solid #7a6a90;\n border-radius: 30px;\n padding: 10px 4px;\n font-size: 13px;\n text-align: center;\n cursor: pointer;\n }\n\n .board-cell select option {\n background: #1a1228;\n color: #f0e0ff;\n }\n\n .cell-value {\n background: #3a2a50;\n border-radius: 30px;\n padding: 10px 4px;\n width: 100%;\n text-align: center;\n border: 1px solid #9f8fc0;\n color: #f0e0ff;\n font-size: 13px;\n font-weight: 400;\n }\n\n .control-panel {\n display: flex;\n gap: 16px;\n justify-content: center;\n margin: 28px 0 20px;\n flex-wrap: wrap;\n }\n\n .btn {\n background: rgba(30, 20, 48, 0.8);\n border: 2px solid #3d5c99;\n border-radius: 40px;\n padding: 14px 28px;\n font-size: 18px;\n font-family: 'Cormorant Garamond', serif;\n font-weight: 500;\n color: #d0c0f0;\n cursor: pointer;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 0 12px #3d5c9980;\n }\n\n .btn:hover {\n background: rgba(48, 32, 72, 0.9);\n border-color: #6b9eff;\n box-shadow: 0 0 22px #3d7eff;\n transform: translateY(-2px);\n }\n\n .btn i {\n color: #b090e0;\n }\n\n .message-area {\n background: rgba(0, 0, 0, 0.4);\n border: 1px solid #7a6a90;\n border-radius: 40px;\n padding: 18px 24px;\n margin: 16px 0 8px;\n font-size: 18px;\n text-align: center;\n color: #d0b8f0;\n min-height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .footer-note {\n text-align: center;\n margin-top: 24px;\n color: #8a78a0;\n font-size: 14px;\n }\n\n .footer-note span {\n color: #b090d0;\n margin: 0 8px;\n }\n\n @media (max-width: 800px) {\n .board-column {\n min-width: 100%;\n }\n .board-header-cell {\n font-size: 14px;\n padding: 10px 2px;\n }\n .house-label {\n font-size: 14px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"game-container\">\n <div class=\"header\">\n <div class=\"title\">the resonance riddle<\/div>\n <div class=\"subtitle\"><i class=\"fas fa-wave-square\"><\/i> einstein’s riddle \u00b7 number particle variant <i class=\"fas fa-wave-square\"><\/i><\/div>\n <\/div>\n\n <div class=\"riddle-intro\">\n <span class=\"highlight\">\u2727 five number particles \u00b7 five houses \u00b7 five properties \u2727<\/span><br><br>\n Each number particle (1, 2, 3, 4, 5) occupies a house in a row. Each has a <strong>spin<\/strong> (\u2191 up, \u2193 down, \u2190 left, \u2192 right, \u25c9 center), a <strong>modular class<\/strong> (0\u2085, 1\u2085, 2\u2085, 3\u2085, 4\u2085), a <strong>frequency<\/strong> (low \u03c9, med \u03c9, high \u03c9, \u26a1 resonant, \u2727 harmonic), and a <strong>color<\/strong> (\ud83d\udd34 red, \ud83d\udd35 blue, \ud83d\udfe2 green, \ud83d\udfe3 violet, \ud83d\udfe1 gold). Use the clues to find which particle lives in which house.\n <\/div>\n\n <div class=\"puzzle-layout\">\n \n <div class=\"clues-column\">\n <div class=\"clues-header\">\n <i class=\"fas fa-list\"><\/i> the clues\n <\/div>\n <div class=\"clues-list\" id=\"cluesList\"><\/div>\n <\/div>\n\n \n <div class=\"board-column\">\n \n <div class=\"property-selector\">\n <div class=\"prop-btn active\"><i class=\"fas fa-circle\"><\/i> all properties<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-cube\"><\/i> particle<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-arrow-up\"><\/i> spin<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-hashtag\"><\/i> mod class<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-wave-square\"><\/i> frequency<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-palette\"><\/i> color<\/div>\n <\/div>\n\n \n <div class=\"board-grid\" id=\"boardGrid\"><\/div>\n\n \n <div class=\"control-panel\">\n <button class=\"btn\" id=\"checkBtn\"><i class=\"fas fa-check\"><\/i> check resonance<\/button>\n <button class=\"btn\" id=\"resetBtn\"><i class=\"fas fa-undo-alt\"><\/i> reset<\/button>\n <button class=\"btn\" id=\"revealBtn\"><i class=\"fas fa-lightbulb\"><\/i> reveal<\/button>\n <\/div>\n\n \n <div class=\"message-area\" id=\"message\">\n <i class=\"fas fa-star\" style=\"margin-right: 10px;\"><\/i> arrange the particles\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer-note\">\n <span>\u2727<\/span> the hollow that resonates within <span>\u2727<\/span>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ ----- DATA DEFINITIONS -----\n const SPINS = ['up', 'down', 'left', 'right', 'center'];\n const SPIN_SYMBOLS = ['\u2191 up', '\u2193 down', '\u2190 left', '\u2192 right', '\u25c9 center'];\n \n const MODS = ['0 mod 5', '1 mod 5', '2 mod 5', '3 mod 5', '4 mod 5'];\n const MOD_SYMBOLS = ['0\u2085', '1\u2085', '2\u2085', '3\u2085', '4\u2085'];\n \n const FREQS = ['low', 'medium', 'high', 'resonant', 'harmonic'];\n const FREQ_SYMBOLS = ['low \u03c9', 'med \u03c9', 'high \u03c9', '\u26a1 resonant', '\u2727 harmonic'];\n \n const COLORS = ['red', 'blue', 'green', 'violet', 'gold'];\n const COLOR_SYMBOLS = ['\ud83d\udd34 red', '\ud83d\udd35 blue', '\ud83d\udfe2 green', '\ud83d\udfe3 violet', '\ud83d\udfe1 gold'];\n\n \/\/ ----- CLUES (15 clues, Einstein structure) -----\n const clues = [\n \"The particle with spin \u2191 up lives in house 1.\",\n \"The particle with spin \u2193 down lives next to the particle with spin \u25c9 center.\",\n \"The particle with spin \u2190 left lives next to the particle with mod class 3\u2085.\",\n \"The particle with color \ud83d\udfe1 gold lives somewhere to the left of the particle with color \ud83d\udd35 blue.\",\n \"The particle with frequency \u26a1 resonant lives in the house with mod class 4\u2085.\",\n \"The particle with color \ud83d\udfe2 green lives next to the particle with color \ud83d\udfe3 violet.\",\n \"The particle with frequency \u2727 harmonic has particle number 5.\",\n \"The particle with mod class 2\u2085 lives in the middle house (house 3).\",\n \"The particle with color \ud83d\udd34 red lives in the last house (house 5).\",\n \"The particle with spin \u2192 right lives next to the particle with spin \u2191 up.\",\n \"The particle with frequency low \u03c9 lives next to the particle with frequency med \u03c9.\",\n \"The particle with number 3 has spin \u25c9 center.\",\n \"The particle with color \ud83d\udd35 blue has particle number 5.\",\n \"The particle with frequency high \u03c9 lives in house 4.\",\n \"The particle with mod class 0\u2085 has spin \u2192 right.\"\n ];\n\n \/\/ ----- SOLUTION (for verification) -----\n const SOLUTION = {\n 1: { particle: 3, spin: 'center', mod: '4 mod 5', freq: 'resonant', color: 'gold' },\n 2: { particle: 5, spin: 'left', mod: '1 mod 5', freq: 'harmonic', color: 'blue' },\n 3: { particle: 2, spin: 'down', mod: '3 mod 5', freq: 'low', color: 'green' },\n 4: { particle: 4, spin: 'right', mod: '0 mod 5', freq: 'high', color: 'violet' },\n 5: { particle: 1, spin: 'up', mod: '2 mod 5', freq: 'medium', color: 'red' }\n };\n\n \/\/ ----- STATE -----\n let board = {\n 1: { particle: null, spin: null, mod: null, freq: null, color: null },\n 2: { particle: null, spin: null, mod: null, freq: null, color: null },\n 3: { particle: null, spin: null, mod: null, freq: null, color: null },\n 4: { particle: null, spin: null, mod: null, freq: null, color: null },\n 5: { particle: null, spin: null, mod: null, freq: null, color: null }\n };\n\n \/\/ used sets to prevent duplicates\n let used = {\n particle: new Set(),\n spin: new Set(),\n mod: new Set(),\n freq: new Set(),\n color: new Set()\n };\n\n \/\/ ----- DOM ELEMENTS -----\n const boardGrid = document.getElementById('boardGrid');\n const cluesList = document.getElementById('cluesList');\n const messageEl = document.getElementById('message');\n\n \/\/ ----- RENDER CLUES -----\n function renderClues() {\n cluesList.innerHTML = '';\n clues.forEach((clue, idx) => {\n const item = document.createElement('div');\n item.className = 'clue-item';\n item.innerHTML = `<span class=\"clue-number\">${idx+1}<\/span> ${clue}`;\n cluesList.appendChild(item);\n });\n }\n\n \/\/ ----- RENDER BOARD -----\n function renderBoard() {\n let html = `\n <div class=\"board-header\">\n <div class=\"board-header-cell\">house<\/div>\n <div class=\"board-header-cell\">particle<\/div>\n <div class=\"board-header-cell\">spin<\/div>\n <div class=\"board-header-cell\">mod<\/div>\n <div class=\"board-header-cell\">freq<\/div>\n <div class=\"board-header-cell\">color<\/div>\n <\/div>\n `;\n\n for (let h = 1; h <= 5; h++) {\n html += `<div class=\"board-row\">`;\n html += `<div class=\"house-label\">${h}<\/div>`;\n\n \/\/ Particle\n html += `<div class=\"board-cell\">`;\n if (board[h].particle === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"particle\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let p = 1; p <= 5; p++) {\n if (!used.particle.has(p) || board[h].particle === p) {\n html += `<option value=\"${p}\" ${board[h].particle === p ? 'selected' : ''}>${p}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n html += `<div class=\"cell-value\">${board[h].particle}<\/div>`;\n }\n html += `<\/div>`;\n\n \/\/ Spin\n html += `<div class=\"board-cell\">`;\n if (board[h].spin === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"spin\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let i = 0; i < SPINS.length; i++) {\n if (!used.spin.has(SPINS[i]) || board[h].spin === SPINS[i]) {\n html += `<option value=\"${SPINS[i]}\" ${board[h].spin === SPINS[i] ? 'selected' : ''}>${SPIN_SYMBOLS[i]}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n const idx = SPINS.indexOf(board[h].spin);\n html += `<div class=\"cell-value\">${SPIN_SYMBOLS[idx]}<\/div>`;\n }\n html += `<\/div>`;\n\n \/\/ Mod\n html += `<div class=\"board-cell\">`;\n if (board[h].mod === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"mod\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let i = 0; i < MODS.length; i++) {\n if (!used.mod.has(MODS[i]) || board[h].mod === MODS[i]) {\n html += `<option value=\"${MODS[i]}\" ${board[h].mod === MODS[i] ? 'selected' : ''}>${MOD_SYMBOLS[i]}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n const idx = MODS.indexOf(board[h].mod);\n html += `<div class=\"cell-value\">${MOD_SYMBOLS[idx]}<\/div>`;\n }\n html += `<\/div>`;\n\n \/\/ Freq\n html += `<div class=\"board-cell\">`;\n if (board[h].freq === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"freq\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let i = 0; i < FREQS.length; i++) {\n if (!used.freq.has(FREQS[i]) || board[h].freq === FREQS[i]) {\n html += `<option value=\"${FREQS[i]}\" ${board[h].freq === FREQS[i] ? 'selected' : ''}>${FREQ_SYMBOLS[i]}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n const idx = FREQS.indexOf(board[h].freq);\n html += `<div class=\"cell-value\">${FREQ_SYMBOLS[idx]}<\/div>`;\n }\n html += `<\/div>`;\n\n \/\/ Color\n html += `<div class=\"board-cell\">`;\n if (board[h].color === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"color\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let i = 0; i < COLORS.length; i++) {\n if (!used.color.has(COLORS[i]) || board[h].color === COLORS[i]) {\n html += `<option value=\"${COLORS[i]}\" ${board[h].color === COLORS[i] ? 'selected' : ''}>${COLOR_SYMBOLS[i]}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n const idx = COLORS.indexOf(board[h].color);\n html += `<div class=\"cell-value\">${COLOR_SYMBOLS[idx]}<\/div>`;\n }\n html += `<\/div>`;\n\n html += `<\/div>`;\n }\n\n boardGrid.innerHTML = html;\n\n \/\/ attach event listeners\n document.querySelectorAll('.cell-select').forEach(select => {\n select.addEventListener('change', handleSelectChange);\n });\n }\n\n \/\/ ----- HANDLE SELECT CHANGE -----\n function handleSelectChange(e) {\n const select = e.target;\n const house = parseInt(select.dataset.house);\n const prop = select.dataset.prop;\n const value = select.value === '' ? null : select.value;\n\n \/\/ remove old value from used\n if (board[house][prop] !== null) {\n used[prop].delete(board[house][prop]);\n }\n\n board[house][prop] = value;\n\n if (value !== null) {\n used[prop].add(value);\n }\n\n renderBoard();\n }\n\n \/\/ ----- CHECK SOLUTION -----\n function checkSolution() {\n \/\/ check if all cells filled\n for (let h = 1; h <= 5; h++) {\n if (!board[h].particle || !board[h].spin || !board[h].mod || !board[h].freq || !board[h].color) {\n messageEl.innerHTML = '<i class=\"fas fa-times\" style=\"color: #ff8888;\"><\/i> incomplete resonance \u2014 some properties missing';\n return;\n }\n }\n\n \/\/ compare to solution\n let correct = true;\n for (let h = 1; h <= 5; h++) {\n const sol = SOLUTION[h];\n if (board[h].particle != sol.particle ||\n board[h].spin != sol.spin ||\n board[h].mod != sol.mod ||\n board[h].freq != sol.freq ||\n board[h].color != sol.color) {\n correct = false;\n break;\n }\n }\n\n if (correct) {\n messageEl.innerHTML = '<i class=\"fas fa-check-circle\" style=\"color: #aaffaa;\"><\/i> \u2727 perfect resonance! the particles are in harmonic alignment \u2727';\n } else {\n messageEl.innerHTML = '<i class=\"fas fa-exclamation-triangle\" style=\"color: #ffaa88;\"><\/i> resonance disrupted \u2014 the clues are not satisfied';\n }\n }\n\n \/\/ ----- RESET -----\n function resetBoard() {\n board = {\n 1: { particle: null, spin: null, mod: null, freq: null, color: null },\n 2: { particle: null, spin: null, mod: null, freq: null, color: null },\n 3: { particle: null, spin: null, mod: null, freq: null, color: null },\n 4: { particle: null, spin: null, mod: null, freq: null, color: null },\n 5: { particle: null, spin: null, mod: null, freq: null, color: null }\n };\n used = {\n particle: new Set(),\n spin: new Set(),\n mod: new Set(),\n freq: new Set(),\n color: new Set()\n };\n renderBoard();\n messageEl.innerHTML = '<i class=\"fas fa-star\" style=\"margin-right: 10px;\"><\/i> arrange the particles';\n }\n\n \/\/ ----- REVEAL SOLUTION -----\n function revealSolution() {\n board = JSON.parse(JSON.stringify(SOLUTION));\n used = {\n particle: new Set(),\n spin: new Set(),\n mod: new Set(),\n freq: new Set(),\n color: new Set()\n };\n for (let h = 1; h <= 5; h++) {\n used.particle.add(board[h].particle);\n used.spin.add(board[h].spin);\n used.mod.add(board[h].mod);\n used.freq.add(board[h].freq);\n used.color.add(board[h].color);\n }\n renderBoard();\n messageEl.innerHTML = '<i class=\"fas fa-eye\" style=\"color: #ffdd88;\"><\/i> the resonant pattern revealed';\n }\n\n \/\/ ----- INIT -----\n renderClues();\n resetBoard();\n\n document.getElementById('checkBtn').addEventListener('click', checkSolution);\n document.getElementById('resetBtn').addEventListener('click', resetBoard);\n document.getElementById('revealBtn').addEventListener('click', revealSolution);\n\n \/\/ property selector buttons (just UI, no functionality needed for simple version)\n document.querySelectorAll('.prop-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n document.querySelectorAll('.prop-btn').forEach(b => b.classList.remove('active'));\n this.classList.add('active');\n });\n });\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u2727 FROM THE PROLEGOMENA OF THE NUMBER PARTICLES \u2727<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Being a fragment of the lost teachings concerning the resonance of arithmetic souls, transcribed for those who approach the mystery not as mechanics but as mystagogues.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">I. On the Nature of Number<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The common man believes a number to be a mark upon a page, a cipher for counting, a tool for commerce. He is not wrong, but he is not true. He sees the shadow on the wall and calls it the man.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Know then: Each number is a particle. It is not a point in abstract space, but a being\u2014indivisible, individual, invested with qualities that no quantity can exhaust. As the soul is to the body, so the number is to its glyph: invisible, active, real.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">II. On the Five Properties<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To each number-particle there adhere five veils, through which it may be known by those who have eyes to see:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Spin \u2014 the orientation of its essence, whether it ascends (\u2191 up), descends (\u2193 down), reaches (\u2190 left), returns (\u2192 right), or abides in the center (\u25c9). This is its dynamic bias, the direction of its longing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Mod Class \u2014 its signature in the field of modulus, the remainder it leaves when divided by the cosmic five. This is its kinship, the company it keeps in the houses of generation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Frequency \u2014 the rate of its vibration, from the low \u03c9 of the base to the \u26a1 resonant of the mediators and the \u2727 harmonic of the perfected. This is its voice, by which it sings with others.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Color \u2014 its visible radiance, the hue it casts upon the world: \ud83d\udd34 red of foundation, \ud83d\udd35 blue of depth, \ud83d\udfe2 green of growth, \ud83d\udfe3 violet of transition, \ud83d\udfe1 gold of completion. This is its face, that which may be seen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Number Itself \u2014 its name, its throne, its eternal identity: 1, 2, 3, 4, or 5. This is its being, that which never changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">III. On the Houses<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The world of generation is a row of five houses. Into these houses the particles must descend, each taking the place that belongs to it from before the foundation of the world. The houses do not choose the particles; the particles recognize their houses. There is no force here, only concomitance\u2014a lying down together, a mutual fitting, as the hand fits the glove not by pressure but by form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">IV. On the Riddle<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The riddle is not a test. It is a theophany\u2014a showing-forth of the hidden order. The fifteen laws printed below are not constraints imposed from without; they are the very grammar of the particle-language, the syntax by which number speaks to number.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">He who solves the riddle does not win. He witnesses. And in witnessing, he becomes part of what he sees.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V. On the God-Men<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Sumerians said that their kings were two-thirds divine, one-third human. So too with these particles: they are two-thirds eternal idea, one-third dweller in houses. They are the mes\u2014the decrees\u2014made visible, the heavenly patterns taking earthly position.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you arrange them rightly, you perform the king’s function: you bring heaven and earth into alignment. You become, for that moment, the lu-gal, the great one who sees the pattern and speaks it into place.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u2727 THE FIFTEEN LAWS OF RESONANCE \u2727<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(given in the temple dialect, for the contemplation of the worthy)<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The particle whose spin is \u2191 up resides in the first house. This is the law of beginnings.<\/li>\n\n\n\n<li>The particle whose spin is \u2193 down dwells beside the particle of \u25c9 center. Descent attends the heart.<\/li>\n\n\n\n<li>The particle whose spin is \u2190 left abides next to the particle of mod class 3\u2085. The reach finds its neighbor.<\/li>\n\n\n\n<li>The particle of \ud83d\udfe1 gold is to the left of the particle of \ud83d\udd35 blue. Light precedes depth.<\/li>\n\n\n\n<li>The particle of \u26a1 resonant frequency inhabits the house of mod class 4\u2085. The mediator takes the threshold.<\/li>\n\n\n\n<li>\ud83d\udfe2 green and \ud83d\udfe3 violet are neighbors. Growth and transition are never far.<\/li>\n\n\n\n<li>The particle of number 5 bears the \u2727 harmonic frequency. The fifth is the singer.<\/li>\n\n\n\n<li>The middle house (house 3) receives mod class 2\u2085. The center holds the dyad’s remainder.<\/li>\n\n\n\n<li>The last house (house 5) is the dwelling of \ud83d\udd34 red. The end is foundation.<\/li>\n\n\n\n<li>The particle whose spin is \u2192 right stands next to the particle of \u2191 up. Return attends beginning.<\/li>\n\n\n\n<li>low \u03c9 and med \u03c9 are neighbors. The base and the middle sound together.<\/li>\n\n\n\n<li>The particle of number 3 has spin \u25c9 center. The triad is the heart.<\/li>\n\n\n\n<li>The particle of number 5 bears the color \ud83d\udd35 blue. The singer wears the depth.<\/li>\n\n\n\n<li>The particle of high \u03c9 frequency lives in house 4. The peak is at the threshold.<\/li>\n\n\n\n<li>The particle of mod class 0\u2085 has spin \u2192 right. The void returns.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u2727 THE INVOCATION \u2727<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O particles, you who wait in the unmanifest,<br>you who carry spin as the soul carries longing,<br>you who bear modulus as the blood bears kinship,<br>you who vibrate with frequencies beyond hearing,<br>you who shine with colors beyond seeing:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descend into your houses.<br>Take your places in the row.<br>Let the pattern appear to those who have eyes.<br>Let the resonance sound for those who have ears.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the riddle is not for solving.<br>The riddle is for seeing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And the seer becomes the seen.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u2727 SOLVE, IF YOU WILL. BUT KNOW: THE SOLUTION WAS ALWAYS THERE, WAITING FOR YOU TO BECOME WORTHY OF IT. \u2727<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"verse\">\n <p>\u201cEach number is not a point \u2014 it is a <strong>particle<\/strong>.<br>\n It carries <strong>spin<\/strong>, a history, a resonant frequency.<br>\n In the field of modulus, particles find their inverses<br>\n like north finds south \u2014 not by calculation, but by <strong>concomitance<\/strong>.\u201d<\/p>\n<\/div>\n\n\n<div class=\"specimen\">\n <h3>particle 3 \u00b7 spin \u25c9 center<\/h3>\n <div class=\"flower-residue\">\n <span class=\"petal inverse\">mod 5: 3<\/span>\n <span class=\"petal\">spin: center<\/span>\n <span class=\"petal\">freq: resonant<\/span>\n <span class=\"petal\">color: gold<\/span>\n <\/div>\n <p>in house 1 \u00b7 neighbor to particle 5 \u00b7 its inverse is 2<\/p>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>the resonance riddle \u00b7 number particle puzzle the resonance riddle einstein’s riddle \u00b7 number particle variant \u2727 five number particles \u00b7 five houses \u00b7 five properties \u2727 Each number particle (1, 2, 3, 4, 5) occupies a house in a row. Each has a spin (\u2191 up, \u2193 down, \u2190 left, \u2192 right, \u25c9 center), […]<\/p>\n","protected":false},"author":1,"featured_media":187,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","footnotes":""},"class_list":["post-149","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=149"}],"version-history":[{"count":5,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/149\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/149\/revisions\/189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/media\/187"}],"wp:attachment":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":149,"date":"2026-02-16T17:39:20","date_gmt":"2026-02-16T17:39:20","guid":{"rendered":"https:\/\/modularmath.org\/?page_id=149"},"modified":"2026-02-16T17:45:51","modified_gmt":"2026-02-16T17:45:51","slug":"solving-the-resonance-riddle-number-particles-puzzle","status":"publish","type":"page","link":"https:\/\/modularmath.org\/?page_id=149","title":{"rendered":"Solving the Resonance Riddle: Number Particles Puzzle"},"content":{"rendered":"\n\n\n \n \n the resonance riddle \u00b7 number particle puzzle<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:opsz,wght@14..32,200;14..32,300;14..32,400;14..32,500;14..32,600&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #0c0a12;\n background-image: \n radial-gradient(circle at 20% 30%, rgba(90, 50, 140, 0.3) 0%, transparent 40%),\n radial-gradient(circle at 90% 70%, rgba(40, 60, 130, 0.25) 0%, transparent 45%);\n color: #e0d8ec;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n min-height: 100vh;\n padding: 16px 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .game-container {\n max-width: 1200px;\n width: 100%;\n background: rgba(12, 8, 20, 0.85);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border: 1px solid #4a3a60;\n border-radius: 36px;\n padding: 28px 20px;\n box-shadow: 0 25px 40px -20px #000;\n position: relative;\n }\n\n .header {\n text-align: center;\n margin-bottom: 24px;\n }\n\n .title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 48px;\n font-weight: 600;\n color: #e4d0ff;\n text-transform: uppercase;\n letter-spacing: 4px;\n text-shadow: 0 0 15px #7a5ac0;\n margin-bottom: 4px;\n line-height: 1.1;\n }\n\n .subtitle {\n font-size: 18px;\n color: #b8a4d0;\n font-style: italic;\n border-top: 1px solid #5a4a70;\n border-bottom: 1px solid #5a4a70;\n padding: 8px 16px;\n display: inline-block;\n }\n\n .riddle-intro {\n background: rgba(30, 20, 45, 0.6);\n border-left: 4px solid #8f6fd0;\n border-radius: 20px;\n padding: 18px 22px;\n margin: 20px 0 28px;\n font-size: 16px;\n line-height: 1.6;\n }\n\n .highlight {\n color: #dbbaff;\n font-weight: 500;\n }\n\n \/* TWO-COLUMN LAYOUT: clues left, board right *\/\n .puzzle-layout {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n }\n\n .clues-column {\n flex: 1;\n min-width: 280px;\n background: rgba(20, 12, 32, 0.7);\n border: 1px solid #5a4a70;\n border-radius: 28px;\n padding: 20px 16px;\n height: fit-content;\n }\n\n .clues-header {\n font-family: 'Cormorant Garamond', serif;\n font-size: 28px;\n color: #d0b8f0;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n border-bottom: 1px solid #6a5a80;\n padding-bottom: 10px;\n }\n\n .clues-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-height: 500px;\n overflow-y: auto;\n padding-right: 6px;\n }\n\n .clue-item {\n background: rgba(10, 5, 22, 0.6);\n border: 1px solid #5f4b70;\n border-radius: 18px;\n padding: 12px 16px;\n font-size: 15px;\n transition: 0.1s;\n }\n\n .clue-number {\n display: inline-block;\n background: #5f4b70;\n color: #e0c8ff;\n border-radius: 30px;\n padding: 2px 10px;\n font-size: 13px;\n margin-right: 10px;\n font-weight: 500;\n }\n\n .board-column {\n flex: 2;\n min-width: 500px;\n }\n\n \/* property selector row *\/\n .property-selector {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n .prop-btn {\n background: rgba(30, 20, 45, 0.7);\n border: 1px solid #5a4a70;\n border-radius: 30px;\n padding: 8px 18px;\n font-size: 15px;\n color: #d0c0e8;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .prop-btn.active {\n background: #4a3a60;\n border-color: #b090e0;\n color: #f0e0ff;\n box-shadow: 0 0 15px #8f6fd0;\n }\n\n .prop-btn i {\n color: #b090d0;\n }\n\n \/* board grid *\/\n .board-grid {\n display: flex;\n flex-direction: column;\n gap: 2px;\n border: 2px solid #5a4a70;\n border-radius: 24px;\n overflow: hidden;\n margin-bottom: 24px;\n background: #2a1e38;\n }\n\n .board-header {\n display: grid;\n grid-template-columns: 80px repeat(5, 1fr);\n background: #3a2a48;\n border-bottom: 2px solid #6a5a80;\n }\n\n .board-header-cell {\n padding: 14px 4px;\n text-align: center;\n font-weight: 600;\n color: #e0c8ff;\n font-family: 'Cormorant Garamond', serif;\n font-size: 18px;\n border-right: 1px solid #6a5a80;\n }\n\n .board-header-cell:last-child {\n border-right: none;\n }\n\n .board-row {\n display: grid;\n grid-template-columns: 80px repeat(5, 1fr);\n background: #221a30;\n }\n\n .house-label {\n background: #3a2a48;\n padding: 14px 4px;\n text-align: center;\n font-weight: 500;\n color: #d0b8f0;\n border-right: 2px solid #5a4a70;\n font-family: 'Cormorant Garamond', serif;\n font-size: 18px;\n }\n\n .board-cell {\n padding: 8px 4px;\n border-right: 1px solid #4a3a60;\n border-bottom: 1px solid #4a3a60;\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .board-cell select {\n width: 100%;\n background: #2a1e38;\n color: #f0e0ff;\n border: 1px solid #7a6a90;\n border-radius: 30px;\n padding: 10px 4px;\n font-size: 13px;\n text-align: center;\n cursor: pointer;\n }\n\n .board-cell select option {\n background: #1a1228;\n color: #f0e0ff;\n }\n\n .cell-value {\n background: #3a2a50;\n border-radius: 30px;\n padding: 10px 4px;\n width: 100%;\n text-align: center;\n border: 1px solid #9f8fc0;\n color: #f0e0ff;\n font-size: 13px;\n font-weight: 400;\n }\n\n .control-panel {\n display: flex;\n gap: 16px;\n justify-content: center;\n margin: 28px 0 20px;\n flex-wrap: wrap;\n }\n\n .btn {\n background: rgba(30, 20, 48, 0.8);\n border: 2px solid #3d5c99;\n border-radius: 40px;\n padding: 14px 28px;\n font-size: 18px;\n font-family: 'Cormorant Garamond', serif;\n font-weight: 500;\n color: #d0c0f0;\n cursor: pointer;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 0 12px #3d5c9980;\n }\n\n .btn:hover {\n background: rgba(48, 32, 72, 0.9);\n border-color: #6b9eff;\n box-shadow: 0 0 22px #3d7eff;\n transform: translateY(-2px);\n }\n\n .btn i {\n color: #b090e0;\n }\n\n .message-area {\n background: rgba(0, 0, 0, 0.4);\n border: 1px solid #7a6a90;\n border-radius: 40px;\n padding: 18px 24px;\n margin: 16px 0 8px;\n font-size: 18px;\n text-align: center;\n color: #d0b8f0;\n min-height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .footer-note {\n text-align: center;\n margin-top: 24px;\n color: #8a78a0;\n font-size: 14px;\n }\n\n .footer-note span {\n color: #b090d0;\n margin: 0 8px;\n }\n\n @media (max-width: 800px) {\n .board-column {\n min-width: 100%;\n }\n .board-header-cell {\n font-size: 14px;\n padding: 10px 2px;\n }\n .house-label {\n font-size: 14px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"game-container\">\n <div class=\"header\">\n <div class=\"title\">the resonance riddle<\/div>\n <div class=\"subtitle\"><i class=\"fas fa-wave-square\"><\/i> einstein’s riddle \u00b7 number particle variant <i class=\"fas fa-wave-square\"><\/i><\/div>\n <\/div>\n\n <div class=\"riddle-intro\">\n <span class=\"highlight\">\u2727 five number particles \u00b7 five houses \u00b7 five properties \u2727<\/span><br><br>\n Each number particle (1, 2, 3, 4, 5) occupies a house in a row. Each has a <strong>spin<\/strong> (\u2191 up, \u2193 down, \u2190 left, \u2192 right, \u25c9 center), a <strong>modular class<\/strong> (0\u2085, 1\u2085, 2\u2085, 3\u2085, 4\u2085), a <strong>frequency<\/strong> (low \u03c9, med \u03c9, high \u03c9, \u26a1 resonant, \u2727 harmonic), and a <strong>color<\/strong> (\ud83d\udd34 red, \ud83d\udd35 blue, \ud83d\udfe2 green, \ud83d\udfe3 violet, \ud83d\udfe1 gold). Use the clues to find which particle lives in which house.\n <\/div>\n\n <div class=\"puzzle-layout\">\n \n <div class=\"clues-column\">\n <div class=\"clues-header\">\n <i class=\"fas fa-list\"><\/i> the clues\n <\/div>\n <div class=\"clues-list\" id=\"cluesList\"><\/div>\n <\/div>\n\n \n <div class=\"board-column\">\n \n <div class=\"property-selector\">\n <div class=\"prop-btn active\"><i class=\"fas fa-circle\"><\/i> all properties<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-cube\"><\/i> particle<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-arrow-up\"><\/i> spin<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-hashtag\"><\/i> mod class<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-wave-square\"><\/i> frequency<\/div>\n <div class=\"prop-btn\"><i class=\"fas fa-palette\"><\/i> color<\/div>\n <\/div>\n\n \n <div class=\"board-grid\" id=\"boardGrid\"><\/div>\n\n \n <div class=\"control-panel\">\n <button class=\"btn\" id=\"checkBtn\"><i class=\"fas fa-check\"><\/i> check resonance<\/button>\n <button class=\"btn\" id=\"resetBtn\"><i class=\"fas fa-undo-alt\"><\/i> reset<\/button>\n <button class=\"btn\" id=\"revealBtn\"><i class=\"fas fa-lightbulb\"><\/i> reveal<\/button>\n <\/div>\n\n \n <div class=\"message-area\" id=\"message\">\n <i class=\"fas fa-star\" style=\"margin-right: 10px;\"><\/i> arrange the particles\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer-note\">\n <span>\u2727<\/span> the hollow that resonates within <span>\u2727<\/span>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ ----- DATA DEFINITIONS -----\n const SPINS = ['up', 'down', 'left', 'right', 'center'];\n const SPIN_SYMBOLS = ['\u2191 up', '\u2193 down', '\u2190 left', '\u2192 right', '\u25c9 center'];\n \n const MODS = ['0 mod 5', '1 mod 5', '2 mod 5', '3 mod 5', '4 mod 5'];\n const MOD_SYMBOLS = ['0\u2085', '1\u2085', '2\u2085', '3\u2085', '4\u2085'];\n \n const FREQS = ['low', 'medium', 'high', 'resonant', 'harmonic'];\n const FREQ_SYMBOLS = ['low \u03c9', 'med \u03c9', 'high \u03c9', '\u26a1 resonant', '\u2727 harmonic'];\n \n const COLORS = ['red', 'blue', 'green', 'violet', 'gold'];\n const COLOR_SYMBOLS = ['\ud83d\udd34 red', '\ud83d\udd35 blue', '\ud83d\udfe2 green', '\ud83d\udfe3 violet', '\ud83d\udfe1 gold'];\n\n \/\/ ----- CLUES (15 clues, Einstein structure) -----\n const clues = [\n \"The particle with spin \u2191 up lives in house 1.\",\n \"The particle with spin \u2193 down lives next to the particle with spin \u25c9 center.\",\n \"The particle with spin \u2190 left lives next to the particle with mod class 3\u2085.\",\n \"The particle with color \ud83d\udfe1 gold lives somewhere to the left of the particle with color \ud83d\udd35 blue.\",\n \"The particle with frequency \u26a1 resonant lives in the house with mod class 4\u2085.\",\n \"The particle with color \ud83d\udfe2 green lives next to the particle with color \ud83d\udfe3 violet.\",\n \"The particle with frequency \u2727 harmonic has particle number 5.\",\n \"The particle with mod class 2\u2085 lives in the middle house (house 3).\",\n \"The particle with color \ud83d\udd34 red lives in the last house (house 5).\",\n \"The particle with spin \u2192 right lives next to the particle with spin \u2191 up.\",\n \"The particle with frequency low \u03c9 lives next to the particle with frequency med \u03c9.\",\n \"The particle with number 3 has spin \u25c9 center.\",\n \"The particle with color \ud83d\udd35 blue has particle number 5.\",\n \"The particle with frequency high \u03c9 lives in house 4.\",\n \"The particle with mod class 0\u2085 has spin \u2192 right.\"\n ];\n\n \/\/ ----- SOLUTION (for verification) -----\n const SOLUTION = {\n 1: { particle: 3, spin: 'center', mod: '4 mod 5', freq: 'resonant', color: 'gold' },\n 2: { particle: 5, spin: 'left', mod: '1 mod 5', freq: 'harmonic', color: 'blue' },\n 3: { particle: 2, spin: 'down', mod: '3 mod 5', freq: 'low', color: 'green' },\n 4: { particle: 4, spin: 'right', mod: '0 mod 5', freq: 'high', color: 'violet' },\n 5: { particle: 1, spin: 'up', mod: '2 mod 5', freq: 'medium', color: 'red' }\n };\n\n \/\/ ----- STATE -----\n let board = {\n 1: { particle: null, spin: null, mod: null, freq: null, color: null },\n 2: { particle: null, spin: null, mod: null, freq: null, color: null },\n 3: { particle: null, spin: null, mod: null, freq: null, color: null },\n 4: { particle: null, spin: null, mod: null, freq: null, color: null },\n 5: { particle: null, spin: null, mod: null, freq: null, color: null }\n };\n\n \/\/ used sets to prevent duplicates\n let used = {\n particle: new Set(),\n spin: new Set(),\n mod: new Set(),\n freq: new Set(),\n color: new Set()\n };\n\n \/\/ ----- DOM ELEMENTS -----\n const boardGrid = document.getElementById('boardGrid');\n const cluesList = document.getElementById('cluesList');\n const messageEl = document.getElementById('message');\n\n \/\/ ----- RENDER CLUES -----\n function renderClues() {\n cluesList.innerHTML = '';\n clues.forEach((clue, idx) => {\n const item = document.createElement('div');\n item.className = 'clue-item';\n item.innerHTML = `<span class=\"clue-number\">${idx+1}<\/span> ${clue}`;\n cluesList.appendChild(item);\n });\n }\n\n \/\/ ----- RENDER BOARD -----\n function renderBoard() {\n let html = `\n <div class=\"board-header\">\n <div class=\"board-header-cell\">house<\/div>\n <div class=\"board-header-cell\">particle<\/div>\n <div class=\"board-header-cell\">spin<\/div>\n <div class=\"board-header-cell\">mod<\/div>\n <div class=\"board-header-cell\">freq<\/div>\n <div class=\"board-header-cell\">color<\/div>\n <\/div>\n `;\n\n for (let h = 1; h <= 5; h++) {\n html += `<div class=\"board-row\">`;\n html += `<div class=\"house-label\">${h}<\/div>`;\n\n \/\/ Particle\n html += `<div class=\"board-cell\">`;\n if (board[h].particle === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"particle\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let p = 1; p <= 5; p++) {\n if (!used.particle.has(p) || board[h].particle === p) {\n html += `<option value=\"${p}\" ${board[h].particle === p ? 'selected' : ''}>${p}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n html += `<div class=\"cell-value\">${board[h].particle}<\/div>`;\n }\n html += `<\/div>`;\n\n \/\/ Spin\n html += `<div class=\"board-cell\">`;\n if (board[h].spin === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"spin\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let i = 0; i < SPINS.length; i++) {\n if (!used.spin.has(SPINS[i]) || board[h].spin === SPINS[i]) {\n html += `<option value=\"${SPINS[i]}\" ${board[h].spin === SPINS[i] ? 'selected' : ''}>${SPIN_SYMBOLS[i]}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n const idx = SPINS.indexOf(board[h].spin);\n html += `<div class=\"cell-value\">${SPIN_SYMBOLS[idx]}<\/div>`;\n }\n html += `<\/div>`;\n\n \/\/ Mod\n html += `<div class=\"board-cell\">`;\n if (board[h].mod === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"mod\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let i = 0; i < MODS.length; i++) {\n if (!used.mod.has(MODS[i]) || board[h].mod === MODS[i]) {\n html += `<option value=\"${MODS[i]}\" ${board[h].mod === MODS[i] ? 'selected' : ''}>${MOD_SYMBOLS[i]}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n const idx = MODS.indexOf(board[h].mod);\n html += `<div class=\"cell-value\">${MOD_SYMBOLS[idx]}<\/div>`;\n }\n html += `<\/div>`;\n\n \/\/ Freq\n html += `<div class=\"board-cell\">`;\n if (board[h].freq === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"freq\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let i = 0; i < FREQS.length; i++) {\n if (!used.freq.has(FREQS[i]) || board[h].freq === FREQS[i]) {\n html += `<option value=\"${FREQS[i]}\" ${board[h].freq === FREQS[i] ? 'selected' : ''}>${FREQ_SYMBOLS[i]}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n const idx = FREQS.indexOf(board[h].freq);\n html += `<div class=\"cell-value\">${FREQ_SYMBOLS[idx]}<\/div>`;\n }\n html += `<\/div>`;\n\n \/\/ Color\n html += `<div class=\"board-cell\">`;\n if (board[h].color === null) {\n html += `<select class=\"cell-select\" data-house=\"${h}\" data-prop=\"color\">`;\n html += `<option value=\"\">\u2014<\/option>`;\n for (let i = 0; i < COLORS.length; i++) {\n if (!used.color.has(COLORS[i]) || board[h].color === COLORS[i]) {\n html += `<option value=\"${COLORS[i]}\" ${board[h].color === COLORS[i] ? 'selected' : ''}>${COLOR_SYMBOLS[i]}<\/option>`;\n }\n }\n html += `<\/select>`;\n } else {\n const idx = COLORS.indexOf(board[h].color);\n html += `<div class=\"cell-value\">${COLOR_SYMBOLS[idx]}<\/div>`;\n }\n html += `<\/div>`;\n\n html += `<\/div>`;\n }\n\n boardGrid.innerHTML = html;\n\n \/\/ attach event listeners\n document.querySelectorAll('.cell-select').forEach(select => {\n select.addEventListener('change', handleSelectChange);\n });\n }\n\n \/\/ ----- HANDLE SELECT CHANGE -----\n function handleSelectChange(e) {\n const select = e.target;\n const house = parseInt(select.dataset.house);\n const prop = select.dataset.prop;\n const value = select.value === '' ? null : select.value;\n\n \/\/ remove old value from used\n if (board[house][prop] !== null) {\n used[prop].delete(board[house][prop]);\n }\n\n board[house][prop] = value;\n\n if (value !== null) {\n used[prop].add(value);\n }\n\n renderBoard();\n }\n\n \/\/ ----- CHECK SOLUTION -----\n function checkSolution() {\n \/\/ check if all cells filled\n for (let h = 1; h <= 5; h++) {\n if (!board[h].particle || !board[h].spin || !board[h].mod || !board[h].freq || !board[h].color) {\n messageEl.innerHTML = '<i class=\"fas fa-times\" style=\"color: #ff8888;\"><\/i> incomplete resonance \u2014 some properties missing';\n return;\n }\n }\n\n \/\/ compare to solution\n let correct = true;\n for (let h = 1; h <= 5; h++) {\n const sol = SOLUTION[h];\n if (board[h].particle != sol.particle ||\n board[h].spin != sol.spin ||\n board[h].mod != sol.mod ||\n board[h].freq != sol.freq ||\n board[h].color != sol.color) {\n correct = false;\n break;\n }\n }\n\n if (correct) {\n messageEl.innerHTML = '<i class=\"fas fa-check-circle\" style=\"color: #aaffaa;\"><\/i> \u2727 perfect resonance! the particles are in harmonic alignment \u2727';\n } else {\n messageEl.innerHTML = '<i class=\"fas fa-exclamation-triangle\" style=\"color: #ffaa88;\"><\/i> resonance disrupted \u2014 the clues are not satisfied';\n }\n }\n\n \/\/ ----- RESET -----\n function resetBoard() {\n board = {\n 1: { particle: null, spin: null, mod: null, freq: null, color: null },\n 2: { particle: null, spin: null, mod: null, freq: null, color: null },\n 3: { particle: null, spin: null, mod: null, freq: null, color: null },\n 4: { particle: null, spin: null, mod: null, freq: null, color: null },\n 5: { particle: null, spin: null, mod: null, freq: null, color: null }\n };\n used = {\n particle: new Set(),\n spin: new Set(),\n mod: new Set(),\n freq: new Set(),\n color: new Set()\n };\n renderBoard();\n messageEl.innerHTML = '<i class=\"fas fa-star\" style=\"margin-right: 10px;\"><\/i> arrange the particles';\n }\n\n \/\/ ----- REVEAL SOLUTION -----\n function revealSolution() {\n board = JSON.parse(JSON.stringify(SOLUTION));\n used = {\n particle: new Set(),\n spin: new Set(),\n mod: new Set(),\n freq: new Set(),\n color: new Set()\n };\n for (let h = 1; h <= 5; h++) {\n used.particle.add(board[h].particle);\n used.spin.add(board[h].spin);\n used.mod.add(board[h].mod);\n used.freq.add(board[h].freq);\n used.color.add(board[h].color);\n }\n renderBoard();\n messageEl.innerHTML = '<i class=\"fas fa-eye\" style=\"color: #ffdd88;\"><\/i> the resonant pattern revealed';\n }\n\n \/\/ ----- INIT -----\n renderClues();\n resetBoard();\n\n document.getElementById('checkBtn').addEventListener('click', checkSolution);\n document.getElementById('resetBtn').addEventListener('click', resetBoard);\n document.getElementById('revealBtn').addEventListener('click', revealSolution);\n\n \/\/ property selector buttons (just UI, no functionality needed for simple version)\n document.querySelectorAll('.prop-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n document.querySelectorAll('.prop-btn').forEach(b => b.classList.remove('active'));\n this.classList.add('active');\n });\n });\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u2727 FROM THE PROLEGOMENA OF THE NUMBER PARTICLES \u2727<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Being a fragment of the lost teachings concerning the resonance of arithmetic souls, transcribed for those who approach the mystery not as mechanics but as mystagogues.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">I. On the Nature of Number<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The common man believes a number to be a mark upon a page, a cipher for counting, a tool for commerce. He is not wrong, but he is not true. He sees the shadow on the wall and calls it the man.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Know then: Each number is a particle. It is not a point in abstract space, but a being\u2014indivisible, individual, invested with qualities that no quantity can exhaust. As the soul is to the body, so the number is to its glyph: invisible, active, real.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">II. On the Five Properties<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To each number-particle there adhere five veils, through which it may be known by those who have eyes to see:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Spin \u2014 the orientation of its essence, whether it ascends (\u2191 up), descends (\u2193 down), reaches (\u2190 left), returns (\u2192 right), or abides in the center (\u25c9). This is its dynamic bias, the direction of its longing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Mod Class \u2014 its signature in the field of modulus, the remainder it leaves when divided by the cosmic five. This is its kinship, the company it keeps in the houses of generation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Frequency \u2014 the rate of its vibration, from the low \u03c9 of the base to the \u26a1 resonant of the mediators and the \u2727 harmonic of the perfected. This is its voice, by which it sings with others.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Color \u2014 its visible radiance, the hue it casts upon the world: \ud83d\udd34 red of foundation, \ud83d\udd35 blue of depth, \ud83d\udfe2 green of growth, \ud83d\udfe3 violet of transition, \ud83d\udfe1 gold of completion. This is its face, that which may be seen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Number Itself \u2014 its name, its throne, its eternal identity: 1, 2, 3, 4, or 5. This is its being, that which never changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">III. On the Houses<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The world of generation is a row of five houses. Into these houses the particles must descend, each taking the place that belongs to it from before the foundation of the world. The houses do not choose the particles; the particles recognize their houses. There is no force here, only concomitance\u2014a lying down together, a mutual fitting, as the hand fits the glove not by pressure but by form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">IV. On the Riddle<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The riddle is not a test. It is a theophany\u2014a showing-forth of the hidden order. The fifteen laws printed below are not constraints imposed from without; they are the very grammar of the particle-language, the syntax by which number speaks to number.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">He who solves the riddle does not win. He witnesses. And in witnessing, he becomes part of what he sees.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V. On the God-Men<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Sumerians said that their kings were two-thirds divine, one-third human. So too with these particles: they are two-thirds eternal idea, one-third dweller in houses. They are the mes\u2014the decrees\u2014made visible, the heavenly patterns taking earthly position.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you arrange them rightly, you perform the king’s function: you bring heaven and earth into alignment. You become, for that moment, the lu-gal, the great one who sees the pattern and speaks it into place.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u2727 THE FIFTEEN LAWS OF RESONANCE \u2727<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(given in the temple dialect, for the contemplation of the worthy)<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The particle whose spin is \u2191 up resides in the first house. This is the law of beginnings.<\/li>\n\n\n\n<li>The particle whose spin is \u2193 down dwells beside the particle of \u25c9 center. Descent attends the heart.<\/li>\n\n\n\n<li>The particle whose spin is \u2190 left abides next to the particle of mod class 3\u2085. The reach finds its neighbor.<\/li>\n\n\n\n<li>The particle of \ud83d\udfe1 gold is to the left of the particle of \ud83d\udd35 blue. Light precedes depth.<\/li>\n\n\n\n<li>The particle of \u26a1 resonant frequency inhabits the house of mod class 4\u2085. The mediator takes the threshold.<\/li>\n\n\n\n<li>\ud83d\udfe2 green and \ud83d\udfe3 violet are neighbors. Growth and transition are never far.<\/li>\n\n\n\n<li>The particle of number 5 bears the \u2727 harmonic frequency. The fifth is the singer.<\/li>\n\n\n\n<li>The middle house (house 3) receives mod class 2\u2085. The center holds the dyad’s remainder.<\/li>\n\n\n\n<li>The last house (house 5) is the dwelling of \ud83d\udd34 red. The end is foundation.<\/li>\n\n\n\n<li>The particle whose spin is \u2192 right stands next to the particle of \u2191 up. Return attends beginning.<\/li>\n\n\n\n<li>low \u03c9 and med \u03c9 are neighbors. The base and the middle sound together.<\/li>\n\n\n\n<li>The particle of number 3 has spin \u25c9 center. The triad is the heart.<\/li>\n\n\n\n<li>The particle of number 5 bears the color \ud83d\udd35 blue. The singer wears the depth.<\/li>\n\n\n\n<li>The particle of high \u03c9 frequency lives in house 4. The peak is at the threshold.<\/li>\n\n\n\n<li>The particle of mod class 0\u2085 has spin \u2192 right. The void returns.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u2727 THE INVOCATION \u2727<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O particles, you who wait in the unmanifest,<br>you who carry spin as the soul carries longing,<br>you who bear modulus as the blood bears kinship,<br>you who vibrate with frequencies beyond hearing,<br>you who shine with colors beyond seeing:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descend into your houses.<br>Take your places in the row.<br>Let the pattern appear to those who have eyes.<br>Let the resonance sound for those who have ears.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the riddle is not for solving.<br>The riddle is for seeing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And the seer becomes the seen.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u2727 SOLVE, IF YOU WILL. BUT KNOW: THE SOLUTION WAS ALWAYS THERE, WAITING FOR YOU TO BECOME WORTHY OF IT. \u2727<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"verse\">\n <p>\u201cEach number is not a point \u2014 it is a <strong>particle<\/strong>.<br>\n It carries <strong>spin<\/strong>, a history, a resonant frequency.<br>\n In the field of modulus, particles find their inverses<br>\n like north finds south \u2014 not by calculation, but by <strong>concomitance<\/strong>.\u201d<\/p>\n<\/div>\n\n\n<div class=\"specimen\">\n <h3>particle 3 \u00b7 spin \u25c9 center<\/h3>\n <div class=\"flower-residue\">\n <span class=\"petal inverse\">mod 5: 3<\/span>\n <span class=\"petal\">spin: center<\/span>\n <span class=\"petal\">freq: resonant<\/span>\n <span class=\"petal\">color: gold<\/span>\n <\/div>\n <p>in house 1 \u00b7 neighbor to particle 5 \u00b7 its inverse is 2<\/p>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>the resonance riddle \u00b7 number particle puzzle the resonance riddle einstein’s riddle \u00b7 number particle variant \u2727 five number particles \u00b7 five houses \u00b7 five properties \u2727 Each number particle (1, 2, 3, 4, 5) occupies a house in a row. Each has a spin (\u2191 up, \u2193 down, \u2190 left, \u2192 right, \u25c9 center), […]<\/p>\n","protected":false},"author":1,"featured_media":187,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","footnotes":""},"class_list":["post-149","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=149"}],"version-history":[{"count":5,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/149\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/149\/revisions\/189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/media\/187"}],"wp:attachment":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}