@scarlett-player/ui 1.9.0 → 1.11.0

package/dist/index.cjs

@@ -23,8 +23,8 @@ __export(index_exports, {
   DEFAULT_PRIORITY: () => DEFAULT_PRIORITY,
   assertFitLayout: () => assertFitLayout,
   default: () => index_default,
-  formatLiveTime: () => formatLiveTime,
-  formatTime: () => formatTime,
+  formatLiveTime: () => import_core2.formatLiveTime,
+  formatTime: () => import_core2.formatTime,
   getControlFactory: () => getControlFactory,
   icons: () => icons,
   planFit: () => planFit,
@@ -37,7 +37,7 @@ __export(index_exports, {
   unregisterControlsFor: () => unregisterControlsFor
 });
 module.exports = __toCommonJS(index_exports);
-var import_core2 = require("@scarlett-player/core");
+var import_core4 = require("@scarlett-player/core");
 
 // src/fit.ts
 var UNKNOWN_RANK = 3;
@@ -1204,24 +1204,30 @@ var styles = `
 
 /* ============================================
    CSS Custom Properties (Theming)
+   ============================================
+
+   Token defaults live at the use sites as var() fallbacks, not in a :root
+   block. A :root declaration wrote --sp-accent, --sp-color, --sp-bg,
+   --sp-control-height and --sp-icon-size into the HOST document, so mounting a
+   player changed variables the page may own. A .sp-container declaration would
+   be no better: the container rule wins for every descendant, so it would
+   override a host that themes the player from its own :root. A var() fallback
+   does neither - it applies only where nothing else defines the token.
+
+   setTheme() writes the same names onto the player's container, which still
+   wins over the fallbacks.
    ============================================ */
-:root {
-  --sp-accent: #e50914;
-  --sp-color: #fff;
-  --sp-bg: rgba(0, 0, 0, 0.8);
-  --sp-control-height: 48px;
-  --sp-icon-size: 24px;
-}
 `;
 
 // src/icons.ts
+var import_core = require("@scarlett-player/core");
 var icons = {
-  play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`,
+  play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${import_core.SHARED_ICON_PATHS.play}"/></svg>`,
   pause: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>`,
   replay: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>`,
-  volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>`,
+  volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${import_core.SHARED_ICON_PATHS.volumeHigh}"/></svg>`,
   volumeLow: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>`,
-  volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>`,
+  volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${import_core.SHARED_ICON_PATHS.volumeMuted}"/></svg>`,
   fullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>`,
   exitFullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>`,
   pip: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/></svg>`,
@@ -1294,29 +1300,7 @@ function setAttr(el, name, value) {
 }
 
 // src/utils/format.ts
-function formatTime(seconds) {
-  if (!isFinite(seconds) || isNaN(seconds)) {
-    return "0:00";
-  }
-  const absSeconds = Math.abs(seconds);
-  const h = Math.floor(absSeconds / 3600);
-  const m = Math.floor(absSeconds % 3600 / 60);
-  const s = Math.floor(absSeconds % 60);
-  const sign = seconds < 0 ? "-" : "";
-  if (h > 0) {
-    return `${sign}${h}:${pad(m)}:${pad(s)}`;
-  }
-  return `${sign}${m}:${pad(s)}`;
-}
-function pad(n) {
-  return n < 10 ? `0${n}` : `${n}`;
-}
-function formatLiveTime(behindLive) {
-  if (behindLive <= 0) {
-    return "LIVE";
-  }
-  return `-${formatTime(behindLive)}`;
-}
+var import_core2 = require("@scarlett-player/core");
 
 // src/controls/PlayButton.ts
 var PlayButton = class {
@@ -1621,7 +1605,7 @@ var ProgressBar = class {
             video.addEventListener("seeked", resumePlayback);
           }
         }
-        this.tooltip.style.opacity = "0";
+        this.tooltip.style.opacity = "";
         this.thumbnailPreview.hide();
       }
     };
@@ -1630,7 +1614,7 @@ var ProgressBar = class {
     };
     this.onMouseLeave = () => {
       if (!this.isDragging) {
-        this.tooltip.style.opacity = "0";
+        this.tooltip.style.opacity = "";
         this.thumbnailPreview.hide();
       }
     };
@@ -1774,7 +1758,7 @@ var ProgressBar = class {
       }
       this.el.setAttribute("aria-valuemax", String(Math.floor(duration)));
       this.el.setAttribute("aria-valuenow", String(Math.floor(currentTime)));
-      this.el.setAttribute("aria-valuetext", formatTime(currentTime));
+      this.el.setAttribute("aria-valuetext", (0, import_core2.formatTime)(currentTime));
     }
   }
   /**
@@ -1863,9 +1847,9 @@ var ProgressBar = class {
     const seekableRange = this.api.getState("seekableRange");
     if (live && seekableRange) {
       const behindLive = seekableRange.end - time;
-      this.tooltip.textContent = formatLiveTime(behindLive);
+      this.tooltip.textContent = (0, import_core2.formatLiveTime)(behindLive);
     } else {
-      this.tooltip.textContent = formatTime(time);
+      this.tooltip.textContent = (0, import_core2.formatTime)(time);
     }
     const chapterLabel = this.chapterLabelAt(time);
     if (chapterLabel) {
@@ -1902,6 +1886,7 @@ var ProgressBar = class {
     this.wrapper.removeEventListener("mousemove", this.onMouseMove);
     this.wrapper.removeEventListener("mouseleave", this.onMouseLeave);
     this.wrapper.removeEventListener("touchstart", this.onTouchStart);
+    this.el.removeEventListener("keydown", this.onKeyDown);
     document.removeEventListener("mousemove", this.onDocMouseMove);
     document.removeEventListener("mouseup", this.onMouseUp);
     document.removeEventListener("touchmove", this.onDocTouchMove);
@@ -1930,12 +1915,12 @@ var TimeDisplay = class {
       const seekableRange = this.api.getState("seekableRange");
       if (seekableRange) {
         const behindLive = seekableRange.end - currentTime;
-        this.el.textContent = formatLiveTime(behindLive);
+        this.el.textContent = (0, import_core2.formatLiveTime)(behindLive);
       } else {
-        this.el.textContent = formatLiveTime(0);
+        this.el.textContent = (0, import_core2.formatLiveTime)(0);
       }
     } else {
-      this.el.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+      this.el.textContent = `${(0, import_core2.formatTime)(currentTime)} / ${(0, import_core2.formatTime)(duration)}`;
     }
   }
   destroy() {
@@ -2420,7 +2405,7 @@ var PipButton = class {
 };
 
 // src/controls/FullscreenButton.ts
-var import_core = require("@scarlett-player/core");
+var import_core3 = require("@scarlett-player/core");
 var FullscreenButton = class {
   constructor(api) {
     this.clickHandler = () => {
@@ -2455,10 +2440,10 @@ var FullscreenButton = class {
   async toggle() {
     const container = this.api.container;
     try {
-      if ((0, import_core.isFullscreen)(container)) {
-        await (0, import_core.exitFullscreen)(container);
+      if ((0, import_core3.isFullscreen)(container)) {
+        await (0, import_core3.exitFullscreen)(container);
       } else {
-        await (0, import_core.enterFullscreen)(container);
+        await (0, import_core3.enterFullscreen)(container);
       }
     } catch {
     }
@@ -3446,7 +3431,7 @@ function resetControlRegistry() {
 }
 
 // src/version.ts
-var PKG_VERSION = true ? "1.9.0" : "0.0.0-dev";
+var PKG_VERSION = true ? "1.11.0" : "0.0.0-dev";
 
 // src/index.ts
 var DEFAULT_LAYOUT = [
@@ -3483,6 +3468,7 @@ var FALLBACK_VOLUME_SLIDER_WIDTH = 64;
 var OVERFLOW_BUTTON_WIDTH = 44;
 var FALLBACK_BAR_PADDING_X = 24;
 var FALLBACK_BAR_GAP = 4;
+var RESIZE_FALLBACK_DEBOUNCE_MS = 100;
 var MENU_HEIGHT_RESERVE = 16;
 var FALLBACK_BAR_HEIGHT = 56;
 var MIN_MENU_HEIGHT = 120;
@@ -3509,6 +3495,8 @@ function uiPlugin(config = {}) {
   let entries = [];
   let timeEntry = null;
   let resizeObserver = null;
+  let windowResizeTimer = null;
+  let onWindowResize = null;
   let barPaddingX = FALLBACK_BAR_PADDING_X;
   let barGap = FALLBACK_BAR_GAP;
   let volumeSliderWidth = FALLBACK_VOLUME_SLIDER_WIDTH;
@@ -3873,11 +3861,11 @@ function uiPlugin(config = {}) {
         break;
       case "f":
         e.preventDefault();
-        if ((0, import_core2.isFullscreen)(api.container)) {
-          (0, import_core2.exitFullscreen)(api.container).catch(() => {
+        if ((0, import_core4.isFullscreen)(api.container)) {
+          (0, import_core4.exitFullscreen)(api.container).catch(() => {
           });
         } else {
-          (0, import_core2.enterFullscreen)(api.container).catch(() => {
+          (0, import_core4.enterFullscreen)(api.container).catch(() => {
           });
         }
         break;
@@ -3918,7 +3906,7 @@ function uiPlugin(config = {}) {
     version: PKG_VERSION,
     async init(pluginApi) {
       api = pluginApi;
-      releaseStyles = (0, import_core2.injectSharedStyles)(STYLE_ID, styles);
+      releaseStyles = (0, import_core4.injectSharedStyles)(STYLE_ID, styles);
       if (config.theme) {
         this.setTheme(config.theme);
       }
@@ -3987,6 +3975,17 @@ function uiPlugin(config = {}) {
           scheduleUpdate();
         });
         resizeObserver.observe(container);
+      } else if (responsive && typeof window !== "undefined") {
+        onWindowResize = () => {
+          if (windowResizeTimer) clearTimeout(windowResizeTimer);
+          windowResizeTimer = setTimeout(() => {
+            windowResizeTimer = null;
+            applyMenuBounds(container.clientHeight);
+            fitPending = true;
+            scheduleUpdate();
+          }, RESIZE_FALLBACK_DEBOUNCE_MS);
+        };
+        window.addEventListener("resize", onWindowResize);
       }
       controlRegistryUnsubscribe = onControlRegistered((id, owner) => {
         if (!layout.includes(id)) {
@@ -4029,6 +4028,14 @@ function uiPlugin(config = {}) {
       }
       resizeObserver?.disconnect();
       resizeObserver = null;
+      if (onWindowResize) {
+        window.removeEventListener("resize", onWindowResize);
+        onWindowResize = null;
+      }
+      if (windowResizeTimer) {
+        clearTimeout(windowResizeTimer);
+        windowResizeTimer = null;
+      }
       api?.container?.style.removeProperty("--sp-menu-max-height");
       stateUnsubscribe?.();
       stateUnsubscribe = null;

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import { Plugin, IPluginAPI } from '@scarlett-player/core';
+export { formatLiveTime, formatTime } from '@scarlett-player/core';
 
 /**
  * Control bar fit planning.
@@ -394,6 +395,10 @@ declare function resetControlRegistry(): void;
  *
  * Clean, minimal icons - 24x24 viewBox with currentColor fill.
  * Optimized for clarity at small sizes.
+ *
+ * The three glyphs `audio-ui` draws identically come from core's
+ * `SHARED_ICON_PATHS`; the `<svg>` wrapper stays here because this package
+ * paints with `fill="currentColor"` and `audio-ui` does not.
  */
 declare const icons: {
     readonly play: "<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>";
@@ -431,19 +436,7 @@ declare const icons: {
  * Modern, minimal design inspired by Mux Player and Vidstack.
  * Uses CSS custom properties for theming.
  */
-declare const styles = "\n/* ============================================\n   Container & Base\n   ============================================ */\n.sp-container {\n  position: relative;\n  /* Own stacking context: the control bar, menus and overlays all carry\n     z-index, and without this they compete with the host page's own layers\n     instead of staying inside the player. */\n  isolation: isolate;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-container video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: contain;\n}\n\n.sp-container:focus {\n  outline: none;\n}\n\n/* ============================================\n   Gradient Overlay\n   ============================================ */\n.sp-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 160px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.8) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n  z-index: 5;\n}\n\n.sp-gradient--visible {\n  opacity: 1;\n}\n\n/* ============================================\n   Controls Container\n   ============================================ */\n.sp-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px 12px;\n  /* Composed through a variable so the fullscreen rule below can add the\n     device's own inset without restating the 12px. */\n  padding-bottom: calc(12px + var(--sp-inset-bottom, 0px));\n  gap: 4px;\n  /* Declared on the bar because the fit needs the same number the volume rules\n     below use: the slider expands mid-interaction and the plugin reserves the\n     room in advance (see interactionReserve() in index.ts, which reads this\n     property off this element at init). One declaration, so the stylesheet and\n     the arithmetic cannot drift. Both the bar and the overflow tray are inside\n     .sp-controls, so a volume control inherits it wherever the fit put it. */\n  --sp-volume-slider-width: 64px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n  z-index: 10;\n}\n\n.sp-controls--visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sp-controls--hidden {\n  opacity: 0;\n  transform: translateY(4px);\n  pointer-events: none;\n}\n\n/* ============================================\n   Safe Area (fullscreen only)\n\n   Scoped to :fullscreen on purpose. Applied unconditionally, the inset would\n   push an inline player's controls up on any page whose viewport meta says\n   viewport-fit=cover, where there is no notch or home indicator over the\n   player at all. Both the bar and the progress wrapper are direct children of\n   the container, which is the element that goes fullscreen.\n\n   The :-webkit-full-screen twin is a separate rule because an unknown\n   pseudo-class anywhere in a selector list invalidates the whole rule.\n\n   Nothing is needed in packages/embed/iframe.html: viewport-fit has no effect\n   inside an iframe.\n   ============================================ */\n:fullscreen > .sp-controls,\n:fullscreen > .sp-progress-wrapper {\n  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n:-webkit-full-screen > .sp-controls,\n:-webkit-full-screen > .sp-progress-wrapper {\n  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n/* ============================================\n   Progress Bar (Above Controls)\n   ============================================ */\n.sp-progress-wrapper {\n  position: absolute;\n  bottom: calc(48px + var(--sp-inset-bottom, 0px));\n  left: 12px;\n  right: 12px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease;\n}\n\n.sp-progress-wrapper--visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Touch: a 20px wrapper is not a 20px target. The control bar is a later\n   sibling at the same z-index and spans 0..56px from the bottom, so it wins\n   hit-testing in the 48..56 overlap and the exclusive region for scrubbing is\n   12px. The wrapper grows UPWARD to 44px (48..92) because growing downward\n   would be swallowed by the bar; the 3px bar itself stays exactly where it was\n   (centred 8.5px above the wrapper's bottom edge, which is what\n   align-items: center gave it inside 20px). The handle and tooltip\n   enlargements are gated behind (hover: hover) and never match a finger, but\n   .sp-progress--dragging is not, so the handle still appears mid-drag.\n\n   any-pointer, not pointer: (pointer: coarse) describes the PRIMARY pointer\n   only, so a hybrid laptop with a mouse and a touchscreen reports fine and kept\n   the 12px exclusive region under a finger. (any-pointer: coarse) is true\n   whenever a coarse pointer is available at all, which is the population that\n   needs the target. The cost on such a machine is 24px of extra hit area for\n   the mouse, over the player's own bottom edge. */\n@media (any-pointer: coarse) {\n  .sp-progress-wrapper {\n    height: 44px;\n    align-items: flex-end;\n    padding-bottom: 8.5px;\n    box-sizing: border-box;\n  }\n}\n\n.sp-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  transition: height 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress {\n    height: 5px;\n  }\n}\n\n.sp-progress--dragging {\n  height: 5px;\n}\n\n.sp-progress__track {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.sp-progress__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n\n.sp-progress__filled {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-accent, #e50914);\n  border-radius: inherit;\n}\n\n/* Chapter markers */\n.sp-progress__markers {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.sp-progress__marker {\n  position: absolute;\n  top: 0;\n  width: 2px;\n  height: 100%;\n  margin-left: -1px;\n  background: rgba(0, 0, 0, 0.65);\n}\n\n.sp-progress__handle {\n  position: absolute;\n  top: 50%;\n  width: 14px;\n  height: 14px;\n  background: var(--sp-accent, #e50914);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__handle {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.sp-progress--dragging .sp-progress__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Thumbnail Preview */\n.sp-thumbnail-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  pointer-events: none;\n  display: none;\n  z-index: 21;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.sp-thumbnail-preview__img {\n  background-repeat: no-repeat;\n}\n\n/* Progress Tooltip */\n.sp-progress__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  padding: 6px 10px;\n  background: rgba(20, 20, 20, 0.95);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  border-radius: 4px;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n.sp-progress__tooltip-chapter {\n  display: block;\n  max-width: 220px;\n  overflow: hidden;\n  color: rgba(255, 255, 255, 0.75);\n  font-weight: 400;\n  font-variant-numeric: normal;\n  text-overflow: ellipsis;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__tooltip {\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   Control Buttons\n   ============================================ */\n.sp-control {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;\n  flex-shrink: 0;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n@media (hover: hover) {\n  .sp-control:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-control:active {\n  transform: scale(0.92);\n}\n\n.sp-control:focus-visible {\n  outline: 2px solid var(--sp-accent, #e50914);\n  outline-offset: 2px;\n}\n\n.sp-control:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sp-control:disabled:hover {\n  background: none;\n}\n\n.sp-control svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  display: block;\n}\n\n.sp-control--small svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* ============================================\n   Spacer\n   ============================================ */\n.sp-spacer {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   Overflow Tray\n\n   The wrapper is deliberately unpositioned: the strip is absolutely\n   positioned against .sp-controls (the nearest positioned ancestor), so it\n   spans the bar's width and sits directly above it instead of hanging off a\n   44px button.\n\n   The strip wraps horizontally and keeps overflow visible. A vertical menu of\n   44px rows would be taller than a portrait phone player (211px at 375px wide,\n   measured 2026-09-05) and a scrolling one would clip the popovers registered\n   controls own.\n   ============================================ */\n.sp-overflow {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.sp-overflow-tray {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 4px;\n  padding: 8px 12px;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  overflow: visible;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-overflow-tray--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Beats a control's own inline style.display = '' on its next update(), so a\n   control the fit took off screen stays off screen until the fit says\n   otherwise. */\n.sp-control--collapsed {\n  display: none !important;\n}\n\n/* ============================================\n   Time Display\n   ============================================ */\n.sp-time {\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(255, 255, 255, 0.9);\n  white-space: nowrap;\n  padding: 0 4px;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================\n   Volume Control\n   ============================================ */\n.sp-volume {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.sp-volume__slider-wrap {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.2s ease;\n}\n\n/* Both widths come from --sp-volume-slider-width on .sp-controls, which is also\n   what the fit reserves for this control. focus-within is deliberately not\n   gated on hover: a tap on the mute button focuses it, which is how the slider\n   opens on a phone. */\n@media (hover: hover) {\n  .sp-volume:hover .sp-volume__slider-wrap {\n    width: var(--sp-volume-slider-width);\n  }\n}\n\n.sp-volume:focus-within .sp-volume__slider-wrap {\n  width: var(--sp-volume-slider-width);\n}\n\n.sp-volume__slider {\n  width: 64px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  cursor: pointer;\n  position: relative;\n  margin: 0 8px 0 4px;\n}\n\n.sp-volume__level {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: #fff;\n  border-radius: inherit;\n  transition: width 0.1s ease;\n}\n\n/* ============================================\n   Live Indicator\n   ============================================ */\n.sp-live {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--sp-accent, #e50914);\n  cursor: pointer;\n  padding: 6px 10px;\n  border-radius: 4px;\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-live:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-live__dot {\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 50%;\n  animation: sp-pulse 2s ease-in-out infinite;\n}\n\n.sp-live--behind {\n  opacity: 0.6;\n}\n\n.sp-live--behind .sp-live__dot {\n  animation: none;\n}\n\n.sp-live--behind span {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n/* Progress bar live mode: accent color for filled bar */\n.sp-progress--live .sp-progress__filled {\n  background: var(--sp-accent, #e50914);\n}\n\n@keyframes sp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ============================================\n   Quality / Settings Menu\n   ============================================ */\n.sp-quality {\n  position: relative;\n}\n\n.sp-quality__btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sp-quality__label {\n  font-size: 12px;\n  font-weight: 500;\n  opacity: 0.9;\n}\n\n.sp-quality-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  /* Bounded to the player, see .sp-settings-panel. border-box because the\n     bound is a content-box height by default and this menu adds 8px of padding\n     top and bottom: at the 139px bound a 211px player gives, it rendered 155px\n     and the host clipped the last 16px of it. */\n  box-sizing: border-box;\n  max-height: var(--sp-menu-max-height, none);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  padding: 8px 0;\n  min-width: 150px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-quality-menu--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sp-quality-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-quality-menu__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-quality-menu__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-quality-menu__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-quality-menu__item--active .sp-quality-menu__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Settings Menu (Gear Icon)\n   ============================================ */\n.sp-settings {\n  position: relative;\n}\n\n.sp-settings__btn {\n  display: flex;\n  align-items: center;\n}\n\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  /* Bounded to the room above the control bar, written by the UI plugin's\n     ResizeObserver as max(120px, container height - the bar's measured height\n     - 16px). The bar is measured rather than assumed because its\n     padding-bottom carries the safe-area inset in fullscreen, which moves the\n     anchor these menus hang from. The Speed sub-panel is 253px (a\n     37px header plus six 36px rows) against a 211px portrait phone player, so\n     without this the host's overflow: hidden cuts off the Back header and the\n     first three speeds and playback speed is unreachable (measured at 375x211\n     on 2026-09-05). With the variable unset the panel behaves exactly as it\n     did before.\n\n     Not applied to .sp-overflow-tray: that one has to keep overflow visible so\n     the popovers its adopted controls own are not clipped.\n\n     border-box because max-height bounds the content box: .sp-settings-panel--main\n     is this same element with 4px of padding top and bottom, so wherever the\n     bound binds the main menu, it rendered 8px past it and the host clipped the\n     difference. The --sub views set padding: 0 and were already exact, which is\n     why the browser harness's speed-panel check could not see this. */\n  box-sizing: border-box;\n  max-height: var(--sp-menu-max-height, none);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  min-width: 200px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-settings-panel--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Main menu rows */\n.sp-settings-panel--main {\n  padding: 4px 0;\n}\n\n.sp-settings-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__row:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__label {\n  font-weight: 500;\n}\n\n.sp-settings-panel__value {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 12px;\n}\n\n.sp-settings-panel__arrow {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__arrow svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n/* Sub-menu panels */\n.sp-settings-panel--sub {\n  padding: 0;\n}\n\n.sp-settings-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__header:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__back {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__back svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__header-label {\n  flex: 1;\n}\n\n.sp-settings-panel__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-settings-panel__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-settings-panel__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-settings-panel__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-settings-panel__check svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__item--active .sp-settings-panel__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Captions Button\n   ============================================ */\n.sp-captions--active {\n  color: var(--sp-accent, #e50914);\n}\n\n/* ============================================\n   Cast Button States\n   ============================================ */\n.sp-cast--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-cast--unavailable {\n  opacity: 0.4;\n}\n\n/* ============================================\n   Big Play Button\n\n   z-index 12 puts it above the gradient (5) and above the gestures plugin's\n   tap surface (6), so a tap lands on the button and starts playback instead\n   of being read as a tap-to-toggle-controls gesture - exactly how the control\n   bar's play button (10) already behaves. It stays below the spinner (15) and\n   the error overlay (25), both of which own the middle of the picture when\n   they are up.\n\n   Hidden with visibility, not opacity alone, so it takes no pointer events\n   while it is away.\n   ============================================ */\n.sp-big-play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 12;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Comfortably past the 44px minimum touch target the control bar uses. */\n  width: 72px;\n  height: 72px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  cursor: pointer;\n  opacity: 0;\n  visibility: hidden;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);\n  transition: opacity 0.2s ease, visibility 0.2s, transform 0.15s ease,\n    background 0.15s ease;\n}\n\n.sp-big-play--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-big-play svg {\n  width: 36px;\n  height: 36px;\n  fill: currentColor;\n  /* Optical centring: the play triangle's mass sits left of the glyph box. */\n  margin-left: 3px;\n}\n\n.sp-big-play:hover {\n  transform: translate(-50%, -50%) scale(1.06);\n}\n\n.sp-big-play:active {\n  transform: translate(-50%, -50%) scale(0.96);\n}\n\n.sp-big-play:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 3px;\n}\n\n/* ============================================\n   Error Overlay\n   ============================================ */\n.sp-error-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 25;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s ease, visibility 0.25s;\n}\n\n.sp-error-overlay--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-error-overlay__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  max-width: 360px;\n}\n\n.sp-error-overlay__icon {\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 16px;\n}\n\n.sp-error-overlay__icon svg {\n  width: 48px;\n  height: 48px;\n  fill: currentColor;\n}\n\n/* Reconnecting: pulse the icon so the overlay reads as active work,\n   not a dead-end error */\n.sp-error-overlay--reconnecting .sp-error-overlay__icon {\n  animation: sp-reconnect-pulse 1.2s ease-in-out infinite;\n}\n\n@keyframes sp-reconnect-pulse {\n  0%, 100% { opacity: 0.4; }\n  50% { opacity: 1; }\n}\n\n.sp-error-overlay__message {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0 0 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-error-overlay__actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.sp-error-overlay__retry {\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  border: none;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 120px;\n  min-height: 44px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__retry:hover {\n  filter: brightness(1.1);\n}\n\n.sp-error-overlay__retry:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__retry:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.sp-error-overlay__dismiss {\n  background: none;\n  color: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 100px;\n  min-height: 44px;\n  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__dismiss:hover {\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.sp-error-overlay__dismiss:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__dismiss:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   Buffering Indicator\n   ============================================ */\n.sp-buffering {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 15;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sp-buffering--visible {\n  opacity: 1;\n}\n\n.sp-buffering svg {\n  width: 48px;\n  height: 48px;\n  fill: rgba(255, 255, 255, 0.9);\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n}\n\n@keyframes sp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.sp-spin {\n  animation: sp-spin 0.8s linear infinite;\n}\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  .sp-gradient,\n  .sp-controls,\n  .sp-progress-wrapper,\n  .sp-progress,\n  .sp-progress__handle,\n  .sp-progress__tooltip,\n  .sp-control,\n  .sp-volume__slider-wrap,\n  .sp-quality-menu,\n  .sp-overflow-tray,\n  .sp-settings-panel,\n  .sp-settings-panel__row,\n  .sp-settings-panel__item,\n  .sp-settings-panel__header,\n  .sp-buffering,\n  .sp-big-play,\n  .sp-error-overlay,\n  .sp-error-overlay__retry,\n  .sp-error-overlay__dismiss {\n    transition: none;\n  }\n\n  .sp-big-play:hover,\n  .sp-big-play:active {\n    transform: translate(-50%, -50%);\n  }\n\n  .sp-live__dot,\n  .sp-spin {\n    animation: none;\n  }\n}\n\n/* ============================================\n   CSS Custom Properties (Theming)\n   ============================================ */\n:root {\n  --sp-accent: #e50914;\n  --sp-color: #fff;\n  --sp-bg: rgba(0, 0, 0, 0.8);\n  --sp-control-height: 48px;\n  --sp-icon-size: 24px;\n}\n";
-
-/**
- * Formatting utility functions
- */
-/**
- * Format seconds as time string (mm:ss or h:mm:ss).
- */
-declare function formatTime(seconds: number): string;
-/**
- * Format time for live streams (relative to live edge).
- */
-declare function formatLiveTime(behindLive: number): string;
+declare const styles = "\n/* ============================================\n   Container & Base\n   ============================================ */\n.sp-container {\n  position: relative;\n  /* Own stacking context: the control bar, menus and overlays all carry\n     z-index, and without this they compete with the host page's own layers\n     instead of staying inside the player. */\n  isolation: isolate;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-container video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: contain;\n}\n\n.sp-container:focus {\n  outline: none;\n}\n\n/* ============================================\n   Gradient Overlay\n   ============================================ */\n.sp-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 160px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.8) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n  z-index: 5;\n}\n\n.sp-gradient--visible {\n  opacity: 1;\n}\n\n/* ============================================\n   Controls Container\n   ============================================ */\n.sp-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px 12px;\n  /* Composed through a variable so the fullscreen rule below can add the\n     device's own inset without restating the 12px. */\n  padding-bottom: calc(12px + var(--sp-inset-bottom, 0px));\n  gap: 4px;\n  /* Declared on the bar because the fit needs the same number the volume rules\n     below use: the slider expands mid-interaction and the plugin reserves the\n     room in advance (see interactionReserve() in index.ts, which reads this\n     property off this element at init). One declaration, so the stylesheet and\n     the arithmetic cannot drift. Both the bar and the overflow tray are inside\n     .sp-controls, so a volume control inherits it wherever the fit put it. */\n  --sp-volume-slider-width: 64px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n  z-index: 10;\n}\n\n.sp-controls--visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sp-controls--hidden {\n  opacity: 0;\n  transform: translateY(4px);\n  pointer-events: none;\n}\n\n/* ============================================\n   Safe Area (fullscreen only)\n\n   Scoped to :fullscreen on purpose. Applied unconditionally, the inset would\n   push an inline player's controls up on any page whose viewport meta says\n   viewport-fit=cover, where there is no notch or home indicator over the\n   player at all. Both the bar and the progress wrapper are direct children of\n   the container, which is the element that goes fullscreen.\n\n   The :-webkit-full-screen twin is a separate rule because an unknown\n   pseudo-class anywhere in a selector list invalidates the whole rule.\n\n   Nothing is needed in packages/embed/iframe.html: viewport-fit has no effect\n   inside an iframe.\n   ============================================ */\n:fullscreen > .sp-controls,\n:fullscreen > .sp-progress-wrapper {\n  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n:-webkit-full-screen > .sp-controls,\n:-webkit-full-screen > .sp-progress-wrapper {\n  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n/* ============================================\n   Progress Bar (Above Controls)\n   ============================================ */\n.sp-progress-wrapper {\n  position: absolute;\n  bottom: calc(48px + var(--sp-inset-bottom, 0px));\n  left: 12px;\n  right: 12px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease;\n}\n\n.sp-progress-wrapper--visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Touch: a 20px wrapper is not a 20px target. The control bar is a later\n   sibling at the same z-index and spans 0..56px from the bottom, so it wins\n   hit-testing in the 48..56 overlap and the exclusive region for scrubbing is\n   12px. The wrapper grows UPWARD to 44px (48..92) because growing downward\n   would be swallowed by the bar; the 3px bar itself stays exactly where it was\n   (centred 8.5px above the wrapper's bottom edge, which is what\n   align-items: center gave it inside 20px). The handle and tooltip\n   enlargements are gated behind (hover: hover) and never match a finger, but\n   .sp-progress--dragging is not, so the handle still appears mid-drag.\n\n   any-pointer, not pointer: (pointer: coarse) describes the PRIMARY pointer\n   only, so a hybrid laptop with a mouse and a touchscreen reports fine and kept\n   the 12px exclusive region under a finger. (any-pointer: coarse) is true\n   whenever a coarse pointer is available at all, which is the population that\n   needs the target. The cost on such a machine is 24px of extra hit area for\n   the mouse, over the player's own bottom edge. */\n@media (any-pointer: coarse) {\n  .sp-progress-wrapper {\n    height: 44px;\n    align-items: flex-end;\n    padding-bottom: 8.5px;\n    box-sizing: border-box;\n  }\n}\n\n.sp-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  transition: height 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress {\n    height: 5px;\n  }\n}\n\n.sp-progress--dragging {\n  height: 5px;\n}\n\n.sp-progress__track {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.sp-progress__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n\n.sp-progress__filled {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-accent, #e50914);\n  border-radius: inherit;\n}\n\n/* Chapter markers */\n.sp-progress__markers {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.sp-progress__marker {\n  position: absolute;\n  top: 0;\n  width: 2px;\n  height: 100%;\n  margin-left: -1px;\n  background: rgba(0, 0, 0, 0.65);\n}\n\n.sp-progress__handle {\n  position: absolute;\n  top: 50%;\n  width: 14px;\n  height: 14px;\n  background: var(--sp-accent, #e50914);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__handle {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.sp-progress--dragging .sp-progress__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Thumbnail Preview */\n.sp-thumbnail-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  pointer-events: none;\n  display: none;\n  z-index: 21;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.sp-thumbnail-preview__img {\n  background-repeat: no-repeat;\n}\n\n/* Progress Tooltip */\n.sp-progress__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  padding: 6px 10px;\n  background: rgba(20, 20, 20, 0.95);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  border-radius: 4px;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n.sp-progress__tooltip-chapter {\n  display: block;\n  max-width: 220px;\n  overflow: hidden;\n  color: rgba(255, 255, 255, 0.75);\n  font-weight: 400;\n  font-variant-numeric: normal;\n  text-overflow: ellipsis;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__tooltip {\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   Control Buttons\n   ============================================ */\n.sp-control {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;\n  flex-shrink: 0;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n@media (hover: hover) {\n  .sp-control:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-control:active {\n  transform: scale(0.92);\n}\n\n.sp-control:focus-visible {\n  outline: 2px solid var(--sp-accent, #e50914);\n  outline-offset: 2px;\n}\n\n.sp-control:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sp-control:disabled:hover {\n  background: none;\n}\n\n.sp-control svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  display: block;\n}\n\n.sp-control--small svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* ============================================\n   Spacer\n   ============================================ */\n.sp-spacer {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   Overflow Tray\n\n   The wrapper is deliberately unpositioned: the strip is absolutely\n   positioned against .sp-controls (the nearest positioned ancestor), so it\n   spans the bar's width and sits directly above it instead of hanging off a\n   44px button.\n\n   The strip wraps horizontally and keeps overflow visible. A vertical menu of\n   44px rows would be taller than a portrait phone player (211px at 375px wide,\n   measured 2026-09-05) and a scrolling one would clip the popovers registered\n   controls own.\n   ============================================ */\n.sp-overflow {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.sp-overflow-tray {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 4px;\n  padding: 8px 12px;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  overflow: visible;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-overflow-tray--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Beats a control's own inline style.display = '' on its next update(), so a\n   control the fit took off screen stays off screen until the fit says\n   otherwise. */\n.sp-control--collapsed {\n  display: none !important;\n}\n\n/* ============================================\n   Time Display\n   ============================================ */\n.sp-time {\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(255, 255, 255, 0.9);\n  white-space: nowrap;\n  padding: 0 4px;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================\n   Volume Control\n   ============================================ */\n.sp-volume {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.sp-volume__slider-wrap {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.2s ease;\n}\n\n/* Both widths come from --sp-volume-slider-width on .sp-controls, which is also\n   what the fit reserves for this control. focus-within is deliberately not\n   gated on hover: a tap on the mute button focuses it, which is how the slider\n   opens on a phone. */\n@media (hover: hover) {\n  .sp-volume:hover .sp-volume__slider-wrap {\n    width: var(--sp-volume-slider-width);\n  }\n}\n\n.sp-volume:focus-within .sp-volume__slider-wrap {\n  width: var(--sp-volume-slider-width);\n}\n\n.sp-volume__slider {\n  width: 64px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  cursor: pointer;\n  position: relative;\n  margin: 0 8px 0 4px;\n}\n\n.sp-volume__level {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: #fff;\n  border-radius: inherit;\n  transition: width 0.1s ease;\n}\n\n/* ============================================\n   Live Indicator\n   ============================================ */\n.sp-live {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--sp-accent, #e50914);\n  cursor: pointer;\n  padding: 6px 10px;\n  border-radius: 4px;\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-live:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-live__dot {\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 50%;\n  animation: sp-pulse 2s ease-in-out infinite;\n}\n\n.sp-live--behind {\n  opacity: 0.6;\n}\n\n.sp-live--behind .sp-live__dot {\n  animation: none;\n}\n\n.sp-live--behind span {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n/* Progress bar live mode: accent color for filled bar */\n.sp-progress--live .sp-progress__filled {\n  background: var(--sp-accent, #e50914);\n}\n\n@keyframes sp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ============================================\n   Quality / Settings Menu\n   ============================================ */\n.sp-quality {\n  position: relative;\n}\n\n.sp-quality__btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sp-quality__label {\n  font-size: 12px;\n  font-weight: 500;\n  opacity: 0.9;\n}\n\n.sp-quality-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  /* Bounded to the player, see .sp-settings-panel. border-box because the\n     bound is a content-box height by default and this menu adds 8px of padding\n     top and bottom: at the 139px bound a 211px player gives, it rendered 155px\n     and the host clipped the last 16px of it. */\n  box-sizing: border-box;\n  max-height: var(--sp-menu-max-height, none);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  padding: 8px 0;\n  min-width: 150px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-quality-menu--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sp-quality-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-quality-menu__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-quality-menu__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-quality-menu__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-quality-menu__item--active .sp-quality-menu__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Settings Menu (Gear Icon)\n   ============================================ */\n.sp-settings {\n  position: relative;\n}\n\n.sp-settings__btn {\n  display: flex;\n  align-items: center;\n}\n\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  /* Bounded to the room above the control bar, written by the UI plugin's\n     ResizeObserver as max(120px, container height - the bar's measured height\n     - 16px). The bar is measured rather than assumed because its\n     padding-bottom carries the safe-area inset in fullscreen, which moves the\n     anchor these menus hang from. The Speed sub-panel is 253px (a\n     37px header plus six 36px rows) against a 211px portrait phone player, so\n     without this the host's overflow: hidden cuts off the Back header and the\n     first three speeds and playback speed is unreachable (measured at 375x211\n     on 2026-09-05). With the variable unset the panel behaves exactly as it\n     did before.\n\n     Not applied to .sp-overflow-tray: that one has to keep overflow visible so\n     the popovers its adopted controls own are not clipped.\n\n     border-box because max-height bounds the content box: .sp-settings-panel--main\n     is this same element with 4px of padding top and bottom, so wherever the\n     bound binds the main menu, it rendered 8px past it and the host clipped the\n     difference. The --sub views set padding: 0 and were already exact, which is\n     why the browser harness's speed-panel check could not see this. */\n  box-sizing: border-box;\n  max-height: var(--sp-menu-max-height, none);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  min-width: 200px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-settings-panel--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Main menu rows */\n.sp-settings-panel--main {\n  padding: 4px 0;\n}\n\n.sp-settings-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__row:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__label {\n  font-weight: 500;\n}\n\n.sp-settings-panel__value {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 12px;\n}\n\n.sp-settings-panel__arrow {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__arrow svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n/* Sub-menu panels */\n.sp-settings-panel--sub {\n  padding: 0;\n}\n\n.sp-settings-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__header:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__back {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__back svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__header-label {\n  flex: 1;\n}\n\n.sp-settings-panel__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-settings-panel__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-settings-panel__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-settings-panel__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-settings-panel__check svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__item--active .sp-settings-panel__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Captions Button\n   ============================================ */\n.sp-captions--active {\n  color: var(--sp-accent, #e50914);\n}\n\n/* ============================================\n   Cast Button States\n   ============================================ */\n.sp-cast--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-cast--unavailable {\n  opacity: 0.4;\n}\n\n/* ============================================\n   Big Play Button\n\n   z-index 12 puts it above the gradient (5) and above the gestures plugin's\n   tap surface (6), so a tap lands on the button and starts playback instead\n   of being read as a tap-to-toggle-controls gesture - exactly how the control\n   bar's play button (10) already behaves. It stays below the spinner (15) and\n   the error overlay (25), both of which own the middle of the picture when\n   they are up.\n\n   Hidden with visibility, not opacity alone, so it takes no pointer events\n   while it is away.\n   ============================================ */\n.sp-big-play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 12;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Comfortably past the 44px minimum touch target the control bar uses. */\n  width: 72px;\n  height: 72px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  cursor: pointer;\n  opacity: 0;\n  visibility: hidden;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);\n  transition: opacity 0.2s ease, visibility 0.2s, transform 0.15s ease,\n    background 0.15s ease;\n}\n\n.sp-big-play--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-big-play svg {\n  width: 36px;\n  height: 36px;\n  fill: currentColor;\n  /* Optical centring: the play triangle's mass sits left of the glyph box. */\n  margin-left: 3px;\n}\n\n.sp-big-play:hover {\n  transform: translate(-50%, -50%) scale(1.06);\n}\n\n.sp-big-play:active {\n  transform: translate(-50%, -50%) scale(0.96);\n}\n\n.sp-big-play:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 3px;\n}\n\n/* ============================================\n   Error Overlay\n   ============================================ */\n.sp-error-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 25;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s ease, visibility 0.25s;\n}\n\n.sp-error-overlay--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-error-overlay__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  max-width: 360px;\n}\n\n.sp-error-overlay__icon {\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 16px;\n}\n\n.sp-error-overlay__icon svg {\n  width: 48px;\n  height: 48px;\n  fill: currentColor;\n}\n\n/* Reconnecting: pulse the icon so the overlay reads as active work,\n   not a dead-end error */\n.sp-error-overlay--reconnecting .sp-error-overlay__icon {\n  animation: sp-reconnect-pulse 1.2s ease-in-out infinite;\n}\n\n@keyframes sp-reconnect-pulse {\n  0%, 100% { opacity: 0.4; }\n  50% { opacity: 1; }\n}\n\n.sp-error-overlay__message {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0 0 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-error-overlay__actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.sp-error-overlay__retry {\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  border: none;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 120px;\n  min-height: 44px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__retry:hover {\n  filter: brightness(1.1);\n}\n\n.sp-error-overlay__retry:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__retry:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.sp-error-overlay__dismiss {\n  background: none;\n  color: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 100px;\n  min-height: 44px;\n  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__dismiss:hover {\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.sp-error-overlay__dismiss:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__dismiss:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   Buffering Indicator\n   ============================================ */\n.sp-buffering {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 15;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sp-buffering--visible {\n  opacity: 1;\n}\n\n.sp-buffering svg {\n  width: 48px;\n  height: 48px;\n  fill: rgba(255, 255, 255, 0.9);\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n}\n\n@keyframes sp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.sp-spin {\n  animation: sp-spin 0.8s linear infinite;\n}\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  .sp-gradient,\n  .sp-controls,\n  .sp-progress-wrapper,\n  .sp-progress,\n  .sp-progress__handle,\n  .sp-progress__tooltip,\n  .sp-control,\n  .sp-volume__slider-wrap,\n  .sp-quality-menu,\n  .sp-overflow-tray,\n  .sp-settings-panel,\n  .sp-settings-panel__row,\n  .sp-settings-panel__item,\n  .sp-settings-panel__header,\n  .sp-buffering,\n  .sp-big-play,\n  .sp-error-overlay,\n  .sp-error-overlay__retry,\n  .sp-error-overlay__dismiss {\n    transition: none;\n  }\n\n  .sp-big-play:hover,\n  .sp-big-play:active {\n    transform: translate(-50%, -50%);\n  }\n\n  .sp-live__dot,\n  .sp-spin {\n    animation: none;\n  }\n}\n\n/* ============================================\n   CSS Custom Properties (Theming)\n   ============================================\n\n   Token defaults live at the use sites as var() fallbacks, not in a :root\n   block. A :root declaration wrote --sp-accent, --sp-color, --sp-bg,\n   --sp-control-height and --sp-icon-size into the HOST document, so mounting a\n   player changed variables the page may own. A .sp-container declaration would\n   be no better: the container rule wins for every descendant, so it would\n   override a host that themes the player from its own :root. A var() fallback\n   does neither - it applies only where nothing else defines the token.\n\n   setTheme() writes the same names onto the player's container, which still\n   wins over the fallbacks.\n   ============================================ */\n";
 
 /**
  * UI Controls Plugin for Scarlett Player
@@ -480,4 +473,4 @@ declare function formatLiveTime(behindLive: number): string;
  */
 declare function uiPlugin(config?: UIPluginConfig): IUIPlugin;
 
-export { type BuiltinControlSlot, type Control, type ControlFactory, type ControlSlot, DEFAULT_PRIORITY, type FitExit, type FitItem, type FitPlan, type FitRank, type FitRule, type FitTemplate, type IUIPlugin, type LayoutConfig, type RegisterControlOptions, type ThemeConfig, type UIPluginConfig, assertFitLayout, uiPlugin as default, formatLiveTime, formatTime, getControlFactory, icons, planFit, registerControl, resetControlRegistry, resolveFitItems, styles, uiPlugin, unregisterControl, unregisterControlsFor };
+export { type BuiltinControlSlot, type Control, type ControlFactory, type ControlSlot, DEFAULT_PRIORITY, type FitExit, type FitItem, type FitPlan, type FitRank, type FitRule, type FitTemplate, type IUIPlugin, type LayoutConfig, type RegisterControlOptions, type ThemeConfig, type UIPluginConfig, assertFitLayout, uiPlugin as default, getControlFactory, icons, planFit, registerControl, resetControlRegistry, resolveFitItems, styles, uiPlugin, unregisterControl, unregisterControlsFor };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { Plugin, IPluginAPI } from '@scarlett-player/core';
+export { formatLiveTime, formatTime } from '@scarlett-player/core';
 
 /**
  * Control bar fit planning.
@@ -394,6 +395,10 @@ declare function resetControlRegistry(): void;
  *
  * Clean, minimal icons - 24x24 viewBox with currentColor fill.
  * Optimized for clarity at small sizes.
+ *
+ * The three glyphs `audio-ui` draws identically come from core's
+ * `SHARED_ICON_PATHS`; the `<svg>` wrapper stays here because this package
+ * paints with `fill="currentColor"` and `audio-ui` does not.
  */
 declare const icons: {
     readonly play: "<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>";
@@ -431,19 +436,7 @@ declare const icons: {
  * Modern, minimal design inspired by Mux Player and Vidstack.
  * Uses CSS custom properties for theming.
  */
-declare const styles = "\n/* ============================================\n   Container & Base\n   ============================================ */\n.sp-container {\n  position: relative;\n  /* Own stacking context: the control bar, menus and overlays all carry\n     z-index, and without this they compete with the host page's own layers\n     instead of staying inside the player. */\n  isolation: isolate;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-container video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: contain;\n}\n\n.sp-container:focus {\n  outline: none;\n}\n\n/* ============================================\n   Gradient Overlay\n   ============================================ */\n.sp-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 160px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.8) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n  z-index: 5;\n}\n\n.sp-gradient--visible {\n  opacity: 1;\n}\n\n/* ============================================\n   Controls Container\n   ============================================ */\n.sp-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px 12px;\n  /* Composed through a variable so the fullscreen rule below can add the\n     device's own inset without restating the 12px. */\n  padding-bottom: calc(12px + var(--sp-inset-bottom, 0px));\n  gap: 4px;\n  /* Declared on the bar because the fit needs the same number the volume rules\n     below use: the slider expands mid-interaction and the plugin reserves the\n     room in advance (see interactionReserve() in index.ts, which reads this\n     property off this element at init). One declaration, so the stylesheet and\n     the arithmetic cannot drift. Both the bar and the overflow tray are inside\n     .sp-controls, so a volume control inherits it wherever the fit put it. */\n  --sp-volume-slider-width: 64px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n  z-index: 10;\n}\n\n.sp-controls--visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sp-controls--hidden {\n  opacity: 0;\n  transform: translateY(4px);\n  pointer-events: none;\n}\n\n/* ============================================\n   Safe Area (fullscreen only)\n\n   Scoped to :fullscreen on purpose. Applied unconditionally, the inset would\n   push an inline player's controls up on any page whose viewport meta says\n   viewport-fit=cover, where there is no notch or home indicator over the\n   player at all. Both the bar and the progress wrapper are direct children of\n   the container, which is the element that goes fullscreen.\n\n   The :-webkit-full-screen twin is a separate rule because an unknown\n   pseudo-class anywhere in a selector list invalidates the whole rule.\n\n   Nothing is needed in packages/embed/iframe.html: viewport-fit has no effect\n   inside an iframe.\n   ============================================ */\n:fullscreen > .sp-controls,\n:fullscreen > .sp-progress-wrapper {\n  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n:-webkit-full-screen > .sp-controls,\n:-webkit-full-screen > .sp-progress-wrapper {\n  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n/* ============================================\n   Progress Bar (Above Controls)\n   ============================================ */\n.sp-progress-wrapper {\n  position: absolute;\n  bottom: calc(48px + var(--sp-inset-bottom, 0px));\n  left: 12px;\n  right: 12px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease;\n}\n\n.sp-progress-wrapper--visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Touch: a 20px wrapper is not a 20px target. The control bar is a later\n   sibling at the same z-index and spans 0..56px from the bottom, so it wins\n   hit-testing in the 48..56 overlap and the exclusive region for scrubbing is\n   12px. The wrapper grows UPWARD to 44px (48..92) because growing downward\n   would be swallowed by the bar; the 3px bar itself stays exactly where it was\n   (centred 8.5px above the wrapper's bottom edge, which is what\n   align-items: center gave it inside 20px). The handle and tooltip\n   enlargements are gated behind (hover: hover) and never match a finger, but\n   .sp-progress--dragging is not, so the handle still appears mid-drag.\n\n   any-pointer, not pointer: (pointer: coarse) describes the PRIMARY pointer\n   only, so a hybrid laptop with a mouse and a touchscreen reports fine and kept\n   the 12px exclusive region under a finger. (any-pointer: coarse) is true\n   whenever a coarse pointer is available at all, which is the population that\n   needs the target. The cost on such a machine is 24px of extra hit area for\n   the mouse, over the player's own bottom edge. */\n@media (any-pointer: coarse) {\n  .sp-progress-wrapper {\n    height: 44px;\n    align-items: flex-end;\n    padding-bottom: 8.5px;\n    box-sizing: border-box;\n  }\n}\n\n.sp-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  transition: height 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress {\n    height: 5px;\n  }\n}\n\n.sp-progress--dragging {\n  height: 5px;\n}\n\n.sp-progress__track {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.sp-progress__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n\n.sp-progress__filled {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-accent, #e50914);\n  border-radius: inherit;\n}\n\n/* Chapter markers */\n.sp-progress__markers {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.sp-progress__marker {\n  position: absolute;\n  top: 0;\n  width: 2px;\n  height: 100%;\n  margin-left: -1px;\n  background: rgba(0, 0, 0, 0.65);\n}\n\n.sp-progress__handle {\n  position: absolute;\n  top: 50%;\n  width: 14px;\n  height: 14px;\n  background: var(--sp-accent, #e50914);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__handle {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.sp-progress--dragging .sp-progress__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Thumbnail Preview */\n.sp-thumbnail-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  pointer-events: none;\n  display: none;\n  z-index: 21;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.sp-thumbnail-preview__img {\n  background-repeat: no-repeat;\n}\n\n/* Progress Tooltip */\n.sp-progress__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  padding: 6px 10px;\n  background: rgba(20, 20, 20, 0.95);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  border-radius: 4px;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n.sp-progress__tooltip-chapter {\n  display: block;\n  max-width: 220px;\n  overflow: hidden;\n  color: rgba(255, 255, 255, 0.75);\n  font-weight: 400;\n  font-variant-numeric: normal;\n  text-overflow: ellipsis;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__tooltip {\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   Control Buttons\n   ============================================ */\n.sp-control {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;\n  flex-shrink: 0;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n@media (hover: hover) {\n  .sp-control:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-control:active {\n  transform: scale(0.92);\n}\n\n.sp-control:focus-visible {\n  outline: 2px solid var(--sp-accent, #e50914);\n  outline-offset: 2px;\n}\n\n.sp-control:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sp-control:disabled:hover {\n  background: none;\n}\n\n.sp-control svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  display: block;\n}\n\n.sp-control--small svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* ============================================\n   Spacer\n   ============================================ */\n.sp-spacer {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   Overflow Tray\n\n   The wrapper is deliberately unpositioned: the strip is absolutely\n   positioned against .sp-controls (the nearest positioned ancestor), so it\n   spans the bar's width and sits directly above it instead of hanging off a\n   44px button.\n\n   The strip wraps horizontally and keeps overflow visible. A vertical menu of\n   44px rows would be taller than a portrait phone player (211px at 375px wide,\n   measured 2026-09-05) and a scrolling one would clip the popovers registered\n   controls own.\n   ============================================ */\n.sp-overflow {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.sp-overflow-tray {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 4px;\n  padding: 8px 12px;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  overflow: visible;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-overflow-tray--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Beats a control's own inline style.display = '' on its next update(), so a\n   control the fit took off screen stays off screen until the fit says\n   otherwise. */\n.sp-control--collapsed {\n  display: none !important;\n}\n\n/* ============================================\n   Time Display\n   ============================================ */\n.sp-time {\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(255, 255, 255, 0.9);\n  white-space: nowrap;\n  padding: 0 4px;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================\n   Volume Control\n   ============================================ */\n.sp-volume {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.sp-volume__slider-wrap {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.2s ease;\n}\n\n/* Both widths come from --sp-volume-slider-width on .sp-controls, which is also\n   what the fit reserves for this control. focus-within is deliberately not\n   gated on hover: a tap on the mute button focuses it, which is how the slider\n   opens on a phone. */\n@media (hover: hover) {\n  .sp-volume:hover .sp-volume__slider-wrap {\n    width: var(--sp-volume-slider-width);\n  }\n}\n\n.sp-volume:focus-within .sp-volume__slider-wrap {\n  width: var(--sp-volume-slider-width);\n}\n\n.sp-volume__slider {\n  width: 64px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  cursor: pointer;\n  position: relative;\n  margin: 0 8px 0 4px;\n}\n\n.sp-volume__level {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: #fff;\n  border-radius: inherit;\n  transition: width 0.1s ease;\n}\n\n/* ============================================\n   Live Indicator\n   ============================================ */\n.sp-live {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--sp-accent, #e50914);\n  cursor: pointer;\n  padding: 6px 10px;\n  border-radius: 4px;\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-live:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-live__dot {\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 50%;\n  animation: sp-pulse 2s ease-in-out infinite;\n}\n\n.sp-live--behind {\n  opacity: 0.6;\n}\n\n.sp-live--behind .sp-live__dot {\n  animation: none;\n}\n\n.sp-live--behind span {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n/* Progress bar live mode: accent color for filled bar */\n.sp-progress--live .sp-progress__filled {\n  background: var(--sp-accent, #e50914);\n}\n\n@keyframes sp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ============================================\n   Quality / Settings Menu\n   ============================================ */\n.sp-quality {\n  position: relative;\n}\n\n.sp-quality__btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sp-quality__label {\n  font-size: 12px;\n  font-weight: 500;\n  opacity: 0.9;\n}\n\n.sp-quality-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  /* Bounded to the player, see .sp-settings-panel. border-box because the\n     bound is a content-box height by default and this menu adds 8px of padding\n     top and bottom: at the 139px bound a 211px player gives, it rendered 155px\n     and the host clipped the last 16px of it. */\n  box-sizing: border-box;\n  max-height: var(--sp-menu-max-height, none);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  padding: 8px 0;\n  min-width: 150px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-quality-menu--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sp-quality-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-quality-menu__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-quality-menu__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-quality-menu__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-quality-menu__item--active .sp-quality-menu__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Settings Menu (Gear Icon)\n   ============================================ */\n.sp-settings {\n  position: relative;\n}\n\n.sp-settings__btn {\n  display: flex;\n  align-items: center;\n}\n\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  /* Bounded to the room above the control bar, written by the UI plugin's\n     ResizeObserver as max(120px, container height - the bar's measured height\n     - 16px). The bar is measured rather than assumed because its\n     padding-bottom carries the safe-area inset in fullscreen, which moves the\n     anchor these menus hang from. The Speed sub-panel is 253px (a\n     37px header plus six 36px rows) against a 211px portrait phone player, so\n     without this the host's overflow: hidden cuts off the Back header and the\n     first three speeds and playback speed is unreachable (measured at 375x211\n     on 2026-09-05). With the variable unset the panel behaves exactly as it\n     did before.\n\n     Not applied to .sp-overflow-tray: that one has to keep overflow visible so\n     the popovers its adopted controls own are not clipped.\n\n     border-box because max-height bounds the content box: .sp-settings-panel--main\n     is this same element with 4px of padding top and bottom, so wherever the\n     bound binds the main menu, it rendered 8px past it and the host clipped the\n     difference. The --sub views set padding: 0 and were already exact, which is\n     why the browser harness's speed-panel check could not see this. */\n  box-sizing: border-box;\n  max-height: var(--sp-menu-max-height, none);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  min-width: 200px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-settings-panel--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Main menu rows */\n.sp-settings-panel--main {\n  padding: 4px 0;\n}\n\n.sp-settings-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__row:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__label {\n  font-weight: 500;\n}\n\n.sp-settings-panel__value {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 12px;\n}\n\n.sp-settings-panel__arrow {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__arrow svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n/* Sub-menu panels */\n.sp-settings-panel--sub {\n  padding: 0;\n}\n\n.sp-settings-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__header:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__back {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__back svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__header-label {\n  flex: 1;\n}\n\n.sp-settings-panel__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-settings-panel__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-settings-panel__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-settings-panel__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-settings-panel__check svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__item--active .sp-settings-panel__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Captions Button\n   ============================================ */\n.sp-captions--active {\n  color: var(--sp-accent, #e50914);\n}\n\n/* ============================================\n   Cast Button States\n   ============================================ */\n.sp-cast--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-cast--unavailable {\n  opacity: 0.4;\n}\n\n/* ============================================\n   Big Play Button\n\n   z-index 12 puts it above the gradient (5) and above the gestures plugin's\n   tap surface (6), so a tap lands on the button and starts playback instead\n   of being read as a tap-to-toggle-controls gesture - exactly how the control\n   bar's play button (10) already behaves. It stays below the spinner (15) and\n   the error overlay (25), both of which own the middle of the picture when\n   they are up.\n\n   Hidden with visibility, not opacity alone, so it takes no pointer events\n   while it is away.\n   ============================================ */\n.sp-big-play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 12;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Comfortably past the 44px minimum touch target the control bar uses. */\n  width: 72px;\n  height: 72px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  cursor: pointer;\n  opacity: 0;\n  visibility: hidden;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);\n  transition: opacity 0.2s ease, visibility 0.2s, transform 0.15s ease,\n    background 0.15s ease;\n}\n\n.sp-big-play--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-big-play svg {\n  width: 36px;\n  height: 36px;\n  fill: currentColor;\n  /* Optical centring: the play triangle's mass sits left of the glyph box. */\n  margin-left: 3px;\n}\n\n.sp-big-play:hover {\n  transform: translate(-50%, -50%) scale(1.06);\n}\n\n.sp-big-play:active {\n  transform: translate(-50%, -50%) scale(0.96);\n}\n\n.sp-big-play:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 3px;\n}\n\n/* ============================================\n   Error Overlay\n   ============================================ */\n.sp-error-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 25;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s ease, visibility 0.25s;\n}\n\n.sp-error-overlay--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-error-overlay__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  max-width: 360px;\n}\n\n.sp-error-overlay__icon {\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 16px;\n}\n\n.sp-error-overlay__icon svg {\n  width: 48px;\n  height: 48px;\n  fill: currentColor;\n}\n\n/* Reconnecting: pulse the icon so the overlay reads as active work,\n   not a dead-end error */\n.sp-error-overlay--reconnecting .sp-error-overlay__icon {\n  animation: sp-reconnect-pulse 1.2s ease-in-out infinite;\n}\n\n@keyframes sp-reconnect-pulse {\n  0%, 100% { opacity: 0.4; }\n  50% { opacity: 1; }\n}\n\n.sp-error-overlay__message {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0 0 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-error-overlay__actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.sp-error-overlay__retry {\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  border: none;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 120px;\n  min-height: 44px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__retry:hover {\n  filter: brightness(1.1);\n}\n\n.sp-error-overlay__retry:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__retry:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.sp-error-overlay__dismiss {\n  background: none;\n  color: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 100px;\n  min-height: 44px;\n  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__dismiss:hover {\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.sp-error-overlay__dismiss:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__dismiss:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   Buffering Indicator\n   ============================================ */\n.sp-buffering {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 15;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sp-buffering--visible {\n  opacity: 1;\n}\n\n.sp-buffering svg {\n  width: 48px;\n  height: 48px;\n  fill: rgba(255, 255, 255, 0.9);\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n}\n\n@keyframes sp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.sp-spin {\n  animation: sp-spin 0.8s linear infinite;\n}\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  .sp-gradient,\n  .sp-controls,\n  .sp-progress-wrapper,\n  .sp-progress,\n  .sp-progress__handle,\n  .sp-progress__tooltip,\n  .sp-control,\n  .sp-volume__slider-wrap,\n  .sp-quality-menu,\n  .sp-overflow-tray,\n  .sp-settings-panel,\n  .sp-settings-panel__row,\n  .sp-settings-panel__item,\n  .sp-settings-panel__header,\n  .sp-buffering,\n  .sp-big-play,\n  .sp-error-overlay,\n  .sp-error-overlay__retry,\n  .sp-error-overlay__dismiss {\n    transition: none;\n  }\n\n  .sp-big-play:hover,\n  .sp-big-play:active {\n    transform: translate(-50%, -50%);\n  }\n\n  .sp-live__dot,\n  .sp-spin {\n    animation: none;\n  }\n}\n\n/* ============================================\n   CSS Custom Properties (Theming)\n   ============================================ */\n:root {\n  --sp-accent: #e50914;\n  --sp-color: #fff;\n  --sp-bg: rgba(0, 0, 0, 0.8);\n  --sp-control-height: 48px;\n  --sp-icon-size: 24px;\n}\n";
-
-/**
- * Formatting utility functions
- */
-/**
- * Format seconds as time string (mm:ss or h:mm:ss).
- */
-declare function formatTime(seconds: number): string;
-/**
- * Format time for live streams (relative to live edge).
- */
-declare function formatLiveTime(behindLive: number): string;
+declare const styles = "\n/* ============================================\n   Container & Base\n   ============================================ */\n.sp-container {\n  position: relative;\n  /* Own stacking context: the control bar, menus and overlays all carry\n     z-index, and without this they compete with the host page's own layers\n     instead of staying inside the player. */\n  isolation: isolate;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-container video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: contain;\n}\n\n.sp-container:focus {\n  outline: none;\n}\n\n/* ============================================\n   Gradient Overlay\n   ============================================ */\n.sp-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 160px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.8) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n  z-index: 5;\n}\n\n.sp-gradient--visible {\n  opacity: 1;\n}\n\n/* ============================================\n   Controls Container\n   ============================================ */\n.sp-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px 12px;\n  /* Composed through a variable so the fullscreen rule below can add the\n     device's own inset without restating the 12px. */\n  padding-bottom: calc(12px + var(--sp-inset-bottom, 0px));\n  gap: 4px;\n  /* Declared on the bar because the fit needs the same number the volume rules\n     below use: the slider expands mid-interaction and the plugin reserves the\n     room in advance (see interactionReserve() in index.ts, which reads this\n     property off this element at init). One declaration, so the stylesheet and\n     the arithmetic cannot drift. Both the bar and the overflow tray are inside\n     .sp-controls, so a volume control inherits it wherever the fit put it. */\n  --sp-volume-slider-width: 64px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n  z-index: 10;\n}\n\n.sp-controls--visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sp-controls--hidden {\n  opacity: 0;\n  transform: translateY(4px);\n  pointer-events: none;\n}\n\n/* ============================================\n   Safe Area (fullscreen only)\n\n   Scoped to :fullscreen on purpose. Applied unconditionally, the inset would\n   push an inline player's controls up on any page whose viewport meta says\n   viewport-fit=cover, where there is no notch or home indicator over the\n   player at all. Both the bar and the progress wrapper are direct children of\n   the container, which is the element that goes fullscreen.\n\n   The :-webkit-full-screen twin is a separate rule because an unknown\n   pseudo-class anywhere in a selector list invalidates the whole rule.\n\n   Nothing is needed in packages/embed/iframe.html: viewport-fit has no effect\n   inside an iframe.\n   ============================================ */\n:fullscreen > .sp-controls,\n:fullscreen > .sp-progress-wrapper {\n  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n:-webkit-full-screen > .sp-controls,\n:-webkit-full-screen > .sp-progress-wrapper {\n  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n/* ============================================\n   Progress Bar (Above Controls)\n   ============================================ */\n.sp-progress-wrapper {\n  position: absolute;\n  bottom: calc(48px + var(--sp-inset-bottom, 0px));\n  left: 12px;\n  right: 12px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease;\n}\n\n.sp-progress-wrapper--visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Touch: a 20px wrapper is not a 20px target. The control bar is a later\n   sibling at the same z-index and spans 0..56px from the bottom, so it wins\n   hit-testing in the 48..56 overlap and the exclusive region for scrubbing is\n   12px. The wrapper grows UPWARD to 44px (48..92) because growing downward\n   would be swallowed by the bar; the 3px bar itself stays exactly where it was\n   (centred 8.5px above the wrapper's bottom edge, which is what\n   align-items: center gave it inside 20px). The handle and tooltip\n   enlargements are gated behind (hover: hover) and never match a finger, but\n   .sp-progress--dragging is not, so the handle still appears mid-drag.\n\n   any-pointer, not pointer: (pointer: coarse) describes the PRIMARY pointer\n   only, so a hybrid laptop with a mouse and a touchscreen reports fine and kept\n   the 12px exclusive region under a finger. (any-pointer: coarse) is true\n   whenever a coarse pointer is available at all, which is the population that\n   needs the target. The cost on such a machine is 24px of extra hit area for\n   the mouse, over the player's own bottom edge. */\n@media (any-pointer: coarse) {\n  .sp-progress-wrapper {\n    height: 44px;\n    align-items: flex-end;\n    padding-bottom: 8.5px;\n    box-sizing: border-box;\n  }\n}\n\n.sp-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  transition: height 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress {\n    height: 5px;\n  }\n}\n\n.sp-progress--dragging {\n  height: 5px;\n}\n\n.sp-progress__track {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.sp-progress__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n\n.sp-progress__filled {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-accent, #e50914);\n  border-radius: inherit;\n}\n\n/* Chapter markers */\n.sp-progress__markers {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.sp-progress__marker {\n  position: absolute;\n  top: 0;\n  width: 2px;\n  height: 100%;\n  margin-left: -1px;\n  background: rgba(0, 0, 0, 0.65);\n}\n\n.sp-progress__handle {\n  position: absolute;\n  top: 50%;\n  width: 14px;\n  height: 14px;\n  background: var(--sp-accent, #e50914);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__handle {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.sp-progress--dragging .sp-progress__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Thumbnail Preview */\n.sp-thumbnail-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  pointer-events: none;\n  display: none;\n  z-index: 21;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.sp-thumbnail-preview__img {\n  background-repeat: no-repeat;\n}\n\n/* Progress Tooltip */\n.sp-progress__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  padding: 6px 10px;\n  background: rgba(20, 20, 20, 0.95);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  border-radius: 4px;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n.sp-progress__tooltip-chapter {\n  display: block;\n  max-width: 220px;\n  overflow: hidden;\n  color: rgba(255, 255, 255, 0.75);\n  font-weight: 400;\n  font-variant-numeric: normal;\n  text-overflow: ellipsis;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__tooltip {\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   Control Buttons\n   ============================================ */\n.sp-control {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;\n  flex-shrink: 0;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n@media (hover: hover) {\n  .sp-control:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-control:active {\n  transform: scale(0.92);\n}\n\n.sp-control:focus-visible {\n  outline: 2px solid var(--sp-accent, #e50914);\n  outline-offset: 2px;\n}\n\n.sp-control:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sp-control:disabled:hover {\n  background: none;\n}\n\n.sp-control svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  display: block;\n}\n\n.sp-control--small svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* ============================================\n   Spacer\n   ============================================ */\n.sp-spacer {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   Overflow Tray\n\n   The wrapper is deliberately unpositioned: the strip is absolutely\n   positioned against .sp-controls (the nearest positioned ancestor), so it\n   spans the bar's width and sits directly above it instead of hanging off a\n   44px button.\n\n   The strip wraps horizontally and keeps overflow visible. A vertical menu of\n   44px rows would be taller than a portrait phone player (211px at 375px wide,\n   measured 2026-09-05) and a scrolling one would clip the popovers registered\n   controls own.\n   ============================================ */\n.sp-overflow {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.sp-overflow-tray {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 4px;\n  padding: 8px 12px;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  overflow: visible;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-overflow-tray--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Beats a control's own inline style.display = '' on its next update(), so a\n   control the fit took off screen stays off screen until the fit says\n   otherwise. */\n.sp-control--collapsed {\n  display: none !important;\n}\n\n/* ============================================\n   Time Display\n   ============================================ */\n.sp-time {\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(255, 255, 255, 0.9);\n  white-space: nowrap;\n  padding: 0 4px;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================\n   Volume Control\n   ============================================ */\n.sp-volume {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.sp-volume__slider-wrap {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.2s ease;\n}\n\n/* Both widths come from --sp-volume-slider-width on .sp-controls, which is also\n   what the fit reserves for this control. focus-within is deliberately not\n   gated on hover: a tap on the mute button focuses it, which is how the slider\n   opens on a phone. */\n@media (hover: hover) {\n  .sp-volume:hover .sp-volume__slider-wrap {\n    width: var(--sp-volume-slider-width);\n  }\n}\n\n.sp-volume:focus-within .sp-volume__slider-wrap {\n  width: var(--sp-volume-slider-width);\n}\n\n.sp-volume__slider {\n  width: 64px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  cursor: pointer;\n  position: relative;\n  margin: 0 8px 0 4px;\n}\n\n.sp-volume__level {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: #fff;\n  border-radius: inherit;\n  transition: width 0.1s ease;\n}\n\n/* ============================================\n   Live Indicator\n   ============================================ */\n.sp-live {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--sp-accent, #e50914);\n  cursor: pointer;\n  padding: 6px 10px;\n  border-radius: 4px;\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-live:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-live__dot {\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 50%;\n  animation: sp-pulse 2s ease-in-out infinite;\n}\n\n.sp-live--behind {\n  opacity: 0.6;\n}\n\n.sp-live--behind .sp-live__dot {\n  animation: none;\n}\n\n.sp-live--behind span {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n/* Progress bar live mode: accent color for filled bar */\n.sp-progress--live .sp-progress__filled {\n  background: var(--sp-accent, #e50914);\n}\n\n@keyframes sp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ============================================\n   Quality / Settings Menu\n   ============================================ */\n.sp-quality {\n  position: relative;\n}\n\n.sp-quality__btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sp-quality__label {\n  font-size: 12px;\n  font-weight: 500;\n  opacity: 0.9;\n}\n\n.sp-quality-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  /* Bounded to the player, see .sp-settings-panel. border-box because the\n     bound is a content-box height by default and this menu adds 8px of padding\n     top and bottom: at the 139px bound a 211px player gives, it rendered 155px\n     and the host clipped the last 16px of it. */\n  box-sizing: border-box;\n  max-height: var(--sp-menu-max-height, none);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  padding: 8px 0;\n  min-width: 150px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-quality-menu--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sp-quality-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-quality-menu__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-quality-menu__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-quality-menu__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-quality-menu__item--active .sp-quality-menu__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Settings Menu (Gear Icon)\n   ============================================ */\n.sp-settings {\n  position: relative;\n}\n\n.sp-settings__btn {\n  display: flex;\n  align-items: center;\n}\n\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  /* Bounded to the room above the control bar, written by the UI plugin's\n     ResizeObserver as max(120px, container height - the bar's measured height\n     - 16px). The bar is measured rather than assumed because its\n     padding-bottom carries the safe-area inset in fullscreen, which moves the\n     anchor these menus hang from. The Speed sub-panel is 253px (a\n     37px header plus six 36px rows) against a 211px portrait phone player, so\n     without this the host's overflow: hidden cuts off the Back header and the\n     first three speeds and playback speed is unreachable (measured at 375x211\n     on 2026-09-05). With the variable unset the panel behaves exactly as it\n     did before.\n\n     Not applied to .sp-overflow-tray: that one has to keep overflow visible so\n     the popovers its adopted controls own are not clipped.\n\n     border-box because max-height bounds the content box: .sp-settings-panel--main\n     is this same element with 4px of padding top and bottom, so wherever the\n     bound binds the main menu, it rendered 8px past it and the host clipped the\n     difference. The --sub views set padding: 0 and were already exact, which is\n     why the browser harness's speed-panel check could not see this. */\n  box-sizing: border-box;\n  max-height: var(--sp-menu-max-height, none);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  min-width: 200px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-settings-panel--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Main menu rows */\n.sp-settings-panel--main {\n  padding: 4px 0;\n}\n\n.sp-settings-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__row:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__label {\n  font-weight: 500;\n}\n\n.sp-settings-panel__value {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 12px;\n}\n\n.sp-settings-panel__arrow {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__arrow svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n/* Sub-menu panels */\n.sp-settings-panel--sub {\n  padding: 0;\n}\n\n.sp-settings-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__header:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__back {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__back svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__header-label {\n  flex: 1;\n}\n\n.sp-settings-panel__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-settings-panel__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-settings-panel__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-settings-panel__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-settings-panel__check svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__item--active .sp-settings-panel__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Captions Button\n   ============================================ */\n.sp-captions--active {\n  color: var(--sp-accent, #e50914);\n}\n\n/* ============================================\n   Cast Button States\n   ============================================ */\n.sp-cast--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-cast--unavailable {\n  opacity: 0.4;\n}\n\n/* ============================================\n   Big Play Button\n\n   z-index 12 puts it above the gradient (5) and above the gestures plugin's\n   tap surface (6), so a tap lands on the button and starts playback instead\n   of being read as a tap-to-toggle-controls gesture - exactly how the control\n   bar's play button (10) already behaves. It stays below the spinner (15) and\n   the error overlay (25), both of which own the middle of the picture when\n   they are up.\n\n   Hidden with visibility, not opacity alone, so it takes no pointer events\n   while it is away.\n   ============================================ */\n.sp-big-play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 12;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Comfortably past the 44px minimum touch target the control bar uses. */\n  width: 72px;\n  height: 72px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  cursor: pointer;\n  opacity: 0;\n  visibility: hidden;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);\n  transition: opacity 0.2s ease, visibility 0.2s, transform 0.15s ease,\n    background 0.15s ease;\n}\n\n.sp-big-play--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-big-play svg {\n  width: 36px;\n  height: 36px;\n  fill: currentColor;\n  /* Optical centring: the play triangle's mass sits left of the glyph box. */\n  margin-left: 3px;\n}\n\n.sp-big-play:hover {\n  transform: translate(-50%, -50%) scale(1.06);\n}\n\n.sp-big-play:active {\n  transform: translate(-50%, -50%) scale(0.96);\n}\n\n.sp-big-play:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 3px;\n}\n\n/* ============================================\n   Error Overlay\n   ============================================ */\n.sp-error-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 25;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s ease, visibility 0.25s;\n}\n\n.sp-error-overlay--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-error-overlay__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  max-width: 360px;\n}\n\n.sp-error-overlay__icon {\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 16px;\n}\n\n.sp-error-overlay__icon svg {\n  width: 48px;\n  height: 48px;\n  fill: currentColor;\n}\n\n/* Reconnecting: pulse the icon so the overlay reads as active work,\n   not a dead-end error */\n.sp-error-overlay--reconnecting .sp-error-overlay__icon {\n  animation: sp-reconnect-pulse 1.2s ease-in-out infinite;\n}\n\n@keyframes sp-reconnect-pulse {\n  0%, 100% { opacity: 0.4; }\n  50% { opacity: 1; }\n}\n\n.sp-error-overlay__message {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0 0 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-error-overlay__actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.sp-error-overlay__retry {\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  border: none;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 120px;\n  min-height: 44px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__retry:hover {\n  filter: brightness(1.1);\n}\n\n.sp-error-overlay__retry:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__retry:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.sp-error-overlay__dismiss {\n  background: none;\n  color: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 100px;\n  min-height: 44px;\n  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__dismiss:hover {\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.sp-error-overlay__dismiss:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__dismiss:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   Buffering Indicator\n   ============================================ */\n.sp-buffering {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 15;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sp-buffering--visible {\n  opacity: 1;\n}\n\n.sp-buffering svg {\n  width: 48px;\n  height: 48px;\n  fill: rgba(255, 255, 255, 0.9);\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n}\n\n@keyframes sp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.sp-spin {\n  animation: sp-spin 0.8s linear infinite;\n}\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  .sp-gradient,\n  .sp-controls,\n  .sp-progress-wrapper,\n  .sp-progress,\n  .sp-progress__handle,\n  .sp-progress__tooltip,\n  .sp-control,\n  .sp-volume__slider-wrap,\n  .sp-quality-menu,\n  .sp-overflow-tray,\n  .sp-settings-panel,\n  .sp-settings-panel__row,\n  .sp-settings-panel__item,\n  .sp-settings-panel__header,\n  .sp-buffering,\n  .sp-big-play,\n  .sp-error-overlay,\n  .sp-error-overlay__retry,\n  .sp-error-overlay__dismiss {\n    transition: none;\n  }\n\n  .sp-big-play:hover,\n  .sp-big-play:active {\n    transform: translate(-50%, -50%);\n  }\n\n  .sp-live__dot,\n  .sp-spin {\n    animation: none;\n  }\n}\n\n/* ============================================\n   CSS Custom Properties (Theming)\n   ============================================\n\n   Token defaults live at the use sites as var() fallbacks, not in a :root\n   block. A :root declaration wrote --sp-accent, --sp-color, --sp-bg,\n   --sp-control-height and --sp-icon-size into the HOST document, so mounting a\n   player changed variables the page may own. A .sp-container declaration would\n   be no better: the container rule wins for every descendant, so it would\n   override a host that themes the player from its own :root. A var() fallback\n   does neither - it applies only where nothing else defines the token.\n\n   setTheme() writes the same names onto the player's container, which still\n   wins over the fallbacks.\n   ============================================ */\n";
 
 /**
  * UI Controls Plugin for Scarlett Player
@@ -480,4 +473,4 @@ declare function formatLiveTime(behindLive: number): string;
  */
 declare function uiPlugin(config?: UIPluginConfig): IUIPlugin;
 
-export { type BuiltinControlSlot, type Control, type ControlFactory, type ControlSlot, DEFAULT_PRIORITY, type FitExit, type FitItem, type FitPlan, type FitRank, type FitRule, type FitTemplate, type IUIPlugin, type LayoutConfig, type RegisterControlOptions, type ThemeConfig, type UIPluginConfig, assertFitLayout, uiPlugin as default, formatLiveTime, formatTime, getControlFactory, icons, planFit, registerControl, resetControlRegistry, resolveFitItems, styles, uiPlugin, unregisterControl, unregisterControlsFor };
+export { type BuiltinControlSlot, type Control, type ControlFactory, type ControlSlot, DEFAULT_PRIORITY, type FitExit, type FitItem, type FitPlan, type FitRank, type FitRule, type FitTemplate, type IUIPlugin, type LayoutConfig, type RegisterControlOptions, type ThemeConfig, type UIPluginConfig, assertFitLayout, uiPlugin as default, getControlFactory, icons, planFit, registerControl, resetControlRegistry, resolveFitItems, styles, uiPlugin, unregisterControl, unregisterControlsFor };

package/dist/index.js

@@ -1171,24 +1171,30 @@ var styles = `
 
 /* ============================================
    CSS Custom Properties (Theming)
+   ============================================
+
+   Token defaults live at the use sites as var() fallbacks, not in a :root
+   block. A :root declaration wrote --sp-accent, --sp-color, --sp-bg,
+   --sp-control-height and --sp-icon-size into the HOST document, so mounting a
+   player changed variables the page may own. A .sp-container declaration would
+   be no better: the container rule wins for every descendant, so it would
+   override a host that themes the player from its own :root. A var() fallback
+   does neither - it applies only where nothing else defines the token.
+
+   setTheme() writes the same names onto the player's container, which still
+   wins over the fallbacks.
    ============================================ */
-:root {
-  --sp-accent: #e50914;
-  --sp-color: #fff;
-  --sp-bg: rgba(0, 0, 0, 0.8);
-  --sp-control-height: 48px;
-  --sp-icon-size: 24px;
-}
 `;
 
 // src/icons.ts
+import { SHARED_ICON_PATHS } from "@scarlett-player/core";
 var icons = {
-  play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`,
+  play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${SHARED_ICON_PATHS.play}"/></svg>`,
   pause: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>`,
   replay: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>`,
-  volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>`,
+  volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${SHARED_ICON_PATHS.volumeHigh}"/></svg>`,
   volumeLow: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>`,
-  volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>`,
+  volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${SHARED_ICON_PATHS.volumeMuted}"/></svg>`,
   fullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>`,
   exitFullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>`,
   pip: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/></svg>`,
@@ -1261,29 +1267,7 @@ function setAttr(el, name, value) {
 }
 
 // src/utils/format.ts
-function formatTime(seconds) {
-  if (!isFinite(seconds) || isNaN(seconds)) {
-    return "0:00";
-  }
-  const absSeconds = Math.abs(seconds);
-  const h = Math.floor(absSeconds / 3600);
-  const m = Math.floor(absSeconds % 3600 / 60);
-  const s = Math.floor(absSeconds % 60);
-  const sign = seconds < 0 ? "-" : "";
-  if (h > 0) {
-    return `${sign}${h}:${pad(m)}:${pad(s)}`;
-  }
-  return `${sign}${m}:${pad(s)}`;
-}
-function pad(n) {
-  return n < 10 ? `0${n}` : `${n}`;
-}
-function formatLiveTime(behindLive) {
-  if (behindLive <= 0) {
-    return "LIVE";
-  }
-  return `-${formatTime(behindLive)}`;
-}
+import { formatTime, formatLiveTime } from "@scarlett-player/core";
 
 // src/controls/PlayButton.ts
 var PlayButton = class {
@@ -1588,7 +1572,7 @@ var ProgressBar = class {
             video.addEventListener("seeked", resumePlayback);
           }
         }
-        this.tooltip.style.opacity = "0";
+        this.tooltip.style.opacity = "";
         this.thumbnailPreview.hide();
       }
     };
@@ -1597,7 +1581,7 @@ var ProgressBar = class {
     };
     this.onMouseLeave = () => {
       if (!this.isDragging) {
-        this.tooltip.style.opacity = "0";
+        this.tooltip.style.opacity = "";
         this.thumbnailPreview.hide();
       }
     };
@@ -1869,6 +1853,7 @@ var ProgressBar = class {
     this.wrapper.removeEventListener("mousemove", this.onMouseMove);
     this.wrapper.removeEventListener("mouseleave", this.onMouseLeave);
     this.wrapper.removeEventListener("touchstart", this.onTouchStart);
+    this.el.removeEventListener("keydown", this.onKeyDown);
     document.removeEventListener("mousemove", this.onDocMouseMove);
     document.removeEventListener("mouseup", this.onMouseUp);
     document.removeEventListener("touchmove", this.onDocTouchMove);
@@ -3413,7 +3398,7 @@ function resetControlRegistry() {
 }
 
 // src/version.ts
-var PKG_VERSION = true ? "1.9.0" : "0.0.0-dev";
+var PKG_VERSION = true ? "1.11.0" : "0.0.0-dev";
 
 // src/index.ts
 var DEFAULT_LAYOUT = [
@@ -3450,6 +3435,7 @@ var FALLBACK_VOLUME_SLIDER_WIDTH = 64;
 var OVERFLOW_BUTTON_WIDTH = 44;
 var FALLBACK_BAR_PADDING_X = 24;
 var FALLBACK_BAR_GAP = 4;
+var RESIZE_FALLBACK_DEBOUNCE_MS = 100;
 var MENU_HEIGHT_RESERVE = 16;
 var FALLBACK_BAR_HEIGHT = 56;
 var MIN_MENU_HEIGHT = 120;
@@ -3476,6 +3462,8 @@ function uiPlugin(config = {}) {
   let entries = [];
   let timeEntry = null;
   let resizeObserver = null;
+  let windowResizeTimer = null;
+  let onWindowResize = null;
   let barPaddingX = FALLBACK_BAR_PADDING_X;
   let barGap = FALLBACK_BAR_GAP;
   let volumeSliderWidth = FALLBACK_VOLUME_SLIDER_WIDTH;
@@ -3954,6 +3942,17 @@ function uiPlugin(config = {}) {
           scheduleUpdate();
         });
         resizeObserver.observe(container);
+      } else if (responsive && typeof window !== "undefined") {
+        onWindowResize = () => {
+          if (windowResizeTimer) clearTimeout(windowResizeTimer);
+          windowResizeTimer = setTimeout(() => {
+            windowResizeTimer = null;
+            applyMenuBounds(container.clientHeight);
+            fitPending = true;
+            scheduleUpdate();
+          }, RESIZE_FALLBACK_DEBOUNCE_MS);
+        };
+        window.addEventListener("resize", onWindowResize);
       }
       controlRegistryUnsubscribe = onControlRegistered((id, owner) => {
         if (!layout.includes(id)) {
@@ -3996,6 +3995,14 @@ function uiPlugin(config = {}) {
       }
       resizeObserver?.disconnect();
       resizeObserver = null;
+      if (onWindowResize) {
+        window.removeEventListener("resize", onWindowResize);
+        onWindowResize = null;
+      }
+      if (windowResizeTimer) {
+        clearTimeout(windowResizeTimer);
+        windowResizeTimer = null;
+      }
       api?.container?.style.removeProperty("--sp-menu-max-height");
       stateUnsubscribe?.();
       stateUnsubscribe = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/ui",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "UI Controls Plugin for Scarlett Player",
   "type": "module",
   "main": "dist/index.cjs",
@@ -22,14 +22,14 @@
     "dist"
   ],
   "peerDependencies": {
-    "@scarlett-player/core": "^1.8.0"
+    "@scarlett-player/core": "^1.10.0"
   },
   "devDependencies": {
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^1.6.0",
     "jsdom": "^24.0.0",
-    "@scarlett-player/core": "1.9.0"
+    "@scarlett-player/core": "1.11.0"
   },
   "keywords": [
     "video",