.chart-filters{z-index:5;border-bottom:1px solid var(--color-line);background-color:var(--color-bg);flex-direction:column;gap:.625rem;margin-inline:-1rem;padding:.625rem 1rem .75rem;display:flex;position:sticky;top:0}@media (min-width:768px){.chart-filters{flex-flow:wrap;justify-content:space-between;align-items:center;margin-inline:-2rem;padding-inline:2rem}}.chart-views{scrollbar-width:none;gap:.25rem;margin-inline:-.25rem;padding-inline:.25rem;display:flex;overflow-x:auto}.chart-views::-webkit-scrollbar{display:none}.chart-view{min-height:44px;color:var(--color-muted);white-space:nowrap;border-radius:999px;flex-shrink:0;align-items:center;padding:0 .75rem;font-size:.9375rem;font-weight:500;display:inline-flex}@media (hover:hover){.chart-view:hover{color:var(--color-fg)}}.chart-view[aria-current=page]{color:var(--color-fg);box-shadow:inset 0 -2px 0 var(--color-accent);border-radius:0}.chart-filter-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.chart-period{align-items:center;padding-inline:1rem;display:inline-flex}.chart-period[aria-current=page]{background:var(--color-fg);color:var(--color-bg)}.chart-chip-rows{flex-direction:column;gap:.375rem;min-width:0;display:flex}.chart-chips{scrollbar-width:none;gap:.375rem;margin-inline:-.25rem;padding:.125rem 2rem .125rem .25rem;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2rem),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 2rem),#0000)}.chart-chips::-webkit-scrollbar{display:none}.chart-chip{border:1px solid var(--color-line);background:var(--color-surface);min-height:44px;color:var(--color-subtle);white-space:nowrap;border-radius:999px;flex-shrink:0;align-items:center;padding:0 .875rem;font-size:.8125rem;font-weight:500;display:inline-flex}@media (hover:hover){.chart-chip:hover{border-color:var(--color-muted)}}.chart-chip[aria-current=page]{border-color:var(--color-accent);color:var(--color-fg);background:#e6cfae24}.chart-meta{color:var(--color-muted);flex-wrap:wrap;gap:.375rem;font-size:.8125rem;display:flex}.chart-actions{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.chart-clear{width:fit-content;min-height:44px;color:var(--color-accent);text-underline-offset:4px;align-items:center;text-decoration:underline;display:inline-flex}.chart-hero{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;display:grid}.chart-hero-card{background:linear-gradient(160deg, var(--art-tint,var(--color-surface-raised)) 0%, var(--color-surface) 85%);border-radius:1rem;flex-direction:column;gap:.625rem;min-width:0;padding:.625rem;display:flex;position:relative}.chart-hero-card:first-child{flex-direction:row;grid-column:1/-1;align-items:center}.chart-hero-card:first-child .chart-hero-art{flex-shrink:0;width:42%}.chart-hero-card[data-current]{outline:2px solid var(--art-accent,var(--color-accent));outline-offset:-2px}.chart-hero-art{aspect-ratio:1;border-radius:.625rem;position:relative;overflow:hidden}.chart-hero-rank{letter-spacing:-.03em;color:var(--color-fg);font-size:2.5rem;font-weight:500;line-height:1}.chart-hero-play{background:var(--art-accent,var(--color-accent));width:2.75rem;height:2.75rem;color:var(--art-on-accent,var(--color-bg));border-radius:50%;place-items:center;transition:transform .16s,opacity .16s;display:grid;position:absolute;bottom:.5rem;right:.5rem;box-shadow:0 4px 14px #0006}@media (hover:hover){.chart-hero-play:hover{transform:scale(1.06)}.chart-hero-card:not(:hover,:focus-within,[data-current]) .chart-hero-play{opacity:0}}.chart-hero-text{flex-direction:column;gap:.25rem;min-width:0;display:flex}.chart-hero-title{text-overflow:ellipsis;white-space:nowrap;font-size:1rem;font-weight:500;line-height:1.375rem;overflow:hidden}.chart-hero-card:first-child .chart-hero-title{white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.125rem;display:-webkit-box}@media (hover:hover){.chart-hero-title:hover,.chart-hero-artist a:hover{text-decoration:underline}}.chart-hero-artist{min-width:0;color:var(--color-subtle);align-items:center;gap:.375rem;font-size:.8125rem;display:flex}.chart-hero-artist a{text-overflow:ellipsis;white-space:nowrap;min-height:1.5rem;line-height:1.5rem;overflow:hidden}.chart-hero-meta{color:var(--color-muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.75rem;display:flex}@media (min-width:768px){.chart-hero{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.chart-hero-card,.chart-hero-card:first-child{flex-direction:row;grid-column:auto;align-items:center;padding:.75rem}.chart-hero-art,.chart-hero-card:first-child .chart-hero-art{flex-shrink:0;width:44%;max-width:9.5rem}.chart-hero-rank{font-size:3rem}.chart-hero-card .chart-hero-title{white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}.chart-chip-rows{flex-flow:wrap;column-gap:1rem}}@media (prefers-reduced-motion:reduce){.chart-hero-play{transition:none}@media (hover:hover){.chart-hero-play:hover{transform:none}}}.chart-ranked{flex-direction:column;display:flex}.chart-ranked-row{border-radius:.5rem;grid-template-columns:2rem 2.25rem 3rem minmax(0,1fr) auto;align-items:center;gap:.625rem;min-height:64px;padding:.375rem .5rem;display:grid;position:relative}html:not([data-input=touch]) .chart-ranked-row:has(:focus-visible){background:#ffffff0a}@media (hover:hover){.chart-ranked-row:hover{background:#ffffff0a}}.chart-ranked-rank{text-align:center;color:var(--color-subtle);font-variant-numeric:tabular-nums;font-size:1rem;font-weight:500}.chart-ranked-row[data-top] .chart-ranked-rank{color:var(--color-accent);font-size:1.375rem;font-weight:500}.chart-ranked-move{justify-content:center;display:inline-flex}.chart-ranked-art{border-radius:.375rem;width:3rem;height:3rem}.chart-ranked-art.portrait{border-radius:50%}.chart-ranked-text{flex-direction:column;min-width:0;display:flex}.chart-ranked-name,.chart-ranked-sub{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chart-ranked-name{font-size:.9375rem;font-weight:500;line-height:1.5rem}.chart-ranked-name:after{content:"";border-radius:inherit;position:absolute;inset:0}@media (hover:hover){.chart-ranked-name:hover,a.chart-ranked-sub:hover{text-decoration:underline}}.chart-ranked-sub{color:var(--color-muted);font-size:.8125rem;line-height:1.5rem}a.chart-ranked-sub,.chart-ranked-move [title]{z-index:1;width:fit-content;max-width:100%;position:relative}.chart-ranked-plays{color:var(--color-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}@media (max-width:389.98px){.chart-ranked-row{grid-template-columns:1.75rem 2rem 2.75rem minmax(0,1fr)}.chart-ranked-art{width:2.75rem;height:2.75rem}.chart-ranked-plays{grid-column:4;font-size:.6875rem}}
