/* [project]/node_modules/@videojs/react/dist/default/presets/video/minimal-skin.css [app-client] (css) */
.media-minimal-skin *, .media-minimal-skin :before, .media-minimal-skin :after {
  box-sizing: border-box;
}

.media-minimal-skin img, .media-minimal-skin video, .media-minimal-skin svg {
  max-width: 100%;
  display: block;
}

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

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

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

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

.media-minimal-skin {
  letter-spacing: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-family: Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
}

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

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

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

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

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

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

.media-minimal-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, #000000b3, #00000080 7.5rem, #0000);
  background-image: linear-gradient(to top, lab(0% 0 0 / .7), lab(0% 0 0 / .5) 7.5rem, lab(0% 0 0 / 0));
  transition-timing-function: ease-out;
  position: absolute;
  inset: 0;
}

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

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

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

.media-minimal-skin .media-buffering-indicator {
  color: #fff;
  color: lab(100% 0 0);
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  inset: 0;
}

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

.media-minimal-skin .media-error:not([data-open]) {
  display: none;
}

.media-minimal-skin .media-error__title {
  font-weight: 600;
  line-height: 1.25;
}

.media-minimal-skin .media-error__description {
  opacity: .7;
  overflow-wrap: anywhere;
}

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

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

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

.media-minimal-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));
  background-color: var(--media-controls-background-color);
  -webkit-backdrop-filter: var(--media-controls-backdrop-filter);
  backdrop-filter: var(--media-controls-backdrop-filter);
  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
  align-items: center;
  display: flex;
  container: media-controls / inline-size;
}

.media-minimal-skin .media-time-controls {
  flex-direction: row-reverse;
  flex: 1;
  align-items: center;
  gap: .75rem;
  display: flex;
  container: media-time-controls / inline-size;
}

.media-minimal-skin .media-time-group {
  align-items: center;
  gap: .25rem;
  display: flex;
}

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

.media-minimal-skin .media-time--current, .media-minimal-skin .media-time-separator {
  display: none;
}

@container media-root not (max-width: 42rem) {
  .media-minimal-skin .media-time-controls {
    flex-direction: row;
  }

  .media-minimal-skin .media-time--duration, .media-minimal-skin .media-time-separator {
    color: oklch(from currentColor l c h / .6);
  }

  .media-minimal-skin .media-time--current, .media-minimal-skin .media-time-separator {
    display: inline;
  }
}

.media-minimal-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: .5rem;
  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-minimal-skin .media-button:focus-visible {
  outline-offset: 2px;
  outline-color: currentColor;
}

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

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

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

@supports (corner-shape: squircle) {
  .media-minimal-skin .media-button {
    corner-shape: squircle;
    border-radius: 1rem;
  }
}

.media-minimal-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-minimal-skin .media-button--subtle {
  color: inherit;
  text-shadow: inherit;
  background: none;
}

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

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

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

.media-minimal-skin .media-button--icon .media-icon {
  filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, #00000040));
}

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

.media-minimal-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-minimal-skin .media-button--seek:has(.media-icon--flipped) .media-icon__label {
  right: unset;
  left: -1px;
}

.media-minimal-skin .media-button--playback-rate {
  padding: 0;
}

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

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

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

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

.media-minimal-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-minimal-skin .media-icon--flipped {
  scale: -1 1;
}

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

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

.media-minimal-skin media-poster ::slotted(img), .media-minimal-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-minimal-skin > img {
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: inherit;
}

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

.media-minimal-skin .media-preview {
  pointer-events: none;
}

.media-minimal-skin .media-preview .media-preview__thumbnail-wrapper {
  background-color: #000000e6;
  background-color: lab(0% 0 0 / .9);
  border-radius: .5rem;
  position: relative;
}

.media-minimal-skin .media-preview .media-preview__thumbnail {
  border-radius: inherit;
  display: block;
}

.media-minimal-skin .media-preview .media-preview__time {
  text-align: center;
  margin-top: .5rem;
  display: block;
}

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

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

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

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

.media-minimal-skin .media-preview:has(.media-preview__thumbnail[data-loading]) .media-preview__spinner {
  opacity: 1;
}

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

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

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

.media-minimal-skin .media-slider__track {
  isolation: isolate;
  border-radius: inherit;
  -webkit-user-select: none;
  user-select: none;
  background-color: oklch(from currentColor l c h / .2);
  position: relative;
  overflow: hidden;
}

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

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

.media-minimal-skin .media-slider__thumb {
  z-index: 10;
  width: .75rem;
  height: .75rem;
  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;
  transform-origin: center;
  -webkit-user-select: none;
  user-select: none;
  outline-offset: -2px;
  background-color: currentColor;
  border-radius: 3.40282e38px;
  outline: 2px solid #0000;
  transition-property: opacity, scale, outline-offset;
  transition-duration: .15s;
  transition-timing-function: ease-out;
  position: absolute;
  translate: -50% -50%;
  scale: .7;
}

@supports (color: lab(0% 0 0)) {
  .media-minimal-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-minimal-skin .media-slider__thumb[data-orientation="horizontal"] {
  top: 50%;
  left: var(--media-slider-fill);
}

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

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

.media-minimal-skin .media-slider:hover .media-slider__thumb, .media-minimal-skin .media-slider:focus-within .media-slider__thumb, .media-minimal-skin .media-slider__thumb--persistent {
  opacity: 1;
  scale: 1;
}

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

.media-minimal-skin .media-slider__buffer[data-orientation="horizontal"], .media-minimal-skin .media-slider__fill[data-orientation="horizontal"] {
  inset-block: 0;
  left: 0;
}

.media-minimal-skin .media-slider__buffer[data-orientation="vertical"], .media-minimal-skin .media-slider__fill[data-orientation="vertical"] {
  inset-inline: 0;
  bottom: 0;
}

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

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

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

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

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

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

.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
  left: var(--media-slider-pointer);
}

.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
  top: calc(100% - var(--media-slider-pointer));
}

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

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

.media-minimal-skin .media-popover, .media-minimal-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-minimal-skin .media-popover, .media-minimal-skin .media-tooltip)[data-starting-style], :is(.media-minimal-skin .media-popover, .media-minimal-skin .media-tooltip)[data-ending-style] {
  opacity: 0;
  filter: blur(8px);
  scale: .5;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.media-minimal-skin .media-tooltip {
  background-color: var(--media-tooltip-background-color);
  -webkit-backdrop-filter: var(--media-tooltip-backdrop-filter);
  backdrop-filter: var(--media-tooltip-backdrop-filter);
  box-shadow: 0 0 0 1px var(--media-tooltip-border-color),
    0 4px 6px -1px #0000001a,
    0 2px 4px -2px #0000001a;
  color: var(--media-tooltip-text-color);
  white-space: nowrap;
  border-radius: .5rem;
  padding: .25rem .5rem;
  font-size: .75rem;
}

@supports (color: lab(0% 0 0)) {
  .media-minimal-skin .media-tooltip {
    box-shadow: 0 0 0 1px var(--media-tooltip-border-color),
    0 4px 6px -1px lab(0% 0 0 / .1),
    0 2px 4px -2px lab(0% 0 0 / .1);
  }
}

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

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

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

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

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

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

.media-minimal-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-minimal-skin--video {
  --media-border-color: #00000026;
  --media-video-border-radius: var(--media-border-radius, .75rem);
  --media-controls-background-color: transparent;
  --media-controls-transition-duration: .1s;
  --media-controls-transition-timing-function: ease-out;
  --media-error-dialog-transition-duration: .15s;
  --media-error-dialog-transition-delay: .1s;
  --media-error-dialog-transition-timing-function: ease-out;
  --media-popup-transition-duration: .1s;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-background-color: #ffffff1a;
  --media-tooltip-border-color: transparent;
  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);
  --media-tooltip-text-color: currentColor;
  --media-tooltip-side-offset: .5rem;
  --media-popover-side-offset: 1.5rem;
  background: #000;
  background: lab(0% 0 0);
  overflow: clip;
}

@supports (color: lab(0% 0 0)) {
  .media-minimal-skin--video {
    --media-border-color: lab(0% 0 0 / .15);
    --media-tooltip-background-color: lab(100% 0 0 / .1);
  }
}

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

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

@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
  .media-minimal-skin--video {
    --media-controls-background-color: #000;
    --media-tooltip-background-color: #000;
  }
}

@container media-root not (max-width: 42rem) {
  .media-minimal-skin--video > * {
    --media-popover-side-offset: 0rem;
  }

  @supports (color: lab(0% 0 0)) {
    .media-minimal-skin--video > * {
      --media-border-color: lab(100% 0 0 / .15);
      --media-controls-background-color: lab(0% 0 0);
      --media-tooltip-background-color: lab(0% 0 0);
    }
  }
}

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

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

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

.media-minimal-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;
  inset: 0;
}

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

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

.media-minimal-skin--video .media-error__dialog {
  color: #fff;
  color: lab(100% 0 0);
  text-shadow: 0 1px #00000080;
  text-shadow: 0 1px lab(0% 0 0 / .5);
  max-width: 16rem;
  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);
  pointer-events: auto;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
  display: flex;
}

.media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog, .media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {
  opacity: 0;
  scale: .5;
}

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

.media-minimal-skin--video .media-error__content {
  flex-direction: column;
  gap: .5rem;
  padding: .375rem 0;
  display: flex;
}

.media-minimal-skin--video .media-error__title {
  font-size: 1.125rem;
}

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

.media-minimal-skin--video .media-controls {
  bottom: .25rem;
  z-index: 10;
  color: #fff;
  color: lab(100% 0 0);
  transition-duration: var(--media-controls-transition-duration);
  transition-timing-function: var(--media-controls-transition-timing-function);
  border-radius: .75rem;
  flex-wrap: wrap;
  column-gap: .5rem;
  padding: .25rem;
  position: absolute;
  inset-inline: .25rem;
}

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

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

.media-minimal-skin--video .media-controls:not([data-visible]) {
  opacity: 0;
  pointer-events: none;
  translate: 0 100%;
}

@media (pointer: fine) {
  .media-minimal-skin--video .media-controls:not([data-visible]) {
    filter: blur(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-minimal-skin--video .media-controls:not([data-visible]) {
    filter: blur();
    translate: 0;
  }
}

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

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

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

@container media-root not (max-width: 42rem) {
  .media-minimal-skin--video .media-controls {
    bottom: .5rem;
    flex-wrap: nowrap;
    inset-inline: .5rem;
  }

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

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

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

.media-minimal-skin--video .media-slider__track {
  box-shadow: 0 0 0 1px #0000000d;
  box-shadow: 0 0 0 1px lab(0% 0 0 / .05);
}

.media-minimal-skin--video .media-popover--volume {
  background: none;
  border-radius: .75rem;
  padding-block: .75rem;
}

@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
  .media-minimal-skin--video .media-popover--volume {
    background: var(--media-controls-background-color);
  }
}

.media-minimal-skin--video .media-slider__preview {
  --media-preview-max-width: 11rem;
  --media-preview-padding: -.5rem;
  --media-preview-inset: calc(100cqi - 100%);
  left: clamp(calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)),
    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;
  transition-property: scale, opacity, filter;
  transition-duration: .15s;
  transition-timing-function: ease-out;
  position: absolute;
  bottom: 100%;
  translate: -50%;
  scale: .8;
}

@container media-root not (max-width: 42rem) {
  .media-minimal-skin--video .media-slider__preview {
    bottom: calc(100% + .25rem);
    left: var(--media-slider-pointer);
  }
}

.media-minimal-skin--video .media-slider__preview .media-preview__thumbnail-wrapper {
  position: relative;
}

.media-minimal-skin--video .media-slider__preview .media-preview__thumbnail-wrapper:after {
  content: "";
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 1px #0000000d, 0 1px 3px #0003, 0 1px 2px -1px #0003;
  box-shadow: 0 0 0 1px lab(0% 0 0 / .05), 0 1px 3px lab(0% 0 0 / .2), 0 1px 2px -1px lab(0% 0 0 / .2);
}

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

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

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

/* [project]/components/video-player.css [app-client] (css) */
.video-player-muted-notice {
  top: max(var(--safe-top), .5rem);
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  max-width: min(100% - 1rem, 20rem);
  transition: opacity .18s, transform .18s;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -.5rem);
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  box-shadow: none !important;
  color: #f5f5f5eb !important;
  color: lab(96.52% -.0000298023 .0000119209 / .92) !important;
  background: #0d0d0d6b !important;
  background: lab(3.6999% 0 0 / .42) !important;
  border: 0 !important;
}

.video-player-muted-notice[data-slot="chip"] {
  align-items: center !important;
  display: inline-flex !important;
}

.video-player-muted-notice [data-slot="chip-label"] {
  letter-spacing: -.01em;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  display: block;
  color: inherit !important;
}

.video-player-muted-notice__icon {
  flex-shrink: 0;
  align-self: center;
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.video-player-muted-notice--visible {
  opacity: 1;
  transform: translate(-50%);
}

.video-player-skin .video-player-time-controls .media-slider {
  pointer-events: none !important;
  touch-action: none !important;
}

.video-player-skin .video-player-time-controls {
  gap: .75rem;
  min-width: 0;
  flex-direction: row !important;
}

.video-player-skin .video-player-controls {
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
  background: linear-gradient(#12121299, #0606067a) !important;
  background: linear-gradient(lab(5.26802% 0 0 / .6), lab(1.5609% 0 0 / .48)) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px #ffffff14, inset 0 1px #ffffff0a, 0 10px 30px #00000047 !important;
  box-shadow: inset 0 0 0 1px lab(100% 0 0 / .08), inset 0 1px lab(100% 0 0 / .04), 0 10px 30px lab(0% 0 0 / .28) !important;
}

.video-player-skin .video-player-controls__group {
  align-items: center;
  display: flex;
}

.video-player-skin .media-slider__thumb {
  display: none !important;
}

.video-player-skin .video-player-controls__group--end {
  justify-content: flex-end;
}

@media (orientation: portrait) {
  .video-player-shell .video-player-skin:not(:fullscreen) .video-player-controls, .video-player-shell .video-player-skin:fullscreen .video-player-controls {
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    background: none !important;
  }

  .video-player-shell .video-player-skin:not(:fullscreen) .video-player-controls {
    bottom: .25rem !important;
    flex-wrap: wrap !important;
    inset-inline: .25rem !important;
  }

  .video-player-shell .video-player-skin:not(:fullscreen) .video-player-time-controls {
    flex: 0 0 100% !important;
    order: -1 !important;
    padding-inline: .625rem !important;
  }

  .video-player-shell .video-player-skin:not(:fullscreen) .video-player-controls__group--start {
    flex: 1 !important;
  }

  .video-player-shell .video-player-skin:not(:fullscreen) .video-player-controls__group--end {
    flex: 1 !important;
    justify-content: end !important;
  }
}

.video-player-skin .media-time--current, .video-player-skin .media-time-separator {
  display: inline !important;
}

.video-player-skin .media-time-group {
  display: contents;
}

.video-player-skin .media-time--duration {
  color: oklch(from currentColor l c h / .6);
}

.video-player-skin .media-time--current {
  order: 1;
}

.video-player-skin .video-player-time-controls .media-slider {
  order: 2;
}

.video-player-skin .media-time-separator {
  display: none !important;
}

.video-player-skin .media-time--duration {
  order: 3;
}

.video-player--no-pip .video-player-skin .media-button--pip {
  display: none !important;
}

.video-player-skin .media-button--subtle, .video-player-skin .media-button--subtle:hover, .video-player-skin .media-button--subtle:focus-visible, .video-player-skin .media-button--subtle[aria-expanded="true"], .video-player-skin .media-button--subtle:active, .video-player-skin .media-button--subtle[data-active], .video-player-skin .media-button--subtle[aria-pressed="true"] {
  clip-path: inset(0 round 999px);
  corner-shape: unset !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.video-player-skin .media-button--subtle.media-button--touch-clear:hover, .video-player-skin .media-button--subtle.media-button--touch-clear:focus-visible {
  background: none !important;
}

@media (pointer: coarse) {
  .video-player--touch-controls-open .video-player-skin .video-player-controls, .video-player--touch-controls-closed .video-player-skin .video-player-controls {
    will-change: opacity, translate !important;
    filter: none !important;
    transition: opacity .22s cubic-bezier(.22, 1, .36, 1), translate .22s cubic-bezier(.22, 1, .36, 1) !important;
  }

  .video-player--touch-controls-open .video-player-skin .video-player-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
    translate: 0 !important;
  }

  .video-player--touch-controls-closed .video-player-skin .video-player-controls {
    opacity: 0 !important;
    pointer-events: none !important;
    translate: 0 .85rem !important;
  }
}

.video-player-skin {
  -webkit-tap-highlight-color: transparent;
  --media-border-color: transparent !important;
  outline: none !important;
}

.video-player-skin:focus, .video-player-skin:focus-visible {
  outline: none !important;
}

.video-player-skin:after {
  box-shadow: none !important;
}

@media (orientation: landscape) {
  .video-player-shell .video-player-skin:not(:fullscreen) .video-player-controls {
    bottom: .5rem !important;
    flex-wrap: nowrap !important;
    inset-inline: .5rem !important;
  }

  .video-player-shell .video-player-skin:not(:fullscreen) .video-player-time-controls {
    order: unset !important;
    flex: 1 !important;
    padding-inline: 0 !important;
  }

  .video-player-shell .video-player-skin:not(:fullscreen) .video-player-controls__group--start, .video-player-shell .video-player-skin:not(:fullscreen) .video-player-controls__group--end {
    flex: none !important;
  }
}

/*# sourceMappingURL=_09xr8bm._.css.map*/