.music-chart-page {
    --music-ink: #201637;
    --music-muted: #655b77;
    --music-violet: #6433c5;
    --music-gold: #ffcf67;
    color: var(--music-ink);
    background: linear-gradient(180deg, #f0e7ff 0, #faf8ff 30rem, #faf8ff 100%);
}

.music-shell {
    width: min(100% - 2.5rem, 70rem);
    margin-inline: auto;
}

.music-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse at 86% 18%, #7434bd 0%, transparent 49%),
        radial-gradient(ellipse at 0% 96%, #a82666 0%, transparent 46%),
        linear-gradient(125deg, #22123b, #30154f 58%, #48216c);
}

.music-hero::after {
    position: absolute;
    inset: auto 0 0;
    height: 0.25rem;
    background: linear-gradient(90deg, #fa75ab, #ffc35b 44%, #ac8aff 74%, #8be4e1);
    content: '';
}

.music-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    padding-block: clamp(2.5rem, 5.5vw, 4rem);
}

.music-kicker,
.music-section-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.music-kicker {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #ffdd98;
}

.music-kicker span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--music-gold);
    box-shadow: 0 0 0 0.25rem #ffcf6730;
}

.music-intro h1 {
    max-width: 15ch;
    margin: 0.85rem 0 0;
    font-size: clamp(2.7rem, 5.4vw, 4.5rem);
    font-weight: 800;
    line-height: 0.99;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.music-intro-copy {
    max-width: 32ch;
    margin: 1.1rem 0 0;
    color: #eee2fb;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
}

.music-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    margin-top: 1.25rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: var(--music-gold);
    color: #331d45;
    font-weight: 700;
}

.music-hero-link:hover { background: #ffe198; }

.music-spotlight {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: start;
    align-items: center;
    min-width: 0;
    min-height: clamp(13rem, 27vw, 19rem);
}

.music-record {
    position: absolute;
    z-index: -1;
    inset-inline-end: -6%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 89%;
    max-width: 22rem;
    aspect-ratio: 1;
    border: 1px solid #d2a8fda8;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, #201338 0 4px, #49286f 5px, #271640 7px),
        #26143d;
    box-shadow: 0 1.5rem 3rem #13061c60;
    transform: translateY(-50%) rotate(13deg);
}

.music-record span {
    display: grid;
    place-content: center;
    width: 35%;
    aspect-ratio: 1;
    border: 0.25rem solid #251437;
    border-radius: 50%;
    background: linear-gradient(150deg, #ffcf67, #f5879d 75%);
    color: #3b154f;
    font-size: clamp(0.65rem, 1.3vw, 0.95rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.15;
    text-align: center;
}

.music-leader {
    width: min(88%, 26rem);
    overflow: hidden;
    border: 1px solid #ffffff35;
    border-radius: 1.25rem;
    background: #241637;
    box-shadow: 0 1.5rem 3rem #15062265;
}

.music-leader-art,
.music-art {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #cc71e5, #854bd6 56%, #4c37a0);
    color: white;
    font-weight: 700;
}

.music-leader-art {
    aspect-ratio: 16 / 8;
    font-size: 4.5rem;
}

.music-leader-art img,
.music-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-leader-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.9rem 1rem 1rem;
}

.music-leader-label {
    color: #ffdc96;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.music-leader-label span {
    display: inline-block;
    margin-inline-end: 0.3rem;
    padding: 0.12rem 0.35rem;
    border-radius: 0.35rem;
    background: #ffcf6733;
}

.music-leader h2 {
    margin-top: 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}

.music-leader h2 + p { color: #d4c1e7; }

.music-rankings {
    padding-block: 2.25rem 4rem;
    scroll-margin-top: 6rem;
}

.music-rankings-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.1rem;
    margin-bottom: 1.2rem;
}

.music-section-kicker { color: #824baf; }

.music-rankings-header h2 {
    margin-top: 0.15rem;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.music-edition-date { margin-top: 0.45rem; color: var(--music-muted); }

.music-editions label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--music-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.music-edition-controls { display: flex; gap: 0.4rem; }

.music-edition-controls select,
.music-edition-controls button {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid #dfd4f0;
    border-radius: 0.7rem;
    background: #fff;
    font-size: 0.9rem;
}

.music-edition-controls button {
    border-color: transparent;
    background: var(--music-violet);
    color: #fff;
    font-weight: 700;
}

.music-edition-controls button:hover { background: #5025a3; }

.music-list,
.music-empty {
    overflow: hidden;
    border: 1px solid #e6dcf3;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem #3924620b;
}

.music-list-header,
.music-row {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr) 4.75rem 2.75rem;
    align-items: center;
    gap: clamp(0.5rem, 1.6vw, 1rem);
    padding-inline: clamp(0.75rem, 2.5vw, 1.5rem);
}

.music-list-header {
    padding-block: 0.8rem;
    background: #f5efff;
    color: #665078;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.music-list ol { margin: 0; padding: 0; list-style: none; }
.music-row { min-height: 5rem; padding-block: 0.75rem; }
.music-row + .music-row { border-top: 1px solid #f0ebf7; }
.music-row:hover { background: #fcfaff; }
.music-row[value='1'] { background: #fff5f9; }

.music-rank {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.7rem;
    background: #f1eafb;
    color: #5d4081;
    font-size: 1.03rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.music-row[value='1'] .music-rank { background: #f9d1e2; color: #8b1950; }
.music-row[value='2'] .music-rank { background: #e3dbfc; color: #49268b; }
.music-row[value='3'] .music-rank { background: #ffe6b7; color: #784408; }

.music-song-cell { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }

.music-art {
    flex: 0 0 auto;
    width: 3.2rem;
    aspect-ratio: 1;
    border-radius: 0.65rem;
    font-size: 1.35rem;
}

.music-song { min-width: 0; overflow-wrap: anywhere; }
.music-song h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.3; }

.music-song h3 + p,
.music-leader h2 + p {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.35;
}

.music-song h3 + p { color: var(--music-muted); }

.music-move {
    justify-self: start;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: #6b617b;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.music-move-up { background: #def6ed; color: #17634e; }
.music-move-down { background: #fce6eb; color: #a33557; }

.music-play {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #e4d8f5;
    border-radius: 50%;
    background: #f6efff;
    color: #592ca5;
    font-size: 0.88rem;
}

.music-play:hover { background: #ece0ff; }
.music-play-featured { border-color: transparent; background: var(--music-gold); color: #3b184d; }
.music-play-featured:hover { background: #ffe198; }

.music-chart-page :is(a, button, select):focus-visible {
    outline: 2px solid #8d55d6;
    outline-offset: 3px;
}

.music-hero :is(a, button):focus-visible { outline-color: #fff; }

.music-empty { padding: 2.5rem 1rem; text-align: center; }

.music-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.65rem;
    border-radius: 1.15rem;
    background: #f0e3ff;
    color: var(--music-violet);
    font-size: 2rem;
}

.music-empty h3 { font-size: 1.2rem; font-weight: 700; }
.music-empty p { margin-top: 0.3rem; color: var(--music-muted); }

@media (max-width: 43rem) {
    .music-shell { width: calc(100% - 1.5rem); }
    .music-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2.5rem; }
    .music-intro h1 { max-width: 14ch; }
    .music-spotlight { min-height: 9rem; }
    .music-record { inset-inline-end: -1%; width: 52%; max-width: 13rem; }
    .music-leader { width: min(88%, 23rem); }
    .music-leader-art { aspect-ratio: 16 / 7; }
    .music-rankings { padding-top: 1.7rem; }
    .music-list-header,
    .music-row { grid-template-columns: 2.25rem minmax(0, 1fr) 2.65rem 2.75rem; gap: 0.45rem; }
    .music-list-header { font-size: 0.59rem; }
    .music-rank { width: 2.1rem; height: 2.1rem; font-size: 0.9rem; }
    .music-song-cell { gap: 0.5rem; }
    .music-art { width: 2.35rem; border-radius: 0.5rem; }
    .music-move { padding-inline: 0.3rem; font-size: 0.74rem; }
}