fix: prevent glitch on dynamically add chapters re-render (#1236)

Resolves [1200](#1200) When
chapters are updated dynamically, re-rendering the segments could
produce visual glitches due to stale CSS rules being reused.

This change ensures that all previous CSS rules related to chapter
segments are cleared before creating new ones.

Author: ronalduQualabs

src/js/media-chrome-range.ts

@@ -3,6 +3,7 @@ import { globalThis, document } from './utils/server-safe-globals.js';
 import {
   getOrInsertCSSRule,
   getPointProgressOnLine,
+  insertCSSRule,
   namedNodeMapToObject,
 } from './utils/element-utils.js';
 import { observeResize, unobserveResize } from './utils/resize-observer.js';
@@ -502,7 +503,7 @@ class MediaChromeRange extends globalThis.HTMLElement {
         'http://www.w3.org/2000/svg',
         'rect'
       );
-      const cssRule = getOrInsertCSSRule(
+      const cssRule = insertCSSRule(
         this.shadowRoot,
         `#segments-clipping rect:nth-child(${i + 1})`
       );