#player *, #player *::before, #player *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#player {
	--bg:         #f2f2f2;
	--bg2:        #e8e8e8;
	--ink:        #2a2a2a;
	--ink-mid:    #777;
	--white:      #ffffff;
	--border:     rgba(0,0,0,0.09);
	--shadow:     rgba(0,0,0,0.10);
	--h:          88px;
	--cover-sz:   54px;
	--play-sz:    70px;
	--play-grad:  linear-gradient(145deg, #888 0%, #333 100%);
	--play-hover: linear-gradient(145deg, #999 0%, #444 100%);

	position: relative;
	width: 100%;
	height: var(--h);
	background: linear-gradient(90deg, var(--bg2) 0%, var(--bg) 50%, var(--bg2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
	overflow: hidden;
}


#player::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--ink-mid) 35%, var(--ink) 50%, var(--ink-mid) 65%, transparent);
	opacity: 0.28;
	z-index: 3;
}

#player::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--ink-mid), var(--ink), var(--ink-mid), transparent);
	background-size: 200% 100%;
	animation: ap09-bslide 5s linear infinite;
	opacity: 0.4;
	z-index: 3;
}

@keyframes ap09-bslide {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

#player .eq-banner {
	position: absolute;
	bottom: 2px; left: 0; right: 0;
	height: calc(var(--h) - 4px);
	display: flex;
	align-items: flex-end;
	gap: 1.5px;
	padding: 0 2px;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 1s ease;
}
#player.on .eq-banner { opacity: 1; }

#player .eq-banner span {
	flex: 1;
	border-radius: 1px 1px 0 0;
	height: 3px;
	animation: ap09-eqbg var(--dur, .8s) ease-in-out infinite alternate;
	animation-delay: var(--delay, 0s);
	animation-play-state: paused;
	background: linear-gradient(to top, var(--ink), var(--ink-mid));
	opacity: 0.07;
}
#player.on .eq-banner span { animation-play-state: running; }

@keyframes ap09-eqbg {
	0%   { height: 3px;  opacity: .04; }
	100% { height: 45%;  opacity: .10; }
}

#player .ripple {
	position: absolute;
	width: 0; height: 0;
	pointer-events: none;
	z-index: 2;
}
#player .ripple > div {
	position: absolute;
	border-radius: 50%;
	top: 0; left: 0;
	transform: translate(-50%,-50%) scale(1);
}
#player .ripple > div:nth-child(1)  { width:  84px; height:  84px; border:1px solid var(--ink);     opacity:.09; }
#player .ripple > div:nth-child(2)  { width: 110px; height: 110px; border:1px solid var(--ink);     opacity:.08; }
#player .ripple > div:nth-child(3)  { width: 142px; height: 142px; border:1px solid var(--ink);     opacity:.07; }
#player .ripple > div:nth-child(4)  { width: 178px; height: 178px; border:1px solid var(--ink);     opacity:.06; }
#player .ripple > div:nth-child(5)  { width: 222px; height: 222px; border:1px solid var(--ink-mid); opacity:.05; }
#player .ripple > div:nth-child(6)  { width: 280px; height: 280px; border:1px solid var(--ink-mid); opacity:.045; }
#player .ripple > div:nth-child(7)  { width: 360px; height: 360px; border:1px solid var(--ink-mid); opacity:.04; }
#player .ripple > div:nth-child(8)  { width: 470px; height: 470px; border:1px solid var(--ink-mid); opacity:.03; }
#player .ripple > div:nth-child(9)  { width: 640px; height: 640px; border:1px solid var(--ink-mid); opacity:.02; }
#player .ripple > div:nth-child(10) { width: 900px; height: 900px; border:1px solid var(--ink-mid); opacity:.01; }

#player.on .ripple > div:nth-child(1)  { animation: ap09-rpl 2.8s 0.00s ease-out infinite; }
#player.on .ripple > div:nth-child(2)  { animation: ap09-rpl 2.8s 0.28s ease-out infinite; }
#player.on .ripple > div:nth-child(3)  { animation: ap09-rpl 2.8s 0.56s ease-out infinite; }
#player.on .ripple > div:nth-child(4)  { animation: ap09-rpl 2.8s 0.84s ease-out infinite; }
#player.on .ripple > div:nth-child(5)  { animation: ap09-rpl 3.4s 1.10s ease-out infinite; }
#player.on .ripple > div:nth-child(6)  { animation: ap09-rpl 3.4s 1.40s ease-out infinite; }
#player.on .ripple > div:nth-child(7)  { animation: ap09-rpl 4.0s 1.70s ease-out infinite; }
#player.on .ripple > div:nth-child(8)  { animation: ap09-rpl 4.0s 2.00s ease-out infinite; }
#player.on .ripple > div:nth-child(9)  { animation: ap09-rpl 4.6s 2.30s ease-out infinite; }
#player.on .ripple > div:nth-child(10) { animation: ap09-rpl 4.6s 2.60s ease-out infinite; }

@keyframes ap09-rpl {
	0%   { transform: translate(-50%,-50%) scale(.8);  opacity:.55; }
	60%  { opacity:.06; }
	100% { transform: translate(-50%,-50%) scale(2.6); opacity:0;   }
}

#player .belt {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: 1200px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	column-gap: 0;
	align-items: center;
}

#player .zone-left {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-width: 0;
	overflow: visible;
}

#player .badge {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	background: var(--white);
	border-radius: 999px;
	padding: 10px calc(var(--cover-sz) * .55 + 8px) 8px 15px;
	width: fit-content;
	min-width: 120px;
	max-width: 420px;
	box-shadow: 0 2px 8px var(--shadow), 0 0 0 1px var(--border);
	overflow: visible;
	position: relative;
	transition: width 0.3s ease;
}

#player .now-label {
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--ink-mid);
	white-space: nowrap;
	text-align: right;
}

#player .title-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	display: flex;
}

#player .title-wrap::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 20px;
	background: linear-gradient(to right, var(--white) 30%, transparent);
	z-index: 1;
	pointer-events: none;
}

#player .title-text {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
	letter-spacing: .15px;
	margin-left: 15px;
}

#player .title-text.sc {
	margin-left: 0;
	animation: ap09-stxt linear infinite;
}

@keyframes ap09-stxt {
	0%   { transform: translateX(0); }
	100% { transform: translateX(calc(-1 * var(--scroll-dist))); }
}

#player .zone-center {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
}

#player .cover {
	width: var(--cover-sz);
	height: var(--cover-sz);
	border-radius: 50%;
	background: var(--bg2) center/cover no-repeat;
	border: 2.5px solid var(--ink);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-mid);
	font-size: 17px;
	overflow: hidden;
	background-clip: padding-box;
	flex-shrink: 0;
	margin-left: calc(var(--cover-sz) * -0.60);
	margin-right: 6px;
	box-shadow: -4px 0 12px rgba(0,0,0,0.14);
	transition: box-shadow .4s;
	z-index: 1;
}

#player .cover::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.35), transparent 55%);
	pointer-events: none;
}

#player.on .cover {
	animation: ap09-cover-pulse 2.5s cubic-bezier(0.45,0,0.55,1) infinite;
}

@keyframes ap09-cover-pulse {
	0%   { box-shadow: -4px 0 12px rgba(0,0,0,.14); }
	45%  { box-shadow: -4px 0 12px rgba(0,0,0,.14), 0 0 18px rgba(0,0,0,.28), 0 0 36px rgba(0,0,0,.08); }
	100% { box-shadow: -4px 0 12px rgba(0,0,0,.14); }
}

#player .play-btn {
	width: var(--play-sz);
	height: var(--play-sz);
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,0.7);
	background: linear-gradient(145deg, #ffffff 0%, #e8e8e8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink);
	font-size: 20px;
	line-height: 1;
	transition: background .25s, color .25s, transform .2s, box-shadow .3s, border-color .25s;
	flex-shrink: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	z-index: 10;
	margin-left: -10px;
	box-shadow: -4px 0 12px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.10);
}

#player .play-btn:hover {
	transform: scale(1.06);
	background-clip: padding-box;
}

#player.on .play-btn {
	background-clip: padding-box;
	animation: ap09-btn-breathe 2.5s cubic-bezier(0.45,0,0.55,1) infinite;
}

@keyframes ap09-btn-breathe {
	0%   { box-shadow: -4px 0 12px rgba(0,0,0,.12), 0 0  4px rgba(0,0,0,.12); transform: scale(1);    }
	45%  { box-shadow: -4px 0 12px rgba(0,0,0,.12), 0 0 22px rgba(0,0,0,.32), 0 0 50px rgba(0,0,0,.08); transform: scale(1.08); }
	100% { box-shadow: -4px 0 12px rgba(0,0,0,.12), 0 0  4px rgba(0,0,0,.12); transform: scale(1);    }
}

#player .play-btn .fa-play  { transform: translateX(2px); }
#player .play-btn .fa-pause { display: none; }
#player.on .play-btn .fa-play  { display: none; }
#player.on .play-btn .fa-pause { display: block; }

#player .zone-right {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 18px;
}

#player .vol-icon {
	color: var(--ink-mid);
	font-size: 13px;
	width: 14px;
	text-align: center;
	flex-shrink: 0;
}

#player .vol-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 90px;
	height: 3px;
	border-radius: 2px;
	outline: none;
	cursor: pointer;
	background: rgba(0,0,0,0.12);
	background-image: linear-gradient(#555, #555);
	background-repeat: no-repeat;
	background-size: 80% 100%;
}

#player .vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 1px 4px rgba(0,0,0,.22);
	cursor: pointer;
	transition: transform .15s;
}
#player .vol-slider::-webkit-slider-thumb:hover { transform: scale(1.4); }

#player .vol-slider::-moz-range-thumb {
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--ink);
	border: none;
	cursor: pointer;
}

@media (max-width: 860px) {
	#player .badge    { max-width: 280px; }
	#player .vol-slider { width: 72px; }
}

@media (max-width: 640px) {
	#player { --cover-sz: 48px; --play-sz: 62px; }
	#player .zone-right { display: none; }
	#player .belt { grid-template-columns: 1fr auto; }
	#player .badge { max-width: none; }
	#player .now-label { display: none; }
}

@media (max-width: 420px) {
	#player { --cover-sz: 42px; --play-sz: 56px; }
	#player .belt { padding: 0 12px; }
	#player .badge { padding: 9px calc(var(--cover-sz) * .55 + 8px) 9px 16px; }
	#player .title-text { font-size: 12.5px; }
	#player .play-btn   { font-size: 17px; }
	#player .cover      { font-size: 15px; }
}

@media (max-width: 340px) {
	#player { --cover-sz: 36px; --play-sz: 50px; }
	#player .badge { padding-left: 12px; }
	#player .title-text { font-size: 12px; }
}

@media (max-width: 280px) {
	#player .cover    { display: none; }
	#player .play-btn { margin-left: 0; }
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');