article:has(>audio),article.track{padding-block:.6rem;border-bottom:1px solid var(--color-ui);h2{margin:0;font-size:var(--font-m);font-weight:600}audio{margin-top:.5rem}}.lyrics-body{max-width:34rem;color:oklch(30% 0 0);line-height:1.65;p{margin:0;text-align:left;hyphens:none}h3{margin:1.25rem 0 .25rem;color:oklch(45% 0 0);font-size:var(--font-s);font-weight:600;letter-spacing:.08em;text-transform:uppercase}h3:first-child{margin-top:0}}details.lyrics{border:0;margin-top:0;summary{background:0 0;padding:.25rem 0;color:var(--color-link);font-size:var(--font-s);font-weight:500}.lyrics-body{padding-block:.25rem 1rem}}.license{display:block;margin-top:1.5rem;padding-inline:.5rem;color:oklch(45% 0 0);line-height:1.6}.album{margin-top:1.5rem;@media(min-width:768px){display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2rem; align-items: start;}}.album-list{min-width:0}.player-js article.track{display:grid;grid-template-columns:2rem minmax(0,1fr)auto auto;align-items:center;column-gap:.6rem;padding:.2rem .5rem;border-bottom:0;border-radius:.5rem;transition:background-color .15s;&:hover{background-color:var(--color-card-surface)}&.is-active{background-color:oklch(from var(--color-button) l c h/.08);.name{color:var(--color-link)}}h2{grid-column:2;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;.num{display:inline-block;min-width:2.5ch;margin-right:.75ch;color:oklch(45% 0 0);font-weight:400;font-variant-numeric:tabular-nums}}.time{color:oklch(45% 0 0);font-size:var(--font-s);font-variant-numeric:tabular-nums}}.track-play,.np-btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;background-color:transparent;color:var(--color-button);transition:background-color .15s,color .15s;svg{width:1.1rem;height:1.1rem;margin:0}&:disabled{opacity:.35;cursor:default}}.track-play{width:2rem;height:2rem;box-shadow:inset 0 0 0 1.5px currentColor;svg{width:.85rem;height:.85rem}&:hover, &:active, .track.is-active &{background-color:var(--color-button);color:var(--color-background)}}.track:not(.is-playing) .track-play svg,.np-main:not(.is-playing) svg{transform:translateX(1px)}.download{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;color:oklch(45% 0 0);&:hover{background-color:var(--color-card-surface);color:var(--color-link-highlight)}svg{width:1.1rem;height:1.1rem;margin:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}.lyrics-panel{display:flex;flex-direction:column;min-height:12rem;@media(min-width:768px){border-left: 1px solid var(--color-ui);}.lp-head{display:flex;align-items:baseline;gap:.75ch;padding:1rem 1.25rem .5rem;line-height:1.3}.lp-num{color:oklch(45% 0 0);font-variant-numeric:tabular-nums}.lp-title{font-weight:700}.lp-close{display:none;margin-left:auto;padding:0 .5rem;background:0 0;color:var(--color-text);font-size:var(--font-l);line-height:1.2;&:hover{background-color:var(--color-card-surface)}}.lp-body{min-height:0;padding:.25rem 1.25rem 1.25rem}.lp-empty{margin:0;color:oklch(45% 0 0)}}@media(max-width:767.98px){.lyrics-panel{display:none;position:fixed;inset:auto 0 var(--np-h,6rem)0;z-index:4;min-height:0;max-height:55vh;border-radius:.75rem .75rem 0 0;background-color:oklch(from var(--color-background) l c h/.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -.5rem 1.5rem oklch(0% 0 0/.1);.lp-close{display:block}.lp-body{overflow-y:auto;overscroll-behavior:contain}}body.lyrics-open .lyrics-panel{display:flex}}body.has-player{margin-bottom:8rem}.now-playing{position:fixed;inset:auto 0 0 0;z-index:5;padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom));border-top:1px solid var(--color-ui);background-color:oklch(from var(--color-background) l c h/.88);-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);transform:translateY(100%);transition:transform .3s ease;&.is-visible{transform:none}.np-inner{display:grid;grid-template-columns:auto minmax(0,1fr)auto;grid-template-areas:"controls info lyrics" "seek seek seek";align-items:center;gap:.5rem .75rem;max-width:var(--max-desktop-screen);margin:auto;@media(min-width:768px){grid-template-columns: auto minmax(0,14rem) minmax(0,1fr); grid-template-areas: "controls info seek"; gap: 0 1.5rem;}}.np-controls{grid-area:controls;display:flex;align-items:center;gap:.25rem}.np-btn{color:var(--color-text);&:hover{background-color:var(--color-card-surface)}}.np-main{background-color:var(--color-button);color:var(--color-background);&:hover{background-color:var(--color-button-highlight)}}.np-lyrics{grid-area:lyrics;min-height:2.75rem;padding-inline:1.2em;padding-block:.4em;border-radius:2rem;background-color:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--color-button);font-size:1rem;font-weight:500;&:hover, &[aria-expanded=true]{background-color:var(--color-button);color:var(--color-background)}@media(min-width:768px){display: none;}}.np-info{grid-area:info;display:flex;flex-direction:column;min-width:0;line-height:1.3; *{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .np-album { color: oklch(45% 0 0); font-size: var(--font-s); } @media (max-width: 767.98px) { .np-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; } .np-album { display: none; } }}.np-seek{grid-area:seek;display:grid;grid-template-columns:3.5ch minmax(0,1fr)3.5ch;align-items:center;gap:.75rem;time{color:oklch(45% 0 0);font-size:var(--font-s);font-variant-numeric:tabular-nums}.np-cur{text-align:right}}input[type=range]{--progress:0%;-webkit-appearance:none;appearance:none;width:100%;height:2.75rem;margin:0;background:0 0;cursor:pointer;&::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--color-button) var(--progress),var(--color-ui) var(--progress))}&::-moz-range-track{height:6px;border-radius:3px;background:var(--color-ui)}&::-moz-range-progress{height:6px;border-radius:3px;background:var(--color-button)}&::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border:0;border-radius:50%;background:var(--color-button)}&::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--color-button)}@media(min-width:768px){height: 1.75rem; &::-webkit-slider-runnable-track{height:4px;border-radius:2px}&::-moz-range-track,&::-moz-range-progress{height:4px;border-radius:2px}&::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px}&::-moz-range-thumb{width:14px;height:14px}}}}@media(prefers-reduced-motion:reduce){.now-playing,.player-js article.track,.track-play,.np-btn{transition:none}}