v67: слоги в отдельный #syllables div — защита от перезаписи diff

js/compare.js

@@ -99,9 +99,11 @@ async function doCompare(blob, originalText, duration) {
     '<span>🗣 Артикуляция: ' + phon.voiceClarity + '%</span>' +
     '</div>';
 
-  // Слоги — кликабельные (DOM-элементы, не innerHTML)
+  // Слоги — в отдельный div, не в diff (diff перезаписывается)
   _currentBlob = blob;
   _currentSylBuf = null;
+  const sylDiv = document.getElementById('syllables');
+  sylDiv.innerHTML = '';
   const sy = syllabifyIT(originalText);
   if (sy && sy.includes('-')) {
     const syls = sy.split('-');
@@ -116,13 +118,13 @@ async function doCompare(blob, originalText, duration) {
       }
       const chip = document.createElement('span');
       chip.textContent = s;
-      chip.style.cssText = 'cursor:pointer;padding:2px 4px;border-radius:4px;transition:background 0.15s';
-      chip.onmouseover = () => { chip.style.background = '#e0e0ff'; };
+      chip.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:4px;transition:background 0.1s';
+      chip.onmouseover = () => { chip.style.background = '#d0d0ff'; };
       chip.onmouseout = () => { chip.style.background = ''; };
-      chip.onclick = () => { chip.style.background = '#b0b0ff'; setTimeout(() => { chip.style.background = '#e0e0ff'; }, 150); playSyllable(i, syls.length); };
+      chip.onclick = () => { chip.style.background = '#a0a0ff'; setTimeout(() => { chip.style.background = '#d0d0ff'; }, 200); playSyllable(i, syls.length); };
       div.appendChild(chip);
     });
-    document.getElementById('diff').appendChild(div);
+    sylDiv.appendChild(div);
   }
 
   setStatus('Готово.');

js/main.js

@@ -1,6 +1,6 @@
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v66';
+const VERSION = 'v67';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;