Fix para highlight: use Web Animations API instead of CSS @keyframes

Co-Authored-By: Claude Sonnet 4.6 <[e-mail]>

static/css/editor.css

···
     border-color: var(--primary);
 }
 
-@keyframes para-highlight {
-    0%   { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.7), 0 0 0 4px rgba(37, 99, 235, 0.15); }
-    100% { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0), 0 0 0 4px rgba(37, 99, 235, 0); }
-}
-
-.para-highlight {
-    animation: para-highlight 1.4s ease-out forwards;
-    border-radius: 3px;
-}
 
 .comment-thread-label {
     font-size: 0.75rem;

templates/document_edit.html

···
         const target = blocks[idx];
         if (!target) return;
         target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        target.classList.remove('para-highlight');
-        // Force reflow so the animation restarts if clicked twice.
-        void target.offsetWidth;
-        target.classList.add('para-highlight');
-        target.addEventListener('animationend', () => target.classList.remove('para-highlight'), { once: true });
+        target.animate(
+            [{ outline: '3px solid rgba(37,99,235,0.8)', outlineOffset: '2px' },
+             { outline: '3px solid rgba(37,99,235,0)',   outlineOffset: '2px' }],
+            { duration: 1400, easing: 'ease-out' }
+        );
     }
 
     function setupParagraphCommentTrigger() {