.volume-slider.svelte-c0ird4 {
		-webkit-appearance: none;
		appearance: none;
		width: var(--size-20);
		accent-color: var(--color-accent);
		height: 4px;
		cursor: pointer;
		outline: none;
		border-radius: 15px;
		background-color: var(--neutral-400);
	}

	input[type="range"].svelte-c0ird4::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		height: 15px;
		width: 15px;
		background-color: var(--color-accent);
		border-radius: 50%;
		border: none;
		transition: 0.2s ease-in-out;
	}

	input[type="range"].svelte-c0ird4::-moz-range-thumb {
		height: 15px;
		width: 15px;
		background-color: var(--color-accent);
		border-radius: 50%;
		border: none;
		transition: 0.2s ease-in-out;
	}

	.settings-wrapper.svelte-72dh9g {
		display: flex;
		justify-self: self-end;
		align-items: center;
		grid-area: editing;
	}
	.text-button.svelte-72dh9g {
		border: 1px solid var(--neutral-400);
		border-radius: var(--radius-sm);
		font-weight: 300;
		font-size: var(--size-3);
		text-align: center;
		color: var(--neutral-400);
		height: var(--size-5);
		font-weight: bold;
		padding: 0 5px;
		margin-left: 5px;
	}

	.text-button.svelte-72dh9g:hover,
	.text-button.svelte-72dh9g:focus {
		color: var(--color-accent);
		border-color: var(--color-accent);
	}

	.controls.svelte-72dh9g {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: "controls playback editing";
		margin-top: 5px;
		align-items: center;
		position: relative;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.controls.svelte-72dh9g div:where(.svelte-72dh9g) {
		margin: var(--size-1) 0;
	}

	@media (max-width: 600px) {
		.controls.svelte-72dh9g {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto;
			grid-template-areas:
				"playback playback"
				"controls editing";
		}
	}

	@media (max-width: 319px) {
		.controls.svelte-72dh9g {
			overflow-x: scroll;
		}
	}

	.hidden.svelte-72dh9g {
		display: none;
	}

	.control-wrapper.svelte-72dh9g {
		display: flex;
		justify-self: self-start;
		align-items: center;
		justify-content: space-between;
		grid-area: controls;
	}

	.action.svelte-72dh9g {
		width: var(--size-5);
		color: var(--neutral-400);
		margin-left: var(--spacing-md);
	}
	.icon.svelte-72dh9g:hover,
	.icon.svelte-72dh9g:focus {
		color: var(--color-accent);
	}
	.play-pause-wrapper.svelte-72dh9g {
		display: flex;
		justify-self: center;
		grid-area: playback;
	}
	.cc-button.svelte-72dh9g {
		width: var(--size-8);
	}

	@media (max-width: 600px) {
		.play-pause-wrapper.svelte-72dh9g {
			margin: var(--spacing-md);
		}
	}
	.playback.svelte-72dh9g {
		border: 1px solid var(--neutral-400);
		border-radius: var(--radius-sm);
		width: 5.5ch;
		font-weight: 300;
		font-size: var(--size-3);
		text-align: center;
		color: var(--neutral-400);
		height: var(--size-5);
		font-weight: bold;
	}

	.playback.svelte-72dh9g:hover,
	.playback.svelte-72dh9g:focus {
		color: var(--color-accent);
		border-color: var(--color-accent);
	}

	.rewind.svelte-72dh9g,
	.skip.svelte-72dh9g {
		margin: 0 10px;
		color: var(--neutral-400);
	}

	.play-pause-button.svelte-72dh9g {
		width: var(--size-8);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--neutral-400);
		fill: var(--neutral-400);
	}

	.volume.svelte-72dh9g {
		position: relative;
		display: flex;
		justify-content: center;
		margin-right: var(--spacing-xl);
		width: var(--size-5);
	}

	.component-wrapper.svelte-1ffmt2w {
		padding: var(--size-3);
		width: 100%;
	}

	::part(wrapper) {
		margin-bottom: var(--size-2);
	}

	.timestamps.svelte-1ffmt2w {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: var(--size-1) 0;
	}

	#time.svelte-1ffmt2w {
		color: var(--neutral-400);
	}

	#duration.svelte-1ffmt2w {
		color: var(--neutral-400);
	}

	#trim-duration.svelte-1ffmt2w {
		color: var(--color-accent);
		margin-right: var(--spacing-sm);
	}
	.waveform-container.svelte-1ffmt2w {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--size-full);
	}

	#waveform.svelte-1ffmt2w {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.standard-player.svelte-1ffmt2w {
		width: 100%;
		padding: var(--size-2);
	}

	.subtitle-display.svelte-1ffmt2w {
		color: var(--text-secondary);
		font-size: var(--text-lg);
		text-align: center;
		max-width: 600px;
		line-height: 1.3;
		min-height: var(--size-4);
		font-family: var(--font-sans);
		font-weight: normal;
		margin: var(--size-2) auto;
		padding: var(--size-1) var(--size-2);
		border-radius: 2px;
		transition: opacity 0.2s ease-in-out;
	}

	.hidden.svelte-1ffmt2w,
	.subtitle-display.svelte-1ffmt2w:empty {
		display: none;
	}