@keyframes pre-play-hide {
														0% {
															transform: scale(1);
															opacity: 1;
														}

														30% {
															transform: scale(0.7);
														}

														100% {
															transform: scale(1.5);
															opacity: 0;
														}
													}

													:host {
														--_primary-color: var(--media-primary-color, #fff);
														--_secondary-color: var(
															--media-secondary-color,
															transparent
														);
														--_accent-color: var(--media-accent-color, #fa50b5);
														--_text-color: var(--media-text-color, #000);

														--media-icon-color: var(--_primary-color);
														--media-control-background: var(--_secondary-color);
														--media-control-hover-background: var(
															--_accent-color
														);
														--media-time-buffered-color: rgba(
															255,
															255,
															255,
															0.4
														);
														--media-preview-time-text-shadow: none;
														--media-control-height: 14px;
														--media-control-padding: 6px;
														--media-tooltip-container-margin: 6px;
														--media-tooltip-distance: 18px;

														color: var(--_primary-color);
														display: inline-block;
														width: 100%;
														height: 100%;
													}

													:host([audio]) {
														--_secondary-color: var(
															--media-secondary-color,
															black
														);
														--media-preview-time-text-shadow: none;
													}

													:host([audio]) ::slotted([slot='media']) {
														height: 0px;
													}

													:host([audio]) media-loading-indicator {
														display: none;
													}

													:host([audio]) media-controller {
														background: transparent;
													}

													:host([audio])
														media-controller::part(vertical-layer) {
														background: transparent;
													}

													:host([audio]) media-control-bar {
														width: 100%;
														background-color: var(--media-control-background);
													}

													/*
     * 0.433s is the transition duration for VTT Regions.
     * Borrowed here, so the captions don't move too fast.
     */
													media-controller {
														--media-webkit-text-track-transform: translateY(0)
															scale(0.98);
														--media-webkit-text-track-transition: transform
															0.433s ease-out 0.3s;
													}
													media-controller:is(
														[mediapaused],
														:not([userinactive])
													) {
														--media-webkit-text-track-transform: translateY(
																-50px
															)
															scale(0.98);
														--media-webkit-text-track-transition: transform
															0.15s ease;
													}

													/*
     * CSS specific to iOS devices.
     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
     */
													@supports (-webkit-touch-callout: none) {
														/* Disable subtitle adjusting for iOS Safari */
														media-controller[mediaisfullscreen] {
															--media-webkit-text-track-transform: unset;
															--media-webkit-text-track-transition: unset;
														}
													}

													media-time-range {
														--media-box-padding-left: 6px;
														--media-box-padding-right: 6px;
														--media-range-bar-color: var(--_accent-color);
														--media-time-range-buffered-color: var(
															--_primary-color
														);
														--media-range-track-color: transparent;
														--media-range-track-background: rgba(
															255,
															255,
															255,
															0.4
														);
														--media-range-thumb-background: radial-gradient(
															circle,
															#000 0%,
															#000 25%,
															var(--_accent-color) 25%,
															var(--_accent-color)
														);
														--media-range-thumb-width: 12px;
														--media-range-thumb-height: 12px;
														--media-range-thumb-transform: scale(0);
														--media-range-thumb-transition: transform 0.3s;
														--media-range-thumb-opacity: 1;
														--media-preview-background: var(--_primary-color);
														--media-box-arrow-background: var(--_primary-color);
														--media-preview-thumbnail-border: 5px solid
															var(--_primary-color);
														--media-preview-border-radius: 5px;
														--media-text-color: var(--_text-color);
														--media-control-hover-background: transparent;
														--media-preview-chapter-text-shadow: none;
														color: var(--_accent-color);
														padding: 0 6px;
													}

													:host([audio]) media-time-range {
														--media-preview-time-padding: 1.5px 6px;
														--media-preview-box-margin: 0 0 -5px;
													}

													media-time-range:hover {
														--media-range-thumb-transform: scale(1);
													}

													media-preview-thumbnail {
														border-bottom-width: 0;
													}

													[part~='menu'] {
														border-radius: 2px;
														border: 1px solid rgba(0, 0, 0, 0.1);
														bottom: 50px;
														padding: 2.5px 10px;
													}

													[part~='menu']::part(indicator) {
														fill: var(--_accent-color);
													}

													[part~='menu']::part(menu-item) {
														box-sizing: border-box;
														display: flex;
														align-items: center;
														padding: 6px 10px;
														min-height: 34px;
													}

													[part~='menu']::part(checked) {
														font-weight: 700;
													}

													media-captions-menu,
													media-rendition-menu,
													media-audio-track-menu,
													media-playback-rate-menu {
														position: absolute; /* ensure they don't take up space in DOM on load */
														--media-menu-background: var(--_primary-color);
														--media-menu-item-checked-background: transparent;
														--media-text-color: var(--_text-color);
														--media-menu-item-hover-background: transparent;
														--media-menu-item-hover-outline: var(
																--_accent-color
															)
															solid 1px;
													}

													media-rendition-menu {
														min-width: 140px;
													}

													/* The icon is a circle so make it 16px high instead of 14px for more balance. */
													media-audio-track-menu-button {
														--media-control-padding: 5px;
														--media-control-height: 16px;
													}

													media-playback-rate-menu-button {
														--media-control-padding: 6px 3px;
														min-width: 4.4ch;
													}

													media-playback-rate-menu {
														--media-menu-flex-direction: row;
														--media-menu-item-checked-background: var(
															--_accent-color
														);
														--media-menu-item-checked-indicator-display: none;
														margin-right: 6px;
														padding: 0;
														--media-menu-gap: 0.25em;
													}

													media-playback-rate-menu[part~='menu']::part(
															menu-item
														) {
														padding: 6px 6px 6px 8px;
													}

													media-playback-rate-menu[part~='menu']::part(
															checked
														) {
														color: #fff;
													}

													:host(:not([audio])) media-time-range {
														/* Adding px is required here for calc() */
														--media-range-padding: 0px;
														background: transparent;
														z-index: 10;
														height: 10px;
														bottom: -3px;
														width: 100%;
													}

													media-control-bar
														:is([role='button'], [role='switch'], button) {
														line-height: 0;
													}

													media-control-bar
														:is(
															[part*='button'],
															[part*='range'],
															[part*='display']
														) {
														border-radius: 3px;
													}

													.spacer {
														flex-grow: 1;
														background-color: var(
															--media-control-background,
															rgba(20, 20, 30, 0.7)
														);
													}

													media-control-bar[slot~='top-chrome'] {
														min-height: 42px;
														pointer-events: none;
													}

													media-control-bar {
														--gradient-steps:
															hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%,
															hsl(0 0% 0% / 0.049) 15.5%,
															hsl(0 0% 0% / 0.104) 22.5%,
															hsl(0 0% 0% / 0.175) 29%,
															hsl(0 0% 0% / 0.259) 35.3%,
															hsl(0 0% 0% / 0.352) 41.2%,
															hsl(0 0% 0% / 0.45) 47.1%,
															hsl(0 0% 0% / 0.55) 52.9%,
															hsl(0 0% 0% / 0.648) 58.8%,
															hsl(0 0% 0% / 0.741) 64.7%,
															hsl(0 0% 0% / 0.825) 71%,
															hsl(0 0% 0% / 0.896) 77.5%,
															hsl(0 0% 0% / 0.951) 84.5%,
															hsl(0 0% 0% / 0.987) 91.9%, hsl(0 0% 0%) 100%;
													}

													:host([title])
														media-control-bar[slot='top-chrome']::before,
													:host([videotitle])
														media-control-bar[slot='top-chrome']::before {
														content: '';
														position: absolute;
														width: 100%;
														padding-bottom: min(100px, 25%);
														background: linear-gradient(
															to top,
															var(--gradient-steps)
														);
														opacity: 0.8;
														pointer-events: none;
													}

													:host(:not([audio]))
														media-control-bar[part~='bottom']::before {
														content: '';
														position: absolute;
														width: 100%;
														bottom: 0;
														left: 0;
														padding-bottom: min(100px, 25%);
														background: linear-gradient(
															to bottom,
															var(--gradient-steps)
														);
														opacity: 0.8;
														z-index: 1;
														pointer-events: none;
													}

													media-control-bar[part~='bottom'] > * {
														z-index: 20;
													}

													media-control-bar[part~='bottom'] {
														padding: 6px 6px;
													}

													media-control-bar[slot~='top-chrome'] > * {
														--media-control-background: transparent;
														--media-control-hover-background: transparent;
														position: relative;
													}

													media-controller::part(vertical-layer) {
														transition: background-color 1s;
													}

													media-controller:is(
															[mediapaused],
															:not([userinactive])
														)::part(vertical-layer) {
														background-color: var(
															--controls-backdrop-color,
															var(--controls, transparent)
														);
														transition: background-color 0.25s;
													}

													.center-controls {
														--media-button-icon-width: 100%;
														--media-button-icon-height: auto;
														--media-tooltip-display: none;
														pointer-events: none;
														width: 100%;
														display: flex;
														flex-flow: row;
														align-items: center;
														justify-content: center;
														paint-order: stroke;
														stroke: rgba(102, 102, 102, 1);
														stroke-width: 0.3px;
														text-shadow:
															0 0 2px rgb(0 0 0 / 0.25),
															0 0 6px rgb(0 0 0 / 0.25);
													}

													.center-controls media-play-button {
														--media-control-background: transparent;
														--media-control-hover-background: transparent;
														--media-control-padding: 0;
														width: 40px;
														filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25))
															drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
													}

													[breakpointsm] .center-controls media-play-button {
														width: 90px;
														height: 90px;
														border-radius: 50%;
														transition: background 0.4s;
														padding: 24px;
														--media-control-background: #000;
														--media-control-hover-background: var(
															--_accent-color
														);
													}

													.center-controls media-seek-backward-button,
													.center-controls media-seek-forward-button {
														--media-control-background: transparent;
														--media-control-hover-background: transparent;
														padding: 0;
														margin: 0 20px;
														width: max(33px, min(8%, 40px));
														text-shadow:
															0 0 2px rgb(0 0 0 / 0.25),
															0 0 6px rgb(0 0 0 / 0.25);
													}

													[breakpointsm]:not([audio])
														.center-controls.pre-playback {
														display: grid;
														align-items: initial;
														justify-content: initial;
														height: 100%;
														overflow: hidden;
													}

													[breakpointsm]:not([audio])
														.center-controls.pre-playback
														media-play-button {
														place-self: var(--_pre-playback-place, center);
														grid-area: 1 / 1;
														margin: 16px;
													}

													/* Show and hide controls or pre-playback state */

													[breakpointsm]:is(
															[mediahasplayed],
															:not([mediapaused])
														):not([audio])
														.center-controls.pre-playback
														media-play-button {
														/* Using `forwards` would lead to a laggy UI after the animation got in the end state */
														animation: 0.3s linear pre-play-hide;
														opacity: 0;
														pointer-events: none;
													}

													.autoplay-unmute {
														--media-control-hover-background: transparent;
														width: 100%;
														display: flex;
														align-items: center;
														justify-content: center;
														filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25))
															drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
													}

													.autoplay-unmute-btn {
														--media-control-height: 16px;
														border-radius: 8px;
														background: #000;
														color: var(--_primary-color);
														display: flex;
														align-items: center;
														padding: 8px 16px;
														font-size: 18px;
														font-weight: 500;
														cursor: pointer;
													}

													.autoplay-unmute-btn:hover {
														background: var(--_accent-color);
													}

													[breakpointsm] .autoplay-unmute-btn {
														--media-control-height: 30px;
														padding: 14px 24px;
														font-size: 26px;
													}

													.autoplay-unmute-btn svg {
														margin: 0 6px 0 0;
													}

													[breakpointsm] .autoplay-unmute-btn svg {
														margin: 0 10px 0 0;
													}

													media-controller:not([audio]):not([mediahasplayed])
														*:is(media-control-bar, media-time-range) {
														display: none;
													}

													media-error-dialog:not([mediaerrorcode]) {
														opacity: 0;
													}

													media-loading-indicator {
														--media-loading-icon-width: 100%;
														--media-button-icon-height: auto;
														display: var(
															--media-control-display,
															var(--media-loading-indicator-display, flex)
														);
														pointer-events: none;
														position: absolute;
														width: min(15%, 150px);
														flex-flow: row;
														align-items: center;
														justify-content: center;
													}

													/* Intentionally don't target the div for transition but the children
     of the div. Prevents messing with media-chrome's autohide feature. */
													media-loading-indicator + div * {
														transition: opacity 0.15s;
														opacity: 1;
													}

													media-loading-indicator[medialoading]:not(
															[mediapaused]
														)
														~ div
														> * {
														opacity: 0;
														transition-delay: 400ms;
													}

													media-volume-range {
														width: min(100%, 100px);
														--media-range-padding-left: 10px;
														--media-range-padding-right: 10px;
														--media-range-thumb-width: 12px;
														--media-range-thumb-height: 12px;
														--media-range-thumb-background: radial-gradient(
															circle,
															#000 0%,
															#000 25%,
															var(--_primary-color) 25%,
															var(--_primary-color)
														);
														--media-control-hover-background: none;
													}

													media-time-display {
														white-space: nowrap;
													}

													/* Generic style for explicitly disabled controls */
													media-control-bar[part~='bottom'] [disabled],
													media-control-bar[part~='bottom']
														[aria-disabled='true'] {
														opacity: 60%;
														cursor: not-allowed;
													}

													media-text-display {
														--media-font-size: 16px;
														--media-control-padding: 14px;
														font-weight: 500;
													}

													media-play-button.animated *:is(g, path) {
														transition: all 0.3s;
													}

													media-play-button.animated[mediapaused]
														.pause-icon-pt1 {
														opacity: 0;
													}

													media-play-button.animated[mediapaused]
														.pause-icon-pt2 {
														transform-origin: center center;
														transform: scaleY(0);
													}

													media-play-button.animated[mediapaused] .play-icon {
														clip-path: inset(0 0 0 0);
													}

													media-play-button.animated:not([mediapaused])
														.play-icon {
														clip-path: inset(0 0 0 100%);
													}

													media-seek-forward-button,
													media-seek-backward-button {
														--media-font-weight: 400;
													}

													.mute-icon {
														display: inline-block;
													}

													.mute-icon :is(path, g) {
														transition: opacity 0.5s;
													}

													.muted {
														opacity: 0;
													}

													media-mute-button[mediavolumelevel='low']
														:is(.volume-medium, .volume-high),
													media-mute-button[mediavolumelevel='medium']
														:is(.volume-high) {
														opacity: 0;
													}

													media-mute-button[mediavolumelevel='off'] .unmuted {
														opacity: 0;
													}

													media-mute-button[mediavolumelevel='off'] .muted {
														opacity: 1;
													}

													/**
     * Our defaults for these buttons are to hide them at small sizes
     * users can override this with CSS
     */
													media-controller:not([breakpointsm]):not([audio]) {
														--bottom-play-button: none;
														--bottom-seek-backward-button: none;
														--bottom-seek-forward-button: none;
														--bottom-time-display: none;
														--bottom-playback-rate-menu-button: none;
														--bottom-pip-button: none;
													}

													[part='mux-badge'] {
														position: absolute;
														bottom: 10px;
														right: 10px;
														z-index: 2;
														opacity: 0.6;
														transition:
															opacity 0.2s ease-in-out,
															bottom 0.2s ease-in-out;
													}

													[part='mux-badge']:hover {
														opacity: 1;
													}

													[part='mux-badge'] a {
														font-size: 14px;
														font-family: var(--_font-family);
														color: var(--_primary-color);
														text-decoration: none;
														display: flex;
														align-items: center;
														gap: 5px;
													}

													[part='mux-badge'] .mux-badge-text {
														transition: opacity 0.5s ease-in-out;
														opacity: 0;
													}

													[part='mux-badge'] .mux-badge-logo {
														width: 40px;
														height: auto;
														display: inline-block;
													}

													[part='mux-badge'] .mux-badge-logo svg {
														width: 100%;
														height: 100%;
														fill: white;
													}

													media-controller:not([userinactive]):not(
															[mediahasplayed]
														)
														[part='mux-badge'],
													media-controller:not([userinactive])
														[part='mux-badge'],
													media-controller[mediahasplayed][mediapaused]
														[part='mux-badge'] {
														transition: bottom 0.1s ease-in-out;
													}

													media-controller[userinactive]:not([mediapaused])
														[part='mux-badge'] {
														transition: bottom 0.2s ease-in-out 0.62s;
													}

													media-controller:not([userinactive])
														[part='mux-badge']
														.mux-badge-text,
													media-controller[mediahasplayed][mediapaused]
														[part='mux-badge']
														.mux-badge-text {
														opacity: 1;
													}

													media-controller[userinactive]:not([mediapaused])
														[part='mux-badge']
														.mux-badge-text {
														opacity: 0;
													}

													media-controller[userinactive]:not([mediapaused])
														[part='mux-badge'] {
														bottom: 10px;
													}

													media-controller:not([userinactive]):not(
															[mediahasplayed]
														)
														[part='mux-badge'] {
														bottom: 10px;
													}

													media-controller:not([userinactive])[mediahasplayed]
														[part='mux-badge'],
													media-controller[mediahasplayed][mediapaused]
														[part='mux-badge'] {
														bottom: calc(
															28px + var(--media-control-height, 0px) +
																var(--media-control-padding, 0px) * 2
														);
													}