@m4l/gclick 0.24.1 → 0.25.0

package/components/VideoPlayer/VideojsDefaultSkin.styles.js

@@ -1,9 +1,15 @@
-const t = (e) => ({
-  /*
-   * ==========================================================================
-   * Reset
-   * ==========================================================================
-   */
+const t = (a) => ({
+  ".media-sr-only": {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    border: "0",
+    clip: "rect(0, 0, 0, 0)"
+  },
   ".media-default-skin *, .media-default-skin *::before, .media-default-skin *::after": {
     boxSizing: "border-box"
   },
@@ -23,16 +29,35 @@ const t = (e) => ({
       interpolateSize: "allow-keywords"
     }
   },
-  /*
-   * ==========================================================================
-   * Root Container
-   * ==========================================================================
-   */
   ".media-default-skin": {
-    "--media-current-shadow-color": "oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15))",
-    "--media-current-shadow-color-subtle": "oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4))",
-    "--media-icon-size": "18px",
-    "--media-color-scrollbar-thumb": "oklch(from currentColor l c h / 0.3)",
+    /* Colors */
+    "--media-internal-accent-color": "var(--media-accent-color, var(--media-default-accent-color))",
+    "--media-accent-contrast-color": "contrast-color(var(--media-internal-accent-color))",
+    "--media-accent-background-color": "var( --media-accent-color, oklch(from var(--media-default-accent-color) l c h / calc(alpha * 0.1)) )",
+    "--media-internal-accent-text-color": "var( --media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0 0 0))) )",
+    "--media-shadow-current-color": "oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15))",
+    "--media-shadow-subtle-current-color": "oklch(from var(--media-shadow-current-color) l c h / calc(alpha * 0.4))",
+    "--media-scrollbar-thumb-color": "oklch(from currentColor l c h / 0.3)",
+    /* Scaling - used in video fullscreen to scale the UI. */
+    "--media-scale": "1",
+    /* Fixed scaling unit to avoid inheriting the document's root font size. This must be a CSS <length>. */
+    "--media-internal-scale-unit": "var(--media-scale-unit, 16px)",
+    "--media-size": "calc(var(--media-internal-scale-unit) * var(--media-scale))",
+    /* Create a Tailwind-like spacing unit where 1 equals 4px with default scaling. */
+    "--media-spacing": "calc(var(--media-size) / 4)",
+    /* Font sizes */
+    "--media-font-size-medium": "calc(0.9375 * var(--media-size))",
+    /* 15px */
+    "--media-font-size-base": "calc(0.8125 * var(--media-size))",
+    /* 13px */
+    "--media-font-size-small": "calc(0.6875 * var(--media-size))",
+    /* 11px */
+    "--media-font-size-tiny": "calc(0.5625 * var(--media-size))",
+    /* 9px */
+    "--media-icon-size": "calc(1.125 * var(--media-size))",
+    /* 18px */
+    /* Radii */
+    "--media-container-border-radius": "var(--media-border-radius, 1.75rem)",
     position: "relative",
     display: "block",
     width: "100%",
@@ -40,40 +65,34 @@ const t = (e) => ({
     container: "media-root / inline-size",
     // Themed deviation (vendor value: `Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif`) —
     // the chrome follows the platform font instead of the vendor stack.
-    fontFamily: e.typography.fontFamily,
-    fontSize: "0.8125rem",
-    /* 13px at 100% font size */
+    fontFamily: a.typography.fontFamily,
+    fontSize: "var(--media-font-size-base)",
     WebkitFontSmoothing: "auto",
     MozOsxFontSmoothing: "auto",
     lineHeight: "1.5",
     letterSpacing: "normal",
     outline: "2px solid transparent",
     outlineOffset: "-4px",
-    scrollbarColor: "var(--media-color-scrollbar-thumb) transparent",
+    scrollbarColor: "var(--media-scrollbar-thumb-color) transparent",
     scrollbarWidth: "thin",
-    borderRadius: "var(--media-border-radius, 2rem)",
+    borderRadius: "var(--media-container-border-radius, 1.75rem)",
     isolation: "isolate",
     transitionTimingFunction: "ease-out",
     transitionDuration: "100ms",
     transitionProperty: "outline-offset, outline-color",
     "&:focus-visible": {
-      outlineColor: "currentColor",
+      outlineColor: "var(--media-focus-ring-color)",
       outlineOffset: "2px"
     },
     "&::-webkit-scrollbar-thumb": {
-      background: "var(--media-color-scrollbar-thumb)",
+      background: "var(--media-scrollbar-thumb-color)",
       borderRadius: "9999px"
     },
     "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
-      "--media-color-scrollbar-thumb": "oklch(from currentColor l c h / 0.8)",
+      "--media-scrollbar-thumb-color": "oklch(from currentColor l c h / 0.8)",
       scrollbarWidth: "auto"
     }
   },
-  /*
-   * ==========================================================================
-   * Surface (shared glass effect for tooltips, popovers, controls)
-   * ==========================================================================
-   */
   ".media-default-skin .media-surface": {
     backgroundColor: "var(--media-surface-background-color)",
     boxShadow: "0 0 0 1px var(--media-surface-outer-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color)",
@@ -86,14 +105,9 @@ const t = (e) => ({
       pointerEvents: "none",
       content: '""',
       borderRadius: "inherit",
-      boxShadow: "inset 0 0 0 1px var(--media-surface-inner-border-color)"
+      boxShadow: "inset 0 1px 0 0 var(--media-surface-inner-border-color), inset 0 0 0 1px oklch(from var(--media-surface-inner-border-color) l c h / calc(alpha * 0.5))"
     }
   },
-  /*
-   * ==========================================================================
-   * Media Element
-   * ==========================================================================
-   */
   ".media-default-skin ::slotted(video), .media-default-skin video": {
     display: "block",
     width: "100%",
@@ -104,7 +118,7 @@ const t = (e) => ({
     objectPosition: "var(--media-object-position, center)"
   },
   ".media-default-skin ::slotted(video)": {
-    borderRadius: "var(--media-video-border-radius)"
+    borderRadius: "var(--media-container-border-radius)"
   },
   ".media-default-skin video": {
     borderRadius: "inherit"
@@ -112,43 +126,21 @@ const t = (e) => ({
   ".media-default-skin:fullscreen ::slotted(video), .media-default-skin:fullscreen video": {
     objectFit: "contain"
   },
-  /*
-   * ==========================================================================
-   * Overlay / Scrim
-   * ==========================================================================
-   */
-  ".media-default-skin .media-overlay": {
+  ".media-default-skin .media-controls__backdrop": {
     position: "absolute",
     inset: "0",
+    zIndex: "10",
     pointerEvents: "none",
     backgroundImage: "linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3) 25%, oklch(0 0 0 / 0))",
     borderRadius: "inherit",
     opacity: "0",
-    backdropFilter: "blur(0) saturate(1)",
     transitionTimingFunction: "ease-out",
     transitionDuration: "var(--media-controls-transition-duration)",
-    transitionProperty: "opacity, backdrop-filter"
-  },
-  ".media-default-skin .media-error ~ .media-overlay": {
-    transitionDelay: "var(--media-error-dialog-transition-delay)",
-    transitionDuration: "var(--media-error-dialog-transition-duration)"
-  },
-  ".media-default-skin .media-controls[data-visible] ~ .media-overlay, .media-default-skin .media-error[data-open] ~ .media-overlay": {
-    opacity: "1"
-  },
-  ".media-default-skin .media-buffering-indicator[data-visible] ~ .media-overlay": {
-    background: "oklch(0 0 0 / 0.35)",
-    opacity: "1",
-    backdropFilter: "blur(8px)"
-  },
-  ".media-default-skin .media-error[data-open] ~ .media-overlay": {
-    backdropFilter: "blur(16px) saturate(1.5)"
+    transitionProperty: "opacity",
+    "&[data-visible]": {
+      opacity: "1"
+    }
   },
-  /*
-   * ==========================================================================
-   * Buffering Indicator
-   * ==========================================================================
-   */
   ".media-default-skin .media-buffering-indicator": {
     position: "absolute",
     inset: "0",
@@ -157,68 +149,110 @@ const t = (e) => ({
     placeContent: "center",
     color: "oklch(1 0 0)",
     pointerEvents: "none",
+    "&::before": {
+      position: "absolute",
+      inset: "0",
+      content: '""',
+      background: "oklch(0 0 0 / 0.35)",
+      backdropFilter: "blur(8px)"
+    },
+    "> *": {
+      position: "relative",
+      zIndex: "20"
+    },
     "&:not([data-visible])": {
       "--media-spinner-animation": "none"
     },
     "&[data-visible]": {
       display: "grid"
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      "--media-spinner-animation": "none"
     }
   },
-  /*
-   * ==========================================================================
-   * Error Dialog
-   * ==========================================================================
-   */
-  ".media-default-skin .media-error": {
-    outline: "none"
-  },
-  ".media-default-skin .media-error:not([data-open])": {
-    display: "none"
-  },
-  ".media-default-skin .media-error__title": {
-    fontWeight: "600",
-    lineHeight: "1.25"
-  },
-  ".media-default-skin .media-error__description": {
-    overflowWrap: "anywhere",
-    opacity: "0.7"
-  },
-  ".media-default-skin .media-error__actions": {
-    display: "flex",
-    gap: "0.5rem",
-    "& > *": {
-      flex: "1"
+  ".media-default-skin ": {
+    "media-error-dialog": {
+      position: "absolute",
+      inset: "0",
+      zIndex: "20",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      outline: "none",
+      "&:not([data-open])": {
+        display: "none"
+      }
+    },
+    ".media-dialog__backdrop": {
+      position: "absolute",
+      inset: "0",
+      zIndex: "10",
+      pointerEvents: "none",
+      background: "oklch(0 0 0 / 0.2)",
+      backdropFilter: "blur(16px) saturate(1.5)",
+      opacity: "1",
+      transitionTimingFunction: "var(--media-dialog-transition-timing-function)",
+      transitionDuration: "var(--media-dialog-transition-duration)",
+      transitionProperty: "opacity",
+      transitionDelay: "var(--media-dialog-transition-delay)",
+      "&[data-starting-style], &[data-ending-style]": {
+        opacity: "0"
+      },
+      "&[data-ending-style]": {
+        transitionDelay: "0ms"
+      },
+      "&:not([data-open])": {
+        display: "none"
+      }
+    },
+    ".media-dialog__popup": {
+      outline: "none"
+    },
+    ".media-dialog__title": {
+      fontWeight: "600",
+      lineHeight: "1.25"
+    },
+    ".media-dialog__description": {
+      overflowWrap: "anywhere",
+      opacity: "0.7"
+    },
+    ".media-dialog__actions": {
+      display: "flex",
+      gap: "calc(var(--media-spacing) * 2)",
+      "> *": {
+        flex: "1"
+      }
     }
   },
-  ".media-default-skin .media-error[data-open] ~ .media-controls *": {
-    visibility: "hidden"
-  },
-  /*
-   * ==========================================================================
-   * Controls
-   * ==========================================================================
-   */
   ".media-default-skin .media-controls": {
+    "--media-popover-side-offset": "calc(var(--media-spacing) * (var(--media-base-side-offset, 2) + 1))",
+    "--media-tooltip-side-offset": "var(--media-popover-side-offset)",
+    "--media-popover-boundary-offset": "calc(var(--media-spacing) * var(--media-base-boundary-offset, 2))",
+    "--media-tooltip-boundary-offset": "var(--media-popover-boundary-offset)",
     display: "flex",
-    columnGap: "0.075rem",
     alignItems: "center",
-    padding: "0.375rem",
+    padding: "calc(var(--media-spacing) * 1)",
     container: "media-controls / inline-size",
-    textShadow: "0 1px 0 var(--media-current-shadow-color)",
-    borderRadius: "1.5rem"
+    textShadow: "0 1px 0 var(--media-shadow-current-color)",
+    borderRadius: "calc(Infinity * 1px)",
+    "&:dir(rtl)": {
+      flexDirection: "row-reverse"
+    }
   },
-  /*
-   * ==========================================================================
-   * Time Display
-   * ==========================================================================
-   */
   ".media-default-skin .media-time-controls": {
     display: "flex",
     flex: "1",
-    gap: "0.75rem",
+    gap: "calc(var(--media-spacing) * 2.5)",
     alignItems: "center",
-    paddingInline: "0.5rem",
-    container: "media-time-controls / inline-size"
+    container: "media-time-controls / inline-size",
+    "&:dir(rtl)": {
+      flexDirection: "row-reverse"
+    },
+    "> .media-time:last-child": {
+      "@container media-time-controls (width < 16rem)": {
+        display: "none"
+      }
+    }
   },
   ".media-default-skin .media-time": {
     fontVariantNumeric: "tabular-nums"
@@ -227,28 +261,24 @@ const t = (e) => ({
     cursor: "pointer",
     outline: "2px solid transparent",
     outlineOffset: "-2px",
-    borderRadius: "0.25rem",
+    borderRadius: "calc(var(--media-spacing) * 1)",
     transitionTimingFunction: "ease-out",
     transitionDuration: "100ms",
     transitionProperty: "outline-color, outline-offset",
     "&:focus-visible": {
-      outlineColor: "currentColor",
+      outlineColor: "var(--media-focus-ring-color)",
       outlineOffset: "2px"
     }
   },
-  /*
-   * ==========================================================================
-   * Buttons
-   * ==========================================================================
-   */
   /* Base button */
   ".media-default-skin .media-button": {
     display: "flex",
     flexShrink: "0",
     alignItems: "center",
     justifyContent: "center",
+    height: "calc(var(--media-spacing) * 9)",
     minHeight: "0",
-    padding: "0.5rem 1rem",
+    padding: "calc(var(--media-spacing) * 2) calc(var(--media-spacing) * 4)",
     textAlign: "center",
     touchAction: "manipulation",
     cursor: "pointer",
@@ -256,73 +286,71 @@ const t = (e) => ({
     outline: "2px solid transparent",
     outlineOffset: "-2px",
     border: "none",
-    borderRadius: "calc(infinity * 1px)",
+    borderRadius: "calc(Infinity * 1px)",
     transitionTimingFunction: "ease-out",
     transitionDuration: "150ms",
-    transitionProperty: "background-color, outline-offset, scale",
+    transitionProperty: "background-color, color, outline-offset, scale",
     /* Fix weird jumping when clicking on the buttons in Safari. */
     willChange: "scale",
     "&:focus-visible": {
-      outlineColor: "currentColor",
+      outlineColor: "var(--media-focus-ring-color)",
       outlineOffset: "2px"
     },
-    "&:active": {
-      scale: "0.98"
+    '&:active:not([aria-disabled="true"])': {
+      scale: "0.97"
     },
-    "&[disabled]": {
+    '&[aria-disabled="true"]': {
       cursor: "not-allowed",
-      opacity: "0.5",
-      filter: "grayscale(1)"
-    },
-    '&[data-availability="unavailable"], &[data-availability="unsupported"]': {
-      display: "none"
+      opacity: "0.5"
     }
   },
   /* Primary button variant */
   ".media-default-skin .media-button--primary": {
     fontWeight: "500",
-    color: "oklch(0 0 0)",
+    color: "var(--media-accent-contrast-color)",
     textShadow: "none",
-    background: "oklch(1 0 0)"
+    background: "var(--media-internal-accent-color)"
   },
   /* Subtle button variant */
   ".media-default-skin .media-button--subtle": {
     color: "inherit",
     textShadow: "inherit",
     background: "transparent",
-    '&:hover, &:focus-visible, &[aria-expanded="true"]': {
-      textDecoration: "none",
-      backgroundColor: "oklch(from currentColor l c h / 0.1)"
+    '&:not([aria-disabled="true"])': {
+      '&:hover, &:focus-visible, &[aria-expanded="true"]': {
+        color: "var(--media-internal-accent-text-color)",
+        textDecoration: "none",
+        backgroundColor: "var(--media-accent-background-color)"
+      }
     }
   },
   /* Icon button variant */
   ".media-default-skin .media-button--icon": {
     display: "grid",
-    width: "2.25rem",
     aspectRatio: "1",
     padding: "0",
-    "&:active": {
-      scale: "0.9"
+    '&:active:not([aria-disabled="true"])': {
+      scale: "0.97"
     },
-    "& .media-icon__container": {
+    ".media-icon__container": {
       display: "grid"
     },
-    "& .media-icon": {
+    ".media-icon": {
       gridArea: "1 / 1",
-      transitionBehavior: "allow-discrete",
-      transitionProperty: "display, opacity",
-      transitionDuration: "150ms",
+      filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
       transitionTimingFunction: "ease-out",
-      filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
+      transitionDuration: "150ms",
+      transitionProperty: "opacity, scale"
     }
   },
   /* Seek button */
   ".media-default-skin .media-button--seek": {
-    "& .media-icon__label": {
+    ".media-icon__label": {
       position: "absolute",
       right: "-1px",
       bottom: "-3px",
-      fontSize: "10px",
+      fontSize: "0.715em",
+      /* 10px */
       fontWeight: "500",
       fontVariantNumeric: "tabular-nums",
       letterSpacing: "-0.05em"
@@ -346,8 +374,7 @@ const t = (e) => ({
   },
   /* Settings button */
   ".media-default-skin .media-button--settings": {
-    display: "none",
-    "& .media-icon--settings": {
+    ".media-icon--settings": {
       transition: "transform 150ms ease-in-out",
       "@media (prefers-reduced-motion: reduce)": {
         transitionDuration: "0ms"
@@ -357,9 +384,6 @@ const t = (e) => ({
       transform: "rotate(90deg)"
     }
   },
-  '.media-default-skin .media-button-group:has([data-availability="available"]) .media-button--settings': {
-    display: "grid"
-  },
   /*
    * Live button — wide pill button with a status dot (gray → red at the live
    * edge) rendered via ::before, and "LIVE" text rendered as the button's own
@@ -367,12 +391,12 @@ const t = (e) => ({
    */
   ".media-default-skin .media-button--live": {
     display: "inline-flex",
-    gap: "0.4rem",
+    gap: "calc(var(--media-spacing) * 1.5)",
     alignItems: "center",
     width: "auto",
     aspectRatio: "auto",
-    padding: "0.5rem 0.75rem",
-    fontSize: "0.75rem",
+    padding: "calc(var(--media-spacing) * 2) calc(var(--media-spacing) * 3)",
+    fontSize: "var(--media-font-size-small)",
     fontWeight: "600",
     lineHeight: "1",
     textTransform: "uppercase",
@@ -380,8 +404,8 @@ const t = (e) => ({
     "&::before": {
       display: "inline-block",
       flexShrink: "0",
-      width: "0.5rem",
-      height: "0.5rem",
+      width: "calc(var(--media-spacing) * 2)",
+      height: "calc(var(--media-spacing) * 2)",
       content: '""',
       backgroundColor: "oklch(from currentColor l c h / 0.4)",
       borderRadius: "50%",
@@ -391,39 +415,31 @@ const t = (e) => ({
       backgroundColor: "oklch(0.65 0.22 27)"
     }
   },
-  /*
-   * ==========================================================================
-   * Button Groups
-   * ==========================================================================
-   */
+  "@media (prefers-reduced-motion: reduce)": {
+    ".media-default-skin .media-button": {
+      scale: "1",
+      transitionProperty: "background-color, color",
+      willChange: "auto"
+    }
+  },
   ".media-default-skin .media-button-group": {
     display: "flex",
-    gap: "0.075rem",
+    gap: "1px",
     alignItems: "center",
-    "@container media-root (width > 42rem)": {
-      gap: "0.125rem"
+    "&:dir(rtl)": {
+      flexDirection: "row-reverse"
     }
   },
-  /*
-   * ==========================================================================
-   * Badge
-   * ==========================================================================
-   */
   ".media-default-skin .media-badge": {
-    padding: "0.125rem 0.375rem",
-    fontSize: "0.6875rem",
+    padding: "calc(var(--media-spacing) * 0.5) calc(var(--media-spacing) * 1.5)",
+    fontSize: "var(--media-font-size-small)",
     fontWeight: "500",
     lineHeight: "1",
     color: "oklch(from currentColor l c h / 0.85)",
     whiteSpace: "nowrap",
     backgroundColor: "oklch(from currentColor l c h / 0.1)",
-    borderRadius: "calc(infinity * 1px)"
+    borderRadius: "calc(Infinity * 1px)"
   },
-  /*
-   * ==========================================================================
-   * Icons
-   * ==========================================================================
-   */
   ".media-default-skin .media-icon__container": {
     position: "relative"
   },
@@ -432,14 +448,12 @@ const t = (e) => ({
     width: "var(--media-icon-size)",
     height: "var(--media-icon-size)"
   },
-  ".media-default-skin .media-icon--flipped": {
+  ".media-default-skin .media-icon--flipped, .media-default-skin:dir(rtl) .media-menu__chevron": {
     scale: "-1 1"
   },
-  /*
-   * ==========================================================================
-   * Poster Image
-   * ==========================================================================
-   */
+  ".media-default-skin:dir(rtl) .media-menu__chevron.media-icon--flipped": {
+    scale: "1 1"
+  },
   ".media-default-skin media-poster, .media-default-skin > img": {
     position: "absolute",
     inset: "0",
@@ -448,7 +462,7 @@ const t = (e) => ({
     pointerEvents: "none",
     transition: "opacity 0.25s"
   },
-  ".media-default-skin media-poster:not([data-visible]), .media-default-skin > img:not([data-visible]), .media-default-skin > img[data-visible]:not([data-loaded])": {
+  ".media-default-skin media-poster:not([data-visible]), .media-default-skin > img:not([data-visible])": {
     opacity: "0"
   },
   ".media-default-skin media-poster ::slotted(img), .media-default-skin media-poster img": {
@@ -460,7 +474,7 @@ const t = (e) => ({
     // vendor's `var()` expression. Serializes identically.
     objectFit: "var(--media-object-fit, contain)",
     objectPosition: "var(--media-object-position, center)",
-    borderRadius: "var(--media-video-border-radius)"
+    borderRadius: "var(--media-container-border-radius)"
   },
   ".media-default-skin > img": {
     // Double cast: csstype narrows this property to keywords and rejects the
@@ -469,88 +483,69 @@ const t = (e) => ({
     objectPosition: "var(--media-object-position, center)",
     borderRadius: "inherit"
   },
-  /* Blurred placeholder: HTML path targets media-poster::before, React path targets the skin container::before */
-  ".media-default-skin media-poster::before, .media-default-skin::before": {
-    position: "absolute",
-    inset: "0",
-    pointerEvents: "none",
-    content: '""',
-    backgroundImage: "var(--media-poster-placeholder, none)",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "var(--media-object-position, center)",
-    backgroundSize: "var(--media-object-fit, contain)",
-    filter: "blur(var(--media-poster-placeholder-blur, 20px))"
-  },
-  /* React path: hidden by default, transitions in while poster loads */
-  ".media-default-skin::before": {
-    opacity: "0",
-    transition: "opacity 0.25s"
-  },
-  /* Show placeholder while the poster is visible but not yet loaded */
-  ".media-default-skin:has(img[data-visible]:not([data-loaded]))::before": {
-    opacity: "1"
-  },
   ".media-default-skin:fullscreen media-poster ::slotted(img), .media-default-skin:fullscreen media-poster img, .media-default-skin:fullscreen > img": {
     objectFit: "contain"
   },
-  /*
-   * ==========================================================================
-   * Media thumbnail
-   * ==========================================================================
-   */
   ".media-default-skin .media-thumbnail": {
+    position: "relative",
     pointerEvents: "none",
     backgroundColor: "oklch(0 0 0 / 0.9)",
-    borderRadius: "0.75rem",
-    "& .media-thumbnail__image": {
+    borderRadius: "calc(var(--media-spacing) * 3)",
+    ".media-thumbnail__image": {
       position: "relative",
       display: "block",
+      maxWidth: "var(--media-thumbnail-max-width)",
+      maxHeight: "var(--media-thumbnail-max-height)",
       overflow: "clip",
       borderRadius: "inherit",
       "&::after": {
         position: "absolute",
         inset: "0",
         content: '""',
-        backgroundImage: "linear-gradient(to top, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0))",
+        backgroundImage: "linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.1), oklch(0 0 0 / 0))",
         borderRadius: "inherit"
       }
     },
-    "& .media-thumbnail__time": {
-      position: "absolute",
-      insetInline: "0",
-      bottom: "0.5rem",
-      textAlign: "center"
-    },
-    "& .media-thumbnail__spinner": {
+    ".media-thumbnail__spinner": {
       position: "absolute",
       top: "50%",
       left: "50%",
       opacity: "0",
       translate: "-50% -50%"
     },
-    "& .media-thumbnail__image, & .media-thumbnail__spinner": {
+    ".media-thumbnail__image, .media-thumbnail__spinner": {
       transition: "opacity 150ms ease-out"
     },
     "&:not(:has(.media-thumbnail__image[data-loading]))": {
-      "& .media-thumbnail__spinner": {
+      ".media-thumbnail__spinner": {
         "--media-spinner-animation": "none"
       }
     },
+    "@media (prefers-reduced-motion: reduce)": {
+      "--media-spinner-animation": "none"
+    },
     "&:has(.media-thumbnail__image[data-loading])": {
-      "& .media-thumbnail__image": {
+      width: "var(--media-thumbnail-max-width)",
+      maxWidth: "100%",
+      aspectRatio: "16 / 9",
+      overflow: "hidden",
+      ".media-thumbnail__image": {
         opacity: "0"
       },
-      "& .media-thumbnail__spinner": {
+      ".media-thumbnail__spinner": {
         opacity: "1"
       }
     }
   },
-  /*
-   * ==========================================================================
-   * Slider
-   * ==========================================================================
-   */
   ".media-default-skin .media-slider": {
+    "--media-track-size": "calc(var(--media-spacing) * 1)",
+    "--media-track-highlighted-size": "calc(var(--media-spacing) * 1.75)",
+    "--media-track-border-radius": "99px",
+    "--media-track-transition-duration": "100ms",
+    "--media-thumb-size": "calc(var(--media-spacing) * 3)",
+    "--media-chapter-gap": "calc(var(--media-spacing) * 1)",
+    "--media-internal-chapter-inset-start": "calc(var(--media-chapter-gap) / 2)",
+    "--media-internal-chapter-inset-end": "calc(var(--media-chapter-gap) / 2)",
     position: "relative",
     display: "flex",
     flex: "1",
@@ -558,180 +553,299 @@ const t = (e) => ({
     justifyContent: "center",
     cursor: "pointer",
     outline: "none",
-    borderRadius: "calc(infinity * 1px)",
-    '&[data-orientation="horizontal"]': {
-      width: "100%",
-      minWidth: "5rem",
-      height: "2rem"
-    },
-    '&[data-orientation="vertical"]': {
-      width: "2rem",
-      height: "5rem"
-    }
-  },
-  /* Track */
-  ".media-default-skin .media-slider__track": {
-    position: "relative",
-    overflow: "hidden",
-    userSelect: "none",
-    borderRadius: "inherit",
-    isolation: "isolate",
-    '&[data-orientation="horizontal"]': {
-      width: "100%",
-      height: "0.25rem"
-    },
-    '&[data-orientation="vertical"]': {
-      width: "0.25rem",
-      height: "100%"
-    }
-  },
-  /* Thumb */
-  ".media-default-skin .media-slider__thumb": {
-    position: "absolute",
-    zIndex: "10",
-    width: "0.625rem",
-    height: "0.625rem",
-    userSelect: "none",
-    outline: "4px solid transparent",
-    outlineOffset: "-4px",
-    backgroundColor: "currentColor",
-    borderRadius: "calc(infinity * 1px)",
-    boxShadow: "0 0 0 1px var(--media-current-shadow-color, oklch(0 0 0 / 0.1)), 0 1px 3px 0 oklch(0 0 0 / 0.35), 0 1px 2px -1px oklch(0 0 0 / 0.35)",
-    opacity: "0",
-    translate: "-50% -50%",
-    transitionTimingFunction: "ease-out",
-    transitionDuration: "150ms",
-    transitionProperty: "opacity, height, width, outline-offset",
     '&[data-orientation="horizontal"]': {
-      top: "50%",
-      left: "var(--media-slider-fill)"
+      width: "var(--media-slider-width, 100%)",
+      minWidth: "calc(var(--media-spacing) * 20)",
+      height: "var(--media-slider-height, calc(var(--media-spacing) * 8))"
     },
     '&[data-orientation="vertical"]': {
-      top: "calc(100% - var(--media-slider-fill))",
-      left: "50%"
+      width: "var(--media-slider-width, calc(var(--media-spacing) * 8))",
+      height: "var(--media-slider-height, calc(var(--media-spacing) * 20))"
     },
-    "&:hover, &:focus": {
-      outlineColor: "oklch(from currentColor l c h / 0.15)",
-      outlineOffset: "0"
+    /* Track */
+    ".media-slider__track": {
+      position: "relative",
+      overflow: "hidden",
+      userSelect: "none",
+      backgroundColor: "oklch(from currentColor l c h / 0.2)",
+      borderRadius: "var(--media-track-border-radius)",
+      isolation: "isolate",
+      '&[data-orientation="horizontal"]': {
+        width: "100%",
+        height: "var(--media-track-size)"
+      },
+      '&[data-orientation="vertical"]': {
+        width: "var(--media-track-size)",
+        height: "100%"
+      }
     },
-    "&::after": {
+    /* Shared track fills */
+    ".media-slider__buffer, .media-slider__fill": {
       position: "absolute",
-      inset: "-4px",
-      content: '""',
+      pointerEvents: "none",
       borderRadius: "inherit",
-      boxShadow: "0 0 0 2px currentColor",
-      transitionTimingFunction: "ease-out",
-      transitionDuration: "150ms",
-      transitionProperty: "opacity, scale"
-    },
-    "&:not(:focus-visible)::after": {
-      opacity: "0",
-      scale: "0.5"
-    }
-  },
-  ".media-default-skin .media-slider:active .media-slider__thumb, .media-default-skin .media-slider__thumb--persistent": {
-    width: "0.75rem",
-    height: "0.75rem"
-  },
-  ".media-default-skin .media-slider:hover .media-slider__thumb, .media-default-skin .media-slider__thumb:focus-visible, .media-default-skin .media-slider__thumb--persistent": {
-    opacity: "1"
-  },
-  /* Preview */
-  ".media-default-skin .media-slider__preview": {
-    "& .media-slider__value, &::before": {
-      opacity: "0",
-      scale: "0.5",
-      transitionTimingFunction: "ease-out",
-      transitionDuration: "200ms",
-      transitionProperty: "opacity, scale"
+      '&[data-orientation="horizontal"]': {
+        insetBlock: "0",
+        left: "0",
+        width: "100%"
+      },
+      '&[data-orientation="vertical"]': {
+        insetInline: "0",
+        bottom: "0",
+        height: "100%"
+      },
+      "@media (prefers-reduced-motion: no-preference)": {
+        transition: "clip-path var(--media-track-transition-duration) ease-out"
+      }
     },
-    "& .media-slider__value": {
-      position: "absolute",
-      bottom: "2.25rem",
-      textShadow: "0 1px 0 var(--media-current-shadow-color)",
-      filter: "blur(8px)",
-      translate: "-50% 0.5rem",
-      transitionProperty: "filter, opacity, scale, translate"
+    "&[data-dragging]": {
+      ".media-slider__fill, .media-slider__buffer": {
+        transitionDuration: "0ms"
+      }
     },
-    "&::before": {
-      display: "block",
-      minWidth: "0.25rem",
-      height: "0.25rem",
-      content: '""',
-      backgroundColor: "currentColor",
-      borderRadius: "100%",
-      boxShadow: "0 0 0 1px var(--media-current-shadow-color, oklch(0 0 0 / 0.15)), 0 1px 2px 0 oklch(0 0 0 / 0.35)"
+    /* Buffer */
+    ".media-slider__buffer": {
+      backgroundColor: "oklch(from currentColor l c h / 0.2)",
+      '&[data-orientation="horizontal"]': {
+        clipPath: "inset(0 calc(100% - var(--media-slider-buffer)) 0 0 round var(--media-track-border-radius))"
+      },
+      '&[data-orientation="vertical"]': {
+        clipPath: "inset(calc(100% - var(--media-slider-buffer)) 0 0 0 round var(--media-track-border-radius))"
+      }
     },
-    "&[data-pointing] .media-slider__value, &[data-pointing]:not([data-dragging])::before": {
-      opacity: "1",
-      scale: "1"
+    /* Fill */
+    ".media-slider__fill": {
+      backgroundColor: "var(--media-internal-accent-color)",
+      '&[data-orientation="horizontal"]': {
+        clipPath: "inset(0 calc(100% - var(--media-slider-fill)) 0 0 round var(--media-track-border-radius))"
+      },
+      '&[data-orientation="vertical"]': {
+        clipPath: "inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--media-track-border-radius))"
+      }
     },
-    "&[data-pointing] .media-slider__value": {
-      filter: "blur(0)",
-      translate: "-50% 0"
-    }
-  },
-  /* Shared track fills */
-  ".media-default-skin .media-slider__buffer, .media-default-skin .media-slider__fill": {
-    position: "absolute",
-    pointerEvents: "none",
-    borderRadius: "inherit"
-  },
-  '.media-default-skin .media-slider__buffer[data-orientation="horizontal"], .media-default-skin .media-slider__fill[data-orientation="horizontal"]': {
-    insetBlock: "0",
-    left: "0"
-  },
-  '.media-default-skin .media-slider__buffer[data-orientation="vertical"], .media-default-skin .media-slider__fill[data-orientation="vertical"]': {
-    insetInline: "0",
-    bottom: "0"
-  },
-  /* Buffer */
-  ".media-default-skin .media-slider__buffer": {
-    backgroundColor: "oklch(from currentColor l c h / 0.2)",
-    transitionTimingFunction: "ease-out",
-    transitionDuration: "0.25s",
-    '&[data-orientation="horizontal"]': {
-      width: "var(--media-slider-buffer)",
-      transitionProperty: "width"
+    "&[data-dragging] ": {
+      '.media-slider__fill[data-orientation="horizontal"]': {
+        clipPath: "inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--media-track-border-radius))"
+      },
+      '.media-slider__fill[data-orientation="vertical"]': {
+        clipPath: "inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--media-track-border-radius))"
+      }
     },
-    '&[data-orientation="vertical"]': {
-      height: "var(--media-slider-buffer)",
-      transitionProperty: "height"
-    }
-  },
-  /* Fill */
-  ".media-default-skin .media-slider__fill": {
-    backgroundColor: "currentColor",
-    '&[data-orientation="horizontal"]': {
-      width: "var(--media-slider-fill)"
+    /* Chapters */
+    ".media-slider__chapters": {
+      position: "relative",
+      display: "flex",
+      flex: "1",
+      alignItems: "center",
+      minWidth: "0",
+      minHeight: "0",
+      borderRadius: "inherit",
+      '&[data-orientation="horizontal"]': {
+        width: "100%",
+        height: "100%"
+      },
+      '&[data-orientation="vertical"]': {
+        flexDirection: "column-reverse",
+        width: "100%",
+        height: "100%"
+      }
     },
-    '&[data-orientation="vertical"]': {
-      height: "var(--media-slider-fill)"
-    }
-  },
-  /* Dragging — thumb and fill follow the pointer position */
-  '.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"]': {
-    left: "var(--media-slider-pointer)"
-  },
-  '.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"]': {
-    top: "calc(100% - var(--media-slider-pointer))"
-  },
-  '.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"]': {
-    width: "var(--media-slider-pointer)"
-  },
-  '.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"]': {
-    height: "var(--media-slider-pointer)"
+    ".media-slider__chapter": {
+      position: "absolute",
+      inset: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: "0",
+      minHeight: "0",
+      borderRadius: "inherit",
+      "&:first-of-type": {
+        "--media-internal-chapter-inset-start": "0px"
+      },
+      "&:last-child": {
+        "--media-internal-chapter-inset-end": "0px"
+      },
+      ".media-slider__chapter-track": {
+        borderRadius: "inherit",
+        "@media (prefers-reduced-motion: no-preference)": {
+          transition: "200ms ease-out",
+          transitionProperty: "height, width"
+        }
+      },
+      '&[data-orientation="horizontal"]': {
+        clipPath: "inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start))",
+        ".media-slider__chapter-track": {
+          height: "var(--media-track-size)",
+          clipPath: "inset( 0 calc(100% - var(--media-slider-chapter-end) + var(--media-internal-chapter-inset-end)) 0 calc(var(--media-slider-chapter-start) + var(--media-internal-chapter-inset-start)) round var(--media-track-border-radius) )"
+        },
+        "&[data-highlighted] .media-slider__chapter-track": {
+          height: "var(--media-track-highlighted-size)"
+        }
+      },
+      '&[data-orientation="vertical"]': {
+        clipPath: "inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0)",
+        ".media-slider__chapter-track": {
+          width: "var(--media-track-size)",
+          clipPath: "inset( calc(100% - var(--media-slider-chapter-end) + var(--media-internal-chapter-inset-end)) 0 calc(var(--media-slider-chapter-start) + var(--media-internal-chapter-inset-start)) 0 round var(--media-track-border-radius) )"
+        },
+        "&[data-highlighted] .media-slider__chapter-track": {
+          width: "var(--media-track-highlighted-size)"
+        }
+      }
+    },
+    /* Thumb */
+    ".media-slider__thumb": {
+      position: "absolute",
+      zIndex: "10",
+      width: "var(--media-thumb-size)",
+      height: "var(--media-thumb-size)",
+      userSelect: "none",
+      outline: "4px solid transparent",
+      outlineOffset: "-4px",
+      backgroundColor: "currentColor",
+      borderRadius: "calc(Infinity * 1px)",
+      boxShadow: "0 0 0 1px var(--media-shadow-current-color, oklch(0 0 0 / 0.1)), 0 1px 3px 0 oklch(0 0 0 / 0.35), 0 1px 2px -1px oklch(0 0 0 / 0.35)",
+      opacity: "0",
+      scale: "0.8",
+      translate: "-50% -50%",
+      '&[data-orientation="horizontal"]': {
+        top: "50%",
+        left: "var(--media-slider-fill)"
+      },
+      '&[data-orientation="vertical"]': {
+        top: "calc(100% - var(--media-slider-fill))",
+        left: "50%"
+      },
+      "&:focus-visible": {
+        outlineColor: "oklch(from currentColor l c h / 0.15)",
+        outlineOffset: "0",
+        opacity: "1"
+      },
+      "&::after": {
+        position: "absolute",
+        inset: "-4px",
+        content: '""',
+        borderRadius: "inherit",
+        boxShadow: "0 0 0 2px currentColor"
+      },
+      "&:not(:focus-visible)::after": {
+        opacity: "0",
+        scale: "0.5"
+      },
+      "&.media-slider__thumb--persistent": {
+        opacity: "1",
+        scale: "1"
+      },
+      "@media (hover: hover) and (pointer: fine)": {
+        "&:hover": {
+          outlineColor: "oklch(from currentColor l c h / 0.15)",
+          outlineOffset: "0"
+        }
+      },
+      "@media (prefers-reduced-motion: no-preference)": {
+        transitionTimingFunction: "ease-out",
+        transitionDuration: "var(--media-track-transition-duration)",
+        transitionProperty: "opacity, outline-offset, left, top, scale",
+        "&::after": {
+          transitionTimingFunction: "ease-out",
+          transitionDuration: "150ms",
+          transitionProperty: "opacity, scale"
+        }
+      }
+    },
+    "@media (hover: hover) and (pointer: fine)": {
+      "&:hover .media-slider__thumb": {
+        opacity: "1",
+        scale: "1"
+      }
+    },
+    "&[data-dragging] .media-slider__thumb": {
+      opacity: "1",
+      scale: "0.9",
+      "@media (prefers-reduced-motion: no-preference)": {
+        transitionProperty: "opacity, outline-offset, scale"
+      },
+      '&[data-orientation="horizontal"]': {
+        left: "var(--media-slider-pointer)"
+      },
+      '&[data-orientation="vertical"]': {
+        top: "calc(100% - var(--media-slider-pointer))"
+      }
+    },
+    /* Preview */
+    ".media-slider__preview": {
+      "--media-max-size-factor": "36",
+      "--media-max-size": "min(calc(var(--media-spacing) * var(--media-max-size-factor)), 100cqi)",
+      minWidth: "var(--media-max-size)",
+      height: "calc(var(--media-spacing) * 1)",
+      "@container media-root (width > 42rem)": {
+        "--media-max-size-factor": "48"
+      },
+      ".media-slider__thumbnail, .media-slider__value": {
+        position: "absolute",
+        left: "50%",
+        maxWidth: "var(--media-max-size)",
+        opacity: "0",
+        filter: "blur(8px)",
+        transformOrigin: "bottom",
+        scale: "0.8",
+        translate: "-50% calc(var(--media-spacing) * 2)",
+        transitionTimingFunction: "ease-out",
+        transitionDuration: "150ms"
+      },
+      ".media-slider__thumbnail": {
+        "--media-thumbnail-max-width": "var(--media-max-size)",
+        "--media-thumbnail-max-height": "var(--media-max-size)",
+        bottom: "calc(100% + (var(--media-spacing) * 9))"
+      },
+      ".media-slider__value": {
+        bottom: "calc(100% + (var(--media-spacing) * 10.5))",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      },
+      ".media-slider__chapter-title": {
+        minWidth: "0",
+        maxWidth: "var(--media-max-size)",
+        paddingInline: "calc(var(--media-spacing) * 6)",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        "&:empty": {
+          display: "none"
+        }
+      },
+      "&::before": {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        zIndex: "1",
+        width: "calc(var(--media-spacing) * 1)",
+        height: "calc(var(--media-spacing) * 1)",
+        pointerEvents: "none",
+        content: '""',
+        backgroundColor: "currentColor",
+        borderRadius: "100%",
+        boxShadow: "0 0 0 1px var(--media-shadow-current-color, oklch(0 0 0 / 0.15)), 0 1px 2px 0 oklch(0 0 0 / 0.35)",
+        opacity: "0",
+        scale: "0.5",
+        translate: "-50% -50%",
+        transitionTimingFunction: "ease-out",
+        transitionDuration: "200ms",
+        transitionProperty: "opacity, scale"
+      }
+    },
+    "&:is([data-pointing], :has(:focus-visible)) .media-slider__preview :is(.media-slider__value, .media-slider__thumbnail), .media-slider__preview[data-pointing]:not([data-dragging])::before": {
+      opacity: "1",
+      filter: "blur(0)",
+      scale: "1"
+    }
   },
-  /*
-   * ==========================================================================
-   * Popups & Tooltips
-   * ==========================================================================
-   */
-  ".media-default-skin ": {
+  ".media-default-skin  ": {
     "--media-popup-transition": "opacity var(--media-popup-transition-timing-function) var(--media-popup-transition-duration), filter var(--media-popup-transition-timing-function) var(--media-popup-transition-duration), transform var(--media-popup-transition-timing-function) var(--media-popup-transition-duration), scale var(--media-popup-transition-timing-function) var(--media-popup-transition-duration)"
   },
   ".media-default-skin .media-popover, .media-default-skin .media-tooltip": {
-    "--popup-translate-distance": "0.5rem",
+    "--media-popup-translate-distance": "calc(0.5 * var(--media-internal-scale-unit))",
     margin: "0",
     overflow: "visible",
     color: "inherit",
@@ -741,7 +855,7 @@ const t = (e) => ({
       opacity: "0",
       filter: "blur(4px)",
       /* We have to use transform here for translate as the translate property is used for positioning by core. */
-      transform: "translate(var(--popup-translate-x-distance, 0), var(--popup-translate-y-distance, 0))",
+      transform: "translate(var(--media-popup-translate-x-distance, 0), var(--media-popup-translate-y-distance, 0))",
       scale: "0.95"
     },
     "&[data-ending-style]": {
@@ -750,19 +864,19 @@ const t = (e) => ({
       transitionDuration: "max(0ms, calc(var(--media-popup-transition-duration) - 50ms))"
     },
     '&[data-side="top"]': {
-      "--popup-translate-y-distance": "var(--popup-translate-distance)",
+      "--media-popup-translate-y-distance": "var(--media-popup-translate-distance)",
       transformOrigin: "bottom"
     },
     '&[data-side="bottom"]': {
-      "--popup-translate-y-distance": "calc(var(--popup-translate-distance) * -1)",
+      "--media-popup-translate-y-distance": "calc(var(--media-popup-translate-distance) * -1)",
       transformOrigin: "top"
     },
     '&[data-side="left"]': {
-      "--popup-translate-x-distance": "var(--popup-translate-distance)",
+      "--media-popup-translate-x-distance": "var(--media-popup-translate-distance)",
       transformOrigin: "right"
     },
     '&[data-side="right"]': {
-      "--popup-translate-x-distance": "calc(var(--popup-translate-distance) * -1)",
+      "--media-popup-translate-x-distance": "calc(var(--media-popup-translate-distance) * -1)",
       transformOrigin: "left"
     },
     /* Safe area between trigger and popup */
@@ -801,21 +915,21 @@ const t = (e) => ({
     }
   },
   ".media-default-skin .media-popover--volume": {
-    padding: "0.75rem 0",
-    borderRadius: "calc(infinity * 1px)",
-    '&:has(media-volume-slider[data-availability="unsupported"])': {
+    padding: "calc(var(--media-spacing) * 3) 0",
+    borderRadius: "calc(Infinity * 1px)",
+    "&:has(media-volume-slider[data-hidden])": {
       display: "none"
     }
   },
   ".media-default-skin .media-tooltip": {
-    padding: "0.25rem 0.625rem",
-    fontSize: "0.75rem",
+    padding: "calc(var(--media-spacing) * 1) calc(var(--media-spacing) * 2.5)",
+    fontSize: "var(--media-font-size-base)",
     whiteSpace: "nowrap",
-    borderRadius: "calc(infinity * 1px)",
+    borderRadius: "calc(Infinity * 1px)",
     /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */
     "&[data-open]": {
       display: "flex",
-      columnGap: "0.25rem",
+      columnGap: "calc(var(--media-spacing) * 1)",
       alignItems: "center"
     },
     '&[data-side="top"]::before, &[data-side="bottom"]::before': {
@@ -824,147 +938,140 @@ const t = (e) => ({
     '&[data-side="left"]::before, &[data-side="right"]::before': {
       width: "var(--media-tooltip-side-offset)"
     },
-    "& .media-tooltip__kbd": {
+    ".media-tooltip__kbd": {
       minWidth: "1.5em",
       padding: "0.1em",
       fontFamily: "inherit",
-      fontSize: "90%",
+      fontSize: "var(--media-font-size-small)",
       fontWeight: "600",
       lineHeight: "1.25",
       textAlign: "center",
       backgroundColor: "oklch(from currentColor l c h / 0.3)",
-      borderRadius: "0.25rem"
+      borderRadius: "calc(var(--media-spacing) * 1)"
     }
   },
-  /*
-   * ==========================================================================
-   * Menus
-   * Note: Menus use `.media-popover` styles for positioning and transitions.
-   * ==========================================================================
-   */
   ".media-default-skin .media-menu": {
-    "--menu-transition-duration": "250ms",
-    "--menu-max-height": "14rem",
-    "--menu-padding": "0.25rem",
-    "--menu-border-radius": "0.75rem",
-    "--menu-item-border-radius": "calc(var(--menu-border-radius) - var(--menu-padding))",
+    "--media-menu-transition-duration": "250ms",
+    "--media-menu-max-height": "calc(var(--media-spacing) * 56)",
+    "--media-menu-padding": "calc(var(--media-spacing) * 1)",
+    "--media-menu-border-radius": "calc(var(--media-spacing) * 3)",
+    "--media-menu-item-border-radius": "calc(var(--media-menu-border-radius) - var(--media-menu-padding))",
     boxSizing: "border-box",
-    maxWidth: "var(--media-popover-available-width, none)",
-    maxHeight: "min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height))",
-    padding: "var(--menu-padding)",
+    minWidth: "max-content",
+    maxWidth: "var(--media-menu-available-width, none)",
+    maxHeight: "min(var(--media-menu-available-height, var(--media-menu-max-height)), var(--media-menu-max-height))",
+    padding: "var(--media-menu-padding)",
     overflow: "auto",
     overscrollBehavior: "none",
-    borderRadius: "var(--menu-border-radius)",
+    borderRadius: "var(--media-menu-border-radius)",
     "@media (prefers-reduced-motion: reduce)": {
-      "--menu-transition-duration": "0ms"
+      "--media-menu-transition-duration": "0ms"
     },
-    "& .media-menu__panel": {
+    "& > .media-menu__panel": {
+      "--media-menu-content-enter-translate": "100%",
       position: "absolute",
-      inset: "0",
-      padding: "var(--menu-padding)",
+      insetInline: "0",
+      top: "0",
+      zIndex: "10",
+      maxHeight: "inherit",
+      padding: "var(--media-menu-padding)",
       overflow: "auto",
       overscrollBehavior: "none",
       outline: "none",
       translate: "0 0",
-      transitionTimingFunction: "ease-in-out",
-      transitionDuration: "var(--menu-transition-duration)",
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "var(--media-menu-transition-duration)",
       transitionProperty: "translate, filter",
-      willChange: "translate, filter",
-      "&[data-starting-style], &[data-ending-style]": {
-        overflow: "hidden"
-      },
-      /* Root settings view — slides out when a submenu is active */
-      '&[data-menu-root-view][data-menu-view-state="inactive"]': {
+      "&:where([data-starting-style], [data-ending-style])": {
+        overflow: "hidden",
+        pointerEvents: "none",
         filter: "blur(8px)",
-        translate: "-100% 0",
-        /* Hide the indicator while transitioning */
-        "& .media-menu__group::before": {
-          display: "none"
-        }
+        translate: "var(--media-menu-content-enter-translate) 0"
       },
-      /* Submenu panels — slide in/out alongside the root view */
-      "&[data-submenu]": {
-        zIndex: "10",
-        "&:not([data-open], [data-ending-style])": {
-          translate: "-100% 0",
-          transitionProperty: "none"
-        },
-        "&[data-starting-style], &[data-ending-style]": {
-          pointerEvents: "none",
-          filter: "blur(8px)"
-        },
-        '&[data-starting-style][data-direction="forward"], &[data-ending-style][data-direction="back"]': {
-          translate: "100% 0"
-        },
-        '&[data-ending-style][data-direction="forward"], &[data-starting-style][data-direction="back"]': {
-          translate: "-100% 0"
-        }
+      "&:dir(rtl):where([data-starting-style], [data-ending-style])": {
+        "--media-menu-content-enter-translate": "-100%"
       }
     },
-    "& .media-menu__separator": {
-      marginBlock: "0.25rem",
+    ".media-menu__separator": {
+      marginBlock: "calc(var(--media-spacing) * 1)",
       borderBottom: "1px solid oklch(0 0 0 / 0.1)",
       boxShadow: "0 1px 0 0 oklch(1 0 0 / 0.075)"
     },
-    "& .media-menu__group": {
+    ".media-menu__content, .media-menu__group": {
+      anchorScope: "--menu-item-highlight-anchor",
       display: "flex",
       flexDirection: "column",
-      gap: "0.125rem",
+      gap: "calc(var(--media-spacing) * 0.5)",
       "@supports (top: anchor(top))": {
         "&::before": {
           position: "absolute",
-          positionAnchor: "--media-menu-item-highlight-anchor",
+          positionAnchor: "--menu-item-highlight-anchor",
           inset: "anchor(inside)",
+          /*
+           * Firefox treats the moving highlight as a content shift and re-scrolls
+           * the menu while hovering. Exclude it from scroll anchoring.
+           */
+          overflowAnchor: "none",
           pointerEvents: "none",
           content: '""',
-          backgroundColor: "oklch(from currentColor l c h / 0.1)",
-          borderRadius: "var(--menu-item-border-radius)",
-          transition: "inset ease-in-out 100ms"
+          backgroundColor: "var(--media-accent-background-color)",
+          borderRadius: "var(--media-menu-item-border-radius)",
+          transition: "inset 100ms ease-in-out"
+        },
+        '&:has([data-highlighted=""])::before': {
+          transitionDuration: "0ms"
         }
       }
     },
-    "& .media-menu__item, & .media-menu__back": {
+    ".media-menu__item, .media-menu__back": {
+      position: "relative",
       display: "flex",
-      gap: "0.375rem",
+      gap: "calc(var(--media-spacing) * 1.5)",
       alignItems: "center",
-      padding: "0.375rem 0.5rem",
-      textAlign: "left",
-      textShadow: "0 1px 0 var(--media-current-shadow-color)",
+      padding: "calc(var(--media-spacing) * 1.5) calc(var(--media-spacing) * 2)",
+      textAlign: "start",
+      whiteSpace: "nowrap",
+      textShadow: "0 1px 0 var(--media-shadow-current-color)",
       cursor: "pointer",
       userSelect: "none",
       outline: "2px solid transparent",
       outlineOffset: "-2px",
-      borderRadius: "var(--menu-item-border-radius)",
+      borderRadius: "var(--media-menu-item-border-radius)",
       transition: "background-color, color",
-      transitionTimingFunction: "ease-out",
+      transitionTimingFunction: "ease-in-out",
       transitionDuration: "100ms",
+      ".media-icon": {
+        flexShrink: "0",
+        color: "oklch(from currentColor l c h / 0.65)",
+        filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))"
+      },
       "&:focus-visible": {
-        outlineColor: "currentColor",
+        outlineColor: "var(--media-focus-ring-color)",
         outlineOffset: "2px"
       },
       "&:hover, &[data-highlighted]": {
-        backgroundColor: "oklch(from currentColor l c h / 0.1)",
-        "@supports (top: anchor(top))": {
-          anchorName: "--media-menu-item-highlight-anchor",
-          backgroundColor: "transparent"
+        color: "var(--media-internal-accent-text-color)",
+        backgroundColor: "var(--media-accent-background-color)",
+        ".media-icon": {
+          color: "inherit"
         }
       },
-      "& .media-icon": {
-        flexShrink: "0",
-        color: "oklch(from currentColor l c h / 0.65)",
-        filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
+      "@supports (top: anchor(top))": {
+        transitionDuration: "50ms",
+        "&:hover, &[data-highlighted]": {
+          transitionDuration: "200ms"
+        }
       }
     },
-    "& .media-menu__indicator": {
+    ".media-menu__indicator": {
       flexShrink: "0",
-      marginRight: "-0.25rem",
-      marginLeft: "auto",
+      marginInline: "auto calc(var(--media-spacing) * -1)",
       opacity: "0",
-      "& .media-icon": {
-        filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
+      ".media-icon": {
+        filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))"
       }
     },
-    "& .media-menu__item": {
+    ".media-menu__item": {
       justifyContent: "space-between",
       fontVariantNumeric: "tabular-nums",
       color: "inherit",
@@ -978,70 +1085,84 @@ const t = (e) => ({
       },
       '&[data-availability="unavailable"], &[data-availability="unsupported"]': {
         display: "none"
+      },
+      "&[data-highlighted]": {
+        "@supports (top: anchor(top))": {
+          anchorName: "--menu-item-highlight-anchor",
+          backgroundColor: "transparent"
+        }
       }
     },
-    "& .media-menu__tier": {
+    ".media-menu__tier": {
+      paddingInlineStart: "calc(var(--media-spacing) * 0.5)",
       paddingTop: "1px",
-      paddingLeft: "0.125rem",
-      fontSize: "0.5625rem",
+      fontSize: "var(--media-font-size-tiny)",
       fontWeight: "600",
       lineHeight: "1",
       color: "oklch(from currentColor l c h / 0.7)"
     },
-    "& .media-menu__back": {
+    ".media-menu__back": {
       width: "100%",
-      marginBottom: "0.125rem"
+      marginBottom: "calc(var(--media-spacing) * 0.5)"
     },
-    "& .media-menu__hint": {
+    ".media-menu__hint": {
       display: "inline-flex",
-      gap: "0.25rem",
+      gap: "calc(var(--media-spacing) * 1)",
       alignItems: "center",
       minWidth: "0",
-      paddingLeft: "0.5rem",
-      marginLeft: "auto",
-      fontSize: "0.75rem",
+      paddingInlineStart: "calc(var(--media-spacing) * 2)",
+      marginInlineStart: "auto",
       color: "oklch(from currentColor l c h / 0.65)"
     },
-    "& .media-menu__hint-label": {
-      maxWidth: "6rem",
+    ".media-menu__hint-label": {
+      maxWidth: "calc(var(--media-spacing) * 24)",
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
-    "& .media-menu__chevron": {
-      width: "0.875rem",
-      height: "0.875rem"
+    ".media-menu__chevron": {
+      width: "calc(var(--media-spacing) * 3.5)",
+      height: "calc(var(--media-spacing) * 3.5)"
     },
     /* Settings menu */
     "&.media-menu--settings": {
       width: "var(--media-menu-width)",
-      minWidth: "12rem",
+      minWidth: "calc(var(--media-spacing) * 44)",
       height: "var(--media-menu-height)",
       overflow: "hidden",
-      /* Add height and width transitions. */
-      transition: "var(--media-popup-transition), height var(--media-popup-transition-timing-function) var(--menu-transition-duration), width var(--media-popup-transition-timing-function) var(--menu-transition-duration)",
-      /* Don't transition width and height on open/close. */
+      /* Only the menu size changes between panels. */
+      transition: "var(--media-popup-transition), width var(--media-popup-transition-timing-function) var(--media-menu-transition-duration), height var(--media-popup-transition-timing-function) var(--media-menu-transition-duration)",
+      "& > .media-menu__content": {
+        "--media-menu-content-exit-translate": "-100%",
+        translate: "0 0",
+        transition: "translate var(--media-menu-transition-duration) ease-out, filter var(--media-menu-transition-duration) ease-out",
+        "&:dir(rtl)": {
+          "--media-menu-content-exit-translate": "100%"
+        }
+      },
+      "& > .media-menu__content[data-child-open]": {
+        filter: "blur(8px)",
+        translate: "var(--media-menu-content-exit-translate) 0"
+      },
+      /*
+       * WebKit can restart the parent Content transition while the
+       * anchor-positioned highlight remains active.
+       */
+      "& > .media-menu__content[data-child-open]::before, &:has(> .media-menu__panel[data-ending-style]) > .media-menu__content::before": {
+        display: "none"
+      },
+      /* Don't transition size on open/close. */
       "&[data-starting-style], &[data-ending-style]": {
         transition: "var(--media-popup-transition)"
       }
     }
   },
-  /*
-   * ==========================================================================
-   * Native Caption Track
-   * ==========================================================================
-   */
-  ".media-default-skin  ": {
+  ".media-default-skin   ": {
     "--media-caption-track-duration": "var(--media-controls-transition-duration)",
     "--media-caption-track-delay": "25ms",
-    "--media-caption-track-y": "-0.5rem",
+    "--media-caption-track-y": "calc(var(--media-spacing) * -2)",
     "&:has(.media-controls[data-visible])": {
-      "--media-caption-track-y": "-5.5rem"
-    },
-    "@container media-root (width > 42rem)": {
-      "&:has(.media-controls[data-visible]) > *": {
-        "--media-caption-track-y": "-3.5rem"
-      }
+      "--media-caption-track-y": "calc(var(--media-spacing) * -14)"
     }
   },
   ".media-default-skin video::-webkit-media-text-track-container": {
@@ -1052,142 +1173,158 @@ const t = (e) => ({
     transition: "translate var(--media-caption-track-duration) ease-out",
     transitionDelay: "var(--media-caption-track-delay)"
   },
-  /*
-   * ==========================================================================
-   * Input Feedback
-   * ==========================================================================
-   */
-  ".media-default-skin .media-input-feedback": {
+  ".media-default-skin .media-input-indicator": {
     position: "absolute",
-    insetInline: "0",
-    top: "0",
-    bottom: "3.5rem",
-    /* Shift up a little in smaller containers */
+    inset: "0",
     display: "grid",
     gridTemplateColumns: "1fr 1fr 1fr",
     alignItems: "center",
     justifyItems: "center",
-    color: "var(--media-color-primary, oklch(1 0 0))",
-    pointerEvents: "none",
-    "@container media-root (width > 24rem)": {
-      bottom: "0"
-    }
+    color: "oklch(1 0 0)",
+    pointerEvents: "none"
   },
-  /* --- Feedback islands ------------------------------------------------------- */
-  ".media-default-skin .media-input-feedback-island": {
-    "--media-surface-background-color": "oklch(0 0 0 / 0.25)",
-    position: "absolute",
-    top: "0.75rem",
-    fontWeight: "500",
-    color: "inherit",
-    pointerEvents: "none",
-    borderRadius: "calc(Infinity * 1px)",
-    transformOrigin: "top center",
-    transitionTimingFunction: "ease-out",
-    transitionDuration: "100ms",
-    ".media-input-feedback-island__content": {
-      display: "flex",
-      gap: "0.5rem",
-      alignItems: "center",
-      justifyContent: "space-between",
-      width: "100%",
-      padding: "0.25rem 0.625rem",
-      /* Increase contrast of the content */
-      "*": {
-        mixBlendMode: "difference"
-      }
-    },
-    ".media-icon": {
-      display: "none",
-      flexShrink: "0"
-    },
-    ".media-input-feedback-island__value": {
-      marginLeft: "auto"
-    },
-    "@media (pointer: coarse)": {
-      transitionProperty: "scale, translate, opacity",
-      willChange: "scale, translate, opacity"
-    },
-    "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
-      transitionProperty: "scale, translate, filter, opacity",
-      willChange: "scale, translate, filter, opacity"
-    },
-    "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
-      "--media-surface-background-color": "oklch(0 0 0)"
-    },
-    /* Default hidden state */
-    "&[data-starting-style], &[data-ending-style]": {
-      opacity: "0",
-      transitionTimingFunction: "ease-in",
-      transitionDuration: "250ms",
+  ".media-default-skin    ": {
+    ".media-volume-indicator, .media-status-indicator--state": {
+      "--media-surface-background-color": "oklch(0 0 0 / 0.25)",
+      position: "absolute",
+      top: "calc(var(--media-spacing) * 3)",
+      fontWeight: "500",
+      color: "inherit",
+      pointerEvents: "none",
+      borderRadius: "calc(Infinity * 1px)",
+      transformOrigin: "top center",
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "100ms",
+      ".media-volume-indicator__content, .media-status-indicator__content": {
+        display: "flex",
+        gap: "calc(var(--media-spacing) * 2)",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+        padding: "calc(var(--media-spacing) * 1) calc(var(--media-spacing) * 2.5)",
+        "*": {
+          mixBlendMode: "difference"
+        }
+      },
+      ".media-icon": {
+        display: "none",
+        flexShrink: "0"
+      },
+      ".media-volume-indicator__value, .media-status-indicator__value": {
+        marginLeft: "auto"
+      },
+      "@media (pointer: coarse)": {
+        transitionProperty: "scale, translate, opacity",
+        willChange: "scale, translate, opacity"
+      },
       "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
-        filter: "blur(8px)",
-        scale: "0.9"
+        transitionProperty: "scale, translate, filter, opacity",
+        willChange: "scale, translate, filter, opacity"
       },
-      "@media (prefers-reduced-motion: no-preference)": {
-        "&[data-ending-style]": {
+      "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
+        "--media-surface-background-color": "oklch(0 0 0)"
+      },
+      "&[data-starting-style], &[data-ending-style]": {
+        opacity: "0",
+        transitionTimingFunction: "ease-in",
+        transitionDuration: "250ms",
+        "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
+          filter: "blur(8px)",
+          scale: "0.9"
+        }
+      },
+      "&[data-ending-style]": {
+        "@media (prefers-reduced-motion: no-preference)": {
           translate: "0 -25%"
         }
       }
+    },
+    ".media-seek-indicator, .media-status-indicator--playback": {
+      display: "grid",
+      gridRow: "1",
+      gridColumn: "2",
+      placeContent: "center",
+      padding: "calc(var(--media-spacing) * 4)",
+      textAlign: "center"
     }
   },
-  ".media-default-skin .media-input-feedback-island--volume": {
-    width: "min(80%, 12rem)",
-    ".media-input-feedback-island__content": {
-      "--media-progress-fill": "var(--media-volume-fill)",
-      backgroundImage: "linear-gradient( to right, currentColor 0%, currentColor var(--media-progress-fill), transparent var(--media-progress-fill), transparent 100% )",
+  ".media-default-skin .media-volume-indicator": {
+    width: "min(80%, calc(var(--media-spacing) * 48))",
+    transform: "translateX(0)",
+    ".media-volume-indicator__content": {
+      backgroundImage: "linear-gradient(currentColor, currentColor)",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "left",
+      backgroundSize: "var(--media-volume-fill, 0%) 100%",
       borderRadius: "inherit",
-      transition: "--media-progress-fill 200ms linear"
+      transition: "background-size 200ms linear"
     },
     '&[data-level="high"] .media-icon--volume-high, &[data-level="low"] .media-icon--volume-low, &[data-level="off"] .media-icon--volume-off': {
       display: "block"
     },
     "@media (prefers-reduced-motion: no-preference)": {
-      "&[data-min], &[data-max]": {
-        animation: "media-shake 300ms ease-in-out"
+      "&[data-min]:not([data-starting-style], [data-ending-style]), &[data-max]:not([data-starting-style], [data-ending-style])": {
+        transform: "translateX(0.25px)",
+        transition: "transform 300ms linear(0, -24 20%, 16 40%, -8 60%, 4 80%, 1)"
       }
     }
   },
-  ".media-default-skin .media-input-feedback-island--status": {
+  ".media-default-skin .media-status-indicator--state": {
     '&[data-status="captions-on"] .media-icon--captions-on, &[data-status="captions-off"] .media-icon--captions-off, &[data-status="fullscreen"] .media-icon--fullscreen-enter, &[data-status="exit-fullscreen"] .media-icon--fullscreen-exit, &[data-status="pip"] .media-icon--pip-enter, &[data-status="exit-pip"] .media-icon--pip-exit': {
       display: "block"
     }
   },
-  /* --- Bubble ---------------------------------------------------------------- */
-  ".media-default-skin .media-input-feedback-bubble": {
-    display: "grid",
-    gridRow: "1",
-    gridColumn: "2",
-    placeContent: "center",
-    padding: "1rem",
-    textAlign: "center",
-    /* Central bubble (play, pause) */
-    "&:not([data-direction])": {
-      background: "oklch(0 0 0 / 0.35)",
-      borderRadius: "100%",
-      backdropFilter: "blur(8px)",
+  ".media-default-skin .media-status-indicator--playback": {
+    background: "oklch(0 0 0 / 0.35)",
+    borderRadius: "100%",
+    backdropFilter: "blur(8px)",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "200ms",
+    transitionProperty: "opacity, scale",
+    ".media-icon": {
+      gridArea: "1 / 1",
+      width: "calc(var(--media-icon-size) * 1.5)",
+      height: "calc(var(--media-icon-size) * 1.5)",
+      opacity: "0",
+      scale: "0",
       transitionTimingFunction: "ease-out",
-      transitionDuration: "200ms",
+      transitionDuration: "150ms",
       transitionProperty: "opacity, scale",
-      "&[data-starting-style], &[data-ending-style]": {
-        opacity: "0",
-        scale: "0.85"
-      },
-      "&[data-ending-style]": {
-        transitionTimingFunction: "ease-in",
-        transitionDuration: "100ms"
+      "&.media-icon--play": {
+        translate: "1px 0"
+      }
+    },
+    '&[data-status="pause"] .media-icon--pause, &[data-status="play"] .media-icon--play': {
+      opacity: "1",
+      scale: "1"
+    },
+    "&[data-starting-style], &[data-ending-style]": {
+      opacity: "0",
+      scale: "0.85"
+    },
+    "&[data-ending-style]": {
+      transitionTimingFunction: "ease-in",
+      transitionDuration: "100ms"
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "50ms",
+      transitionProperty: "opacity",
+      "&[data-starting-style], &[data-ending-style], .media-icon": {
+        scale: "1"
       },
-      "@media (prefers-reduced-motion: reduce)": {
+      ".media-icon": {
         transitionDuration: "50ms",
         transitionProperty: "opacity"
       }
+    }
+  },
+  ".media-default-skin .media-seek-indicator": {
+    gap: "calc(var(--media-spacing) * 1)",
+    ".media-seek-indicator__value": {
+      fontVariantNumeric: "tabular-nums"
     },
-    /* Directional bubbles (seek) */
-    "&[data-direction]": {
-      gap: "0.25rem",
-      "@container media-root (width > 24rem)": {
-        padding: "1.5rem"
-      }
+    "@container media-root (width > 24rem)": {
+      padding: "calc(var(--media-spacing) * 6)"
     },
     '&[data-direction="backward"]': {
       gridColumn: "1",
@@ -1197,17 +1334,10 @@ const t = (e) => ({
       gridColumn: "3",
       justifySelf: "right"
     },
-    /* Icons */
-    ".media-icon": {
-      display: "none",
+    ".media-icon--seek": {
+      display: "block",
       width: "calc(var(--media-icon-size) * 1.5)",
-      height: "calc(var(--media-icon-size) * 1.5)",
-      "&.media-icon--play": {
-        translate: "1px 0"
-      }
-    },
-    '&[data-direction] .media-icon--seek, &[data-status="pause"] .media-icon--pause, &[data-status="play"] .media-icon--play': {
-      display: "block"
+      height: "calc(var(--media-icon-size) * 1.5)"
     },
     '&[data-direction="backward"] .media-icon--seek': {
       scale: "-1 1"
@@ -1233,21 +1363,22 @@ const t = (e) => ({
    * ==========================================================================
    * Icon State Visibility for Video Skins
    *
-   * Data-attribute-driven visibility rules for multi-state icon buttons.
-   * Uses :is() with both element selectors (for HTML custom element wrappers)
-   * and class selectors (for React rendered SVG elements).
+   * Data-attribute-driven visibility rules for multi-state icon buttons shared
+   * by the HTML and React skins.
    * ==========================================================================
    */
   /* --- All icons hidden by default --- */
-  ".media-button--play .media-icon--restart, .media-button--play .media-icon--play, .media-button--play .media-icon--pause, .media-button--mute .media-icon--volume-off, .media-button--mute .media-icon--volume-low, .media-button--mute .media-icon--volume-high, .media-button--fullscreen .media-icon--fullscreen-enter, .media-button--fullscreen .media-icon--fullscreen-exit, .media-button--pip .media-icon--pip-enter, .media-button--pip .media-icon--pip-exit, .media-button--cast .media-icon--cast-enter, .media-button--cast .media-icon--cast-exit, .media-button--airplay .media-icon--airplay-enter, .media-button--airplay .media-icon--airplay-exit, .media-button--captions .media-icon--captions-off, .media-button--captions .media-icon--captions-on": {
-    display: "none",
+  ".media-button--play .media-icon, .media-button--mute .media-icon, .media-button--fullscreen .media-icon, .media-button--pip .media-icon, .media-button--cast .media-icon, .media-button--airplay .media-icon, .media-button--captions .media-icon": {
     opacity: "0"
   },
+  ".media-button--play .media-icon": {
+    scale: "0"
+  },
   /* --- Active icon per state --- */
   /* Play: ended → restart */
   '.media-button--play[data-ended] .media-icon--restart, .media-button--play:not([data-ended])[data-paused] .media-icon--play, .media-button--play:not([data-ended]):not([data-started]) .media-icon--play, .media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause, .media-button--mute[data-muted] .media-icon--volume-off, .media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low, .media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high, .media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter, .media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit, .media-button--pip:not([data-pip]) .media-icon--pip-enter, .media-button--pip[data-pip] .media-icon--pip-exit, .media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter, .media-button--cast[data-cast-state="connected"] .media-icon--cast-exit, .media-button--airplay:not([data-airplay-state="connected"]) .media-icon--airplay-enter, .media-button--airplay[data-airplay-state="connected"] .media-icon--airplay-exit, .media-button--captions:not([data-active]) .media-icon--captions-off, .media-button--captions[data-active] .media-icon--captions-on': {
-    display: "block",
-    opacity: "1"
+    opacity: "1",
+    scale: "1"
   },
   /* --- Pause keyframe animations on inactive icons --- */
   /*
@@ -1257,79 +1388,50 @@ const t = (e) => ({
    * running. Set the variables to `none` to short-circuit the keyframes.
    */
   '.media-button--airplay:not([data-airplay-state="connected"])': {
-    "--media-icon--airplay__fill-animation": "none",
-    "--media-icon--airplay__triangle-animation": "none"
+    "--media-icon-airplay-fill-animation": "none",
+    "--media-icon-airplay-triangle-animation": "none"
   },
-  /* -------------------------------------------------------------------------- */
-  /* Global @keyframes for all video skins (CSS & Tailwind) */
-  /* -------------------------------------------------------------------------- */
-  "@keyframes media-shake": {
-    "0%, 100%": {
-      translate: "0 0"
-    },
-    "20%": {
-      translate: "-6px 0"
-    },
-    "40%": {
-      translate: "4px 0"
-    },
-    "60%": {
-      translate: "-2px 0"
-    },
-    "80%": {
-      translate: "1px 0"
+  "@media (prefers-reduced-motion: reduce) ": {
+    ".media-button--airplay": {
+      "--media-icon--airplay__fill-animation": "none",
+      "--media-icon--airplay__triangle-animation": "none"
     }
   },
-  /* -------------------------------------------------------------------------- */
-  /* Global @properties for all video skins (CSS & Tailwind) */
-  /* -------------------------------------------------------------------------- */
-  "@property --media-progress-fill": {
-    syntax: '"<percentage>"',
-    inherits: "true",
-    initialValue: "0%"
-  },
-  /*
-   * ==========================================================================
-   * Root
-   * ==========================================================================
-   */
+  /* Video-specific container styles */
   ".media-default-skin--video": {
-    "--media-spring-timing-function": "linear( 0, 0.034 1.5%, 0.763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, 0.963 37.5%, 0.997 50.9%, 1 )",
-    "--media-border-color": "oklch(0 0 0 / 0.1)",
+    "--media-default-accent-color": "oklch(1 0 0)",
+    "--media-border-color": "light-dark(oklch(0 0 0 / 0.1), oklch(1 0 0 / 0.15))",
+    "--media-focus-ring-color": "light-dark(oklch(0 0 0), oklch(1 0 0))",
+    "--media-video-border-radius": "var(--media-container-border-radius)",
     "--media-surface-background-color": "oklch(1 0 0 / 0.1)",
-    "--media-surface-inner-border-color": "oklch(1 0 0 / 0.05)",
+    "--media-surface-inner-border-color": "oklch(1 0 0 / 0.1)",
     "--media-surface-outer-border-color": "oklch(0 0 0 / 0.1)",
     "--media-surface-shadow-color": "oklch(0 0 0 / 0.15)",
     "--media-surface-backdrop-filter": "blur(16px) saturate(1.5)",
-    "--media-video-border-radius": "var(--media-border-radius, 2rem)",
     "--media-controls-transition-duration": "100ms",
     "--media-controls-transition-timing-function": "ease-out",
-    "--media-error-dialog-transition-duration": "350ms",
-    "--media-error-dialog-transition-delay": "100ms",
-    "--media-error-dialog-transition-timing-function": "var(--media-spring-timing-function)",
+    "--media-dialog-transition-duration": "350ms",
+    "--media-dialog-transition-delay": "100ms",
+    "--media-dialog-transition-timing-function": "ease-out",
     "--media-popup-transition-duration": "100ms",
     "--media-popup-transition-timing-function": "ease-out",
-    "--media-tooltip-side-offset": "0.75rem",
-    "--media-tooltip-boundary-offset": "0.5rem",
-    "--media-popover-side-offset": "0.5rem",
-    "--media-popover-boundary-offset": "0.5rem",
     overflow: "clip",
     background: "oklch(0 0 0)",
     "@media (prefers-reduced-motion: reduce)": {
-      "--media-error-dialog-transition-duration": "50ms",
-      "--media-error-dialog-transition-delay": "0ms",
-      "--media-error-dialog-transition-timing-function": "ease-out",
-      "--media-popup-transition-duration": "0ms"
-    },
-    "@media (prefers-color-scheme: dark)": {
-      "--media-border-color": "oklch(1 0 0 / 0.15)"
+      "--media-dialog-transition-duration": "50ms",
+      "--media-dialog-transition-delay": "0ms",
+      "--media-popup-transition-duration": "0ms",
+      ".media-dialog__popup": {
+        scale: "1",
+        transitionProperty: "opacity"
+      }
     },
     "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
       "--media-surface-background-color": "oklch(0 0 0)",
       "--media-surface-inner-border-color": "oklch(1 0 0 / 0.25)",
       "--media-surface-outer-border-color": "transparent"
     },
-    "&:has(.media-controls:not([data-visible]))": {
+    "&:has(.media-controls--root:not([data-visible]))": {
       /* Slight delay to hide controls on non-touch devices after interaction */
       "@media (pointer: fine)": {
         "--media-controls-transition-duration": "300ms"
@@ -1352,169 +1454,196 @@ const t = (e) => ({
       boxShadow: "inset 0 0 0 1px var(--media-border-color)"
     },
     "&:fullscreen": {
-      "--media-border-radius": "0"
+      "--media-container-border-radius": "0",
+      "&::after": {
+        display: "none"
+      },
+      "@media (width >= 1280px)": {
+        "--media-scale": "1.25"
+      },
+      "@media (width >= 1536px)": {
+        "--media-scale": "1.5"
+      },
+      "@media (width >= 1920px)": {
+        "--media-scale": "1.75"
+      }
+    },
+    "*": {
+      "--media-focus-ring-color": "oklch(1 0 0)"
     }
   },
-  /*
-   * ==========================================================================
-   * Error Dialog
-   * ==========================================================================
-   */
-  ".media-default-skin--video .media-error": {
+  /* Dialog */
+  ".media-default-skin--video .media-dialog__popup": {
     position: "absolute",
-    inset: "0",
+    top: "50%",
+    left: "50%",
     zIndex: "20",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  ".media-default-skin--video .media-error__dialog": {
     display: "flex",
     flexDirection: "column",
-    gap: "0.75rem",
-    maxWidth: "18rem",
-    padding: "0.75rem",
+    gap: "calc(var(--media-spacing) * 3)",
+    width: "100%",
+    maxWidth: "calc(var(--media-spacing) * 72)",
+    padding: "calc(var(--media-spacing) * 3)",
     color: "oklch(1 0 0)",
     textShadow: "0 1px 0 oklch(0 0 0 / 0.25)",
-    borderRadius: "1.75rem",
-    transitionDelay: "var(--media-error-dialog-transition-delay)",
-    transitionTimingFunction: "var(--media-error-dialog-transition-timing-function)",
-    transitionDuration: "var(--media-error-dialog-transition-duration)",
+    borderRadius: "calc(var(--media-spacing) * 7)",
+    translate: "-50% -50%",
+    transitionDelay: "var(--media-dialog-transition-delay)",
+    transitionTimingFunction: "var(--media-dialog-transition-timing-function)",
+    transitionDuration: "var(--media-dialog-transition-duration)",
     transitionProperty: "opacity, scale"
   },
-  ".media-default-skin--video .media-error[data-starting-style] .media-error__dialog, .media-default-skin--video .media-error[data-ending-style] .media-error__dialog": {
+  ".media-default-skin--video .media-dialog__popup[data-starting-style], .media-default-skin--video .media-dialog__popup[data-ending-style], .media-default-skin--video media-error-dialog[data-starting-style] .media-dialog__popup, .media-default-skin--video media-error-dialog[data-ending-style] .media-dialog__popup": {
     opacity: "0",
-    scale: "0.5"
+    scale: "0.95"
   },
-  ".media-default-skin--video .media-error[data-ending-style] .media-error__dialog": {
+  ".media-default-skin--video .media-dialog__popup[data-ending-style], .media-default-skin--video media-error-dialog[data-ending-style] .media-dialog__popup": {
     transitionDelay: "0ms"
   },
-  ".media-default-skin--video .media-error__content": {
+  ".media-default-skin--video .media-dialog__content": {
     display: "flex",
     flexDirection: "column",
-    gap: "0.5rem",
-    padding: "0.5rem 0.5rem 0.375rem",
+    gap: "calc(var(--media-spacing) * 2)",
+    padding: "calc(var(--media-spacing) * 2) calc(var(--media-spacing) * 2) calc(var(--media-spacing) * 1.5)",
     textShadow: "inherit"
   },
-  ".media-default-skin--video .media-error__title": {
-    fontSize: "1rem"
+  ".media-default-skin--video .media-dialog__title": {
+    fontSize: "var(--media-font-size-medium)"
   },
-  /*
-   * ==========================================================================
-   * Controls (hide/show behavior)
-   * ==========================================================================
-   */
-  ".media-default-skin--video .media-controls": {
-    position: "absolute",
-    insetInline: "0.5rem",
-    bottom: "0.5rem",
+  ".media-default-skin--video .media-slider__value": {
+    textShadow: "0 1px 0 var(--media-shadow-current-color)"
+  },
+  /* Controls (hide/show behavior) */
+  ".media-default-skin--video .media-controls--root": {
+    "--media-inset-factor": "2",
+    "--media-inset": "calc(var(--media-spacing) * var(--media-inset-factor))",
+    "--media-base-boundary-offset": "var(--media-inset-factor)",
     zIndex: "10",
-    flexWrap: "wrap",
-    color: "var(--media-color-primary, oklch(1 0 0))",
-    transformOrigin: "bottom",
+    display: "contents",
+    color: "oklch(1 0 0)",
     transitionTimingFunction: "var(--media-controls-transition-timing-function)",
-    transitionDuration: "var(--media-controls-transition-duration)",
-    "@media (pointer: fine)": {
-      transitionProperty: "scale, filter, opacity",
-      willChange: "scale, filter, opacity"
+    /* Speed up the entry transition */
+    transitionDuration: "calc(var(--media-controls-transition-duration) / 2)",
+    ".media-controls--primary, .media-controls--secondary": {
+      position: "absolute"
     },
-    "@media (pointer: coarse)": {
-      transitionProperty: "scale, opacity",
-      willChange: "scale, opacity"
+    /* Primary must be higher for the preview/thumbnail */
+    ".media-controls--primary": {
+      zIndex: "20"
     },
-    "&:not([data-visible])": {
-      pointerEvents: "none",
-      opacity: "0",
-      scale: "0.95",
-      "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
-        filter: "blur(8px)"
-      },
-      "@media (prefers-reduced-motion: reduce)": {
-        scale: "1"
-      }
+    ".media-controls--secondary": {
+      zIndex: "10"
     },
-    "& .media-time-controls": {
-      flex: "0 0 100%",
-      order: "-1",
-      paddingInline: "0.625rem"
+    ".media-controls--primary ": {
+      insetInline: "var(--media-inset)",
+      bottom: "var(--media-inset)",
+      transformOrigin: "bottom"
     },
-    "& .media-button-group:first-of-type": {
-      flex: "1",
-      textAlign: "left"
+    ".media-controls--secondary ": {
+      top: "var(--media-inset)",
+      right: "var(--media-inset)",
+      containerType: "normal",
+      transformOrigin: "top"
     },
-    "& .media-button-group:last-child": {
+    ".media-time-controls": {
       flex: "1",
-      justifyContent: "end"
+      paddingInline: "calc(var(--media-spacing) * 2)"
+    },
+    "@container media-root (width < 32rem)": {
+      ".media-controls--primary, .media-controls--secondary": {
+        transitionTimingFunction: "inherit",
+        transitionDuration: "inherit",
+        "@media (pointer: fine)": {
+          transitionProperty: "filter, opacity, scale, translate"
+        },
+        "@media (pointer: coarse)": {
+          transitionProperty: "opacity, scale, translate"
+        }
+      },
+      "&:after": {
+        display: "none"
+      },
+      "&:not([data-visible])": {
+        ".media-controls--primary, .media-controls--secondary": {
+          pointerEvents: "none",
+          opacity: "0",
+          scale: "0.95",
+          transitionDuration: "var(--media-controls-transition-duration)",
+          "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
+            filter: "blur(8px)"
+          },
+          "@media (prefers-reduced-motion: reduce)": {
+            scale: "1"
+          }
+        },
+        ".media-controls--primary": {
+          "@media (prefers-reduced-motion: no-preference)": {
+            translate: "0 4px"
+          }
+        },
+        ".media-controls--secondary": {
+          "@media (prefers-reduced-motion: no-preference)": {
+            translate: "0 -4px"
+          }
+        }
+      },
+      ".media-button--captions": {
+        display: "none"
+      }
     },
-    "@container media-root (width > 42rem)": {
-      insetInline: "0.75rem",
-      bottom: "0.75rem",
-      flexWrap: "nowrap",
-      columnGap: "0.125rem",
-      padding: "0.25rem",
-      "& .media-time-controls": {
-        flex: "1",
-        order: "unset"
+    "@container media-root (width >= 32rem)": {
+      position: "absolute",
+      insetInline: "var(--media-inset)",
+      bottom: "var(--media-inset)",
+      display: "flex",
+      transformOrigin: "bottom",
+      ".media-controls--primary, .media-controls--secondary": {
+        display: "contents",
+        "&::after": {
+          display: "none"
+        }
       },
-      "& .media-button-group:first-of-type, & .media-button-group:last-child": {
-        flex: "0 0 auto"
+      "&:not([data-visible])": {
+        pointerEvents: "none",
+        opacity: "0",
+        scale: "0.95",
+        transitionDuration: "var(--media-controls-transition-duration)",
+        "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
+          filter: "blur(8px)"
+        },
+        "@media (prefers-reduced-motion: reduce)": {
+          scale: "1"
+        },
+        "@media (prefers-reduced-motion: no-preference)": {
+          translate: "0 4px"
+        }
+      },
+      ".media-time-controls": {
+        paddingInline: "calc(var(--media-spacing) * 3)"
       }
+    },
+    "@media (pointer: fine)": {
+      transitionProperty: "filter, opacity, scale, translate"
+    },
+    "@media (pointer: coarse)": {
+      transitionProperty: "opacity, scale, translate"
+    },
+    "@container media-root (width > 42rem)": {
+      "--media-inset-factor": "3"
     }
   },
-  ".media-default-skin--video .media-error[data-open] ~ .media-controls": {
-    display: "none"
-  },
   /* Hide cursor when controls are hidden */
-  ".media-default-skin--video:has(.media-controls:not([data-visible]))": {
+  ".media-default-skin--video:has(.media-controls--root:not([data-visible]))": {
     cursor: "none"
   },
-  /*
-   * ==========================================================================
-   * Sliders
-   * ==========================================================================
-   */
+  /* Sliders */
   ".media-default-skin--video .media-slider__track": {
-    backgroundColor: "oklch(1 0 0 / 0.2)",
-    boxShadow: "0 0 0 1px oklch(0 0 0 / 0.05)"
-  },
-  ".media-default-skin--video .media-slider__thumbnail": {
-    "--media-slider-thumbnail-max-width": "11rem",
-    "--media-slider-thumbnail-max-height": "8rem",
-    "--media-slider-thumbnail-padding": "-1.125rem",
-    /*
-     * Inset is the difference between the container width and the slider (100%) width.
-     * Divided by 2 as we render the time on both sides.
-     */
-    "--media-slider-thumbnail-inset": "calc((100cqi - 100%) / 2)",
-    position: "absolute",
-    bottom: "calc(100% + 1.2rem)",
-    left: "clamp( calc( var(--media-slider-thumbnail-max-width) / 2 + var(--media-slider-thumbnail-padding) - var(--media-slider-thumbnail-inset) ), var(--media-slider-pointer), calc( 100% - var(--media-slider-thumbnail-max-width) / 2 - var(--media-slider-thumbnail-padding) + var(--media-slider-thumbnail-inset) ) )",
-    pointerEvents: "none",
-    opacity: "0",
-    filter: "blur(8px)",
-    transformOrigin: "bottom",
-    scale: "0.8",
-    translate: "-50%",
-    transitionTimingFunction: "ease-out",
-    transitionDuration: "150ms",
-    transitionProperty: "scale, opacity, filter",
-    "& .media-thumbnail__image": {
-      maxWidth: "var(--media-slider-thumbnail-max-width)",
-      maxHeight: "var(--media-slider-thumbnail-max-height)"
-    }
-  },
-  '.media-default-skin--video .media-slider[data-pointing] .media-slider__thumbnail:has([role="img"]:not([data-hidden]))': {
-    opacity: "1",
-    filter: "blur(0)",
-    scale: "1"
-  },
-  '.media-default-skin--video .media-slider__thumbnail:has([role="img"]:not([data-hidden])) + .media-slider__preview .media-slider__value': {
-    display: "none"
+    backgroundColor: "oklch(1 0 0 / 0.2)"
   }
-}), a = /* @__PURE__ */ new WeakMap(), o = (e) => {
-  let i = a.get(e);
-  return i || (i = t(e), a.set(e, i)), i;
+}), e = /* @__PURE__ */ new WeakMap(), n = (a) => {
+  let i = e.get(a);
+  return i || (i = t(a), e.set(a, i)), i;
 };
 export {
-  o as videojsDefaultSkinAllStyles
+  n as videojsDefaultSkinAllStyles
 };