@videojs/react 10.0.0-beta.23 → 10.0.0-beta.25

package/docs/concepts/skins.md

@@ -0,0 +1,2679 @@
+# Skins
+
+Packaged player designs that include both UI components and their styles.
+
+New in version 10
+
+In prior versions of Video.js, skins were CSS-only themes applied to the same set of default controls. In version 10 the concept of skins has been expanded to include the UI components, so each skin can be completely unique and only include the UI components it needs.
+
+tsx
+
+```
+<Player.Provider>
+  <VideoSkin>
+    {/* wraps the Media component */}
+    <Video src="video.mp4"></Video>
+  </VideoSkin>
+</Player.Provider>
+```
+
+## Packaged vs. ejected
+
+When you choose a skin you have two options for how you use it: **packaged** or **ejected**. It’s usually easiest to start with a packaged skin and later eject its internal components into your project when you need more customization.
+
+Packaged
+
+Ejected
+
+Single component
+
+Many UI components
+
+Limited customization
+
+Complete customization
+
+Future design updates auto-applied by bumping the version
+
+Future design updates manually applied, or intentionally ignored
+
+[Read more about ejecting skins](../how-to/customize-skins.md)
+
+[Read more about UI Components](./ui-components.md)
+
+### Example of packaged
+
+tsx
+
+  ```
+  <Player.Provider>
+    <VideoSkin>
+      {/* ...Media... */}
+    </VideoSkin>
+  </Player.Provider>
+```
+
+### Example of ejected
+
+Skin.tsx
+
+skin.css
+
+```
+'use client';
+
+import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode, isValidElement } from 'react';
+import { AirPlayEnterIcon, AirPlayExitIcon, CaptionsOffIcon, CaptionsOnIcon, CastEnterIcon, CastExitIcon, CheckIcon, ChevronIcon, FullscreenEnterIcon, FullscreenExitIcon, GearIcon, PauseIcon, PipEnterIcon, PipExitIcon, PlayIcon, QualityIcon, RestartIcon, SeekIcon, SpeechIcon, SpeedIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons';
+import { createPlayer, Poster, Container, usePlayer, AirPlayButton, useAudioTrackOptions, BufferingIndicator, useCaptionsOptions, CastButton, Controls, ErrorDialog, FullscreenButton, Gesture, Hotkey, Menu, MuteButton, PiPButton, PlayButton, usePlaybackRateOptions, Popover, useQualityOptions, SeekButton, SeekIndicator, Slider, StatusAnnouncer, StatusIndicator, Time, TimeSlider, Tooltip, VolumeIndicator, VolumeSlider, type RenderProp } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+import './player.css';
+
+const TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;
+
+const CENTER_STATUS_ACTIONS = ['togglePaused'] as const;
+
+function MenuChevron({ flipped = false }: { flipped?: boolean }): ReactNode {
+  return <ChevronIcon className={`media-icon media-menu__chevron ${flipped ? 'media-icon--flipped' : undefined}`} />;
+}
+
+function SettingsMenu(): ReactNode {
+  const playbackRate = usePlaybackRateOptions();
+  const quality = useQualityOptions();
+  const audioTrack = useAudioTrackOptions();
+  const captions = useCaptionsOptions();
+  const hasPlaybackRate = playbackRate?.state.availability === 'available';
+  const hasQuality = quality?.state.availability === 'available';
+  const hasAudioTrack = audioTrack?.state.availability === 'available';
+  const hasCaptions = captions?.state.availability === 'available';
+
+  if (!hasPlaybackRate && !hasQuality && !hasAudioTrack && !hasCaptions) return null;
+
+  return (
+    <Menu.Root side="top" align="center">
+      <Menu.Trigger aria-label="Settings" className="media-button--settings" render={<Button />}>
+        <GearIcon className="media-icon media-icon--settings" />
+      </Menu.Trigger>
+      <Menu.Content className="media-surface media-popover media-menu media-menu--settings">
+        <Menu.View className="media-menu__panel">
+          <div className="media-menu__group">
+            {hasQuality ? (
+              <Menu.Root>
+                <Menu.Trigger
+                  type="quality"
+                  className="media-menu__item media-menu__item--submenu"
+                  render={(props) => (
+                    <div {...props}>
+                      <QualityIcon className="media-icon" />
+                      <span>Quality</span>
+                      <span className="media-menu__hint">
+                        <Menu.ItemValue className="media-menu__hint-label" />
+                        <MenuChevron />
+                      </span>
+                    </div>
+                  )}
+                />
+                <Menu.Content className="media-menu__panel">
+                  <Menu.Back className="media-menu__back">
+                    <MenuChevron flipped />
+                    Quality
+                  </Menu.Back>
+                  <Menu.Separator className="media-menu__separator" />
+                  <Menu.RadioGroup
+                    className="media-menu__group"
+                    value={quality.value}
+                    onValueChange={quality.setValue}
+                    aria-label="Quality"
+                  >
+                    {quality.options.map((option) => (
+                      <Menu.RadioItem
+                        key={option.value}
+                        className="media-menu__item"
+                        value={option.value}
+                        disabled={option.disabled}
+                      >
+                        <span>
+                          {option.label}
+                          {option.tier ? <sup className="media-menu__tier">{option.tier}</sup> : null}
+                        </span>
+                        {option.badge ? <span className="media-badge">{option.badge}</span> : null}
+                        <Menu.ItemIndicator
+                          checked={option.value === quality.value}
+                          forceMount
+                          className="media-menu__indicator"
+                        >
+                          <CheckIcon className="media-icon" />
+                        </Menu.ItemIndicator>
+                      </Menu.RadioItem>
+                    ))}
+                  </Menu.RadioGroup>
+                </Menu.Content>
+              </Menu.Root>
+            ) : null}
+
+            {hasAudioTrack ? (
+              <Menu.Root>
+                <Menu.Trigger
+                  type="audio-track"
+                  className="media-menu__item media-menu__item--submenu"
+                  render={(props) => (
+                    <div {...props}>
+                      <SpeechIcon className="media-icon" />
+                      <span>Audio</span>
+                      <span className="media-menu__hint">
+                        <Menu.ItemValue className="media-menu__hint-label" />
+                        <MenuChevron />
+                      </span>
+                    </div>
+                  )}
+                />
+                <Menu.Content className="media-menu__panel">
+                  <Menu.Back className="media-menu__back">
+                    <MenuChevron flipped />
+                    Audio
+                  </Menu.Back>
+                  <Menu.Separator className="media-menu__separator" />
+                  <Menu.RadioGroup
+                    className="media-menu__group"
+                    value={audioTrack.value}
+                    onValueChange={audioTrack.setValue}
+                    aria-label="Audio tracks"
+                  >
+                    {audioTrack.options.map((option) => (
+                      <Menu.RadioItem
+                        key={option.value}
+                        className="media-menu__item"
+                        value={option.value}
+                        disabled={option.disabled}
+                      >
+                        <span>{option.label}</span>
+                        <Menu.ItemIndicator
+                          checked={option.value === audioTrack.value}
+                          forceMount
+                          className="media-menu__indicator"
+                        >
+                          <CheckIcon className="media-icon" />
+                        </Menu.ItemIndicator>
+                      </Menu.RadioItem>
+                    ))}
+                  </Menu.RadioGroup>
+                </Menu.Content>
+              </Menu.Root>
+            ) : null}
+
+            {hasPlaybackRate ? (
+              <Menu.Root>
+                <Menu.Trigger
+                  type="playback-rate"
+                  className="media-menu__item media-menu__item--submenu"
+                  render={(props) => (
+                    <div {...props}>
+                      <SpeedIcon className="media-icon" />
+                      <span>Speed</span>
+                      <span className="media-menu__hint">
+                        <Menu.ItemValue className="media-menu__hint-label" />
+                        <MenuChevron />
+                      </span>
+                    </div>
+                  )}
+                />
+                <Menu.Content className="media-menu__panel">
+                  <Menu.Back className="media-menu__back">
+                    <MenuChevron flipped />
+                    Speed
+                  </Menu.Back>
+                  <Menu.Separator className="media-menu__separator" />
+                  <Menu.RadioGroup
+                    className="media-menu__group"
+                    value={playbackRate.value}
+                    onValueChange={playbackRate.setValue}
+                    aria-label="Playback rate"
+                  >
+                    {playbackRate.options.map((option) => (
+                      <Menu.RadioItem
+                        key={option.value}
+                        className="media-menu__item"
+                        value={option.value}
+                        disabled={option.disabled}
+                      >
+                        <span>{option.label}</span>
+                        <Menu.ItemIndicator
+                          checked={option.value === playbackRate.value}
+                          forceMount
+                          className="media-menu__indicator"
+                        >
+                          <CheckIcon className="media-icon" />
+                        </Menu.ItemIndicator>
+                      </Menu.RadioItem>
+                    ))}
+                  </Menu.RadioGroup>
+                </Menu.Content>
+              </Menu.Root>
+            ) : null}
+
+            {hasCaptions ? (
+              <Menu.Root>
+                <Menu.Trigger
+                  type="captions"
+                  className="media-menu__item media-menu__item--submenu"
+                  render={(props) => (
+                    <div {...props}>
+                      <CaptionsOffIcon className="media-icon" />
+                      <span>Captions</span>
+                      <span className="media-menu__hint">
+                        <Menu.ItemValue className="media-menu__hint-label" />
+                        <MenuChevron />
+                      </span>
+                    </div>
+                  )}
+                />
+                <Menu.Content className="media-menu__panel">
+                  <Menu.Back className="media-menu__back">
+                    <MenuChevron flipped />
+                    Captions
+                  </Menu.Back>
+                  <Menu.Separator className="media-menu__separator" />
+                  <Menu.RadioGroup
+                    className="media-menu__group"
+                    value={captions.value}
+                    onValueChange={captions.setValue}
+                    aria-label="Captions"
+                  >
+                    {captions.options.map((option) => (
+                      <Menu.RadioItem
+                        key={option.value}
+                        className="media-menu__item"
+                        value={option.value}
+                        disabled={option.disabled}
+                      >
+                        <span>{option.label}</span>
+                        <Menu.ItemIndicator
+                          checked={option.value === captions.value}
+                          forceMount
+                          className="media-menu__indicator"
+                        >
+                          <CheckIcon className="media-icon" />
+                        </Menu.ItemIndicator>
+                      </Menu.RadioItem>
+                    ))}
+                  </Menu.RadioGroup>
+                </Menu.Content>
+              </Menu.Root>
+            ) : null}
+          </div>
+        </Menu.View>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+// ================================================================
+// Player
+// ================================================================
+
+const SEEK_TIME = 10;
+
+export const Player = createPlayer({ features: videoFeatures });
+
+export interface VideoPlayerProps {
+  src: string;
+  style?: CSSProperties;
+  className?: string;
+  poster?: string | RenderProp<Poster.State> | undefined;
+}
+
+/**
+ * @example
+ * ```tsx
+ * <VideoPlayer
+ *   src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+ *   poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp"
+ * />
+ * ```
+ */
+export function VideoPlayer({ src, className, poster, placeholder, style, ...rest }: VideoPlayerProps): ReactNode {
+  const containerStyle = placeholder
+    ? ({ '--media-poster-placeholder': `url(${placeholder})`, ...style } as CSSProperties)
+    : style;
+
+  return (
+    <Player.Provider>
+      <Container
+        className={`media-default-skin media-default-skin--video ${className ?? ''}`}
+        style={containerStyle}
+        {...rest}
+      >
+        <Video src={src} playsInline />
+
+        {poster && (
+          <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
+        )}
+
+        <BufferingIndicator
+          render={(props) => (
+            <div {...props} className="media-buffering-indicator">
+              <SpinnerIcon className="media-icon" />
+            </div>
+          )}
+        />
+
+        <ErrorDialog.Root>
+          <ErrorDialog.Popup className="media-error">
+            <div className="media-error__dialog media-surface">
+              <div className="media-error__content">
+                <ErrorDialog.Title className="media-error__title">Something went wrong.</ErrorDialog.Title>
+                <ErrorDialog.Description className="media-error__description" />
+              </div>
+              <div className="media-error__actions">
+                <ErrorDialog.Close className="media-button media-button--primary">OK</ErrorDialog.Close>
+              </div>
+            </div>
+          </ErrorDialog.Popup>
+        </ErrorDialog.Root>
+
+        <Controls.Root className="media-surface media-controls">
+          <Tooltip.Provider>
+            <div className="media-button-group">
+              <Tooltip.Root side="top">
+                <Tooltip.Trigger
+                  render={
+                    <PlayButton className="media-button--play" render={<Button />}>
+                      <RestartIcon className="media-icon media-icon--restart" />
+                      <PlayIcon className="media-icon media-icon--play" />
+                      <PauseIcon className="media-icon media-icon--pause" />
+                    </PlayButton>
+                  }
+                />
+                <Tooltip.Popup className="media-surface media-tooltip">
+                  <Tooltip.Label />
+                  <Tooltip.Shortcut className="media-tooltip__kbd" />
+                </Tooltip.Popup>
+              </Tooltip.Root>
+
+              <Tooltip.Root side="top">
+                <Tooltip.Trigger
+                  render={
+                    <SeekButton seconds={-SEEK_TIME} className="media-button--seek" render={<Button />}>
+                      <span className="media-icon__container">
+                        <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
+                        <span className="media-icon__label">{SEEK_TIME}</span>
+                      </span>
+                    </SeekButton>
+                  }
+                />
+                <Tooltip.Popup className="media-surface media-tooltip">
+                  <Tooltip.Label />
+                  <Tooltip.Shortcut className="media-tooltip__kbd" />
+                </Tooltip.Popup>
+              </Tooltip.Root>
+
+              <Tooltip.Root side="top">
+                <Tooltip.Trigger
+                  render={
+                    <SeekButton seconds={SEEK_TIME} className="media-button--seek" render={<Button />}>
+                      <span className="media-icon__container">
+                        <SeekIcon className="media-icon media-icon--seek" />
+                        <span className="media-icon__label">{SEEK_TIME}</span>
+                      </span>
+                    </SeekButton>
+                  }
+                />
+                <Tooltip.Popup className="media-surface media-tooltip">
+                  <Tooltip.Label />
+                  <Tooltip.Shortcut className="media-tooltip__kbd" />
+                </Tooltip.Popup>
+              </Tooltip.Root>
+            </div>
+
+            <div className="media-time-controls">
+              <Time.Value type="current" className="media-time" />
+              <TimeSlider.Root className="media-slider">
+                <TimeSlider.Track className="media-slider__track">
+                  <TimeSlider.Fill className="media-slider__fill" />
+                  <TimeSlider.Buffer className="media-slider__buffer" />
+                </TimeSlider.Track>
+                <TimeSlider.Thumb className="media-slider__thumb" />
+
+                <div className="media-surface media-thumbnail media-slider__thumbnail">
+                  <Slider.Thumbnail className="media-thumbnail__image" />
+                  <TimeSlider.Value type="pointer" className="media-time media-thumbnail__time" />
+                  <SpinnerIcon className="media-thumbnail__spinner media-icon" />
+                </div>
+                <TimeSlider.Preview className="media-slider__preview">
+                  <TimeSlider.Value type="pointer" className="media-time media-slider__value" />
+                </TimeSlider.Preview>
+              </TimeSlider.Root>
+              <Time.Value toggle type="remaining" className="media-time" />
+            </div>
+
+            <div className="media-button-group">
+              <VolumePopover />
+
+              <SettingsMenu />
+
+              <Tooltip.Root side="top">
+                <Tooltip.Trigger
+                  render={
+                    <CastButton className="media-button--cast" render={<Button />}>
+                      <CastEnterIcon className="media-icon media-icon--cast-enter" />
+                      <CastExitIcon className="media-icon media-icon--cast-exit" />
+                    </CastButton>
+                  }
+                />
+                <Tooltip.Popup className="media-surface media-tooltip">
+                  <Tooltip.Label />
+                  <Tooltip.Shortcut className="media-tooltip__kbd" />
+                </Tooltip.Popup>
+              </Tooltip.Root>
+
+              <Tooltip.Root side="top">
+                <Tooltip.Trigger
+                  render={
+                    <AirPlayButton className="media-button--airplay" render={<Button />}>
+                      <AirPlayEnterIcon className="media-icon media-icon--airplay-enter" />
+                      <AirPlayExitIcon className="media-icon media-icon--airplay-exit" />
+                    </AirPlayButton>
+                  }
+                />
+                <Tooltip.Popup className="media-surface media-tooltip">
+                  <Tooltip.Label />
+                  <Tooltip.Shortcut className="media-tooltip__kbd" />
+                </Tooltip.Popup>
+              </Tooltip.Root>
+
+              <Tooltip.Root side="top">
+                <Tooltip.Trigger
+                  render={
+                    <PiPButton className="media-button--pip" render={<Button />}>
+                      <PipEnterIcon className="media-icon media-icon--pip-enter" />
+                      <PipExitIcon className="media-icon media-icon--pip-exit" />
+                    </PiPButton>
+                  }
+                />
+                <Tooltip.Popup className="media-surface media-tooltip">
+                  <Tooltip.Label />
+                  <Tooltip.Shortcut className="media-tooltip__kbd" />
+                </Tooltip.Popup>
+              </Tooltip.Root>
+
+              <Tooltip.Root side="top">
+                <Tooltip.Trigger
+                  render={
+                    <FullscreenButton className="media-button--fullscreen" render={<Button />}>
+                      <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
+                      <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
+                    </FullscreenButton>
+                  }
+                />
+                <Tooltip.Popup className="media-surface media-tooltip">
+                  <Tooltip.Label />
+                  <Tooltip.Shortcut className="media-tooltip__kbd" />
+                </Tooltip.Popup>
+              </Tooltip.Root>
+            </div>
+          </Tooltip.Provider>
+        </Controls.Root>
+
+        <div className="media-overlay" />
+
+        {/* Hotkeys */}
+        <Hotkey keys="Space" action="togglePaused" />
+        <Hotkey keys="k" action="togglePaused" />
+        <Hotkey keys="m" action="toggleMuted" />
+        <Hotkey keys="f" action="toggleFullscreen" />
+        <Hotkey keys="c" action="toggleSubtitles" />
+        <Hotkey keys="i" action="togglePictureInPicture" />
+        <Hotkey keys="ArrowRight" action="seekStep" value={SEEK_TIME / 2} />
+        <Hotkey keys="ArrowLeft" action="seekStep" value={-(SEEK_TIME / 2)} />
+        <Hotkey keys="l" action="seekStep" value={SEEK_TIME} />
+        <Hotkey keys="j" action="seekStep" value={-SEEK_TIME} />
+        <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
+        <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
+        <Hotkey keys="0-9" action="seekToPercent" />
+        <Hotkey keys="Home" action="seekToPercent" value={0} />
+        <Hotkey keys="End" action="seekToPercent" value={100} />
+        <Hotkey keys=">" action="speedUp" />
+        <Hotkey keys="<" action="speedDown" />
+
+        {/* Gestures */}
+        <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
+        <Gesture type="tap" action="toggleControls" pointer="touch" />
+        <Gesture type="doubletap" action="seekStep" value={-SEEK_TIME} region="left" />
+        <Gesture type="doubletap" action="toggleFullscreen" region="center" />
+        <Gesture type="doubletap" action="seekStep" value={SEEK_TIME} region="right" />
+
+        {/* Input Feedback */}
+        <StatusAnnouncer />
+        <div className="media-input-feedback">
+          <VolumeIndicator.Root className="media-surface media-input-feedback-island media-input-feedback-island--volume">
+            <VolumeIndicator.Fill className="media-input-feedback-island__content">
+              <VolumeHighIcon className="media-icon media-icon--volume-high" />
+              <VolumeLowIcon className="media-icon media-icon--volume-low" />
+              <VolumeOffIcon className="media-icon media-icon--volume-off" />
+              <VolumeIndicator.Value className="media-input-feedback-island__value" />
+            </VolumeIndicator.Fill>
+          </VolumeIndicator.Root>
+
+          <StatusIndicator.Root
+            actions={TOP_STATUS_ACTIONS}
+            className="media-surface media-input-feedback-island media-input-feedback-island--status"
+          >
+            <div className="media-input-feedback-island__content">
+              <CaptionsOnIcon className="media-icon media-icon--captions-on" />
+              <CaptionsOffIcon className="media-icon media-icon--captions-off" />
+              <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
+              <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
+              <PipEnterIcon className="media-icon media-icon--pip-enter" />
+              <PipExitIcon className="media-icon media-icon--pip-exit" />
+              <StatusIndicator.Value className="media-input-feedback-island__value" />
+            </div>
+          </StatusIndicator.Root>
+
+          <SeekIndicator.Root className="media-input-feedback-bubble">
+            <ChevronIcon className="media-icon media-icon--seek" />
+            <SeekIndicator.Value className="media-time" />
+          </SeekIndicator.Root>
+
+          <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className="media-input-feedback-bubble">
+            <PlayIcon className="media-icon media-icon--play" />
+            <PauseIcon className="media-icon media-icon--pause" />
+          </StatusIndicator.Root>
+        </div>
+      </Container>
+
+    </Player.Provider>
+  );
+}
+
+// ================================================================
+// Components
+// ================================================================
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={`media-button media-button--subtle media-button--icon ${className ?? ''}`}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className="media-button--mute" render={<Button />}>
+      <VolumeOffIcon className="media-icon media-icon--volume-off" />
+      <VolumeLowIcon className="media-icon media-icon--volume-low" />
+      <VolumeHighIcon className="media-icon media-icon--volume-high" />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className="media-surface media-popover media-popover--volume">
+        <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
+          <VolumeSlider.Track className="media-slider__track">
+            <VolumeSlider.Fill className="media-slider__fill" />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+// ================================================================
+// Utilities
+// ================================================================
+
+function isString(value: unknown): value is string {
+  return typeof value === 'string';
+}
+
+function isRenderProp(value: unknown): value is RenderProp<unknown> {
+  return typeof value === 'function' || isValidElement(value);
+}
+```
+```
+/* ==========================================================================
+   Reset
+   ========================================================================== */
+
+.media-default-skin *,
+.media-default-skin *::before,
+.media-default-skin *::after {
+  box-sizing: border-box;
+}
+.media-default-skin img,
+.media-default-skin video,
+.media-default-skin svg {
+  display: block;
+  max-width: 100%;
+}
+.media-default-skin button {
+  font: inherit;
+}
+.media-default-skin [hidden][hidden] {
+  /* Keep authored templates hidden even when component classes set display. */
+  display: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .media-default-skin {
+    interpolate-size: 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);
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  container: media-root / inline-size;
+  font-family:
+    Inter Variable,
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+  font-size: 0.8125rem; /* 13px at 100% font size */
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  line-height: 1.5;
+  letter-spacing: normal;
+  outline: 2px solid transparent;
+  outline-offset: -4px;
+  scrollbar-color: var(--media-color-scrollbar-thumb) transparent;
+  scrollbar-width: thin;
+  border-radius: var(--media-border-radius, 2rem);
+  isolation: isolate;
+  transition-timing-function: ease-out;
+  transition-duration: 100ms;
+  transition-property: outline-offset, outline-color;
+
+  &:focus-visible {
+    outline-color: currentColor;
+    outline-offset: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--media-color-scrollbar-thumb);
+    border-radius: 9999px;
+  }
+
+  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
+    --media-color-scrollbar-thumb: oklch(from currentColor l c h / 0.8);
+    scrollbar-width: auto;
+  }
+}
+
+/* ==========================================================================
+   Surface (shared glass effect for tooltips, popovers, controls)
+   ========================================================================== */
+
+.media-default-skin .media-surface {
+  background-color: var(--media-surface-background-color);
+  box-shadow:
+    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);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+
+  /* Inner border ring */
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: none;
+    content: "";
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
+  }
+}
+
+/* ==========================================================================
+   Media Element
+   ========================================================================== */
+
+.media-default-skin ::slotted(video),
+.media-default-skin video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+}
+.media-default-skin ::slotted(video) {
+  border-radius: var(--media-video-border-radius);
+}
+.media-default-skin video {
+  border-radius: inherit;
+}
+
+.media-default-skin:fullscreen ::slotted(video),
+.media-default-skin:fullscreen video {
+  object-fit: contain;
+}
+
+/* ==========================================================================
+   Overlay / Scrim
+   ========================================================================== */
+
+.media-default-skin .media-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3) 25%, oklch(0 0 0 / 0));
+  border-radius: inherit;
+  opacity: 0;
+  backdrop-filter: blur(0) saturate(1);
+  transition-timing-function: ease-out;
+  transition-duration: var(--media-controls-transition-duration);
+  transition-property: opacity, backdrop-filter;
+}
+
+.media-default-skin .media-error ~ .media-overlay {
+  transition-delay: var(--media-error-dialog-transition-delay);
+  transition-duration: 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;
+  backdrop-filter: blur(8px);
+}
+
+.media-default-skin .media-error[data-open] ~ .media-overlay {
+  backdrop-filter: blur(16px) saturate(1.5);
+}
+
+/* ==========================================================================
+   Buffering Indicator
+   ========================================================================== */
+
+.media-default-skin .media-buffering-indicator {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: none;
+  place-content: center;
+  color: oklch(1 0 0);
+  pointer-events: none;
+
+  &:not([data-visible]) {
+    --media-spinner-animation: none;
+  }
+
+  &[data-visible] {
+    display: grid;
+  }
+}
+
+/* ==========================================================================
+   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 {
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.media-default-skin .media-error__description {
+  overflow-wrap: anywhere;
+  opacity: 0.7;
+}
+
+.media-default-skin .media-error__actions {
+  display: flex;
+  gap: 0.5rem;
+
+  & > * {
+    flex: 1;
+  }
+}
+
+.media-default-skin .media-error[data-open] ~ .media-controls * {
+  visibility: hidden;
+}
+
+/* ==========================================================================
+   Controls
+   ========================================================================== */
+
+.media-default-skin .media-controls {
+  display: flex;
+  column-gap: 0.075rem;
+  align-items: center;
+  padding: 0.375rem;
+  container: media-controls / inline-size;
+  text-shadow: 0 1px 0 var(--media-current-shadow-color);
+  border-radius: 1.5rem;
+}
+
+/* ==========================================================================
+   Time Display
+   ========================================================================== */
+
+.media-default-skin .media-time-controls {
+  display: flex;
+  flex: 1;
+  gap: 0.75rem;
+  align-items: center;
+  padding-inline: 0.5rem;
+  container: media-time-controls / inline-size;
+}
+
+.media-default-skin .media-time {
+  font-variant-numeric: tabular-nums;
+}
+
+.media-default-skin .media-time[role="button"] {
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  border-radius: 0.25rem;
+  transition-timing-function: ease-out;
+  transition-duration: 100ms;
+  transition-property: outline-color, outline-offset;
+
+  &:focus-visible {
+    outline-color: currentColor;
+    outline-offset: 2px;
+  }
+}
+
+/* ==========================================================================
+   Buttons
+   ========================================================================== */
+
+/* Base button */
+.media-default-skin .media-button {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  border: none;
+  border-radius: calc(infinity * 1px);
+  transition-timing-function: ease-out;
+  transition-duration: 150ms;
+  transition-property: background-color, outline-offset, scale;
+  /* Fix weird jumping when clicking on the buttons in Safari. */
+  will-change: scale;
+
+  &:focus-visible {
+    outline-color: currentColor;
+    outline-offset: 2px;
+  }
+
+  &:active {
+    scale: 0.98;
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    filter: grayscale(1);
+  }
+
+  &[data-availability="unavailable"],
+  &[data-availability="unsupported"] {
+    display: none;
+  }
+}
+
+/* Primary button variant */
+.media-default-skin .media-button--primary {
+  font-weight: 500;
+  color: oklch(0 0 0);
+  text-shadow: none;
+  background: oklch(1 0 0);
+}
+
+/* Subtle button variant */
+.media-default-skin .media-button--subtle {
+  color: inherit;
+  text-shadow: inherit;
+  background: transparent;
+
+  &:hover,
+  &:focus-visible,
+  &[aria-expanded="true"] {
+    text-decoration: none;
+    background-color: oklch(from currentColor l c h / 0.1);
+  }
+}
+
+/* Icon button variant */
+.media-default-skin .media-button--icon {
+  display: grid;
+  width: 2.25rem;
+  aspect-ratio: 1;
+  padding: 0;
+
+  &:active {
+    scale: 0.9;
+  }
+
+  & .media-icon__container {
+    display: grid;
+  }
+
+  & .media-icon {
+    grid-area: 1 / 1;
+    transition-behavior: allow-discrete;
+    transition-property: display, opacity;
+    transition-duration: 150ms;
+    transition-timing-function: ease-out;
+    filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
+  }
+}
+
+/* Seek button */
+.media-default-skin .media-button--seek {
+  & .media-icon__label {
+    position: absolute;
+    right: -1px;
+    bottom: -3px;
+    font-size: 10px;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.05em;
+  }
+
+  &:has(.media-icon--flipped) .media-icon__label {
+    right: unset;
+    left: -1px;
+  }
+}
+
+/* Playback rate button */
+.media-default-skin .media-button--playback-rate {
+  padding: 0;
+  font-variant-numeric: tabular-nums;
+
+  &::after {
+    width: 4ch;
+    content: attr(data-rate) "\00D7";
+  }
+
+  &[data-inline-rate-label]::after {
+    content: none;
+  }
+}
+
+/* Settings button */
+.media-default-skin .media-button--settings {
+  display: none;
+
+  & .media-icon--settings {
+    transition: transform 150ms ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+  }
+
+  &[aria-expanded="true"] .media-icon--settings {
+    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
+   text content. */
+.media-default-skin .media-button--live {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  width: auto;
+  aspect-ratio: auto;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+
+  &::before {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
+    background-color: oklch(from currentColor l c h / 0.4);
+    border-radius: 50%;
+    transition: background-color 150ms ease-out;
+  }
+
+  &[data-live-edge]::before {
+    background-color: oklch(0.65 0.22 27);
+  }
+}
+
+/* ==========================================================================
+   Button Groups
+   ========================================================================== */
+
+.media-default-skin .media-button-group {
+  display: flex;
+  gap: 0.075rem;
+  align-items: center;
+
+  @container media-root (width > 42rem) {
+    gap: 0.125rem;
+  }
+}
+
+/* ==========================================================================
+   Badge
+   ========================================================================== */
+
+.media-default-skin .media-badge {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1;
+  color: oklch(from currentColor l c h / 0.85);
+  white-space: nowrap;
+  background-color: oklch(from currentColor l c h / 0.1);
+  border-radius: calc(infinity * 1px);
+}
+
+/* ==========================================================================
+   Icons
+   ========================================================================== */
+
+.media-default-skin .media-icon__container {
+  position: relative;
+}
+
+.media-default-skin .media-icon {
+  flex-shrink: 0;
+  width: var(--media-icon-size);
+  height: var(--media-icon-size);
+}
+.media-default-skin .media-icon--flipped {
+  scale: -1 1;
+}
+
+/* ==========================================================================
+   Poster Image
+   ========================================================================== */
+
+.media-default-skin media-poster,
+.media-default-skin > img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: 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]) {
+  opacity: 0;
+}
+.media-default-skin media-poster ::slotted(img),
+.media-default-skin media-poster img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+  border-radius: var(--media-video-border-radius);
+}
+.media-default-skin > img {
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+  border-radius: 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;
+  pointer-events: none;
+  content: "";
+  background-image: var(--media-poster-placeholder, none);
+  background-repeat: no-repeat;
+  background-position: var(--media-object-position, center);
+  background-size: 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 {
+  object-fit: contain;
+}
+
+/* ==========================================================================
+   Media thumbnail
+   ========================================================================== */
+
+.media-default-skin .media-thumbnail {
+  pointer-events: none;
+  background-color: oklch(0 0 0 / 0.9);
+  border-radius: 0.75rem;
+
+  & .media-thumbnail__image {
+    position: relative;
+    display: block;
+    overflow: clip;
+    border-radius: inherit;
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      content: "";
+      background-image: linear-gradient(to top, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
+      border-radius: inherit;
+    }
+  }
+
+  & .media-thumbnail__time {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0.5rem;
+    text-align: center;
+  }
+
+  & .media-thumbnail__spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    translate: -50% -50%;
+  }
+
+  & .media-thumbnail__image,
+  & .media-thumbnail__spinner {
+    transition: opacity 150ms ease-out;
+  }
+
+  &:not(:has(.media-thumbnail__image[data-loading])) {
+    & .media-thumbnail__spinner {
+      --media-spinner-animation: none;
+    }
+  }
+
+  &:has(.media-thumbnail__image[data-loading]) {
+    & .media-thumbnail__image {
+      opacity: 0;
+    }
+    & .media-thumbnail__spinner {
+      opacity: 1;
+    }
+  }
+}
+
+/* ==========================================================================
+   Slider
+   ========================================================================== */
+
+.media-default-skin .media-slider {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  border-radius: calc(infinity * 1px);
+
+  &[data-orientation="horizontal"] {
+    width: 100%;
+    min-width: 5rem;
+    height: 2rem;
+  }
+
+  &[data-orientation="vertical"] {
+    width: 2rem;
+    height: 5rem;
+  }
+}
+
+/* Track */
+.media-default-skin .media-slider__track {
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+  border-radius: 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;
+  z-index: 10;
+  width: 0.625rem;
+  height: 0.625rem;
+  user-select: none;
+  outline: 4px solid transparent;
+  outline-offset: -4px;
+  background-color: currentColor;
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    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%;
+  transition-timing-function: ease-out;
+  transition-duration: 150ms;
+  transition-property: opacity, height, width, outline-offset;
+
+  &[data-orientation="horizontal"] {
+    top: 50%;
+    left: var(--media-slider-fill);
+  }
+
+  &[data-orientation="vertical"] {
+    top: calc(100% - var(--media-slider-fill));
+    left: 50%;
+  }
+
+  &:hover,
+  &:focus {
+    outline-color: oklch(from currentColor l c h / 0.15);
+    outline-offset: 0;
+  }
+
+  &::after {
+    position: absolute;
+    inset: -4px;
+    content: "";
+    border-radius: inherit;
+    box-shadow: 0 0 0 2px currentColor;
+    transition-timing-function: ease-out;
+    transition-duration: 150ms;
+    transition-property: 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;
+    transition-timing-function: ease-out;
+    transition-duration: 200ms;
+    transition-property: opacity, scale;
+  }
+
+  & .media-slider__value {
+    position: absolute;
+    bottom: 2.25rem;
+    text-shadow: 0 1px 0 var(--media-current-shadow-color);
+    filter: blur(8px);
+    translate: -50% 0.5rem;
+    transition-property: filter, opacity, scale, translate;
+  }
+
+  &::before {
+    display: block;
+    min-width: 0.25rem;
+    height: 0.25rem;
+    content: "";
+    background-color: currentColor;
+    border-radius: 100%;
+    box-shadow:
+      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);
+  }
+
+  &[data-pointing] .media-slider__value,
+  &[data-pointing]:not([data-dragging])::before {
+    opacity: 1;
+    scale: 1;
+  }
+  &[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;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.media-default-skin .media-slider__buffer[data-orientation="horizontal"],
+.media-default-skin .media-slider__fill[data-orientation="horizontal"] {
+  inset-block: 0;
+  left: 0;
+}
+
+.media-default-skin .media-slider__buffer[data-orientation="vertical"],
+.media-default-skin .media-slider__fill[data-orientation="vertical"] {
+  inset-inline: 0;
+  bottom: 0;
+}
+
+/* Buffer */
+.media-default-skin .media-slider__buffer {
+  background-color: oklch(from currentColor l c h / 0.2);
+  transition-timing-function: ease-out;
+  transition-duration: 0.25s;
+
+  &[data-orientation="horizontal"] {
+    width: var(--media-slider-buffer);
+    transition-property: width;
+  }
+
+  &[data-orientation="vertical"] {
+    height: var(--media-slider-buffer);
+    transition-property: height;
+  }
+}
+
+/* Fill */
+.media-default-skin .media-slider__fill {
+  background-color: currentColor;
+
+  &[data-orientation="horizontal"] {
+    width: var(--media-slider-fill);
+  }
+
+  &[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);
+}
+
+/* ==========================================================================
+   Popups & Tooltips
+   ========================================================================== */
+
+.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;
+  margin: 0;
+  overflow: visible;
+  color: inherit;
+  border: 0;
+  transition: var(--media-popup-transition);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    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));
+    scale: 0.95;
+  }
+
+  &[data-ending-style] {
+    transform: none;
+    /* Speed up the exit transition. */
+    transition-duration: max(0ms, calc(var(--media-popup-transition-duration) - 50ms));
+  }
+
+  &[data-side="top"] {
+    --popup-translate-y-distance: var(--popup-translate-distance);
+    transform-origin: bottom;
+  }
+  &[data-side="bottom"] {
+    --popup-translate-y-distance: calc(var(--popup-translate-distance) * -1);
+    transform-origin: top;
+  }
+  &[data-side="left"] {
+    --popup-translate-x-distance: var(--popup-translate-distance);
+    transform-origin: right;
+  }
+  &[data-side="right"] {
+    --popup-translate-x-distance: calc(var(--popup-translate-distance) * -1);
+    transform-origin: left;
+  }
+
+  /* Safe area between trigger and popup */
+  &::before {
+    position: absolute;
+    pointer-events: inherit;
+    content: "";
+  }
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    inset-inline: 0;
+    width: 100%;
+  }
+  &[data-side="top"]::before {
+    top: 100%;
+  }
+  &[data-side="bottom"]::before {
+    bottom: 100%;
+  }
+
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    inset-block: 0;
+    height: 100%;
+  }
+  &[data-side="left"]::before {
+    left: 100%;
+  }
+  &[data-side="right"]::before {
+    right: 100%;
+  }
+}
+
+.media-default-skin .media-popover {
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-popover-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-popover-side-offset);
+  }
+}
+.media-default-skin .media-popover--volume {
+  padding: 0.75rem 0;
+  border-radius: calc(infinity * 1px);
+
+  &:has(media-volume-slider[data-availability="unsupported"]) {
+    display: none;
+  }
+}
+
+.media-default-skin .media-tooltip {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  border-radius: calc(infinity * 1px);
+
+  /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */
+  &[data-open] {
+    display: flex;
+    column-gap: 0.25rem;
+    align-items: center;
+  }
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-tooltip-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-tooltip-side-offset);
+  }
+
+  & .media-tooltip__kbd {
+    min-width: 1.5em;
+    padding: 0.1em;
+    font-family: inherit;
+    font-size: 90%;
+    font-weight: 600;
+    line-height: 1.25;
+    text-align: center;
+    background-color: oklch(from currentColor l c h / 0.3);
+    border-radius: 0.25rem;
+  }
+}
+
+/* ==========================================================================
+   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));
+  box-sizing: border-box;
+  max-width: var(--media-popover-available-width, none);
+  max-height: min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height));
+  padding: var(--menu-padding);
+  overflow: auto;
+  overscroll-behavior: none;
+  border-radius: var(--menu-border-radius);
+
+  @media (prefers-reduced-motion: reduce) {
+    --menu-transition-duration: 0ms;
+  }
+
+  & .media-menu__panel {
+    position: absolute;
+    inset: 0;
+    padding: var(--menu-padding);
+    overflow: auto;
+    overscroll-behavior: none;
+    outline: none;
+    translate: 0 0;
+    transition-timing-function: ease-in-out;
+    transition-duration: var(--menu-transition-duration);
+    transition-property: translate, filter;
+    will-change: 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"] {
+      filter: blur(8px);
+      translate: -100% 0;
+
+      /* Hide the indicator while transitioning */
+      & .media-menu__group::before {
+        display: none;
+      }
+    }
+
+    /* Submenu panels — slide in/out alongside the root view */
+    &[data-submenu] {
+      z-index: 10;
+
+      &:not([data-open], [data-ending-style]) {
+        translate: -100% 0;
+        transition-property: none;
+      }
+
+      &[data-starting-style],
+      &[data-ending-style] {
+        pointer-events: 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;
+      }
+    }
+  }
+
+  & .media-menu__separator {
+    margin-block: 0.25rem;
+    border-bottom: 1px solid oklch(0 0 0 / 0.1);
+    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.075);
+  }
+
+  & .media-menu__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+
+    @supports (top: anchor(top)) {
+      &::before {
+        position: absolute;
+        position-anchor: --media-menu-item-highlight-anchor;
+        inset: anchor(inside);
+        pointer-events: none;
+        content: "";
+        background-color: oklch(from currentColor l c h / 0.1);
+        border-radius: var(--menu-item-border-radius);
+        transition: inset ease-in-out 100ms;
+      }
+    }
+  }
+
+  & .media-menu__item,
+  & .media-menu__back {
+    display: flex;
+    gap: 0.375rem;
+    align-items: center;
+    padding: 0.375rem 0.5rem;
+    text-align: left;
+    text-shadow: 0 1px 0 var(--media-current-shadow-color);
+    cursor: pointer;
+    user-select: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    border-radius: var(--menu-item-border-radius);
+    transition: background-color, color;
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
+
+    &:focus-visible {
+      outline-color: currentColor;
+      outline-offset: 2px;
+    }
+
+    &:hover,
+    &[data-highlighted] {
+      background-color: oklch(from currentColor l c h / 0.1);
+
+      @supports (top: anchor(top)) {
+        anchor-name: --media-menu-item-highlight-anchor;
+        background-color: transparent;
+      }
+    }
+
+    & .media-icon {
+      flex-shrink: 0;
+      color: oklch(from currentColor l c h / 0.65);
+      filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
+    }
+  }
+
+  & .media-menu__indicator {
+    flex-shrink: 0;
+    margin-right: -0.25rem;
+    margin-left: auto;
+    opacity: 0;
+
+    & .media-icon {
+      filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
+    }
+  }
+
+  & .media-menu__item {
+    justify-content: space-between;
+    font-variant-numeric: tabular-nums;
+    color: inherit;
+
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &[aria-checked="true"] .media-menu__indicator {
+      opacity: 1;
+    }
+
+    &[data-availability="unavailable"],
+    &[data-availability="unsupported"] {
+      display: none;
+    }
+  }
+
+  & .media-menu__tier {
+    padding-top: 1px;
+    padding-left: 0.125rem;
+    font-size: 0.5625rem;
+    font-weight: 600;
+    line-height: 1;
+    color: oklch(from currentColor l c h / 0.7);
+  }
+
+  & .media-menu__back {
+    width: 100%;
+    margin-bottom: 0.125rem;
+  }
+
+  & .media-menu__hint {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    min-width: 0;
+    padding-left: 0.5rem;
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: oklch(from currentColor l c h / 0.65);
+  }
+
+  & .media-menu__hint-label {
+    max-width: 6rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  & .media-menu__chevron {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* Settings menu */
+  &.media-menu--settings {
+    width: var(--media-menu-width);
+    min-width: 12rem;
+    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. */
+    &[data-starting-style],
+    &[data-ending-style] {
+      transition: var(--media-popup-transition);
+    }
+  }
+}
+
+/* ==========================================================================
+   Native Caption Track
+   ========================================================================== */
+
+.media-default-skin {
+  --media-caption-track-duration: var(--media-controls-transition-duration);
+  --media-caption-track-delay: 25ms;
+  --media-caption-track-y: -0.5rem;
+
+  &: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-default-skin video::-webkit-media-text-track-container {
+  z-index: 1;
+  font-family: inherit;
+  scale: 0.98;
+  translate: 0 var(--media-caption-track-y);
+  transition: translate var(--media-caption-track-duration) ease-out;
+  transition-delay: var(--media-caption-track-delay);
+}
+
+/* ==========================================================================
+   Input Feedback
+   ========================================================================== */
+
+.media-default-skin .media-input-feedback {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  bottom: 3.5rem; /* Shift up a little in smaller containers */
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  justify-items: center;
+  color: var(--media-color-primary, oklch(1 0 0));
+  pointer-events: none;
+
+  @container media-root (width > 24rem) {
+    bottom: 0;
+  }
+}
+
+/* --- Feedback islands ------------------------------------------------------- */
+
+.media-default-skin .media-input-feedback-island {
+  --media-surface-background-color: oklch(0 0 0 / 0.25);
+  position: absolute;
+  top: 0.75rem;
+  font-weight: 500;
+  color: inherit;
+  pointer-events: none;
+  border-radius: calc(Infinity * 1px);
+  transform-origin: top center;
+  transition-timing-function: ease-out;
+  transition-duration: 100ms;
+
+  .media-input-feedback-island__content {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.25rem 0.625rem;
+
+    /* Increase contrast of the content */
+    * {
+      mix-blend-mode: difference;
+    }
+  }
+
+  .media-icon {
+    display: none;
+    flex-shrink: 0;
+  }
+
+  .media-input-feedback-island__value {
+    margin-left: auto;
+  }
+
+  @media (pointer: coarse) {
+    transition-property: scale, translate, opacity;
+    will-change: scale, translate, opacity;
+  }
+
+  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
+    transition-property: scale, translate, filter, opacity;
+    will-change: 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;
+    transition-timing-function: ease-in;
+    transition-duration: 250ms;
+
+    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
+      filter: blur(8px);
+      scale: 0.9;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      &[data-ending-style] {
+        translate: 0 -25%;
+      }
+    }
+  }
+}
+
+.media-default-skin .media-input-feedback-island--volume {
+  width: min(80%, 12rem);
+
+  .media-input-feedback-island__content {
+    --media-progress-fill: var(--media-volume-fill);
+    background-image: linear-gradient(
+      to right,
+      currentColor 0%,
+      currentColor var(--media-progress-fill),
+      transparent var(--media-progress-fill),
+      transparent 100%
+    );
+    border-radius: inherit;
+    transition: --media-progress-fill 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;
+    }
+  }
+}
+
+.media-default-skin .media-input-feedback-island--status {
+  &[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;
+  grid-row: 1;
+  grid-column: 2;
+  place-content: center;
+  padding: 1rem;
+  text-align: center;
+
+  /* Central bubble (play, pause) */
+  &:not([data-direction]) {
+    background: oklch(0 0 0 / 0.35);
+    border-radius: 100%;
+    backdrop-filter: blur(8px);
+    transition-timing-function: ease-out;
+    transition-duration: 200ms;
+    transition-property: opacity, scale;
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      opacity: 0;
+      scale: 0.85;
+    }
+
+    &[data-ending-style] {
+      transition-timing-function: ease-in;
+      transition-duration: 100ms;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 50ms;
+      transition-property: opacity;
+    }
+  }
+
+  /* Directional bubbles (seek) */
+  &[data-direction] {
+    gap: 0.25rem;
+
+    @container media-root (width > 24rem) {
+      padding: 1.5rem;
+    }
+  }
+
+  &[data-direction="backward"] {
+    grid-column: 1;
+    justify-self: left;
+  }
+
+  &[data-direction="forward"] {
+    grid-column: 3;
+    justify-self: right;
+  }
+
+  /* Icons */
+  .media-icon {
+    display: none;
+    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;
+  }
+
+  &[data-direction="backward"] .media-icon--seek {
+    scale: -1 1;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .media-icon--seek {
+      transition-timing-function: ease-in-out;
+      transition-duration: 200ms;
+      transition-property: translate, opacity;
+    }
+
+    &[data-starting-style] .media-icon--seek,
+    &[data-ending-style] .media-icon--seek {
+      opacity: 0;
+    }
+
+    &[data-direction="forward"][data-starting-style] .media-icon--seek {
+      translate: -60% 0;
+    }
+    &[data-direction="backward"][data-starting-style] .media-icon--seek {
+      translate: 60% 0;
+    }
+  }
+}
+
+/* ==========================================================================
+   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).
+   ========================================================================== */
+
+/* --- 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;
+  opacity: 0;
+}
+
+/* --- Active icon per state --- */
+
+/* Play: ended → restart */
+.media-button--play[data-ended] .media-icon--restart,
+/* Play: paused or not yet started (not ended) → play */
+.media-button--play:not([data-ended])[data-paused] .media-icon--play,
+.media-button--play:not([data-ended]):not([data-started]) .media-icon--play,
+/* Play: started and not paused/ended → pause */
+.media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause,
+/* Mute: muted → volume off */
+.media-button--mute[data-muted] .media-icon--volume-off,
+/* Mute: volume low (not muted) → volume low */
+.media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
+/* Mute: volume high (not muted, not low) → volume high */
+.media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high,
+/* Fullscreen: not fullscreen → enter */
+.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
+/* Fullscreen: fullscreen → exit */
+.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
+/* Picture-in-Picture: not active → enter */
+.media-button--pip:not([data-pip]) .media-icon--pip-enter,
+/* Picture-in-Picture: active → exit */
+.media-button--pip[data-pip] .media-icon--pip-exit,
+/* Cast: not connected → enter */
+.media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter,
+/* Cast: connected → exit */
+.media-button--cast[data-cast-state="connected"] .media-icon--cast-exit,
+/* AirPlay: not connected → enter */
+.media-button--airplay:not([data-airplay-state="connected"]) .media-icon--airplay-enter,
+/* AirPlay: connected → exit */
+.media-button--airplay[data-airplay-state="connected"] .media-icon--airplay-exit,
+/* Captions: not active → captions off */
+.media-button--captions:not([data-active]) .media-icon--captions-off,
+/* Captions: active → captions on */
+.media-button--captions[data-active] .media-icon--captions-on {
+  display: block;
+  opacity: 1;
+}
+
+/* --- Pause keyframe animations on inactive icons --- */
+
+/* The airplay-exit SVG defines its keyframes against CSS variables (mirroring
+   the spinner pattern). When the AirPlay session isn't active the SVG is
+   still in the DOM — just `display: none` — so its animations would keep
+   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;
+}
+
+/* -------------------------------------------------------------------------- */
+/* 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;
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/* Global @properties for all video skins (CSS & Tailwind)                    */
+/* -------------------------------------------------------------------------- */
+
+@property --media-progress-fill {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+
+/* ==========================================================================
+   Root
+   ========================================================================== */
+
+.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-surface-background-color: oklch(1 0 0 / 0.1);
+  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);
+  --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-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 (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])) {
+    /* Slight delay to hide controls on non-touch devices after interaction */
+    @media (pointer: fine) {
+      --media-controls-transition-duration: 300ms;
+    }
+    @media (pointer: coarse) {
+      --media-controls-transition-duration: 150ms;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      --media-controls-transition-duration: 50ms;
+    }
+  }
+
+  /* Inner border ring */
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: none;
+    content: "";
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--media-border-color);
+  }
+
+  &:fullscreen {
+    --media-border-radius: 0;
+  }
+}
+
+/* ==========================================================================
+   Error Dialog
+   ========================================================================== */
+
+.media-default-skin--video .media-error {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.media-default-skin--video .media-error__dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 18rem;
+  padding: 0.75rem;
+  color: oklch(1 0 0);
+  text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
+  border-radius: 1.75rem;
+  transition-delay: var(--media-error-dialog-transition-delay);
+  transition-timing-function: var(--media-error-dialog-transition-timing-function);
+  transition-duration: var(--media-error-dialog-transition-duration);
+  transition-property: 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 {
+  opacity: 0;
+  scale: 0.5;
+}
+.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
+  transition-delay: 0ms;
+}
+
+.media-default-skin--video .media-error__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0.5rem 0.375rem;
+  text-shadow: inherit;
+}
+
+.media-default-skin--video .media-error__title {
+  font-size: 1rem;
+}
+
+/* ==========================================================================
+   Controls (hide/show behavior)
+   ========================================================================== */
+
+.media-default-skin--video .media-controls {
+  position: absolute;
+  inset-inline: 0.5rem;
+  bottom: 0.5rem;
+  z-index: 10;
+  flex-wrap: wrap;
+  color: var(--media-color-primary, oklch(1 0 0));
+  transform-origin: bottom;
+  transition-timing-function: var(--media-controls-transition-timing-function);
+  transition-duration: var(--media-controls-transition-duration);
+
+  @media (pointer: fine) {
+    transition-property: scale, filter, opacity;
+    will-change: scale, filter, opacity;
+  }
+
+  @media (pointer: coarse) {
+    transition-property: scale, opacity;
+    will-change: scale, opacity;
+  }
+
+  &:not([data-visible]) {
+    pointer-events: 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-time-controls {
+    flex: 0 0 100%;
+    order: -1;
+    padding-inline: 0.625rem;
+  }
+
+  & .media-button-group:first-child {
+    flex: 1;
+    text-align: left;
+  }
+
+  & .media-button-group:last-child {
+    flex: 1;
+    justify-content: end;
+  }
+
+  @container media-root (width > 42rem) {
+    inset-inline: 0.75rem;
+    bottom: 0.75rem;
+    flex-wrap: nowrap;
+    column-gap: 0.125rem;
+    padding: 0.25rem;
+
+    & .media-time-controls {
+      flex: 1;
+      order: unset;
+    }
+
+    & .media-button-group:first-child,
+    & .media-button-group:last-child {
+      flex: 0 0 auto;
+    }
+  }
+}
+
+.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])) {
+  cursor: none;
+}
+
+/* ==========================================================================
+   Sliders
+   ========================================================================== */
+
+.media-default-skin--video .media-slider__track {
+  background-color: oklch(1 0 0 / 0.2);
+  box-shadow: 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)
+    )
+  );
+  pointer-events: none;
+  opacity: 0;
+  filter: blur(8px);
+  transform-origin: bottom;
+  scale: 0.8;
+  translate: -50%;
+  transition-timing-function: ease-out;
+  transition-duration: 150ms;
+  transition-property: scale, opacity, filter;
+
+  & .media-thumbnail__image {
+    max-width: var(--media-slider-thumbnail-max-width);
+    max-height: 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;
+}
+
+```
+
+## Skins, features, and presets
+
+Each skin is built with specific [features](./features.md) in mind. For example, a video skin renders fullscreen and picture-in-picture controls. An audio skin doesn’t.
+
+You’ll find both a skin and the feature bundle it expects exported from the same path. We call these paths **presets**.
+
+Import
+
+Description
+
+Details
+
+`@videojs/react/video`
+
+General-purpose video player preset with full playback controls.
+
+▸
+
+Feature bundle
+
+`videoFeatures`
+
+Features
+
+[playback](../reference/feature-playback.md), [playbackRate](../reference/feature-playback-rate.md), [quality](../reference/feature-quality.md), [audioTrack](../reference/feature-audio-track.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [fullscreen](../reference/feature-fullscreen.md), [pip](../reference/feature-pip.md), [remotePlayback](../reference/feature-remote-playback.md), [controls](../reference/feature-controls.md), [textTrack](../reference/feature-text-tracks.md), [error](../reference/feature-error.md)
+
+Skins
+
+`<MinimalVideoSkin>`
+
+`import '@videojs/react/video/minimal-skin.css';`
+
+`<VideoSkin>`
+
+`import '@videojs/react/video/skin.css';`
+
+Default media element
+
+`<Video>`
+
+`@videojs/react/audio`
+
+Audio-only player preset with playback and volume controls.
+
+▸
+
+Feature bundle
+
+`audioFeatures`
+
+Features
+
+[playback](../reference/feature-playback.md), [playbackRate](../reference/feature-playback-rate.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [error](../reference/feature-error.md)
+
+Skins
+
+`<MinimalAudioSkin>`
+
+`import '@videojs/react/audio/minimal-skin.css';`
+
+`<AudioSkin>`
+
+`import '@videojs/react/audio/skin.css';`
+
+Default media element
+
+`<Audio>`
+
+`@videojs/react/background`
+
+Ambient background video preset with no user controls.
+
+▸
+
+Feature bundle
+
+`backgroundFeatures`
+
+Features
+
+–
+
+Skins
+
+`<BackgroundVideoSkin>`
+
+`import '@videojs/react/background/skin.css';`
+
+Default media element
+
+`<BackgroundVideo>`
+
+`@videojs/react/live-audio`
+
+Live audio player preset — same features as `audio` with a skin that omits duration / current-time displays.
+
+▸
+
+Feature bundle
+
+`liveAudioFeatures`
+
+Features
+
+[playback](../reference/feature-playback.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [error](../reference/feature-error.md), [live](../reference/feature-live.md)
+
+Skins
+
+`<MinimalLiveAudioSkin>`
+
+`import '@videojs/react/live-audio/minimal-skin.css';`
+
+`<LiveAudioSkin>`
+
+`import '@videojs/react/live-audio/skin.css';`
+
+Default media element
+
+`<Audio>`
+
+`@videojs/react/live-video`
+
+Live video player preset — same features as `video` with a skin that omits duration / current-time displays.
+
+▸
+
+Feature bundle
+
+`liveVideoFeatures`
+
+Features
+
+[playback](../reference/feature-playback.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [fullscreen](../reference/feature-fullscreen.md), [pip](../reference/feature-pip.md), [remotePlayback](../reference/feature-remote-playback.md), [controls](../reference/feature-controls.md), [textTrack](../reference/feature-text-tracks.md), [error](../reference/feature-error.md), [live](../reference/feature-live.md)
+
+Skins
+
+`<MinimalLiveVideoSkin>`
+
+`import '@videojs/react/live-video/minimal-skin.css';`
+
+`<LiveVideoSkin>`
+
+`import '@videojs/react/live-video/skin.css';`
+
+Default media element
+
+`<Video>`
+
+Presets are a topic quite a bit bigger than just this guide. To learn more, check out the guide:
+
+[Read about presets](./presets.md)
+
+## Styling
+
+There are currently two options for styling:
+
+*   Vanilla CSS — import the stylesheet listed for each skin in the [preset table](#skins-features-and-presets). This is the default.
+*   Tailwind where you [eject](../how-to/customize-skins#ejecting) the skin and use Tailwind classnames in your app.
+
+### Current limitations
+
+*   In both style systems we assume a 16px root font size and we use rem units for sizing.
+*   The default font stack includes [`Inter`](https://rsms.me/inter/) (because it’s awesome) but we do not load the webfonts for you. If they are not available then system fonts are used.
+
+These only apply to ejected HTML and React skins:
+
+#### Vanilla CSS
+
+*   We use a [BEM](https://en.bem.info/methodology/quick-start/) classname structure and every component classname is scoped with a `media-` prefix.
+
+#### Tailwind
+
+*   Currently we’re assuming you’re using the default configuration and that’s all that’s supported. With the release of our CLI, this will change, allowing you to specify a custom prefix to the Tailwind classnames. For now, you’ll need to edit the ejected skins yourself.
+*   We’re assuming the latest version, currently 4.2.x.