/* Global compact player styles must survive Swup page transitions. */
.music-mini {
	--mini-accent: #f078a5;
	--mini-accent-soft: rgb(240 120 165 / 14%);
	--mini-line: rgb(255 255 255 / 10%);
	--mini-surface: rgb(16 18 23 / 94%);
	--mini-surface-raised: #20232b;
	--mini-text: #f7f5f6;
	--mini-muted: #a6a3aa;
	--mini-control: rgb(255 255 255 / 7%);
	position: relative;
	display: grid;
	grid-template-areas:
		"header header"
		"track controls"
		"timeline timeline"
		"footer footer";
	grid-template-columns: minmax(0, 1fr) 13rem;
	isolation: isolate;
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 1.25rem;
	background: var(--mini-surface);
	color: var(--mini-text);
	box-shadow:
		0 1.5rem 3.5rem rgb(0 0 0 / 42%),
		inset 0 1px 0 rgb(255 255 255 / 8%);
	backdrop-filter: blur(1.5rem) saturate(1.12);
	font-family: inherit;
	opacity: 0;
	transform: translate3d(0.35rem, 0.3rem, 0) scale(0.98);
	transition:
		opacity 180ms ease,
		transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.music-mini.is-active {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.music-mini::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(circle at 8% 82%, rgb(91 220 232 / 12%), transparent 28%),
		radial-gradient(circle at 92% 8%, rgb(177 141 255 / 14%), transparent 30%),
		linear-gradient(128deg, rgb(255 255 255 / 8%), transparent 36%),
		radial-gradient(circle at 100% 0, var(--mini-accent-soft), transparent 42%);
	content: "";
	pointer-events: none;
}

.music-mini::after {
	position: absolute;
	inset: 0.06rem 1.3rem auto;
	z-index: 2;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgb(255 255 255 / 30%),
		transparent
	);
	content: "";
	pointer-events: none;
}

.music-mini__ambient {
	position: absolute;
	inset: -35%;
	z-index: -1;
	width: 170%;
	height: 170%;
	filter: blur(3rem) saturate(1.2);
	object-fit: cover;
	opacity: 0.11;
	pointer-events: none;
	transform: scale(1.05);
}

.music-mini__header,
.music-mini__track,
.music-mini__controls,
.music-mini__footer,
.music-mini__timeline {
	position: relative;
	z-index: 1;
}

.music-mini__header,
.music-mini__track,
.music-mini__controls,
.music-mini__footer,
.music-mini__brand,
.music-mini__brand-mark,
.music-mini__header-actions,
.music-mini__volume {
	display: flex;
	align-items: center;
}

.music-mini__header {
	grid-area: header;
	justify-content: space-between;
	min-height: 3.25rem;
	padding: 0.58rem 0.68rem 0.5rem 0.78rem;
	border-bottom: 1px solid var(--mini-line);
	background: linear-gradient(
		90deg,
		rgb(240 120 165 / 6%),
		transparent 44%,
		rgb(125 211 252 / 5%)
	);
}

.music-mini__brand {
	min-width: 0;
	gap: 0.55rem;
}

.music-mini__brand-mark {
	position: relative;
	width: 2rem;
	height: 2rem;
	flex: 0 0 2rem;
	justify-content: center;
	border: 1px solid rgb(240 120 165 / 28%);
	border-radius: 0.7rem;
	background: var(--mini-accent-soft);
	color: var(--mini-accent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.music-mini__brand-mark::after {
	position: absolute;
	top: -0.22rem;
	right: -0.22rem;
	width: 0.42rem;
	height: 0.42rem;
	background: linear-gradient(135deg, #fff, #f9a8d4 48%, #a5f3fc);
	box-shadow:
		-1.05rem 1.8rem 0 -0.1rem rgb(196 181 253 / 76%),
		1.6rem 1.2rem 0 -0.14rem rgb(125 211 252 / 70%);
	clip-path: polygon(
		50% 0,
		61% 39%,
		100% 50%,
		61% 61%,
		50% 100%,
		39% 61%,
		0 50%,
		39% 39%
	);
	content: "";
	filter: drop-shadow(0 0 0.35rem rgb(240 120 165 / 65%));
	pointer-events: none;
}

.music-mini__brand-copy {
	display: grid;
	min-width: 0;
}

.music-mini__brand-copy > span {
	color: var(--mini-muted);
	font-size: 0.53rem;
	font-weight: 750;
	letter-spacing: 0.13em;
	line-height: 1;
}

.music-mini__brand-copy strong {
	margin-top: 0.22rem;
	color: var(--mini-text);
	font-size: 0.86rem;
	font-weight: 720;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
}

.music-mini__header-actions {
	flex: 0 0 auto;
	gap: 0.28rem;
}

.music-mini button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		box-shadow 180ms ease;
}

.music-mini button:focus-visible {
	outline: 0.14rem solid rgb(240 120 165 / 62%);
	outline-offset: 0.1rem;
}

.music-mini__header-actions button {
	width: 2.35rem;
	height: 2.35rem;
	border: 1px solid var(--mini-line);
	border-radius: 0.78rem;
	background: var(--mini-control);
	color: var(--mini-muted);
}

.music-mini__track {
	grid-area: track;
	gap: 0.76rem;
	padding: 0.82rem 0.72rem 0.62rem 0.9rem;
}

.music-mini__cover {
	position: relative;
	display: grid;
	width: 4.5rem;
	height: 4.5rem;
	flex: 0 0 auto;
	place-items: center;
	overflow: visible;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 0.9rem;
	background: var(--mini-surface-raised);
	color: var(--mini-accent);
	box-shadow:
		0 0.65rem 1.4rem rgb(0 0 0 / 25%),
		-0.38rem 0.38rem 0 rgb(240 120 165 / 8%),
		inset 0 1px 0 rgb(255 255 255 / 8%);
	transform: rotate(-1.5deg);
}

.music-mini__cover img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.music-mini__cover-status {
	position: absolute;
	right: -0.18rem;
	bottom: -0.18rem;
	width: 0.9rem;
	height: 0.9rem;
	border: 0.18rem solid var(--mini-surface);
	border-radius: 50%;
	background: #8b9198;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 12%);
}

.music-mini__cover-status.playing {
	background: var(--mini-accent);
	box-shadow:
		0 0 0 1px rgb(240 120 165 / 25%),
		0 0 0.75rem rgb(240 120 165 / 55%);
}

.music-mini__copy {
	min-width: 0;
	flex: 1;
}

.music-mini__copy small {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--mini-muted);
	font-size: 0.54rem;
	font-weight: 760;
	letter-spacing: 0.09em;
	line-height: 1;
}

.music-mini__status-dot {
	width: 0.35rem;
	height: 0.35rem;
	flex: 0 0 0.35rem;
	border-radius: 50%;
	background: #8b9198;
}

.music-mini__status-dot.playing {
	background: var(--mini-accent);
	box-shadow: 0 0 0.55rem rgb(240 120 165 / 65%);
}

.music-mini__copy h2,
.music-mini__copy p {
	overflow: hidden;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.music-mini__copy h2 {
	margin-top: 0.38rem;
	color: var(--mini-text);
	font-size: 0.98rem;
	font-weight: 680;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.music-mini__copy p {
	margin-top: 0.22rem;
	color: var(--mini-muted);
	font-size: 0.72rem;
	line-height: 1.3;
}

.music-mini__timeline {
	grid-area: timeline;
	display: grid;
	padding: 0 0.9rem 0.18rem;
}

.music-mini__timeline > div {
	display: flex;
	order: 2;
	justify-content: space-between;
	margin-top: -0.05rem;
	color: var(--mini-muted);
	font-size: 0.58rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.music-mini input[type="range"] {
	width: 100%;
	height: 1.15rem;
	margin: 0;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.music-mini input[type="range"]::-webkit-slider-runnable-track {
	height: 0.22rem;
	border-radius: 99rem;
	background: linear-gradient(
		90deg,
		var(--mini-accent) var(--mini-progress, var(--mini-volume, 0%)),
		rgb(255 255 255 / 14%) 0
	);
}

.music-mini input[type="range"]::-webkit-slider-thumb {
	width: 0.7rem;
	height: 0.7rem;
	margin-top: -0.24rem;
	appearance: none;
	border: 0.14rem solid var(--mini-surface);
	border-radius: 50%;
	background: var(--mini-accent);
	box-shadow: 0 0 0 1px rgb(240 120 165 / 40%);
}

.music-mini input[type="range"]::-moz-range-track {
	height: 0.22rem;
	border-radius: 99rem;
	background: rgb(255 255 255 / 14%);
}

.music-mini input[type="range"]::-moz-range-progress {
	height: 0.22rem;
	border-radius: 99rem;
	background: var(--mini-accent);
}

.music-mini input[type="range"]::-moz-range-thumb {
	width: 0.7rem;
	height: 0.7rem;
	border: 0.14rem solid var(--mini-surface);
	border-radius: 50%;
	background: var(--mini-accent);
	box-shadow: 0 0 0 1px rgb(240 120 165 / 40%);
}

.music-mini input[type="range"]:focus-visible {
	outline: 0.14rem solid rgb(240 120 165 / 46%);
	outline-offset: 0.05rem;
}

.music-mini__controls {
	grid-area: controls;
	align-self: center;
	justify-content: center;
	gap: 0.08rem;
	margin: 0.62rem 0;
	padding: 0.35rem 0.62rem;
	border-left: 1px solid var(--mini-line);
}

.music-mini__controls > button {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: #d7d4d8;
}

.music-mini__controls .music-mini__utility {
	color: var(--mini-muted);
}

.music-mini__controls .music-mini__utility.active {
	background: var(--mini-accent-soft);
	color: var(--mini-accent);
}

.music-mini__controls .music-mini__play {
	width: 3rem;
	height: 3rem;
	margin-inline: 0.08rem;
	background: var(--mini-text);
	color: #17151a;
	box-shadow:
		0 0.7rem 1.5rem rgb(0 0 0 / 34%),
		0 0 0 0.22rem rgb(255 255 255 / 5%);
}

.music-mini__footer {
	grid-area: footer;
	gap: 0.38rem;
	min-height: 3rem;
	padding: 0.42rem 0.58rem;
	border-top: 1px solid var(--mini-line);
	background: rgb(0 0 0 / 12%);
}

.music-mini__volume {
	min-width: 5.4rem;
	flex: 1;
	gap: 0.28rem;
}

.music-mini__volume button {
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 2.25rem;
	border-radius: 0.7rem;
	color: var(--mini-muted);
}

.music-mini__volume input {
	--mini-progress: var(--mini-volume);
	min-width: 2.5rem;
}

.music-mini__library,
.music-mini__immersive {
	height: 2.35rem;
	flex: 0 0 auto;
	border: 1px solid var(--mini-line) !important;
	border-radius: 0.72rem;
	background: var(--mini-control) !important;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
	color: var(--mini-muted) !important;
}

.music-mini__library {
	gap: 0.28rem;
	padding-inline: 0.62rem !important;
	font-size: 0.68rem;
	font-weight: 650;
}

.music-mini__immersive {
	width: 2.35rem;
}

@media (hover: hover) {
	.music-mini button:hover {
		background: var(--mini-accent-soft);
		color: var(--mini-accent);
	}

	.music-mini__controls .music-mini__play:hover {
		background: var(--mini-accent);
		color: #fff;
		box-shadow:
			0 0.75rem 1.65rem rgb(240 120 165 / 25%),
			0 0 0 0.22rem rgb(240 120 165 / 10%);
	}

	.music-mini__library:hover,
	.music-mini__immersive:hover {
		border-color: rgb(240 120 165 / 26%) !important;
		background: var(--mini-accent-soft) !important;
		color: var(--mini-accent) !important;
	}
}

html:not(.dark) .music-mini {
	--mini-accent: #d94f83;
	--mini-accent-soft: rgb(217 79 131 / 10%);
	--mini-line: rgb(41 32 38 / 9%);
	--mini-surface: rgb(255 252 253 / 94%);
	--mini-surface-raised: #fff;
	--mini-text: #211b20;
	--mini-muted: #776f75;
	--mini-control: rgb(40 27 36 / 4%);
	border-color: rgb(255 255 255 / 72%);
	box-shadow:
		0 1.3rem 3.3rem rgb(63 42 53 / 20%),
		0 0 0 1px rgb(71 46 59 / 8%),
		inset 0 1px 0 rgb(255 255 255 / 85%);
}

html:not(.dark) .music-mini::before {
	background:
		radial-gradient(circle at 8% 82%, rgb(34 211 238 / 10%), transparent 29%),
		radial-gradient(circle at 92% 8%, rgb(167 139 250 / 11%), transparent 31%),
		linear-gradient(128deg, rgb(255 255 255 / 66%), transparent 38%),
		radial-gradient(circle at 100% 0, var(--mini-accent-soft), transparent 44%);
}

html:not(.dark) .music-mini__ambient {
	opacity: 0.075;
}

html:not(.dark) .music-mini__cover {
	border-color: rgb(72 47 59 / 9%);
	box-shadow:
		0 0.65rem 1.35rem rgb(72 47 59 / 14%),
		inset 0 1px 0 rgb(255 255 255 / 90%);
}

html:not(.dark) .music-mini__cover-status {
	border-color: var(--mini-surface);
}

html:not(.dark) .music-mini input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(
		90deg,
		var(--mini-accent) var(--mini-progress, var(--mini-volume, 0%)),
		rgb(62 45 55 / 13%) 0
	);
}

html:not(.dark) .music-mini input[type="range"]::-moz-range-track {
	background: rgb(62 45 55 / 13%);
}

html:not(.dark) .music-mini__controls > button {
	color: #4e474c;
}

html:not(.dark) .music-mini__controls .music-mini__utility {
	color: var(--mini-muted);
}

html:not(.dark) .music-mini__controls .music-mini__play {
	background: #241e22;
	color: #fff;
	box-shadow:
		0 0.65rem 1.4rem rgb(48 31 40 / 22%),
		0 0 0 0.22rem rgb(48 31 40 / 5%);
}

html:not(.dark) .music-mini__footer {
	background: rgb(62 45 55 / 3%);
}

@media (max-width: 540px) {
	.music-mini {
		display: block;
	}

	.music-mini__controls {
		margin: 0;
		padding: 0.48rem 0.55rem 0.62rem;
		border-left: 0;
	}

	.music-mini__controls > button {
		width: 2.45rem;
		height: 2.45rem;
	}

	.music-mini__controls .music-mini__play {
		width: 3.15rem;
		height: 3.15rem;
		margin-inline: 0.12rem;
	}
}

@media (max-width: 300px) {
	.music-mini__header {
		padding-inline: 0.58rem;
	}

	.music-mini__brand {
		gap: 0.42rem;
	}

	.music-mini__brand-mark {
		width: 1.85rem;
		height: 1.85rem;
		flex-basis: 1.85rem;
	}

	.music-mini__header-actions button {
		width: 2.2rem;
		height: 2.2rem;
	}

	.music-mini__track {
		gap: 0.62rem;
		padding-inline: 0.68rem;
	}

	.music-mini__cover {
		width: 3.8rem;
		height: 3.8rem;
	}

	.music-mini__timeline {
		padding-inline: 0.68rem;
	}

	.music-mini__controls {
		gap: 0;
		padding-inline: 0.35rem;
	}

	.music-mini__controls > button {
		width: 2.28rem;
		height: 2.28rem;
	}

	.music-mini__controls .music-mini__play {
		width: 3rem;
		height: 3rem;
		margin-inline: 0;
	}

	.music-mini__footer {
		padding-inline: 0.48rem;
	}

	.music-mini__library span {
		display: none;
	}

	.music-mini__library {
		width: 2.35rem;
		padding-inline: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.music-mini,
	.music-mini *,
	.music-mini *::before,
	.music-mini *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}