.music-page { padding-top:90px; padding-bottom:40px; }
.music-head { margin-bottom:52px; }
.music-head h1 { font-size:42px; font-weight:400; letter-spacing:2px; margin:0 0 20px; }
.music-head > p:last-child { font-size:14px; color:#aaa; line-height:2; }
.listening-room { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr); gap:48px; align-items:start; }
.music-cover { width:100%; height:auto; display:block; }
.now-playing { display:flex; align-items:baseline; gap:24px; margin:28px 0 20px; }
.now-playing .eyebrow { margin:0; color:#777; font-size:9px; }
.now-playing h2 { font-size:20px; font-weight:400; margin:0; }
#music-player { display:block; width:100%; color-scheme:dark; }
#playback-status { font-size:12px; line-height:1.8; color:#aaa; min-height:22px; }
.track-panel > .eyebrow { color:#888; margin:0 0 24px; }
.track-list { list-style:none; padding:0; margin:0; border-top:1px solid #333; }
.track { display:grid; grid-template-columns:24px minmax(0,1fr) 36px 16px; align-items:center; gap:14px; width:100%; min-height:86px; padding:16px 0; border:0; border-bottom:1px solid #292929; background:none; color:#aaa; cursor:pointer; text-align:left; font-family:inherit; }
.track-number, .track-duration { color:#777; font-size:11px; }
.track-name { font-size:15px; line-height:1.6; transition:transform .5s cubic-bezier(.22,1,.36,1), color .4s ease; }
.track-mark { opacity:0; transition:opacity .3s ease; }
.track[aria-pressed="true"] { color:#fff; border-bottom-color:#777; }
.track[aria-pressed="true"] .track-mark { opacity:1; }
.track:focus-visible { outline:1px solid #bbb; outline-offset:5px; }
@media(hover:hover) { .track:hover .track-name { transform:translateX(4px); color:#fff; } .track:hover .track-mark { opacity:1; } }
.lyrics-section { display:grid; grid-template-columns:minmax(150px,.38fr) minmax(0,1fr); gap:48px; margin-top:76px; padding-top:38px; border-top:1px solid #292929; }
.lyrics-heading .eyebrow { color:#777; margin:0 0 14px; }
.lyrics-heading h2 { margin:0; color:#aaa; font-size:15px; font-weight:400; letter-spacing:.06em; }
.lyrics-viewport { position:relative; height:min(48vh,440px); min-height:330px; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-width:none; outline:none; mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%); }
.lyrics-viewport::-webkit-scrollbar { display:none; }
.lyrics-lines { padding:145px 0; }
.lyric-section-label { margin:34px 0 13px; color:#555; font-size:9px; letter-spacing:.18em; text-transform:uppercase; }
.lyric-section-label:first-child { margin-top:0; }
.lyric-line { display:block; width:100%; margin:0; padding:7px 0; border:0; background:none; color:#555; font:inherit; font-size:17px; font-weight:400; line-height:1.75; text-align:left; cursor:pointer; transition:color .45s ease,transform .55s cubic-bezier(.22,1,.36,1),opacity .45s ease; }
.lyric-line.is-active { color:#fff; transform:translateX(8px); }
.lyric-empty { display:flex; align-items:center; min-height:150px; color:#666; font-size:15px; letter-spacing:.06em; }
.lyric-line:focus-visible { color:#fff; outline:0; }
@media(hover:hover) { .lyric-line:hover { color:#aaa; transform:translateX(4px); } .lyric-line.is-active:hover { color:#fff; transform:translateX(8px); } }
.music-back { display:inline-block; margin-top:55px; padding:12px 0; font-size:12px; color:#aaa; }
@media(max-width:1000px) { .listening-room { gap:28px; grid-template-columns:minmax(0,1fr) minmax(240px,1fr); } }
@media(max-width:800px) { .music-page { padding-top:125px; } .music-head h1 { font-size:32px; } .listening-room { grid-template-columns:1fr; gap:28px; } .track { min-height:76px; } .music-head { margin-bottom:32px; } .lyrics-section { grid-template-columns:1fr; gap:22px; margin-top:56px; } .lyrics-viewport { height:390px; min-height:0; } .lyrics-lines { padding:125px 0; } .lyric-line { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .track-name,.track-mark,.lyric-line { transition:none; } .track:hover .track-name,.lyric-line:hover,.lyric-line.is-active { transform:none; } .lyrics-viewport { scroll-behavior:auto; } }

/* A bounded lyric panel directly beneath the audio player. */
#playback-status:empty { display:none; }
.lyrics-section { display:block; position:relative; margin-top:20px; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.lyrics-heading { display:flex; align-items:baseline; gap:16px; padding:20px 24px 14px; border-bottom:1px solid rgba(255,255,255,.06); }
.lyrics-heading .eyebrow { margin:0; font-size:9px; }
.lyrics-heading h2 { font-size:13px; }
.lyrics-viewport { height:300px; min-height:0; padding:0 24px; overscroll-behavior-y:auto; scrollbar-width:thin; scrollbar-color:#484848 transparent; mask-image:none; -webkit-mask-image:none; scroll-behavior:auto; }
.lyrics-viewport::-webkit-scrollbar { display:block; width:4px; }
.lyrics-viewport::-webkit-scrollbar-thumb { background:#484848; border-radius:4px; }
.lyrics-lines { padding:100px 0; }
.lyrics-section::after { content:""; position:absolute; bottom:0; left:0; right:0; height:54px; pointer-events:none; background:linear-gradient(to bottom,rgba(20,20,20,0),rgba(24,24,24,.85)); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); mask-image:linear-gradient(to bottom,transparent,#000); -webkit-mask-image:linear-gradient(to bottom,transparent,#000); }
.lyric-line { font-size:16px; color:#888; }
.lyric-line:focus-visible { outline:1px solid #888; outline-offset:2px; }
.lyrics-viewport:focus-visible { outline:1px solid #888; outline-offset:-3px; }
.lyrics-section.is-instrumental .lyrics-viewport { height:auto; overflow:visible; }
.lyrics-section.is-instrumental .lyrics-lines { padding:24px 0; }
.lyrics-section.is-instrumental .lyric-empty { min-height:0; margin:0; color:#888; font-size:14px; }
.lyrics-section.is-instrumental::after { display:none; }
@media(max-width:800px) { .lyrics-section { margin-top:18px; } .lyrics-heading { padding:18px 20px 12px; } .lyrics-viewport { height:280px; padding:0 20px; } .lyrics-lines { padding:90px 0; } }