:host {
																		--_focus-box-shadow: var(
																			--media-focus-box-shadow,
																			inset 0 0 0 2px rgb(27 127 204 / 0.9)
																		);
																		--_media-range-padding: var(
																			--media-range-padding,
																			var(--media-control-padding, 10px)
																		);
																		box-shadow: var(
																			--_focus-visible-box-shadow,
																			none
																		);
																		background: var(
																			--media-control-background,
																			var(
																				--media-secondary-color,
																				rgb(20 20 30 / 0.7)
																			)
																		);
																		height: calc(
																			var(--media-control-height, 24px) + 2 *
																				var(--_media-range-padding)
																		);
																		display: var(
																			--media-control-display,
																			var(
																				--media-volume-range-display,
																				inline-flex
																			)
																		);
																		align-items: center;
																		vertical-align: middle;
																		box-sizing: border-box;
																		position: relative;
																		width: 100px;
																		transition: background 0.15s linear;
																		cursor: var(--media-cursor, pointer);
																		pointer-events: auto;
																		touch-action: none;
																	}
																	input[type='range']:focus {
																		outline: 0px;
																	}
																	input[type='range']:focus::-webkit-slider-runnable-track {
																		outline: 0px;
																	}
																	:host(:hover) {
																		background: var(
																			--media-control-hover-background,
																			rgb(50 50 70 / 0.7)
																		);
																	}
																	#leftgap {
																		padding-left: var(
																			--media-range-padding-left,
																			var(--_media-range-padding)
																		);
																	}
																	#rightgap {
																		padding-right: var(
																			--media-range-padding-right,
																			var(--_media-range-padding)
																		);
																	}
																	#startpoint,
																	#endpoint {
																		position: absolute;
																	}
																	#endpoint {
																		right: 0px;
																	}
																	#container {
																		width: var(--media-range-track-width, 100%);
																		transform: translate(
																			var(--media-range-track-translate-x, 0px),
																			var(--media-range-track-translate-y, 0px)
																		);
																		position: relative;
																		height: 100%;
																		display: flex;
																		align-items: center;
																		min-width: 40px;
																	}
																	#range {
																		display: var(
																			--media-time-range-hover-display,
																			block
																		);
																		bottom: var(
																			--media-time-range-hover-bottom,
																			-7px
																		);
																		height: var(
																			--media-time-range-hover-height,
																			max(100% + 7px, 25px)
																		);
																		width: 100%;
																		position: absolute;
																		cursor: var(--media-cursor, pointer);
																		appearance: none;
																		-webkit-tap-highlight-color: transparent;
																		background: transparent;
																		margin: 0px;
																		z-index: 1;
																	}
																	@media (hover: hover) {
																		#range {
																			bottom: var(
																				--media-time-range-hover-bottom,
																				-5px
																			);
																			height: var(
																				--media-time-range-hover-height,
																				max(100% + 5px, 20px)
																			);
																		}
																	}
																	#range::-webkit-slider-thumb {
																		appearance: none;
																		background: transparent;
																		width: 0.1px;
																		height: 0.1px;
																	}
																	#appearance {
																		height: var(
																			--media-range-track-height,
																			4px
																		);
																		display: flex;
																		flex-direction: column;
																		justify-content: center;
																		width: 100%;
																		position: absolute;
																		will-change: transform;
																	}
																	#track {
																		background: var(
																			--media-range-track-background,
																			rgb(255 255 255 / 0.2)
																		);
																		border-radius: var(
																			--media-range-track-border-radius,
																			1px
																		);
																		border: var(
																			--media-range-track-border,
																			none
																		);
																		outline: var(--media-range-track-outline);
																		outline-offset: var(
																			--media-range-track-outline-offset
																		);
																		backdrop-filter: var(
																			--media-range-track-backdrop-filter
																		);
																		box-shadow: var(
																			--media-range-track-box-shadow,
																			none
																		);
																		position: absolute;
																		width: 100%;
																		height: 100%;
																		overflow: hidden;
																	}
																	#progress,
																	#pointer {
																		position: absolute;
																		height: 100%;
																		will-change: width;
																	}
																	#progress {
																		background: var(
																			--media-range-bar-color,
																			var(
																				--media-primary-color,
																				rgb(238 238 238)
																			)
																		);
																		transition: var(
																			--media-range-track-transition
																		);
																		width: 0%;
																	}
																	#pointer {
																		background: var(
																			--media-range-track-pointer-background
																		);
																		border-right: var(
																			--media-range-track-pointer-border-right
																		);
																		transition:
																			visibility 0.25s,
																			opacity 0.25s;
																		visibility: hidden;
																		opacity: 0;
																	}
																	@media (hover: hover) {
																		:host(:hover) #pointer {
																			transition:
																				visibility 0.5s,
																				opacity 0.5s;
																			visibility: visible;
																			opacity: 1;
																		}
																	}
																	#thumb,
																	::slotted([slot='thumb']) {
																		width: var(--media-range-thumb-width, 10px);
																		height: var(
																			--media-range-thumb-height,
																			10px
																		);
																		transition: var(
																			--media-range-thumb-transition
																		);
																		transform: var(
																			--media-range-thumb-transform,
																			none
																		);
																		opacity: var(
																			--media-range-thumb-opacity,
																			1
																		);
																		translate: -50%;
																		position: absolute;
																		left: 0%;
																		cursor: var(--media-cursor, pointer);
																	}
																	#thumb {
																		border-radius: var(
																			--media-range-thumb-border-radius,
																			10px
																		);
																		background: var(
																			--media-range-thumb-background,
																			var(
																				--media-primary-color,
																				rgb(238 238 238)
																			)
																		);
																		box-shadow: var(
																			--media-range-thumb-box-shadow,
																			1px 1px 1px transparent
																		);
																		border: var(
																			--media-range-thumb-border,
																			none
																		);
																	}
																	:host([disabled]) #thumb {
																		background-color: rgb(119, 119, 119);
																	}
																	.segments #appearance {
																		height: var(
																			--media-range-segment-hover-height,
																			7px
																		);
																	}
																	#track {
																		clip-path: url('#segments-clipping');
																	}
																	#segments {
																		--segments-gap: var(
																			--media-range-segments-gap,
																			2px
																		);
																		position: absolute;
																		width: 100%;
																		height: 100%;
																	}
																	#segments-clipping {
																		transform: translateX(
																			calc(var(--segments-gap) / 2)
																		);
																	}
																	#segments-clipping:empty {
																		display: none;
																	}
																	#segments-clipping rect {
																		height: var(
																			--media-range-track-height,
																			4px
																		);
																		y: calc(
																			(
																					var(
																							--media-range-segment-hover-height,
																							7px
																						) -
																						var(--media-range-track-height, 4px)
																				) /
																				2
																		);
																		transition: var(
																			--media-range-segment-transition,
																			transform 0.1s ease-in-out
																		);
																		transform: var(
																			--media-range-segment-transform,
																			scaleY(1)
																		);
																		transform-origin: center center;
																	}
																	#segments-clipping rect:nth-child(0) {
																	}