#lyrics-container { position: relative; isolation: isolate; }
#lyrics-container.lyrics-open { overflow: hidden; }
#lyrics-container.lyrics-open > main,
#lyrics-container.lyrics-open > #loading-indicator { visibility: hidden; }
.lyrics-screen { position: absolute; inset: 0; z-index: 10; overflow: hidden; color: white; background: #23212c; border-radius: inherit; }
.lyrics-screen[hidden] { display: none; }
.lyrics-backdrop { position: absolute; inset: -70px; background-size: cover; background-position: center; filter: blur(45px) brightness(.45) saturate(1.3); pointer-events: none; }
.lyrics-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #0003, #0007); pointer-events: none; }
.lyrics-heading { position: absolute; z-index: 3; top: 24px; left: 32px; right: 80px; font-size: 14px; opacity: .8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lyrics-close { position: absolute; z-index: 4; top: 16px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: #ffffff1a; font-size: 28px; color: white; }
.lyrics-close:hover { background: #ffffff30; }
.lyrics-viewport { position: absolute; inset: 70px 0 20px; z-index: 2; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
.lyrics-lines { position: relative; width: min(880px, 86%); margin: 0 auto; transition: transform .65s cubic-bezier(.22,.68,.16,1); will-change: transform; }
.lyrics-line { margin: 0; padding: 18px 10px; text-align: center; font-size: clamp(22px, 3vw, 42px); font-weight: 750; line-height: 1.3; opacity: .3; transform: scale(.96); transition: opacity .45s, transform .55s; white-space: pre-line; overflow-wrap: anywhere; }
.lyrics-line.is-active { opacity: 1; transform: scale(1); text-shadow: 0 2px 24px #ffffff25; }
.lyrics-message { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 32px; }
.lyrics-message[hidden] { display: none; }
#lyrics-container ~ * { min-width: 0; }
body:has(#lyrics-container) #player-open-lyrics:disabled { opacity: .3; cursor: not-allowed; }
body:has(#lyrics-container) #player-open-lyrics[aria-expanded="true"] { opacity: 1; color: #a78bfa; }
@media (prefers-reduced-motion: reduce) { .lyrics-lines, .lyrics-line { transition: none; } }