.pm-embed {

	& {display: grid; grid-template-columns: max-content 1fr; gap: 10px; padding: 10px; align-items: center; position: relative; background: #000; overflow: hidden; border-radius: 10px; color: #fff; font-family: sans-serif; max-width: 600px; margin: 5px 0;}
	:is(img, div) {position: relative; z-index: 2;}

	.pm-bg {background-position: center; background-size: cover; filter: blur(100px); position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; z-index: 1; opacity: .8;}
	img {width: 120px; height: 120px; float: left; border-radius: 6px;}

	.pm-info {display: flex; flex-direction: column; gap: 5px; padding: 10px;}
	.pm-info b {font-weight: 700;}

}

.pm-player {

	& {display: grid; grid-template-columns: min-content 1fr; align-items: center; gap: 10px; padding-top: 5px;}
	button {background: #fff2; border-radius: 6px; border: 0; color: #fff; display: flex; padding: 5px;}
	button:hover {background: #fff3; cursor: pointer;}
	button svg {width: 20px; height: 20px;}

}

.pm-range {

	& {background: #fff2; width: 100%; height: 4px; border-radius: 4px; position: relative; margin: 10px 4px;}
	div {background: #fff; height: 100%; border-radius: 4px; position: relative;}
	div::after {content: ""; background: #fff; width: 16px; height: 16px; border-radius: 50%; position: absolute; top: -6px; right: -8px; opacity: 0;}
	&:hover div::after {opacity: 1;}
	input {position: absolute; top: -10px; left: -14px; height: 24px; right: -11px; z-index: 10; opacity: 0; cursor: pointer;}

}