:root{color-scheme:light;--paper:#f8f6ee;--ink:#211e32;--muted:#575165;--line:#ded9e4;--purple:#6943b9;--orange:#a84120;--green:#20684d;--accent:var(--purple);--hero:#d9caff;--label:#fbdf70}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,sans-serif}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid #512a9b;outline-offset:4px}.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}.skip{position:absolute;top:8px;left:8px;z-index:2;background:white;padding:12px;transform:translateY(-150%)}.skip:focus{transform:none}.mast{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:850;letter-spacing:-.05em;text-decoration:none;min-height:44px}.edition,footer{font-size:.75rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:400px;gap:4px;padding:4px;border:1px solid var(--line);border-radius:18px;background:#eeeaf1;margin-bottom:20px}.tabs button{border:0;background:none;border-radius:13px;min-height:44px;font-weight:740;display:flex;align-items:center;justify-content:center;gap:7px;padding:4px}.tabs button[aria-selected=true]{background:#fff;box-shadow:0 1px 4px #211e3220}.dot{display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:var(--purple)}.dot.gabriel{background:var(--orange)}.dot.ruping{background:var(--green)}
[data-profile=gabriel]{--accent:var(--orange);--hero:#ffd8c2;--label:#d5ccff}[data-profile=ruping]{--accent:var(--green);--hero:#cde8b9;--label:#ffb9a5}.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;background:var(--hero);padding:clamp(26px,5vw,62px);min-height:310px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.65fr);align-items:center;gap:24px}.hero-copy{z-index:1}.eyebrow{display:block;font-size:.75rem;font-weight:830;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}h1,h2,h3,p{margin:0}h1{font-size:clamp(2.75rem,7vw,6.1rem);line-height:.98;letter-spacing:-.04em;max-width:12ch;margin:.14em 0 .23em;font-weight:800}h2{font-size:clamp(1.45rem,3vw,2.15rem);line-height:1.1;letter-spacing:-.03em}h3{font-size:1.04rem;line-height:1.25}.hero p{max-width:45ch;color:#403550;font-size:clamp(1rem,2vw,1.14rem)}.art{position:relative;display:grid;place-items:center;min-height:230px}.vinyl{width:min(90%,300px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transform:rotate(-12deg);background:repeating-radial-gradient(circle at center,#27223d 0 3px,#39324e 4px 5px,#27223d 6px 8px);box-shadow:12px 16px 0 #2e24472b}.vinyl::before{content:"";width:39%;aspect-ratio:1;border-radius:50%;background:var(--label);box-shadow:0 0 0 3px #211e32}.vinyl::after{content:"";position:absolute;width:8%;aspect-ratio:1;border-radius:50%;background:#27223d}.spark{position:absolute;font-size:clamp(25px,5vw,64px);line-height:1;color:#332550}.spark:first-child{top:4%;right:2%}.spark:last-child{bottom:0;left:0}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 30px}.metric,.card{border:1px solid var(--line);border-radius:22px;background:#fffdf8}.metric{padding:16px 20px}.metric strong{display:block;font-size:clamp(1.55rem,4vw,2.65rem);line-height:1.05;letter-spacing:-.055em;font-variant-numeric:tabular-nums}.metric span,.hint,.artist,.note{font-size:.875rem;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}.card{min-width:0;padding:clamp(17px,3vw,28px)}.card.wide{grid-column:1/-1}.card h2{margin:5px 0 8px}.card .hint{margin-bottom:14px}.section-head{margin-top:30px}.section-head .eyebrow{margin-bottom:5px}.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.pill{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 14px;border:1px solid #cfc6dc;border-radius:99px;font-size:.88rem;font-weight:730;text-decoration:none;background:#fffdf8}.pill.primary{background:#27213a;color:#fff;border-color:#27213a}.pill:hover,.track:hover .song{text-decoration:underline;text-underline-offset:3px}.rankings,.barlist{list-style:none;padding:0;margin:0}.rankings li{border-top:1px solid #ebe7ed}.track,.artist-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 0;min-height:49px;text-decoration:none}.rank,.count{font-size:.83rem;color:var(--muted);font-variant-numeric:tabular-nums}.count{font-weight:780;white-space:nowrap}.song{display:block;font-weight:750;line-height:1.25;overflow-wrap:anywhere}.artist{display:block;overflow-wrap:anywhere}.duo{display:grid;grid-template-columns:2.1em 2.1em;gap:7px;text-align:right}.dual-key{font-size:.8rem;display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);margin-bottom:10px}.dual-key span{display:inline-flex;align-items:center;gap:5px}.duo span:first-child{color:var(--orange)}.duo span:last-child{color:var(--green)}
details{border-top:1px solid var(--line)}summary{min-height:44px;padding:11px 0;cursor:pointer;font-weight:710;color:var(--accent)}.barlist li{padding:6px 0}.barline{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;margin-bottom:4px}.meter{height:7px;background:#ede9f1;border-radius:99px;overflow:hidden;margin-bottom:4px}.meter i{display:block;background:var(--accent);height:100%;border-radius:inherit}.meter.r i{background:var(--green)}.meter.g i{background:var(--orange)}.months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:18px}.month{display:grid;grid-template-rows:auto 75px auto;gap:4px;text-align:center;align-items:end;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}.month strong{font-weight:750}.column{display:flex;align-items:end;justify-content:center;background:#f0ebf1;border-radius:8px;height:100%;overflow:hidden}.column i{width:100%;display:block;background:var(--accent);border-radius:8px 8px 0 0}.lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.lane{padding:16px;border-radius:15px;background:#eee6ff}.lane:nth-child(2){background:#ffe4d5}.lane:nth-child(3){background:#e5efc9}.lane:nth-child(4){background:#fff0b8}.lane p{font-size:.88rem;color:#40384d;margin-top:5px}.playlist-card{background:#29223e;color:#fffdf8}.playlist-card .eyebrow,.playlist-card .hint{color:#e0d4f1}.playlist-card .pill.primary{background:#f7dc72;border-color:#f7dc72;color:#211e32}.playlist-card .pill{background:#fff7ec;color:#211e32}.method{margin:18px 0;color:var(--muted);font-size:.88rem}.method p+p{margin-top:8px}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:18px 0 34px;margin-top:26px}
@media(min-width:850px){.months{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media(max-width:620px){.wrap{width:calc(100% - 28px)}.mast{min-height:65px}.edition{font-size:.63rem;letter-spacing:.04em}.hero{grid-template-columns:1fr minmax(54px,.28fr);padding:22px 18px;gap:7px;min-height:235px;border-radius:22px}.hero h1{font-size:clamp(2.48rem,10.8vw,4rem)}.hero p{font-size:.92rem}.art{min-height:110px}.vinyl{width:100%;box-shadow:4px 5px 0 #2e24472b}.spark{font-size:24px}.metrics{gap:6px;margin:10px 0 22px}.metric{padding:12px 8px;border-radius:14px}.metric span{font-size:.72rem;line-height:1.25;display:block;margin-top:3px}.grid{grid-template-columns:1fr;gap:10px;margin:10px 0}.card{border-radius:17px}.lanes{gap:7px}.lane{padding:11px}.lane p{font-size:.82rem}.brand{font-size:18px}}
@media(max-width:350px){.lanes{grid-template-columns:1fr}.edition{display:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.method a{display:inline-block;min-height:44px;padding-block:10px}
@media (max-width:620px) {
  .hero { grid-template-columns:minmax(0,1fr) minmax(54px,.28fr); }
  .hero h1 { overflow-wrap:anywhere; }
  .metrics { grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr)); }
}
.track,.artist-row { grid-template-columns:2.5ch minmax(0,1fr) auto; }
@media (max-width:620px) {
  .months { grid-template-columns:repeat(auto-fit,minmax(3rem,1fr)); }
}
.tabs button:hover { background:#e1dae9; }
.tabs button[aria-selected=true]:hover { background:#fff; }
.tabs button:active,.tabs button[aria-selected=true]:active,summary:active { background:#ded6e9; }
summary:hover { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:620px) {
  .hero { grid-template-columns:minmax(0,1fr); }
  .hero h1 { max-width:none; }
  .hero p { padding-right:68px; }
  .art { position:absolute; right:18px; bottom:21px; width:62px; min-height:88px; }
}