.repertoire-section{margin-top:var(--section-gap);padding:0 var(--content-gutter);color:#E8E8E8;font-family:Onest,Arial,sans-serif}
.repertoire-section h2{margin:0;text-align:left;font:400 var(--section-title-size)/1.2 var(--display-font)}
.repertoire-tabs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;border-bottom:1px solid #ffffff18}
.repertoire-tabs button{position:relative;min-height:42px;padding:0 0 12px;border:0;background:transparent;color:#77717b;font:400 14px/20px Onest,Arial,sans-serif;white-space:nowrap}
.repertoire-tabs button[aria-selected=true]{color:#E5F36B}
.repertoire-tabs button[aria-selected=true]::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;border-radius:2px;background:#E5F36B}
.repertoire-list{height:294px;overflow-y:auto;overscroll-behavior-y:contain;padding:0 12px 0 0;scrollbar-width:thin;scrollbar-color:#77717b #2B2B2B}
.repertoire-list[hidden]{display:none}
.repertoire-list::-webkit-scrollbar{width:4px}
.repertoire-list::-webkit-scrollbar-track{background:#2B2B2B;border-radius:99px}
.repertoire-list::-webkit-scrollbar-thumb{background:#77717b;border-radius:99px}
.repertoire-list ul{list-style:none;padding:0;margin:0}
.repertoire-track{border-bottom:1px solid #ffffff0c}
.repertoire-track-link{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;min-height:65px;padding:10px 0 11px;text-decoration:none;color:inherit}
.repertoire-art{display:block;width:42px;height:42px;border-radius:5px;overflow:hidden;background:#2B2B2B;color:#88818f}
.repertoire-art img{display:block;width:42px;height:42px;object-fit:cover}
.repertoire-art-fallback{display:grid;place-items:center;font-size:22px}
.repertoire-title{margin:0;color:#f5f5f5;font:400 14px/20px Onest,Arial,sans-serif;overflow-wrap:anywhere}
.repertoire-artist{display:block;margin-top:2px;color:#a7a7ad;font:400 12px/18px Onest,Arial,sans-serif}
.repertoire-pdf{margin-top:28px}
.repertoire-section :focus-visible{outline:2px solid #E5F36B;outline-offset:3px}
@media(max-width:350px){.repertoire-tabs{gap:12px}.repertoire-tabs button{font-size:12px}}

.repertoire-description{margin:12px 0 24px;color:#D2D2D2;font:400 14px/20px Onest,Arial,sans-serif;text-align:left}

/* A permanently visible scrollbar, including on systems hiding native scrollbars. */
.repertoire-lists{position:relative}
.repertoire-lists.has-scrollbar .repertoire-list{padding-right:20px;scrollbar-width:none}
.repertoire-lists.has-scrollbar .repertoire-list::-webkit-scrollbar{display:none}
.repertoire-scrollbar{position:absolute;right:0;top:0;bottom:0;width:12px;cursor:pointer;touch-action:none}
.repertoire-scrollbar[hidden]{display:none}
.repertoire-scrollbar::before{content:'';position:absolute;top:0;bottom:0;left:5px;width:2px;border-radius:8px;background:rgba(255,255,255,.10)}
.repertoire-scroll-thumb{position:absolute;top:0;left:4.5px;width:3px;min-height:40px;border-radius:8px;background:#5F5F66;cursor:grab}
.repertoire-scrollbar:active .repertoire-scroll-thumb{cursor:grabbing}

/* Repertoire and player on the dark section. */
.repertoire-section{padding:0 var(--content-gutter);background:transparent;color:#E8E8E8}
.repertoire-section .repertoire-description{color:#D2D2D2;line-height:20px;margin:14px 0 26px}
.repertoire-player{padding:12px 14px 14px;border-radius:14px;background:transparent;color:#E8E8E8;text-align:left}
.repertoire-player .repertoire-tabs{gap:12px;margin-bottom:12px}
.repertoire-player .repertoire-tabs button{color:#aaa4ae}
.repertoire-player .repertoire-tabs button[aria-selected=true]{color:#E5F36B}
