@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
												);
											}