.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 {
  max-width: 100%;
  display: block;
}

.media-default-skin button {
  font: inherit;
}

.media-default-skin [hidden][hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .media-default-skin {
    interpolate-size: allow-keywords;
  }
}

.media-default-skin {
  --media-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
  --media-current-shadow-color-subtle: oklch(from var(--media-current-shadow-color) l c h / calc(alpha * .4));
  --media-icon-size: 18px;
  --media-color-scrollbar-thumb: oklch(from currentColor l c h / .3);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  letter-spacing: normal;
  outline-offset: -4px;
  scrollbar-color: var(--media-color-scrollbar-thumb) transparent;
  scrollbar-width: thin;
  border-radius: var(--media-border-radius, 2rem);
  isolation: isolate;
  outline: 2px solid #0000;
  width: 100%;
  height: 100%;
  font-family: Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .8125rem;
  line-height: 1.5;
  transition-property: outline-offset, outline-color;
  transition-duration: .1s;
  transition-timing-function: ease-out;
  display: block;
  position: relative;
  container: media-root / inline-size;
}

.media-default-skin:focus-visible {
  outline-offset: 2px;
  outline-color: currentColor;
}

.media-default-skin::-webkit-scrollbar-thumb {
  background: var(--media-color-scrollbar-thumb);
  border-radius: 9999px;
}

@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
  .media-default-skin {
    --media-color-scrollbar-thumb: oklch(from currentColor l c h / .8);
    scrollbar-width: auto;
  }
}

.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);
  -webkit-backdrop-filter: var(--media-surface-backdrop-filter);
  backdrop-filter: var(--media-surface-backdrop-filter);
}

.media-default-skin .media-surface:after {
  z-index: 10;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
  position: absolute;
  inset: 0;
}

.media-default-skin ::slotted(video), .media-default-skin video {
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  width: 100%;
  height: 100%;
  display: block;
}

.media-default-skin ::slotted(video) {
  border-radius: var(--media-video-border-radius);
}

.media-default-skin video {
  border-radius: inherit;
}

.media-default-skin:-webkit-full-screen ::slotted(video) {
  object-fit: contain;
}

.media-default-skin:fullscreen ::slotted(video) {
  object-fit: contain;
}

.media-default-skin:-webkit-full-screen video {
  object-fit: contain;
}

.media-default-skin:fullscreen video {
  object-fit: contain;
}

.media-default-skin .media-overlay {
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  -webkit-backdrop-filter: blur() saturate();
  backdrop-filter: blur() saturate();
  transition-timing-function: ease-out;
  transition-duration: var(--media-controls-transition-duration);
  background-image: linear-gradient(to top, #00000080, #0000004d 25%, #0000);
  background-image: linear-gradient(to top, lab(0% 0 0 / .5), lab(0% 0 0 / .3) 25%, lab(0% 0 0 / 0));
  transition-property: opacity, -webkit-backdrop-filter, backdrop-filter;
  position: absolute;
  inset: 0;
}

.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 {
  opacity: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #00000059;
  background: lab(0% 0 0 / .35);
}

.media-default-skin .media-error[data-open] ~ .media-overlay {
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}

.media-default-skin .media-buffering-indicator {
  z-index: 10;
  color: #fff;
  color: lab(100% 0 0);
  pointer-events: none;
  place-content: center;
  display: none;
  position: absolute;
  inset: 0;
}

.media-default-skin .media-buffering-indicator:not([data-visible]) {
  --media-spinner-animation: none;
}

.media-default-skin .media-buffering-indicator[data-visible] {
  display: grid;
}

.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: .7;
}

.media-default-skin .media-error__actions {
  gap: .5rem;
  display: flex;
}

.media-default-skin .media-error__actions > * {
  flex: 1;
}

.media-default-skin .media-error[data-open] ~ .media-controls * {
  visibility: hidden;
}

.media-default-skin .media-controls {
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  border-radius: 1.5rem;
  align-items: center;
  column-gap: .075rem;
  padding: .375rem;
  display: flex;
  container: media-controls / inline-size;
}

.media-default-skin .media-time-controls {
  flex: 1;
  align-items: center;
  gap: .75rem;
  padding-inline: .5rem;
  display: flex;
  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-offset: -2px;
  border-radius: .25rem;
  outline: 2px solid #0000;
  transition-property: outline-color, outline-offset;
  transition-duration: .1s;
  transition-timing-function: ease-out;
}

.media-default-skin .media-time[role="button"]:focus-visible {
  outline-offset: 2px;
  outline-color: currentColor;
}

.media-default-skin .media-button {
  text-align: center;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  outline-offset: -2px;
  will-change: scale;
  border: none;
  border-radius: 3.40282e38px;
  outline: 2px solid #0000;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: .5rem 1rem;
  transition-property: background-color, outline-offset, scale;
  transition-duration: .15s;
  transition-timing-function: ease-out;
  display: flex;
}

.media-default-skin .media-button:focus-visible {
  outline-offset: 2px;
  outline-color: currentColor;
}

.media-default-skin .media-button:active {
  scale: .98;
}

.media-default-skin .media-button[disabled] {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale();
}

.media-default-skin .media-button[data-availability="unavailable"], .media-default-skin .media-button[data-availability="unsupported"] {
  display: none;
}

.media-default-skin .media-button--primary {
  color: #000;
  color: lab(0% 0 0);
  text-shadow: none;
  background: #fff;
  background: lab(100% 0 0);
  font-weight: 500;
}

.media-default-skin .media-button--subtle {
  color: inherit;
  text-shadow: inherit;
  background: none;
}

.media-default-skin .media-button--subtle:hover, .media-default-skin .media-button--subtle:focus-visible, .media-default-skin .media-button--subtle[aria-expanded="true"] {
  background-color: oklch(from currentColor l c h / .1);
  text-decoration: none;
}

.media-default-skin .media-button--icon {
  aspect-ratio: 1;
  width: 2.25rem;
  padding: 0;
  display: grid;
}

.media-default-skin .media-button--icon:active {
  scale: .9;
}

.media-default-skin .media-button--icon .media-icon__container {
  display: grid;
}

.media-default-skin .media-button--icon .media-icon {
  transition-behavior: allow-discrete;
  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
  grid-area: 1 / 1;
  transition-property: display, opacity;
  transition-duration: .15s;
  transition-timing-function: ease-out;
}

.media-default-skin .media-button--seek .media-icon__label {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  font-size: 10px;
  font-weight: 500;
  position: absolute;
  bottom: -3px;
  right: -1px;
}

.media-default-skin .media-button--seek:has(.media-icon--flipped) .media-icon__label {
  right: unset;
  left: -1px;
}

.media-default-skin .media-button--playback-rate {
  font-variant-numeric: tabular-nums;
  padding: 0;
}

.media-default-skin .media-button--playback-rate:after {
  content: attr(data-rate) "×";
  width: 4ch;
}

.media-default-skin .media-button--playback-rate[data-inline-rate-label]:after {
  content: none;
}

.media-default-skin .media-button--settings {
  display: none;
}

.media-default-skin .media-button--settings .media-icon--settings {
  transition: transform .15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .media-default-skin .media-button--settings .media-icon--settings {
    transition-duration: 0s;
  }
}

.media-default-skin .media-button--settings[aria-expanded="true"] .media-icon--settings {
  transform: rotate(90deg);
}

.media-default-skin .media-button-group:has([data-availability="available"]) .media-button--settings {
  display: grid;
}

.media-default-skin .media-button--live {
  aspect-ratio: auto;
  text-transform: uppercase;
  letter-spacing: .05em;
  align-items: center;
  gap: .4rem;
  width: auto;
  padding: .5rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.media-default-skin .media-button--live:before {
  content: "";
  background-color: oklch(from currentColor l c h / .4);
  border-radius: 50%;
  flex-shrink: 0;
  width: .5rem;
  height: .5rem;
  transition: background-color .15s ease-out;
  display: inline-block;
}

.media-default-skin .media-button--live[data-live-edge]:before {
  background-color: #f9423d;
  background-color: lab(57.2227% 69.0904 47.0078);
}

.media-default-skin .media-button-group {
  align-items: center;
  gap: .075rem;
  display: flex;
}

@container media-root (width > 42rem) {
  .media-default-skin .media-button-group {
    gap: .125rem;
  }
}

.media-default-skin .media-badge {
  color: oklch(from currentColor l c h / .85);
  white-space: nowrap;
  background-color: oklch(from currentColor l c h / .1);
  border-radius: 3.40282e38px;
  padding: .125rem .375rem;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1;
}

.media-default-skin .media-icon__container {
  position: relative;
}

.media-default-skin .media-icon {
  width: var(--media-icon-size);
  height: var(--media-icon-size);
  flex-shrink: 0;
}

.media-default-skin .media-icon--flipped {
  scale: -1 1;
}

.media-default-skin media-poster, .media-default-skin > img {
  pointer-events: none;
  width: 100%;
  height: 100%;
  transition: opacity .25s;
  position: absolute;
  inset: 0;
}

.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 {
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: var(--media-video-border-radius);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.media-default-skin > img {
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: inherit;
}

.media-default-skin media-poster:before, .media-default-skin:before {
  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));
  position: absolute;
  inset: 0;
}

.media-default-skin:before {
  opacity: 0;
  transition: opacity .25s;
}

.media-default-skin:has(img[data-visible]:not([data-loaded])):before {
  opacity: 1;
}

.media-default-skin:-webkit-full-screen media-poster ::slotted(img) {
  object-fit: contain;
}

.media-default-skin:fullscreen media-poster ::slotted(img) {
  object-fit: contain;
}

.media-default-skin:-webkit-full-screen media-poster img {
  object-fit: contain;
}

.media-default-skin:fullscreen media-poster img {
  object-fit: contain;
}

.media-default-skin:-webkit-full-screen > img {
  object-fit: contain;
}

.media-default-skin:fullscreen > img {
  object-fit: contain;
}

.media-default-skin .media-thumbnail {
  pointer-events: none;
  background-color: #000000e6;
  background-color: lab(0% 0 0 / .9);
  border-radius: .75rem;
}

.media-default-skin .media-thumbnail .media-thumbnail__image {
  border-radius: inherit;
  display: block;
  position: relative;
  overflow: clip;
}

.media-default-skin .media-thumbnail .media-thumbnail__image:after {
  content: "";
  border-radius: inherit;
  background-image: linear-gradient(to top, #000c, #0000004d, #0000);
  background-image: linear-gradient(to top, lab(0% 0 0 / .8), lab(0% 0 0 / .3), lab(0% 0 0 / 0));
  position: absolute;
  inset: 0;
}

.media-default-skin .media-thumbnail .media-thumbnail__time {
  inset-inline: 0;
  text-align: center;
  position: absolute;
  bottom: .5rem;
}

.media-default-skin .media-thumbnail .media-thumbnail__spinner {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.media-default-skin .media-thumbnail .media-thumbnail__image, .media-default-skin .media-thumbnail .media-thumbnail__spinner {
  transition: opacity .15s ease-out;
}

.media-default-skin .media-thumbnail:not(:has(.media-thumbnail__image[data-loading])) .media-thumbnail__spinner {
  --media-spinner-animation: none;
}

.media-default-skin .media-thumbnail:has(.media-thumbnail__image[data-loading]) .media-thumbnail__image {
  opacity: 0;
}

.media-default-skin .media-thumbnail:has(.media-thumbnail__image[data-loading]) .media-thumbnail__spinner {
  opacity: 1;
}

.media-default-skin .media-slider {
  cursor: pointer;
  border-radius: 3.40282e38px;
  outline: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.media-default-skin .media-slider[data-orientation="horizontal"] {
  width: 100%;
  min-width: 5rem;
  height: 2rem;
}

.media-default-skin .media-slider[data-orientation="vertical"] {
  width: 2rem;
  height: 5rem;
}

.media-default-skin .media-slider__track {
  -webkit-user-select: none;
  user-select: none;
  border-radius: inherit;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.media-default-skin .media-slider__track[data-orientation="horizontal"] {
  width: 100%;
  height: .25rem;
}

.media-default-skin .media-slider__track[data-orientation="vertical"] {
  width: .25rem;
  height: 100%;
}

.media-default-skin .media-slider__thumb {
  z-index: 10;
  -webkit-user-select: none;
  user-select: none;
  outline-offset: -4px;
  width: .625rem;
  height: .625rem;
  box-shadow: 0 0 0 1px var(--media-current-shadow-color, #0000001a),
    0 1px 3px 0 #00000059,
    0 1px 2px -1px #00000059;
  opacity: 0;
  background-color: currentColor;
  border-radius: 3.40282e38px;
  outline: 4px solid #0000;
  transition-property: opacity, height, width, outline-offset;
  transition-duration: .15s;
  transition-timing-function: ease-out;
  position: absolute;
  translate: -50% -50%;
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin .media-slider__thumb {
    box-shadow: 0 0 0 1px var(--media-current-shadow-color, lab(0% 0 0 / .1)),
    0 1px 3px 0 lab(0% 0 0 / .35),
    0 1px 2px -1px lab(0% 0 0 / .35);
  }
}

.media-default-skin .media-slider__thumb[data-orientation="horizontal"] {
  top: 50%;
  left: var(--media-slider-fill);
}

.media-default-skin .media-slider__thumb[data-orientation="vertical"] {
  top: calc(100% - var(--media-slider-fill));
  left: 50%;
}

.media-default-skin .media-slider__thumb:hover, .media-default-skin .media-slider__thumb:focus {
  outline-color: oklch(from currentColor l c h / .15);
  outline-offset: 0;
}

.media-default-skin .media-slider__thumb:after {
  content: "";
  border-radius: inherit;
  transition-property: opacity, scale;
  transition-duration: .15s;
  transition-timing-function: ease-out;
  position: absolute;
  inset: -4px;
  box-shadow: 0 0 0 2px;
}

.media-default-skin .media-slider__thumb:not(:focus-visible):after {
  opacity: 0;
  scale: .5;
}

.media-default-skin .media-slider:active .media-slider__thumb, .media-default-skin .media-slider__thumb--persistent {
  width: .75rem;
  height: .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;
}

.media-default-skin .media-slider__preview .media-slider__value, .media-default-skin .media-slider__preview:before {
  opacity: 0;
  transition-property: opacity, scale;
  transition-duration: .2s;
  transition-timing-function: ease-out;
  scale: .5;
}

.media-default-skin .media-slider__preview .media-slider__value {
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  filter: blur(8px);
  transition-property: filter, opacity, scale, translate;
  position: absolute;
  bottom: 2.25rem;
  translate: -50% .5rem;
}

.media-default-skin .media-slider__preview:before {
  content: "";
  min-width: .25rem;
  height: .25rem;
  box-shadow: 0 0 0 1px var(--media-current-shadow-color, #00000026),
      0 1px 2px 0 #00000059;
  background-color: currentColor;
  border-radius: 100%;
  display: block;
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin .media-slider__preview:before {
    box-shadow: 0 0 0 1px var(--media-current-shadow-color, lab(0% 0 0 / .15)),
      0 1px 2px 0 lab(0% 0 0 / .35);
  }
}

.media-default-skin .media-slider__preview[data-pointing] .media-slider__value, .media-default-skin .media-slider__preview[data-pointing]:not([data-dragging]):before {
  opacity: 1;
  scale: 1;
}

.media-default-skin .media-slider__preview[data-pointing] .media-slider__value {
  filter: blur();
  translate: -50%;
}

.media-default-skin .media-slider__buffer, .media-default-skin .media-slider__fill {
  pointer-events: none;
  border-radius: inherit;
  position: absolute;
}

.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;
}

.media-default-skin .media-slider__buffer {
  background-color: oklch(from currentColor l c h / .2);
  transition-duration: .25s;
  transition-timing-function: ease-out;
}

.media-default-skin .media-slider__buffer[data-orientation="horizontal"] {
  width: var(--media-slider-buffer);
  transition-property: width;
}

.media-default-skin .media-slider__buffer[data-orientation="vertical"] {
  height: var(--media-slider-buffer);
  transition-property: height;
}

.media-default-skin .media-slider__fill {
  background-color: currentColor;
}

.media-default-skin .media-slider__fill[data-orientation="horizontal"] {
  width: var(--media-slider-fill);
}

.media-default-skin .media-slider__fill[data-orientation="vertical"] {
  height: var(--media-slider-fill);
}

.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-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: .5rem;
  color: inherit;
  transition: var(--media-popup-transition);
  border: 0;
  margin: 0;
  overflow: visible;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-starting-style], :is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-ending-style] {
  opacity: 0;
  filter: blur(4px);
  transform: translate(var(--popup-translate-x-distance, 0), var(--popup-translate-y-distance, 0));
  scale: .95;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-ending-style] {
  transition-duration: max(0s, calc(var(--media-popup-transition-duration) - 50ms));
  transform: none;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="top"] {
  --popup-translate-y-distance: var(--popup-translate-distance);
  transform-origin: bottom;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="bottom"] {
  --popup-translate-y-distance: calc(var(--popup-translate-distance) * -1);
  transform-origin: top;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="left"] {
  --popup-translate-x-distance: var(--popup-translate-distance);
  transform-origin: 100%;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="right"] {
  --popup-translate-x-distance: calc(var(--popup-translate-distance) * -1);
  transform-origin: 0;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip):before {
  pointer-events: inherit;
  content: "";
  position: absolute;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="top"]:before, :is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="bottom"]:before {
  width: 100%;
  inset-inline: 0;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="top"]:before {
  top: 100%;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="bottom"]:before {
  bottom: 100%;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="left"]:before, :is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="right"]:before {
  height: 100%;
  inset-block: 0;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="left"]:before {
  left: 100%;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="right"]:before {
  right: 100%;
}

.media-default-skin .media-popover[data-side="top"]:before, .media-default-skin .media-popover[data-side="bottom"]:before {
  height: var(--media-popover-side-offset);
}

.media-default-skin .media-popover[data-side="left"]:before, .media-default-skin .media-popover[data-side="right"]:before {
  width: var(--media-popover-side-offset);
}

.media-default-skin .media-popover--volume {
  border-radius: 3.40282e38px;
  padding: .75rem 0;
}

.media-default-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
  display: none;
}

.media-default-skin .media-tooltip {
  white-space: nowrap;
  border-radius: 3.40282e38px;
  padding: .25rem .625rem;
  font-size: .75rem;
}

.media-default-skin .media-tooltip[data-open] {
  align-items: center;
  column-gap: .25rem;
  display: flex;
}

.media-default-skin .media-tooltip[data-side="top"]:before, .media-default-skin .media-tooltip[data-side="bottom"]:before {
  height: var(--media-tooltip-side-offset);
}

.media-default-skin .media-tooltip[data-side="left"]:before, .media-default-skin .media-tooltip[data-side="right"]:before {
  width: var(--media-tooltip-side-offset);
}

.media-default-skin .media-tooltip .media-tooltip__kbd {
  text-align: center;
  background-color: oklch(from currentColor l c h / .3);
  border-radius: .25rem;
  min-width: 1.5em;
  padding: .1em;
  font-family: inherit;
  font-size: 90%;
  font-weight: 600;
  line-height: 1.25;
}

.media-default-skin .media-menu {
  --menu-transition-duration: .25s;
  --menu-max-height: 14rem;
  --menu-padding: .25rem;
  --menu-border-radius: .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);
  overscroll-behavior: none;
  border-radius: var(--menu-border-radius);
  overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
  .media-default-skin .media-menu {
    --menu-transition-duration: 0s;
  }
}

.media-default-skin .media-menu .media-menu__panel {
  padding: var(--menu-padding);
  overscroll-behavior: none;
  transition-timing-function: ease-in-out;
  transition-duration: var(--menu-transition-duration);
  will-change: translate, filter;
  outline: none;
  transition-property: translate, filter;
  position: absolute;
  inset: 0;
  overflow: auto;
  translate: 0;
}

.media-default-skin .media-menu .media-menu__panel[data-starting-style], .media-default-skin .media-menu .media-menu__panel[data-ending-style] {
  overflow: hidden;
}

.media-default-skin .media-menu .media-menu__panel[data-menu-root-view][data-menu-view-state="inactive"] {
  filter: blur(8px);
  translate: -100%;
}

.media-default-skin .media-menu .media-menu__panel[data-menu-root-view][data-menu-view-state="inactive"] .media-menu__group:before {
  display: none;
}

.media-default-skin .media-menu .media-menu__panel[data-submenu] {
  z-index: 10;
}

.media-default-skin .media-menu .media-menu__panel[data-submenu]:not([data-open], [data-ending-style]) {
  transition-property: none;
  translate: -100%;
}

.media-default-skin .media-menu .media-menu__panel[data-submenu][data-starting-style], .media-default-skin .media-menu .media-menu__panel[data-submenu][data-ending-style] {
  pointer-events: none;
  filter: blur(8px);
}

.media-default-skin .media-menu .media-menu__panel[data-submenu][data-starting-style][data-direction="forward"], .media-default-skin .media-menu .media-menu__panel[data-submenu][data-ending-style][data-direction="back"] {
  translate: 100%;
}

.media-default-skin .media-menu .media-menu__panel[data-submenu][data-ending-style][data-direction="forward"], .media-default-skin .media-menu .media-menu__panel[data-submenu][data-starting-style][data-direction="back"] {
  translate: -100%;
}

.media-default-skin .media-menu .media-menu__separator {
  border-bottom: 1px solid #0000001a;
  border-bottom: 1px solid lab(0% 0 0 / .1);
  margin-block: .25rem;
  box-shadow: 0 1px #ffffff13;
  box-shadow: 0 1px lab(100% 0 0 / .075);
}

.media-default-skin .media-menu .media-menu__group {
  flex-direction: column;
  gap: .125rem;
  display: flex;
}

@supports (top: anchor(top)) {
  .media-default-skin .media-menu .media-menu__group:before {
    position-anchor: --media-menu-item-highlight-anchor;
    inset: anchor(inside);
    pointer-events: none;
    content: "";
    background-color: oklch(from currentColor l c h / .1);
    border-radius: var(--menu-item-border-radius);
    transition: inset .1s ease-in-out;
    position: absolute;
  }
}

.media-default-skin .media-menu .media-menu__item, .media-default-skin .media-menu .media-menu__back {
  text-align: left;
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  outline-offset: -2px;
  border-radius: var(--menu-item-border-radius);
  outline: 2px solid #0000;
  align-items: center;
  gap: .375rem;
  padding: .375rem .5rem;
  transition: background-color .1s ease-out, color .1s ease-out;
  display: flex;
}

:is(.media-default-skin .media-menu .media-menu__item, .media-default-skin .media-menu .media-menu__back):focus-visible {
  outline-offset: 2px;
  outline-color: currentColor;
}

:is(.media-default-skin .media-menu .media-menu__item, .media-default-skin .media-menu .media-menu__back):hover, :is(.media-default-skin .media-menu .media-menu__item, .media-default-skin .media-menu .media-menu__back)[data-highlighted] {
  background-color: oklch(from currentColor l c h / .1);
}

@supports (top: anchor(top)) {
  :is(.media-default-skin .media-menu .media-menu__item, .media-default-skin .media-menu .media-menu__back):hover, :is(.media-default-skin .media-menu .media-menu__item, .media-default-skin .media-menu .media-menu__back)[data-highlighted] {
    anchor-name: --media-menu-item-highlight-anchor;
    background-color: #0000;
  }
}

:is(.media-default-skin .media-menu .media-menu__item, .media-default-skin .media-menu .media-menu__back) .media-icon {
  color: oklch(from currentColor l c h / .65);
  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
  flex-shrink: 0;
}

.media-default-skin .media-menu .media-menu__indicator {
  opacity: 0;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: -.25rem;
}

.media-default-skin .media-menu .media-menu__indicator .media-icon {
  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
}

.media-default-skin .media-menu .media-menu__item {
  font-variant-numeric: tabular-nums;
  color: inherit;
  justify-content: space-between;
}

.media-default-skin .media-menu .media-menu__item[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .5;
}

.media-default-skin .media-menu .media-menu__item[aria-checked="true"] .media-menu__indicator {
  opacity: 1;
}

.media-default-skin .media-menu .media-menu__item[data-availability="unavailable"], .media-default-skin .media-menu .media-menu__item[data-availability="unsupported"] {
  display: none;
}

.media-default-skin .media-menu .media-menu__tier {
  color: oklch(from currentColor l c h / .7);
  padding-top: 1px;
  padding-left: .125rem;
  font-size: .5625rem;
  font-weight: 600;
  line-height: 1;
}

.media-default-skin .media-menu .media-menu__back {
  width: 100%;
  margin-bottom: .125rem;
}

.media-default-skin .media-menu .media-menu__hint {
  min-width: 0;
  color: oklch(from currentColor l c h / .65);
  align-items: center;
  gap: .25rem;
  margin-left: auto;
  padding-left: .5rem;
  font-size: .75rem;
  display: inline-flex;
}

.media-default-skin .media-menu .media-menu__hint-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 6rem;
  overflow: hidden;
}

.media-default-skin .media-menu .media-menu__chevron {
  width: .875rem;
  height: .875rem;
}

.media-default-skin .media-menu.media-menu--settings {
  width: var(--media-menu-width);
  min-width: 12rem;
  height: var(--media-menu-height);
  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);
  overflow: hidden;
}

.media-default-skin .media-menu.media-menu--settings[data-starting-style], .media-default-skin .media-menu.media-menu--settings[data-ending-style] {
  transition: var(--media-popup-transition);
}

.media-default-skin {
  --media-caption-track-duration: var(--media-controls-transition-duration);
  --media-caption-track-delay: 25ms;
  --media-caption-track-y: -.5rem;
}

.media-default-skin:has(.media-controls[data-visible]) {
  --media-caption-track-y: -5.5rem;
}

@container media-root (width > 42rem) {
  .media-default-skin:has(.media-controls[data-visible]) > * {
    --media-caption-track-y: -3.5rem;
  }
}

.media-default-skin video::-webkit-media-text-track-container {
  z-index: 1;
  scale: .98;
  translate: 0 var(--media-caption-track-y);
  transition: translate var(--media-caption-track-duration) ease-out;
  transition-delay: var(--media-caption-track-delay);
  font-family: inherit;
}

.media-default-skin .media-input-feedback {
  inset-inline: 0;
  color: var(--media-color-primary, #fff);
  pointer-events: none;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center;
  display: grid;
  position: absolute;
  top: 0;
  bottom: 3.5rem;
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin .media-input-feedback {
    color: var(--media-color-primary, lab(100% 0 0));
  }
}

@container media-root (width > 24rem) {
  .media-default-skin .media-input-feedback {
    bottom: 0;
  }
}

.media-default-skin .media-input-feedback-island {
  --media-surface-background-color: #00000040;
  color: inherit;
  pointer-events: none;
  transform-origin: top;
  border-radius: 3.40282e38px;
  font-weight: 500;
  transition-duration: .1s;
  transition-timing-function: ease-out;
  position: absolute;
  top: .75rem;
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin .media-input-feedback-island {
    --media-surface-background-color: lab(0% 0 0 / .25);
  }
}

.media-default-skin .media-input-feedback-island .media-input-feedback-island__content {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .25rem .625rem;
  display: flex;
}

.media-default-skin .media-input-feedback-island .media-input-feedback-island__content * {
  mix-blend-mode: difference;
}

.media-default-skin .media-input-feedback-island .media-icon {
  flex-shrink: 0;
  display: none;
}

.media-default-skin .media-input-feedback-island .media-input-feedback-island__value {
  margin-left: auto;
}

@media (pointer: coarse) {
  .media-default-skin .media-input-feedback-island {
    will-change: scale, translate, opacity;
    transition-property: scale, translate, opacity;
  }
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-island {
    will-change: scale, translate, filter, opacity;
    transition-property: scale, translate, filter, opacity;
  }
}

@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
  .media-default-skin .media-input-feedback-island {
    --media-surface-background-color: #000;
  }
}

.media-default-skin .media-input-feedback-island[data-starting-style], .media-default-skin .media-input-feedback-island[data-ending-style] {
  opacity: 0;
  transition-duration: .25s;
  transition-timing-function: ease-in;
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin .media-input-feedback-island[data-starting-style], .media-default-skin .media-input-feedback-island[data-ending-style] {
    --media-surface-background-color: lab(0% 0 0);
  }
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-island[data-starting-style], .media-default-skin .media-input-feedback-island[data-ending-style] {
    filter: blur(8px);
    scale: .9;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.media-default-skin .media-input-feedback-island[data-starting-style], .media-default-skin .media-input-feedback-island[data-ending-style])[data-ending-style] {
    translate: 0 -25%;
  }
}

.media-default-skin .media-input-feedback-island--volume {
  width: min(80%, 12rem);
}

.media-default-skin .media-input-feedback-island--volume .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 .2s linear;
}

.media-default-skin .media-input-feedback-island--volume[data-level="high"] .media-icon--volume-high, .media-default-skin .media-input-feedback-island--volume[data-level="low"] .media-icon--volume-low, .media-default-skin .media-input-feedback-island--volume[data-level="off"] .media-icon--volume-off {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-island--volume[data-min], .media-default-skin .media-input-feedback-island--volume[data-max] {
    animation: .3s ease-in-out media-shake;
  }
}

.media-default-skin .media-input-feedback-island--status[data-status="captions-on"] .media-icon--captions-on, .media-default-skin .media-input-feedback-island--status[data-status="captions-off"] .media-icon--captions-off, .media-default-skin .media-input-feedback-island--status[data-status="fullscreen"] .media-icon--fullscreen-enter, .media-default-skin .media-input-feedback-island--status[data-status="exit-fullscreen"] .media-icon--fullscreen-exit, .media-default-skin .media-input-feedback-island--status[data-status="pip"] .media-icon--pip-enter, .media-default-skin .media-input-feedback-island--status[data-status="exit-pip"] .media-icon--pip-exit {
  display: block;
}

.media-default-skin .media-input-feedback-bubble {
  text-align: center;
  grid-area: 1 / 2;
  place-content: center;
  padding: 1rem;
  display: grid;
}

.media-default-skin .media-input-feedback-bubble:not([data-direction]) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #00000059;
  background: lab(0% 0 0 / .35);
  border-radius: 100%;
  transition-property: opacity, scale;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}

.media-default-skin .media-input-feedback-bubble:not([data-direction])[data-starting-style], .media-default-skin .media-input-feedback-bubble:not([data-direction])[data-ending-style] {
  opacity: 0;
  scale: .85;
}

.media-default-skin .media-input-feedback-bubble:not([data-direction])[data-ending-style] {
  transition-duration: .1s;
  transition-timing-function: ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .media-default-skin .media-input-feedback-bubble:not([data-direction]) {
    transition-property: opacity;
    transition-duration: 50ms;
  }
}

.media-default-skin .media-input-feedback-bubble[data-direction] {
  gap: .25rem;
}

@container media-root (width > 24rem) {
  .media-default-skin .media-input-feedback-bubble[data-direction] {
    padding: 1.5rem;
  }
}

.media-default-skin .media-input-feedback-bubble[data-direction="backward"] {
  grid-column: 1;
  justify-self: left;
}

.media-default-skin .media-input-feedback-bubble[data-direction="forward"] {
  grid-column: 3;
  justify-self: right;
}

.media-default-skin .media-input-feedback-bubble .media-icon {
  width: calc(var(--media-icon-size) * 1.5);
  height: calc(var(--media-icon-size) * 1.5);
  display: none;
}

.media-default-skin .media-input-feedback-bubble .media-icon.media-icon--play {
  translate: 1px;
}

.media-default-skin .media-input-feedback-bubble[data-direction] .media-icon--seek, .media-default-skin .media-input-feedback-bubble[data-status="pause"] .media-icon--pause, .media-default-skin .media-input-feedback-bubble[data-status="play"] .media-icon--play {
  display: block;
}

.media-default-skin .media-input-feedback-bubble[data-direction="backward"] .media-icon--seek {
  scale: -1 1;
}

@media (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-bubble .media-icon--seek {
    transition-property: translate, opacity;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
  }

  .media-default-skin .media-input-feedback-bubble[data-starting-style] .media-icon--seek, .media-default-skin .media-input-feedback-bubble[data-ending-style] .media-icon--seek {
    opacity: 0;
  }

  .media-default-skin .media-input-feedback-bubble[data-direction="forward"][data-starting-style] .media-icon--seek {
    translate: -60%;
  }

  .media-default-skin .media-input-feedback-bubble[data-direction="backward"][data-starting-style] .media-icon--seek {
    translate: 60%;
  }
}

.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 {
  opacity: 0;
  display: none;
}

.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 {
  opacity: 1;
  display: block;
}

.media-button--airplay:not([data-airplay-state="connected"]) {
  --media-icon--airplay__fill-animation: none;
  --media-icon--airplay__triangle-animation: none;
}

@keyframes media-shake {
  0%, 100% {
    translate: 0;
  }

  20% {
    translate: -6px;
  }

  40% {
    translate: 4px;
  }

  60% {
    translate: -2px;
  }

  80% {
    translate: 1px;
  }
}

@property --media-progress-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.media-default-skin--video {
  --media-spring-timing-function: linear(0,
    .034 1.5%,
    .763 9.7%,
    1.066 13.9%,
    1.198 19.9%,
    1.184 21.8%,
    .963 37.5%,
    .997 50.9%,
    1);
  --media-border-color: #0000001a;
  --media-surface-background-color: #ffffff1a;
  --media-surface-inner-border-color: #ffffff0d;
  --media-surface-outer-border-color: #0000001a;
  --media-surface-shadow-color: #00000026;
  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
  --media-video-border-radius: var(--media-border-radius, 2rem);
  --media-controls-transition-duration: .1s;
  --media-controls-transition-timing-function: ease-out;
  --media-error-dialog-transition-duration: .35s;
  --media-error-dialog-transition-delay: .1s;
  --media-error-dialog-transition-timing-function: var(--media-spring-timing-function);
  --media-popup-transition-duration: .1s;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-side-offset: .75rem;
  --media-tooltip-boundary-offset: .5rem;
  --media-popover-side-offset: .5rem;
  --media-popover-boundary-offset: .5rem;
  background: #000;
  background: lab(0% 0 0);
  overflow: clip;
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin--video {
    --media-border-color: lab(0% 0 0 / .1);
    --media-surface-background-color: lab(100% 0 0 / .1);
    --media-surface-inner-border-color: lab(100% 0 0 / .05);
    --media-surface-outer-border-color: lab(0% 0 0 / .1);
    --media-surface-shadow-color: lab(0% 0 0 / .15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-default-skin--video {
    --media-error-dialog-transition-duration: 50ms;
    --media-error-dialog-transition-delay: 0s;
    --media-error-dialog-transition-timing-function: ease-out;
    --media-popup-transition-duration: 0s;
  }
}

@media (prefers-color-scheme: dark) {
  .media-default-skin--video {
    --media-border-color: #ffffff26;
  }
}

@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
  .media-default-skin--video {
    --media-surface-background-color: #000;
    --media-surface-inner-border-color: #ffffff40;
    --media-surface-outer-border-color: transparent;
  }
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin--video:has(.media-controls:not([data-visible])) {
    --media-border-color: lab(100% 0 0 / .15);
    --media-surface-background-color: lab(0% 0 0);
    --media-surface-inner-border-color: lab(100% 0 0 / .25);
  }
}

@media (pointer: fine) {
  .media-default-skin--video:has(.media-controls:not([data-visible])) {
    --media-controls-transition-duration: .3s;
  }
}

@media (pointer: coarse) {
  .media-default-skin--video:has(.media-controls:not([data-visible])) {
    --media-controls-transition-duration: .15s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-default-skin--video:has(.media-controls:not([data-visible])) {
    --media-controls-transition-duration: 50ms;
  }
}

.media-default-skin--video:after {
  z-index: 10;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--media-border-color);
  position: absolute;
  inset: 0;
}

.media-default-skin--video:-webkit-full-screen {
  --media-border-radius: 0;
}

.media-default-skin--video:fullscreen {
  --media-border-radius: 0;
}

.media-default-skin--video .media-error {
  z-index: 20;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.media-default-skin--video .media-error__dialog {
  color: #fff;
  color: lab(100% 0 0);
  text-shadow: 0 1px #00000040;
  text-shadow: 0 1px lab(0% 0 0 / .25);
  max-width: 18rem;
  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);
  border-radius: 1.75rem;
  flex-direction: column;
  gap: .75rem;
  padding: .75rem;
  transition-property: opacity, scale;
  display: flex;
}

.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: .5;
}

.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
  transition-delay: 0s;
}

.media-default-skin--video .media-error__content {
  text-shadow: inherit;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem .5rem .375rem;
  display: flex;
}

.media-default-skin--video .media-error__title {
  font-size: 1rem;
}

.media-default-skin--video .media-controls {
  inset-inline: .5rem;
  z-index: 10;
  color: var(--media-color-primary, #fff);
  transform-origin: bottom;
  transition-timing-function: var(--media-controls-transition-timing-function);
  transition-duration: var(--media-controls-transition-duration);
  flex-wrap: wrap;
  position: absolute;
  bottom: .5rem;
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin--video .media-controls {
    color: var(--media-color-primary, lab(100% 0 0));
  }
}

@media (pointer: fine) {
  .media-default-skin--video .media-controls {
    will-change: scale, filter, opacity;
    transition-property: scale, filter, opacity;
  }
}

@media (pointer: coarse) {
  .media-default-skin--video .media-controls {
    will-change: scale, opacity;
    transition-property: scale, opacity;
  }
}

.media-default-skin--video .media-controls:not([data-visible]) {
  pointer-events: none;
  opacity: 0;
  scale: .95;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .media-default-skin--video .media-controls:not([data-visible]) {
    filter: blur(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-default-skin--video .media-controls:not([data-visible]) {
    scale: 1;
  }
}

.media-default-skin--video .media-controls .media-time-controls {
  flex: 0 0 100%;
  order: -1;
  padding-inline: .625rem;
}

.media-default-skin--video .media-controls .media-button-group:first-child {
  text-align: left;
  flex: 1;
}

.media-default-skin--video .media-controls .media-button-group:last-child {
  flex: 1;
  justify-content: end;
}

@container media-root (width > 42rem) {
  .media-default-skin--video .media-controls {
    inset-inline: .75rem;
    flex-wrap: nowrap;
    column-gap: .125rem;
    padding: .25rem;
    bottom: .75rem;
  }

  .media-default-skin--video .media-controls .media-time-controls {
    flex: 1;
    order: unset;
  }

  .media-default-skin--video .media-controls .media-button-group:first-child, .media-default-skin--video .media-controls .media-button-group:last-child {
    flex: none;
  }
}

.media-default-skin--video .media-error[data-open] ~ .media-controls {
  display: none;
}

.media-default-skin--video:has(.media-controls:not([data-visible])) {
  cursor: none;
}

.media-default-skin--video .media-slider__track {
  background-color: #fff3;
  background-color: lab(100% 0 0 / .2);
  box-shadow: 0 0 0 1px #0000000d;
  box-shadow: 0 0 0 1px lab(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;
  --media-slider-thumbnail-inset: calc((100cqi - 100%) / 2);
  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;
  transition-property: scale, opacity, filter;
  transition-duration: .15s;
  transition-timing-function: ease-out;
  position: absolute;
  translate: -50%;
  scale: .8;
}

.media-default-skin--video .media-slider__thumbnail .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();
  scale: 1;
}

.media-default-skin--video .media-slider__thumbnail:has([role="img"]:not([data-hidden])) + .media-slider__preview .media-slider__value {
  display: none;
}