.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 (prefers-reduced-motion: no-preference) {
  .media-default-skin {
    interpolate-size: allow-keywords;
  }
}

.media-default-skin {
  isolation: isolate;
  border-radius: var(--media-border-radius, 2rem);
  outline-offset: 2px;
  outline: 2px solid #0000;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  container: media-root / inline-size;
}

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

.media-default-skin {
  letter-spacing: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-family: Inter Variable, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  line-height: 1.5;
}

.media-default-skin > * {
  font-size: .75rem;
}

@container media-root (width > 48rem) {
  .media-default-skin > * {
    font-size: .875rem;
  }
}

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

.media-default-skin .media-surface:after {
  content: "";
  z-index: 10;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 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 {
  border-radius: inherit;
  -webkit-backdrop-filter: blur() saturate();
  backdrop-filter: blur() saturate();
  opacity: 0;
  pointer-events: none;
  transition-property: opacity, -webkit-backdrop-filter, backdrop-filter;
  transition-duration: var(--media-controls-transition-duration);
  background-image: linear-gradient(to top, #00000080, #0000004d, #0000);
  background-image: linear-gradient(to top, color(display-p3 0 0 0 / .5), color(display-p3 0 0 0 / .3), color(display-p3 0 0 0 / 0));
  background-image: linear-gradient(to top, lab(0% 0 0 / .5), lab(0% 0 0 / .3), lab(0% 0 0 / 0));
  transition-timing-function: ease-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.media-default-skin .media-error ~ .media-overlay {
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-delay: var(--media-error-dialog-transition-delay);
}

.media-default-skin .media-controls[data-visible] ~ .media-overlay, .media-default-skin .media-error[data-open] ~ .media-overlay {
  opacity: 1;
}

.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 {
  color: #fff;
  color: color(display-p3 1 1 1);
  color: lab(100% 0 0);
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

.media-default-skin .media-buffering-indicator .media-surface {
  border-radius: 100%;
  padding: .25rem;
}

.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 {
  opacity: .7;
  overflow-wrap: anywhere;
}

.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 {
  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
  --media-controls-current-shadow-color-subtle: oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));
  text-shadow: 0 1px 0 var(--media-controls-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-start: .5rem;
  padding-inline-end: .5rem;
  display: flex;
  container: media-time-controls / inline-size;
}

.media-default-skin .media-time {
  font-variant-numeric: tabular-nums;
}

.media-default-skin .media-button {
  outline-offset: -2px;
  will-change: scale;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
  touch-action: manipulation;
  border: none;
  border-radius: 3.40282e38px;
  outline: 2px solid #0000;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  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] {
  opacity: .5;
  filter: grayscale();
  cursor: not-allowed;
}

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

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

.media-default-skin .media-button--primary {
  color: #000;
  color: color(display-p3 0 0 0);
  color: lab(0% 0 0);
  text-shadow: none;
  background: #fff;
  background: color(display-p3 1 1 1);
  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 {
  background-color: oklch(from currentColor l c h / .1);
  text-decoration: none;
}

.media-default-skin .media-button--subtle:focus-visible {
  background-color: oklch(from currentColor l c h / .1);
  text-decoration: none;
}

.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 {
  filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, #00000040));
}

@supports (color: color(display-p3 0 0 0)) {
  .media-default-skin .media-button--icon .media-icon {
    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, color(display-p3 0 0 0 / .25)));
  }
}

@supports (color: lab(0% 0 0)) {
  .media-default-skin .media-button--icon .media-icon {
    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, lab(0% 0 0 / .25)));
  }
}

.media-default-skin .media-button--seek .media-icon__label {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 480;
  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 {
  padding: 0;
}

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

.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-icon__container {
  position: relative;
}

.media-default-skin .media-icon {
  transition-behavior: allow-discrete;
  flex-shrink: 0;
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition-property: display, opacity;
  transition-duration: .15s;
  transition-timing-function: ease-out;
  display: block;
}

.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;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.media-default-skin media-poster:not([data-visible]), .media-default-skin > img:not([data-visible]) {
  opacity: 0;
}

.media-default-skin media-poster ::slotted(img), .media-default-skin media-poster img {
  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;
  top: 0;
  bottom: 0;
  left: 0;
  right: 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:-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-preview {
  pointer-events: none;
  background-color: #000000e6;
  background-color: color(display-p3 0 0 0 / .9);
  background-color: lab(0% 0 0 / .9);
  border-radius: .75rem;
}

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

.media-default-skin .media-preview .media-preview__thumbnail:after {
  content: "";
  border-radius: inherit;
  background-image: linear-gradient(to top, #000c, #0000004d, #0000);
  background-image: linear-gradient(to top, color(display-p3 0 0 0 / .8), color(display-p3 0 0 0 / .3), color(display-p3 0 0 0 / 0));
  background-image: linear-gradient(to top, lab(0% 0 0 / .8), lab(0% 0 0 / .3), lab(0% 0 0 / 0));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.media-default-skin .media-preview .media-preview__time {
  bottom: .5rem;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
}

.media-default-skin .media-preview .media-overlay {
  opacity: 1;
}

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

.media-default-skin .media-preview .media-preview__thumbnail {
  transition: opacity .15s ease-out;
}

.media-default-skin .media-preview .media-preview__spinner {
  transition: opacity .15s ease-out;
}

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

.media-default-skin .media-preview:has(.media-preview__thumbnail[data-loading]) .media-preview__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 {
  isolation: isolate;
  border-radius: inherit;
  -webkit-user-select: none;
  user-select: none;
  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;
  width: .625rem;
  height: .625rem;
  box-shadow: 0 0 0 1px var(--media-controls-current-shadow-color-subtle, #0000001a), 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
  opacity: 0;
  -webkit-user-select: none;
  user-select: none;
  outline-offset: -4px;
  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: color(display-p3 0 0 0)) {
  .media-default-skin .media-slider__thumb {
    box-shadow: 0 0 0 1px var(--media-controls-current-shadow-color-subtle, color(display-p3 0 0 0 / .1)), 0 1px 3px 0 color(display-p3 0 0 0 / .15), 0 1px 2px -1px color(display-p3 0 0 0 / .15);
  }
}

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

.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"] {
  left: 50%;
  top: calc(100% - var(--media-slider-fill));
}

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

.media-default-skin .media-slider__thumb:focus {
  outline-color: oklch(from currentColor l c h / .25);
  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;
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
  box-shadow: 0 0 0 2px #fff;
  box-shadow: 0 0 0 2px color(display-p3 1 1 1);
  box-shadow: 0 0 0 2px lab(100% 0 0);
}

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

.media-default-skin .media-slider__thumb:focus-visible {
  opacity: 1;
}

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

.media-default-skin .media-slider__buffer[data-orientation="horizontal"], .media-default-skin .media-slider__fill[data-orientation="horizontal"] {
  top: 0;
  bottom: 0;
  left: 0;
}

.media-default-skin .media-slider__buffer[data-orientation="vertical"], .media-default-skin .media-slider__fill[data-orientation="vertical"] {
  left: 0;
  right: 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-popover, .media-default-skin .media-tooltip {
  color: inherit;
  transition-property: scale, opacity, filter;
  transition-duration: var(--media-popup-transition-duration);
  transition-timing-function: var(--media-popup-transition-timing-function);
  border: 0;
  margin: 0;
  overflow: visible;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-starting-style] {
  opacity: 0;
  filter: blur(8px);
  scale: .5;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-ending-style] {
  opacity: 0;
  filter: blur(8px);
  scale: .5;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-instant] {
  transition-duration: 0s;
}

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

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

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

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="right"] {
  transform-origin: 0;
}

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

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

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="bottom"]:before {
  width: 100%;
  left: 0;
  right: 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 {
  height: 100%;
  top: 0;
  bottom: 0;
}

:is(.media-default-skin .media-popover, .media-default-skin .media-tooltip)[data-side="right"]:before {
  height: 100%;
  top: 0;
  bottom: 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 {
  height: var(--media-popover-side-offset);
}

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

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

.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-side="top"]:before {
  height: var(--media-tooltip-side-offset);
}

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

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

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

.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 {
  transition: translate var(--media-caption-track-duration) ease-out;
  transition-delay: var(--media-caption-track-delay);
  translate: 0 var(--media-caption-track-y);
  z-index: 1;
  font-family: inherit;
  scale: .98;
}

.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--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-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--captions:not([data-active]) .media-icon--captions-off, .media-button--captions[data-active] .media-icon--captions-on {
  opacity: 1;
  display: block;
}

.media-default-skin--video {
  --media-spring-transition: 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-transition);
  --media-popup-transition-duration: .1s;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-side-offset: .75rem;
  --media-popover-side-offset: .5rem;
  background: #000;
  background: color(display-p3 0 0 0);
  background: lab(0% 0 0);
}

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

@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: color(display-p3 0 0 0)) {
  .media-default-skin--video:has(.media-controls:not([data-visible])) {
    --media-border-color: color(display-p3 1 1 1 / .15);
    --media-surface-background-color: color(display-p3 0 0 0);
    --media-surface-inner-border-color: color(display-p3 1 1 1 / .25);
  }
}

@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 {
  content: "";
  z-index: 10;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--media-border-color);
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 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;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.media-default-skin--video .media-error__dialog {
  color: #fff;
  color: color(display-p3 1 1 1);
  color: lab(100% 0 0);
  text-shadow: 0 1px #00000040;
  text-shadow: 0 1px color(display-p3 0 0 0 / .25);
  text-shadow: 0 1px lab(0% 0 0 / .25);
  max-width: 18rem;
  transition-property: opacity, scale;
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-timing-function: var(--media-error-dialog-transition-timing-function);
  border-radius: 1.75rem;
  flex-direction: column;
  gap: .75rem;
  padding: .75rem;
  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 {
  bottom: .5rem;
  z-index: 10;
  color: var(--media-color-primary, #fff);
  transition-duration: var(--media-controls-transition-duration);
  transition-timing-function: var(--media-controls-transition-timing-function);
  transform-origin: bottom;
  flex-wrap: wrap;
  position: absolute;
  left: .5rem;
  right: .5rem;
}

@supports (color: color(display-p3 0 0 0)) {
  .media-default-skin--video .media-controls {
    color: var(--media-color-primary, color(display-p3 1 1 1));
  }
}

@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]) {
  opacity: 0;
  pointer-events: none;
  scale: .9;
}

@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-start: .625rem;
  padding-inline-end: .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 {
    bottom: .75rem;
    flex-wrap: nowrap;
    column-gap: .125rem;
    padding: .25rem;
    left: .75rem;
    right: .75rem;
  }

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

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

  .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: color(display-p3 1 1 1 / .2);
  background-color: lab(100% 0 0 / .2);
  box-shadow: 0 0 0 1px #0000000d;
  box-shadow: 0 0 0 1px color(display-p3 0 0 0 / .05);
  box-shadow: 0 0 0 1px lab(0% 0 0 / .05);
}

.media-default-skin--video .media-slider__preview {
  --media-preview-max-width: 11rem;
  --media-preview-padding: -1.125rem;
  --media-preview-inset: calc((100cqi - 100%) / 2);
  left: clamp(calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)  - var(--media-preview-inset)), var(--media-slider-pointer), calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding)  + var(--media-preview-inset)));
  opacity: 0;
  filter: blur(8px);
  transform-origin: bottom;
  pointer-events: none;
  transition-property: scale, opacity, filter;
  transition-duration: .15s;
  transition-timing-function: ease-out;
  position: absolute;
  bottom: calc(100% + 1.2rem);
  translate: -50%;
  scale: .8;
}

.media-default-skin--video .media-slider__preview .media-preview__thumbnail {
  max-width: var(--media-preview-max-width);
}

.media-default-skin--video .media-slider__preview:has(.media-preview__thumbnail[data-loading]) {
  max-height: 6rem;
}

.media-default-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
  opacity: 1;
  filter: blur();
  scale: 1;
}