.mp3pl { --mp3-accent: #2b6cb0; --mp3-line: rgba(128,128,128,.25); margin: 0 0 1.25rem; }
.mp3pl__msg { padding: .75rem 1rem; border: 1px solid var(--mp3-line); border-radius: 6px; }
.mp3pl__player { position: sticky; top: 0; z-index: 5; padding: .5rem 0; background: Canvas; border-bottom: 1px solid var(--mp3-line); }
.mp3pl__now:empty { display: none; }
.mp3pl__now { font-weight: 600; margin: 0 0 .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp3pl__audio { width: 100%; display: block; }
.mp3pl__list { list-style: none; margin: .5rem 0; padding: 0; }
.mp3pl__item { display: flex; align-items: center; gap: .6rem; padding: .45rem .25rem; border-bottom: 1px solid var(--mp3-line); }
.mp3pl__item.is-current { background: rgba(43,108,176,.12); }
.mp3pl__play { flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: var(--mp3-accent); color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }
.mp3pl__play::before { content: "\25B6"; }
.mp3pl__item.is-playing .mp3pl__play::before { content: "\275A\275A"; font-size: .7rem; letter-spacing: -1px; }
.mp3pl__num { flex: 0 0 auto; min-width: 2rem; opacity: .6; text-align: right; }
.mp3pl__title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.mp3pl__artist { font-weight: 600; }
.mp3pl__sep { opacity: .6; }
.mp3pl__file { flex: 0 1 auto; max-width: 30%; min-width: 0; text-align: right; opacity: .6; font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp3pl__size { flex: 0 0 auto; min-width: 3.8rem; text-align: right; opacity: .6; font-size: .85em; white-space: nowrap; }
.mp3pl__dl { flex: 0 0 auto; padding: .25rem .6rem; border: 1px solid var(--mp3-accent); border-radius: 4px; text-decoration: none; font-size: .9em; white-space: nowrap; }
.mp3pl__pager { display: flex; margin: .6rem 0; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.mp3pl__page, .mp3pl__gap { min-width: 2.2rem; padding: .35rem .6rem; text-align: center; border: 1px solid var(--mp3-line); border-radius: 4px; text-decoration: none; }
.mp3pl__page.is-active { background: var(--mp3-accent); border-color: var(--mp3-accent); color: #fff; }
.mp3pl__page.is-disabled { opacity: .4; }
.mp3pl__gap { border-color: transparent; }
@media (max-width: 600px) {
	.mp3pl__item { flex-wrap: wrap; }
	.mp3pl__num { display: none; }
	.mp3pl__title { flex-basis: calc(100% - 3.5rem); }
	.mp3pl__file { flex-basis: 100%; max-width: 100%; margin-left: 2.8rem; text-align: left; }
	.mp3pl__size { margin-left: 2.8rem; }
}