.shelf-note{margin:6px 0 0;color:#a4a4ab;font-size:13px;font-weight:400}.charts-page{padding:38px 0 70px}.charts-heading{max-width:760px;margin-bottom:32px}.charts-heading h1{font-size:clamp(32px,4vw,58px);letter-spacing:-2px;line-height:1.08;margin:14px 0}.charts-heading p{color:#aaaeb3;line-height:1.6}.charts-platforms,.chart-groups{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.charts-platforms button,.chart-groups button{border:1px solid #ffffff20;padding:11px 20px;border-radius:24px;background:#ffffff05;color:#b9bdc3}.charts-platforms button[aria-pressed=true]{background:var(--gold);color:#171717;border-color:var(--gold)}.chart-groups button[aria-pressed=true]{background:#ffffff14;color:white}.chart-context{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff13;padding-top:25px}.chart-context span{display:block;font-size:12px;color:#9da3ac;margin-top:6px}.chart-context a,.chart-empty a{color:var(--gold);font-size:13px}.chart-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 20px}.chart-card{position:relative;min-width:0}.chart-poster{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:12px;background:linear-gradient(145deg,#302d24,#17191c);display:grid;place-items:center}.chart-poster img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.chart-rank{position:absolute;left:12px;bottom:4px;z-index:1;font-size:76px;font-weight:900;line-height:1;text-shadow:0 2px 20px #000;color:white;letter-spacing:-6px}.chart-monogram{font-size:48px;color:#d9bd7d66}.chart-copy h2{font-size:17px;margin:14px 0 5px;line-height:1.3}.chart-copy p{font-size:12px;min-height:18px;color:#9fa4ac;margin:6px 0 14px}.chart-action button{font-size:12px;text-align:left;color:var(--gold);display:flex;align-items:center;gap:6px;padding:8px 0}.chart-action svg{width:14px;height:14px}.chart-note{color:#959ba3;font-size:12px;line-height:1.7;margin-top:28px}.chart-empty{max-width:640px;padding:50px 0;line-height:1.7}.chart-empty h2{font-size:27px}.chart-empty p{color:#a8abb1}.chart-notice{color:var(--gold);font-size:13px}@media(max-width:1000px){.chart-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-context{align-items:start}.charts-heading h1{letter-spacing:-1px}}

.chart-poster img.chart-source-art{object-fit:contain;padding:12px;box-sizing:border-box}

button.chart-poster{width:100%;padding:0;border:0;color:inherit;cursor:pointer}
.chart-copy h2 button{font:inherit;text-align:left;padding:0;color:inherit}
.chart-poster:focus-visible,.chart-copy h2 button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.chart-details{width:min(850px,calc(100vw - 32px));max-height:85dvh;padding:38px;border:1px solid #ffffff20;border-radius:18px;background:#191b1e;color:#f6f6f6;box-sizing:border-box;overflow:auto}
.chart-details::backdrop{background:#050605d9}
.chart-detail-close{position:absolute;right:12px;top:10px;font-size:28px;width:36px;height:36px;border-radius:50%;background:#ffffff0b;color:white}
.chart-detail-layout{display:grid;grid-template-columns:190px 1fr;gap:30px;align-items:start}
.chart-detail-poster{width:100%;border-radius:9px;max-height:310px;object-fit:contain}
.chart-detail-rank{color:var(--gold);font-size:12px;letter-spacing:1px}
.chart-details h2{font-size:30px;line-height:1.15;margin:12px 0}
.chart-detail-meta,.chart-detail-credit{color:#aaaeb5;font-size:13px;line-height:1.6}
.chart-detail-description{line-height:1.75;font-size:15px;white-space:pre-line}
.chart-detail-label{display:block;color:#999fa8;font-size:12px;margin-bottom:5px}
.chart-details p{line-height:1.6}.chart-detail-actions{margin:24px 0 16px}
@media(max-width:600px){.chart-details{padding:36px 22px 24px}.chart-detail-layout{grid-template-columns:1fr;gap:20px}.chart-detail-poster{width:110px;max-height:165px}.chart-details h2{font-size:25px}}