/**
 * Music player styles.
 *
 * Persistent bottom bar + queue drawer + full-player modal (doubles as the
 * mobile sheet). Dark-first, theme-token driven. Range inputs (seek + volume)
 * are styled with a --shanmp3-seek-pct custom property so the filled portion
 * tracks the value without JS per-paint.
 */

/* ----------------------------------------------------------------------
 * Player bar
 * -------------------------------------------------------------------- */

.shanmp3-player {
	display: flex;
	align-items: stretch;
}

.shanmp3-player-bar {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	gap: 12px;
	padding: 0 var(--shanmp3-main-pad-x);
	box-sizing: border-box;
	width: 100%;
	/* Mirror .shanmp3-main: page-width + 2*pad outer box, pad padding, so the
	   bar's content left/right edges align with the navbar and page column at
	   every breakpoint (not offset by pad). */
	max-width: calc(var(--shanmp3-page-width) + 2 * var(--shanmp3-main-pad-x));
	margin-inline: auto;
	height: var( --shanmp3-player-h );
	overflow: hidden;
}

/* The bar is a flex child of the fixed .shanmp3-player wrapper (a core
   wp:group with layout:flex). Core's block-layout reset
   `.is-layout-flex > :is(*, div)` sets margin-left/right:0 at (0,1,1)
   specificity, which would otherwise beat this rule's (0,1,0) and pin the
   bar to the left edge on wide screens. Qualify the selector to (0,2,0) so
   the auto margins actually center the bar. */
.shanmp3-player .shanmp3-player-bar {
	margin-inline: auto;
}

/* Now-playing indicator: a thin bar pinned to the top of the player that fills
   in sync with playback progress (the same --shanmp3-seek-pct the desktop seek
   slider uses), so it moves with the music. Dimmed while paused, bright while
   playing. Shown on every viewport — on mobile it is the only progress signal
   (the seek slider is hidden there); on desktop it rides above the seek slider
   as a persistent "now playing" cue. */
.shanmp3-player__playing-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	pointer-events: none;
	z-index: 2;
	display: block;
	opacity: 0.5;
	transition: opacity var( --shanmp3-transition-fast );
	--shanmp3-seek-pct: 0%;
	background: linear-gradient(
		to right,
		var( --shanmp3-accent ) 0%,
		var( --shanmp3-accent ) var( --shanmp3-seek-pct, 0% ),
		var( --shanmp3-surface-2 ) var( --shanmp3-seek-pct, 0% ),
		var( --shanmp3-surface-2 ) 100%
	);
}
.shanmp3-player.is-playing .shanmp3-player__playing-bar {
	opacity: 1;
}

/* Desktop (≥ 769px) has the seek slider as the progress signal, so the top
   now-playing bar is redundant — hide it there. It stays visible on mobile,
   where the seek slider is hidden and the bar is the only progress cue. The
   orbiting ring around the circular cover replaces it as the desktop
   "now-playing" motion. */
@media ( min-width: 769px ) {
	.shanmp3-player__playing-bar {
		display: none;
	}
}

/* Current track (left). */
.shanmp3-player__current {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	cursor: pointer;
}

/* Circular "vinyl" cover in the bottom bar. overflow: visible so the orbiting
   ring (::before, inset negative) renders outside the disc; the <img> clips
   itself to the circle via its own border-radius. position: relative anchors
   the ring. Spins while playing (see play-state rules below). */
.shanmp3-player__cover {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: visible;
	background: var( --shanmp3-surface-2 );
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.shanmp3-player__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	/* Slow vinyl spin — only while audio is playing (paused below). */
	animation: shanmp3-disc-spin 12s linear infinite;
	animation-play-state: paused;
}

/* Idle/coverless placeholder: the site logo fills the cover slot when no track
   cover is available (no current track, or a coverless track). object-fit:
   contain keeps the whole brand mark visible inside the disc — never center-
   crops the logo the way cover art is cropped — and the spin is disabled so a
   brand mark never rotates, even if a coverless track is actively playing. */
.shanmp3-player__cover img.shanmp3-player__cover-logo {
	object-fit: contain;
	box-sizing: border-box;
	padding: 6%;
	animation: none !important;
}

/* Orbiting yellow ring: a conic "comet" streak masked to an annulus, sitting
   just outside the disc. It rotates so the bright tip travels around the cover
   — the "yellow color moving around it". Spins only while playing.
   pointer-events:none so it never blocks the click-to-open-full-player target. */
.shanmp3-player__cover::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	pointer-events: none;
	background: conic-gradient(
		from 0deg,
		var( --shanmp3-accent-fill ) 0%,
		var( --shanmp3-accent ) 12%,
		transparent 35%,
		transparent 100%
	);
	-webkit-mask: radial-gradient( circle closest-side, transparent calc( 100% - 3px ), #000 calc( 100% - 3px ) );
	mask: radial-gradient( circle closest-side, transparent calc( 100% - 3px ), #000 calc( 100% - 3px ) );
	animation: shanmp3-ring-spin 3s linear infinite;
	animation-play-state: paused;
}

.shanmp3-player__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.shanmp3-player__title {
	font-weight: 600;
	font-size: 0.875rem;
	color: var( --shanmp3-fg );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shanmp3-player__artist {
	font-size: 0.75rem;
	color: var( --shanmp3-muted );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Friendly inline error line shown when a track fails to load/play. It
   replaces the title+artist (hidden via [hidden]) and is tap-to-retry
   (data-act="retry"). Uses the danger token so it reads as an alert. */
.shanmp3-player__error {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	color: var( --shanmp3-danger, #ff5a5f );
	cursor: pointer;
	padding: 2px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.shanmp3-player__error:hover {
	text-decoration: underline;
}
.shanmp3-player__error:focus-visible {
	outline: 2px solid var( --shanmp3-accent-fill );
	outline-offset: 2px;
	border-radius: 2px;
}

.shanmp3-player__fav {
	margin-inline-start: auto;
}

/* Center controls. */
.shanmp3-player__center {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.shanmp3-player__controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

.shanmp3-player__progress {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 520px;
}

.shanmp3-player__time {
	font-size: 0.6875rem;
	color: var( --shanmp3-muted );
	font-variant-numeric: tabular-nums;
	min-width: 34px;
	text-align: center;
}

/* Extra (right): lyrics, queue, volume. */
.shanmp3-player__extra {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: flex-end;
}

.shanmp3-player__volume {
	display: flex;
	align-items: center;
	gap: 4px;
}

.shanmp3-player__volume .shanmp3-volume {
	width: 88px;
}

/* ----------------------------------------------------------------------
 * Icon buttons
 * -------------------------------------------------------------------- */

.shanmp3-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --shanmp3-muted );
	border-radius: var( --shanmp3-radius-pill );
	cursor: pointer;
	transition: color var( --shanmp3-transition-fast ),
		background-color var( --shanmp3-transition-fast );
}

.shanmp3-icon-btn:hover {
	color: var( --shanmp3-fg );
	background: var( --shanmp3-surface-2 );
}

.shanmp3-icon-btn.is-active {
	color: var( --shanmp3-accent );
}

.shanmp3-icon-btn--lg {
	width: 44px;
	height: 44px;
	color: var( --shanmp3-fg );
	background: var( --shanmp3-surface-2 );
}

.shanmp3-icon-btn--lg:hover {
	background: var( --shanmp3-accent );
	color: var( --shanmp3-on-accent, #fff );
}

.shanmp3-icon-btn--sm {
	width: 28px;
	height: 28px;
}

.shanmp3-icon-btn svg {
	width: 20px;
	height: 20px;
}

.shanmp3-icon-btn--sm svg {
	width: 16px;
	height: 16px;
}

.shanmp3-icon-btn--lg svg {
	width: 22px;
	height: 22px;
}

/* ----------------------------------------------------------------------
 * Range sliders (seek + volume)
 * -------------------------------------------------------------------- */

.shanmp3-seek,
.shanmp3-volume {
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: var( --shanmp3-radius-pill );
	background: linear-gradient(
		to right,
		var( --shanmp3-accent ) 0%,
		var( --shanmp3-accent ) var( --shanmp3-seek-pct, 0% ),
		var( --shanmp3-surface-2 ) var( --shanmp3-seek-pct, 0% ),
		var( --shanmp3-surface-2 ) 100%
	);
	cursor: pointer;
}

.shanmp3-seek {
	flex: 1 1 auto;
}

.shanmp3-seek::-webkit-slider-thumb,
.shanmp3-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --shanmp3-fg );
	border: 0;
}

.shanmp3-seek::-moz-range-thumb,
.shanmp3-volume::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --shanmp3-fg );
	border: 0;
}

/* ----------------------------------------------------------------------
 * Queue drawer
 * -------------------------------------------------------------------- */

.shanmp3-queue {
	position: fixed;
	right: 0;
	bottom: calc( var( --shanmp3-player-h ) + env(safe-area-inset-bottom, 0) );
	width: 360px;
	max-width: 90vw;
	max-height: calc( 100vh - var( --shanmp3-player-h ) - env(safe-area-inset-bottom, 0) );
	background: var( --shanmp3-surface );
	border-left: 1px solid var( --shanmp3-border );
	border-top: 1px solid var( --shanmp3-border );
	z-index: var( --shanmp3-z-dropdown, 60 );
	display: flex;
	flex-direction: column;
	box-shadow: var( --shanmp3-shadow-lg );
}

.shanmp3-queue[hidden] {
	display: none;
}

.shanmp3-queue__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var( --shanmp3-border );
}

.shanmp3-queue__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.shanmp3-queue__list {
	list-style: none;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	flex: 1 1 auto;
}

.shanmp3-queue__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: var( --shanmp3-radius-sm );
}

.shanmp3-queue__item:hover {
	background: var( --shanmp3-surface-2 );
}

.shanmp3-queue__item.is-current {
	background: var( --shanmp3-surface-2 );
}

.shanmp3-queue__main {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	padding: 0;
	color: var( --shanmp3-fg );
	cursor: pointer;
	text-align: left;
}

.shanmp3-queue__cover {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: var( --shanmp3-radius-sm );
	overflow: hidden;
	background: var( --shanmp3-surface-2 );
}

.shanmp3-queue__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Play/pause indicator overlaid on the CURRENT queue row's cover so the user
   can tell whether it's really playing (pause glyph) or stuck/paused (play
   glyph) — not just "in the queue". Shown only on .is-current (added in
   render.js). The dark scrim keeps the glyph legible over any cover art. */
.shanmp3-queue__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
}
.shanmp3-queue__overlay svg {
	width: 16px;
	height: 16px;
}

.shanmp3-queue__text {
	min-width: 0;
}

.shanmp3-queue__title {
	font-size: 0.8125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.shanmp3-queue__dur {
	font-size: 0.75rem;
	color: var( --shanmp3-muted );
	font-variant-numeric: tabular-nums;
}

.shanmp3-queue__ops {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* ----------------------------------------------------------------------
 * Full player modal (also mobile sheet)
 * -------------------------------------------------------------------- */

.shanmp3-full-player {
	border: 0;
	padding: 0;
	background: var( --shanmp3-surface );
	color: var( --shanmp3-fg );
	width: min( 480px, 92vw );
	max-height: 88vh;
	border-radius: var( --shanmp3-radius-lg );
	box-shadow: var( --shanmp3-shadow-lg );
	overflow: hidden;
}

.shanmp3-full-player::backdrop {
	background: rgba( 0, 0, 0, 0.6 );
}

.shanmp3-full-player__inner {
	position: relative;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.shanmp3-full-player__close {
	position: absolute;
	top: 12px;
	right: 12px;
}

.shanmp3-full-player__cover {
	width: min( 280px, 70vw );
	aspect-ratio: 1 / 1;
	/* Circular "vinyl" disc. overflow: visible so the orbiting ring (::before,
	   inset negative) renders outside the disc; the <img> clips itself to the
	   circle via its own border-radius. */
	border-radius: 50%;
	overflow: visible;
	background: var( --shanmp3-surface-2 );
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.shanmp3-full-player__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	/* Slow vinyl spin — only while audio is playing (paused below). */
	animation: shanmp3-disc-spin 12s linear infinite;
	animation-play-state: paused;
}

/* Site-logo idle placeholder in the full-player modal — same treatment as the
   bar: contain (no brand crop), inset padding, and no spin. */
.shanmp3-full-player__cover img.shanmp3-full-player__cover-logo {
	object-fit: contain;
	box-sizing: border-box;
	padding: 8%;
	animation: none !important;
}

/* Orbiting yellow ring: a conic "comet" streak masked to an annulus, sitting
 * just outside the disc. It rotates so the bright tip travels around the cover
 * — the "yellow color moving around it". Spins only while playing. */
.shanmp3-full-player__cover::before {
	content: "";
	position: absolute;
	/* Ring floats ~1–6px outside the disc edge. */
	inset: -6px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		var( --shanmp3-accent-fill ) 0%,
		var( --shanmp3-accent ) 12%,
		transparent 35%,
		transparent 100%
	);
	/* Keep only the outer 5px (an annulus) so the gradient is a ring, not a
	   disc. closest-side makes 100% = the circle radius (matches border-radius). */
	-webkit-mask: radial-gradient( circle closest-side, transparent calc( 100% - 5px ), #000 calc( 100% - 5px ) );
	mask: radial-gradient( circle closest-side, transparent calc( 100% - 5px ), #000 calc( 100% - 5px ) );
	animation: shanmp3-ring-spin 3s linear infinite;
	animation-play-state: paused;
}

/* Play state: the disc + ring run while audio plays, freeze when paused. This
   covers the bottom-bar cover and the full-player cover (the <dialog> is a DOM
   descendant of .shanmp3-player even when shown in the top layer, so the
   descendant selector still applies). The .is-playing class is toggled on the
   root by render.js — that JS-driven class is what starts/stops the spin. */
.shanmp3-player.is-playing .shanmp3-player__cover img,
.shanmp3-player.is-playing .shanmp3-player__cover::before,
.shanmp3-player.is-playing .shanmp3-full-player__cover img,
.shanmp3-player.is-playing .shanmp3-full-player__cover::before {
	animation-play-state: running;
}

@keyframes shanmp3-disc-spin {
	to { transform: rotate( 360deg ); }
}

@keyframes shanmp3-ring-spin {
	to { transform: rotate( 360deg ); }
}

/* Respect reduced-motion: drop the spin/ring animation entirely. */
@media ( prefers-reduced-motion: reduce ) {
	.shanmp3-player__cover img,
	.shanmp3-player__cover::before,
	.shanmp3-full-player__cover img,
	.shanmp3-full-player__cover::before {
		animation: none;
	}
}

.shanmp3-full-player__meta {
	text-align: center;
}

.shanmp3-full-player__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 4px;
}

.shanmp3-full-player__artist {
	font-size: 0.875rem;
	color: var( --shanmp3-muted );
	margin: 0;
}

.shanmp3-full-player__progress {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.shanmp3-full-player__controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

.shanmp3-full-player__lyrics {
	width: 100%;
	max-height: 200px;
	overflow-y: auto;
	text-align: center;
	padding: 8px;
}

.shanmp3-full-player__lyrics[hidden] {
	display: none;
}

.shanmp3-full-player__lyrics--floating {
	position: fixed;
	left: 50%;
	bottom: calc( var( --shanmp3-player-h ) + 8px );
	transform: translateX( -50% );
	width: min( 520px, 92vw );
	max-height: 50vh;
	display: flex;
	flex-direction: column;
	background: var( --shanmp3-surface );
	border: 1px solid var( --shanmp3-border );
	border-radius: var( --shanmp3-radius-md );
	box-shadow: var( --shanmp3-shadow-lg );
	z-index: var( --shanmp3-z-dropdown, 60 );
	overflow: hidden;
}

/* Floating lyrics panel header (title + expand/close). */
.shanmp3-lyrics-panel__head {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	border-bottom: 1px solid var( --shanmp3-border );
	flex: 0 0 auto;
}

.shanmp3-lyrics-panel__title {
	flex: 1 1 auto;
	font-weight: 700;
	font-size: 0.875rem;
	color: var( --shanmp3-fg );
}

/* Scrollable lyrics body. */
.shanmp3-lyrics-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 8px 16px 16px;
	scrollbar-width: thin;
}

/* Expanded (maximized) state: fill the screen between header and player. */
.shanmp3-full-player__lyrics--floating.is-max {
	top: var( --shanmp3-header-h, 64px );
	bottom: calc( var( --shanmp3-player-h, 80px ) + env(safe-area-inset-bottom, 0) );
	left: 0;
	right: 0;
	transform: none;
	width: auto;
	max-width: none;
	max-height: none;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

/* ----------------------------------------------------------------------
 * Lyrics
 * -------------------------------------------------------------------- */

.shanmp3-lyrics-line {
	font-size: 0.9375rem;
	color: var( --shanmp3-muted );
	margin: 8px 0;
	transition: color var( --shanmp3-transition-fast );
}

.shanmp3-lyrics-line.is-active {
	color: var( --shanmp3-accent );
	font-weight: 700;
	transform: scale( 1.02 );
}

.shanmp3-lyrics-plain {
	font-size: 0.9375rem;
	color: var( --shanmp3-fg );
	line-height: 1.6;
}

.shanmp3-empty {
	color: var( --shanmp3-muted );
	font-size: 0.875rem;
	text-align: center;
	padding: 16px;
}

/* ----------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------- */

@media ( max-width: 768px ) {
	.shanmp3-player-bar {
		/* auto | 1fr | auto: the current (cover + fav) and extra (lyrics + queue)
		   columns shrink to their icon content, the center controls take the rest
		   and center within it. No fixed-width title column to overflow into them. */
		grid-template-columns: auto 1fr auto;
		gap: 8px;
		/* Keep the shared content padding so the bar aligns with the navbar/page
		   column even on mobile (the token is 16px below 1024px). */
		padding: 0 var(--shanmp3-main-pad-x);
	}

	.shanmp3-player__progress {
		display: none;
	}

	.shanmp3-player__center {
		gap: 0;
	}

	/* Tighten the transport row so all five controls fit. */
	.shanmp3-player__controls {
		gap: 2px;
	}

	/* No song title in the mini-bar on mobile — the cover is the tap target to
	   open the full player (where the title + favorite live). Icons-only bar so
	   nothing overlaps. */
	.shanmp3-player__meta {
		display: none;
	}

	.shanmp3-player__current {
		gap: 8px;
	}

	.shanmp3-player__volume {
		display: none;
	}

	/* Smaller icons + cover so all controls fit on narrow screens without overlap. */
	.shanmp3-icon-btn {
		width: 30px;
		height: 30px;
	}
	.shanmp3-icon-btn--lg {
		width: 38px;
		height: 38px;
	}
	.shanmp3-icon-btn--sm {
		width: 24px;
		height: 24px;
	}
	.shanmp3-icon-btn svg {
		width: 18px;
		height: 18px;
	}
	.shanmp3-icon-btn--lg svg {
		width: 20px;
		height: 20px;
	}
	.shanmp3-icon-btn--sm svg {
		width: 14px;
		height: 14px;
	}

	.shanmp3-player__cover {
		width: 36px;
		height: 36px;
	}

	/* Very small phones (≤ 360px): shrink further so all five center controls
	   still fit alongside the cover, favorite, lyrics and queue buttons. */
	@media ( max-width: 360px ) {
		.shanmp3-player-bar {
			gap: 4px;
		}
		.shanmp3-player__controls {
			gap: 1px;
		}
		.shanmp3-player__current {
			gap: 6px;
		}
		.shanmp3-icon-btn {
			width: 26px;
			height: 26px;
		}
		.shanmp3-icon-btn--lg {
			width: 32px;
			height: 32px;
		}
		.shanmp3-icon-btn--sm {
			width: 22px;
			height: 22px;
		}
		.shanmp3-icon-btn svg {
			width: 16px;
			height: 16px;
		}
		.shanmp3-icon-btn--lg svg {
			width: 18px;
			height: 18px;
		}
		.shanmp3-icon-btn--sm svg {
			width: 12px;
			height: 12px;
		}
		.shanmp3-player__cover {
			width: 30px;
			height: 30px;
		}
		/* Thinner orbiting ring to match the smaller disc on tiny phones. */
		.shanmp3-player__cover::before {
			inset: -2px;
			-webkit-mask: radial-gradient( circle closest-side, transparent calc( 100% - 2px ), #000 calc( 100% - 2px ) );
			mask: radial-gradient( circle closest-side, transparent calc( 100% - 2px ), #000 calc( 100% - 2px ) );
		}
	}

	/* Mobile: full player becomes a bottom sheet. */
	.shanmp3-full-player {
		width: 100vw;
		max-width: 100vw;
		max-height: 90vh;
		border-radius: var( --shanmp3-radius-lg ) var( --shanmp3-radius-lg ) 0 0;
		margin-bottom: auto;
	}

	.shanmp3-queue {
		width: 100vw;
		max-width: 100vw;
	}
}

/* Respect reduced-motion: kill lyrics scroll animation. */
@media ( prefers-reduced-motion: reduce ) {
	.shanmp3-lyrics-line {
		transform: none !important;
		transition: none !important;
	}
	.shanmp3-lyrics-line.is-active {
		scroll-behavior: auto;
	}
}