.audio-docent {
	box-sizing: border-box;
	margin: 0 2% 34px;
	padding: 22px 24px;
	border: 1px solid rgba(237, 105, 255, .3);
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(35, 24, 50, .94), rgba(12, 12, 18, .96));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 38px rgba(0, 0, 0, .22);
	color: #fff;
}

.audio-docent * { box-sizing: border-box; }
.audio-docent button { font-family: inherit; }

.audio-docent__top,
.audio-docent__label,
.audio-docent__controls,
.audio-docent__track-title,
.audio-docent__time {
	display: flex;
	align-items: center;
}

.audio-docent__top { justify-content: space-between; gap: 20px; }
.audio-docent__label { gap: 12px; min-width: 0; }
.audio-docent__label strong { display: block; font-size: 18px; line-height: 1.35; }
.audio-docent__label small { display: block; margin-top: 4px; color: #aaa5b2; font-size: 13px; }

.audio-docent__headphone {
	display: grid;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #fb45dd, #f4a03a);
}
.audio-docent__headphone svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.audio-docent__audience { display: flex; flex: 0 0 auto; padding: 3px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 12px; background: rgba(0, 0, 0, .3); }
.audio-docent__audience button { min-height: 38px; padding: 0 15px; border: 0; border-radius: 9px; background: transparent; color: #aaa5b2; font-size: 14px; font-weight: 600; cursor: pointer; }
.audio-docent__audience button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }

.audio-docent__controls { gap: 16px; margin-top: 20px; }
.audio-docent__play { position: relative; display: grid; flex: 0 0 52px; width: 52px; height: 52px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(135deg, #f72ad7, #f7a33d); box-shadow: 0 8px 20px rgba(247, 67, 196, .25); cursor: pointer; }
.audio-docent__play-icon { width: 0; height: 0; margin-left: 4px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #fff; }
.audio-docent.is-playing .audio-docent__play-icon { width: 12px; height: 15px; margin-left: 0; border: 0; border-right: 4px solid #fff; border-left: 4px solid #fff; }

.audio-docent__timeline { flex: 1 1 auto; min-width: 0; }
.audio-docent__track-title { justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 14px; }
.audio-docent__track-title span { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.audio-docent__track-title em { flex: 0 0 auto; color: #d8a6dc; font-size: 12px; font-style: normal; }
.audio-docent__timeline input[type="range"] { width: 100%; height: 4px; margin: 0; border-radius: 999px; outline: none; background: linear-gradient(to right, #f55bdd 0%, #f7a33d 0%, rgba(255, 255, 255, .17) 0%); cursor: pointer; appearance: none; -webkit-appearance: none; }
.audio-docent__timeline input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #f66bdd; box-shadow: 0 2px 7px rgba(0, 0, 0, .28); appearance: none; -webkit-appearance: none; }
.audio-docent__timeline input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #f66bdd; }
.audio-docent__time { justify-content: space-between; margin-top: 7px; color: #8f8a98; font-size: 11px; font-variant-numeric: tabular-nums; }

.audio-docent button:focus-visible,
.audio-docent input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media screen and (max-width: 900px) {
	.audio-docent { margin: 0 4% 26px; padding: 18px; border-radius: 15px; }
	.audio-docent__top { align-items: stretch; flex-direction: column; gap: 14px; }
	.audio-docent__audience { width: 100%; }
	.audio-docent__audience button { flex: 1 1 50%; min-height: 44px; }
	.audio-docent__label strong { font-size: 16px; }
	.audio-docent__label small { font-size: 12px; }
	.audio-docent__controls { gap: 13px; margin-top: 17px; }
	.audio-docent__play { flex-basis: 48px; width: 48px; height: 48px; }
}