[data-scanlines-media] {
  --scanlines-media-surface: var(--panel, var(--bg, #111827));
  --scanlines-media-surface-raised: var(--panel, var(--bg, #1f2937));
  --scanlines-media-text: var(--text, #f8fafc);
  --scanlines-media-muted: var(--muted, #cbd5e1);
  --scanlines-media-accent: var(--accent, #67e8f9);
  --scanlines-media-focus: var(--accent, #fbbf24);
  --scanlines-media-border: var(--muted, #94a3b8);
  --scanlines-media-radius: var(--radius, 0.5rem);
  --scanlines-media-control-size: max(44px, var(--control-size, 44px));

  --media-primary-color: var(--scanlines-media-text, #f8fafc);
  --media-secondary-color: var(--scanlines-media-surface, #111827);
  --media-text-color: var(--scanlines-media-text, #f8fafc);
  --media-control-background: var(--scanlines-media-surface, #111827);
  --media-control-hover-background: var(--scanlines-media-surface-raised, #1f2937);
  --media-tooltip-background-color: var(--scanlines-media-surface-raised, #1f2937);
  --media-tooltip-background: var(--scanlines-media-surface-raised, #1f2937);
  --media-tooltip-arrow-color: var(--scanlines-media-surface-raised, #1f2937);
  --media-focus-box-shadow: 0 0 0 3px var(--scanlines-media-focus, #fbbf24);
  --media-menu-item-hover-background: var(--scanlines-media-surface, #111827);
  --media-menu-item-checked-background: var(--scanlines-media-surface, #111827);
  --media-menu-item-focus-shadow: inset 0 0 0 3px var(--scanlines-media-focus, #fbbf24);
  --media-font: 400 1rem/1.5 var(
    --font-body,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
  --media-control-padding: max(
    0px,
    calc((var(--scanlines-media-control-size, 44px) - 1.5em) / 2)
  );

  display: block;
  box-sizing: border-box;
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: 100%;
  color: var(--scanlines-media-text, #f8fafc);
  color-scheme: dark light;
  background: var(--scanlines-media-surface, #111827);
  border: 1px solid var(--scanlines-media-border, #94a3b8);
  border-radius: var(--scanlines-media-radius, 0.5rem);
  font-family: var(
    --font-body,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
  isolation: isolate;
}

[data-scanlines-media],
[data-scanlines-media] * {
  box-sizing: border-box;
}

[data-scanlines-media] > audio[slot="media"] {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
}

[data-scanlines-media][audio] {
  position: relative;
  overflow: visible;
  min-block-size: var(--scanlines-media-control-size, 44px);
}

[data-scanlines-media][audio]:not([data-scanlines-media-ready]) {
  --media-slot-display: block;
}

[data-scanlines-media][audio]:not([data-scanlines-media-ready]) > audio[slot="media"] {
  min-block-size: var(--scanlines-media-control-size, 44px);
}

[data-scanlines-media][audio][data-scanlines-media-ready] {
  --media-slot-display: none;
}

[data-scanlines-media][audio] media-control-bar {
  inline-size: 100%;
  min-block-size: var(--scanlines-media-control-size, 44px);
}

[data-scanlines-media][audio] > media-playback-rate-menu {
  position: absolute;
  z-index: 2;
  max-inline-size: 100%;
}

[data-scanlines-media][audio] > media-playback-rate-menu:not([anchor="auto"]) {
  inset-block-end: calc(100% + 0.25rem);
  inset-inline-end: 0;
}

[data-scanlines-media][audio] > media-playback-rate-menu[anchor="auto"] {
  --media-menu-max-height: min(22rem, calc(100vh - 2rem));
  --media-menu-overflow: hidden auto;
}

[data-scanlines-media] > video[slot="media"] {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: min(80vb, 80vh);
  object-fit: contain;
  background: var(--scanlines-media-surface, #111827);
}

[data-scanlines-media] media-control-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  inline-size: 100%;
  min-block-size: var(--scanlines-media-control-size, 44px);
  color: var(--scanlines-media-text, #f8fafc);
  background: var(--scanlines-media-surface, #111827);
}

[data-scanlines-media] media-control-bar > * {
  flex: 0 0 auto;
  min-inline-size: var(--scanlines-media-control-size, 44px);
  min-block-size: var(--scanlines-media-control-size, 44px);
}

[data-scanlines-media] media-control-bar > .player-time-separator {
  min-inline-size: 0;
  min-block-size: 0;
  align-self: center;
  line-height: 1;
  color: var(--scanlines-media-muted, #cbd5e1);
}

[data-scanlines-media] media-time-range {
  display: block;
  flex: 1 1 10rem;
  min-inline-size: 6rem;
  accent-color: var(--scanlines-media-accent, #67e8f9);
}

[data-scanlines-media] media-volume-range {
  display: block;
  flex: 0 1 7rem;
  accent-color: var(--scanlines-media-accent, #67e8f9);
}

[data-scanlines-media] media-playback-rate-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-scanlines-media] media-control-bar > *:focus-visible {
  outline: 3px solid var(--scanlines-media-focus, #fbbf24);
  outline-offset: -3px;
  box-shadow: var(--media-focus-box-shadow);
}

[data-scanlines-media] media-playback-rate-menu {
  color: var(--scanlines-media-text, #f8fafc);
  background: var(--scanlines-media-surface-raised, #1f2937);
  border: 1px solid var(--scanlines-media-border, #94a3b8);
  border-radius: var(--scanlines-media-radius, 0.5rem);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 35%);
}

[data-scanlines-media] media-playback-rate-menu::part(menu-item) {
  min-block-size: var(--scanlines-media-control-size, 44px);
  color: var(--scanlines-media-text, #f8fafc);
}

[data-scanlines-media] media-playback-rate-menu::part(menu-item):focus-visible {
  outline: 3px solid var(--scanlines-media-focus, #fbbf24);
  outline-offset: -3px;
}

@container (max-width: 40rem) {
  [data-scanlines-media] media-volume-range {
    display: none;
  }

  [data-scanlines-media] media-time-display {
    display: inline-flex;
  }

  [data-scanlines-media] media-duration-display {
    display: inline-flex;
  }

  [data-scanlines-media] media-time-range {
    display: block;
  }

  [data-scanlines-media] media-seek-backward-button {
    display: inline-flex;
  }

  [data-scanlines-media] media-seek-forward-button {
    display: inline-flex;
  }

  [data-scanlines-media] media-mute-button {
    display: inline-flex;
  }

  [data-scanlines-media] media-playback-rate-menu-button {
    display: inline-flex;
  }
}

@container (max-width: 36rem) {
  [data-scanlines-media] media-control-bar {
    flex-wrap: nowrap;
  }

  [data-scanlines-media]:not([audio]) {
    overflow: visible;
  }

  [data-scanlines-media] > video[slot="media"] {
    border-radius: inherit;
  }

  [data-scanlines-media]:not([audio]) media-control-bar {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1;
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }

  [data-scanlines-media] > media-playback-rate-menu[anchor="auto"] {
    --media-menu-max-height: min(26rem, calc(100dvh - 2rem));
    --media-menu-overflow: hidden auto;

    position: fixed !important;
    inset: auto 1rem 1rem auto !important;
    z-index: 100;
  }

  [data-scanlines-media] media-time-display,
  [data-scanlines-media] media-duration-display,
  [data-scanlines-media] media-control-bar > .player-time-separator,
  [data-scanlines-media] media-seek-backward-button,
  [data-scanlines-media] media-seek-forward-button,
  [data-scanlines-media] media-pip-button {
    display: none;
  }

  [data-scanlines-media] media-time-range {
    flex: 1 1 auto;
    min-inline-size: 2rem;
  }

  [data-scanlines-media] media-play-button,
  [data-scanlines-media] media-playback-rate-menu-button,
  [data-scanlines-media] media-mute-button {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-scanlines-media] {
    --media-button-icon-transition: none;
    --media-range-thumb-transition: none;
    --media-range-track-transition: none;
    --media-range-segment-transition: none;
    --media-control-transition-in: none;
    --media-control-transition-out: none;
    --media-menu-transition-in: none;
    --media-menu-transition-out: none;
    --media-menu-item-transition: none;
    --media-preview-transition-duration-in: 0s;
    --media-preview-transition-delay-in: 0s;
    --media-preview-transition-duration-out: 0s;
    --media-preview-transition-delay-out: 0s;

    animation: none !important;
    transition: none !important;
  }

  [data-scanlines-media] * {
    animation: none !important;
    transition: none !important;
  }

  [data-scanlines-media] media-playback-rate-menu::part(container),
  [data-scanlines-media] media-playback-rate-menu::part(menu-item),
  [data-scanlines-media] media-control-bar > *::part(tooltip),
  [data-scanlines-media] media-time-range::part(progress),
  [data-scanlines-media] media-time-range::part(thumb),
  [data-scanlines-media] media-volume-range::part(progress),
  [data-scanlines-media] media-volume-range::part(thumb) {
    animation: none !important;
    transition: none !important;
  }
}