fix: sticky chapter on mouseout (#1005)

fix #999

I can't reproduce it anymore so hopefully fixed.

the bug happened when `updateSegments` was called multiple times, easier
to reproduce with preload none.
`insertCSSRule` created a rule every time `updateSegments` was called so
it possibly happened while the user hovered over a chapter.

src/js/media-chrome-range.ts

@@ -1,7 +1,6 @@
 import { MediaStateReceiverAttributes } from './constants.js';
 import { globalThis, document } from './utils/server-safe-globals.js';
 import {
-  insertCSSRule,
   getOrInsertCSSRule,
   getPointProgressOnLine,
 } from './utils/element-utils.js';
@@ -388,6 +387,10 @@ class MediaChromeRange extends globalThis.HTMLElement {
     this.#cssRules.pointer = getOrInsertCSSRule(this.shadowRoot, '#pointer');
     this.#cssRules.progress = getOrInsertCSSRule(this.shadowRoot, '#progress');
     this.#cssRules.thumb = getOrInsertCSSRule(this.shadowRoot, '#thumb');
+    this.#cssRules.activeSegment = getOrInsertCSSRule(
+      this.shadowRoot,
+      '#segments-clipping rect:nth-child(0)'
+    );
 
     const mediaControllerId = this.getAttribute(
       MediaStateReceiverAttributes.MEDIA_CONTROLLER
@@ -448,11 +451,6 @@ class MediaChromeRange extends globalThis.HTMLElement {
 
     if (!segments?.length) return;
 
-    this.#cssRules.activeSegment = insertCSSRule(
-      this.shadowRoot,
-      '#segments-clipping rect:nth-child(0)'
-    );
-
     const normalized = [
       ...new Set([
         +this.range.min,