/* The legal links belong to the viewport, independently of the expanding player. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 :root[data-desktop-ui],:root[data-desktop-ui] body{height:100%;overflow:hidden;scrollbar-gutter:auto}
 :root[data-desktop-ui] main{min-height:0;padding-bottom:0;padding-top:max(12px,calc((100svh / 1.1 - 920px)/2))}
 :root[data-desktop-ui] .legal-footer{position:fixed;z-index:3;left:0;right:0;bottom:12px;width:calc(100% - 40px);max-width:800px;margin:0 auto}
 :root[data-desktop-ui] .legal-links{gap:4px 18px}
 :root[data-desktop-ui] .legal-links button{padding:3px 0;font-size:8px}
 :root[data-desktop-ui] .legal-rights{display:block;font-size:7px;margin-top:2px}
}
/* The previous large-layout breakpoint left a gap on laptop-height windows. */
@media(min-width:701px) and (min-height:921px) and (max-height:1024px) and (hover:hover) and (pointer:fine){
 :root[data-desktop-ui] main{max-width:610px;padding-top:12px}
 :root[data-desktop-ui] .identity{margin-bottom:13px}
 :root[data-desktop-ui] h1{font-size:60px;margin-bottom:10px}
 :root[data-desktop-ui] .bio{margin-bottom:12px}
 :root[data-desktop-ui] .socials a{width:38px;height:38px}
 :root[data-desktop-ui] .tab{padding:12px 5px}
 :root[data-desktop-ui] .catalog-body{padding:11px}
 :root[data-desktop-ui] .search-field{height:38px}
 :root[data-desktop-ui] .filter-button{min-height:38px}
 :root[data-desktop-ui] .tracks{min-height:308px}
 :root[data-desktop-ui] .track{min-height:56px}
 :root[data-desktop-ui] .track.expanded{min-height:92px}
 :root[data-desktop-ui] .cover{width:40px;height:40px}
 :root[data-desktop-ui] .pagination{padding-top:10px}
 :root[data-desktop-ui] .volume-control{height:64px;padding-block:2px}
}
@media(min-width:701px) and (min-height:621px) and (max-height:920px) and (hover:hover) and (pointer:fine){
 :root[data-desktop-ui] main{max-width:610px;padding-top:10px}
 :root[data-desktop-ui] .identity{margin-bottom:6px}
 :root[data-desktop-ui] h1{font-size:54px;margin-bottom:8px}
 :root[data-desktop-ui] .bio{font-size:11px;line-height:1.5;margin-bottom:6px}
 :root[data-desktop-ui] .socials a{width:30px;height:30px}
 :root[data-desktop-ui] .tab{padding:8px 5px}
 :root[data-desktop-ui] .catalog-body{padding:8px}
 :root[data-desktop-ui] .search-field{height:36px}
 :root[data-desktop-ui] .filter-button{min-height:36px}
 :root[data-desktop-ui] .tracks{gap:6px;min-height:234px}
 :root[data-desktop-ui] .track{min-height:42px;padding:5px 7px}
 :root[data-desktop-ui] .cover{width:30px;height:30px}
 :root[data-desktop-ui] .pagination{padding-top:8px}
 :root[data-desktop-ui] .page{height:28px;width:30px}
 :root[data-desktop-ui] .volume-control{height:60px;margin-top:6px;padding:4px 10px;grid-template-columns:24px minmax(0,1fr) 120px;gap:7px}
 :root[data-desktop-ui] .fader-rail{height:50px}
 :root[data-desktop-ui] .fader-side{gap:4px}
 :root[data-desktop-ui] .fader-readout{height:26px}
 :root[data-desktop-ui] .fader-modes{height:20px}
 :root[data-desktop-ui] .fader-cap{top:24px;height:25px}
 :root[data-desktop-ui] .track.expanded .wave-seek,:root[data-desktop-ui] .track.expanded .wave-seek canvas{height:24px}
 :root[data-desktop-ui] .track.expanded .wave-times{line-height:11px;margin-bottom:3px}
 :root[data-desktop-ui] .track.expanded .track-title{margin-bottom:3px}
}
@media(min-width:701px) and (max-height:760px) and (hover:hover) and (pointer:fine){
 :root[data-desktop-ui] main{padding-top:6px}
 :root[data-desktop-ui] h1{font-size:clamp(32px,6.6svh,48px);margin-bottom:6px}
 :root[data-desktop-ui] .bio{font-size:10px;margin-bottom:5px}
 :root[data-desktop-ui] .identity{margin-bottom:5px}
 :root[data-desktop-ui] .catalog-body{padding:6px}
 :root[data-desktop-ui] .track{min-height:40px;padding:4px 7px}
 :root[data-desktop-ui] .cover{width:28px;height:28px}
 :root[data-desktop-ui] .track-title{font-size:12px;margin-bottom:3px}
 :root[data-desktop-ui] .track-meta{font-size:9px}
 :root[data-desktop-ui] .volume-control{height:54px;padding-block:1px}
 :root[data-desktop-ui] .legal-footer{bottom:8px}
 :root[data-desktop-ui] .legal-links button{font-size:7px;line-height:1.45;padding-block:2px}
 :root[data-desktop-ui] .legal-rights{font-size:6.5px;line-height:1.45}
}
@media(max-width:700px){main{min-height:0}.legal-footer{max-width:480px;width:calc(100% - 28px);margin:0 auto;padding-bottom:20px}}
@media(min-width:701px) and (max-height:650px) and (hover:hover) and (pointer:fine){:root[data-desktop-ui] main{zoom:.96}}
@media(min-width:701px) and (max-height:550px) and (hover:hover) and (pointer:fine){:root[data-desktop-ui] main{zoom:.84}}
@media(min-width:701px) and (max-height:480px) and (hover:hover) and (pointer:fine){:root[data-desktop-ui] main{zoom:.72}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Keep weak devices readable without continuous title paint or costly layered blur. */
:root[data-low-power] #name{animation:none}
:root[data-low-power] .catalog,:root[data-low-power] .volume-control,:root[data-low-power] dialog{backdrop-filter:none;-webkit-backdrop-filter:none;background-color:rgba(15,15,16,.9)}