:root {
  --ink: #0a0d12;
  --paper: #f4f2ea;
  --white: #fff;
  --blue: #1647ff;
  --cyan: #68e7ff;
  --lime: #d8ff3e;
  --line: rgba(10,13,18,.18);
  --display: "League Spartan", Impact, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); }
a { color: inherit; }
button, input { font: inherit; }
.top-stripe { height: 7px; background: linear-gradient(90deg,var(--blue) 0 58%,var(--cyan) 58% 79%,var(--lime) 79%); }
.site-header { min-height: 76px; padding: 0 clamp(20px,5vw,72px); display:flex; align-items:center; gap:42px; border-bottom:1px solid rgba(255,255,255,.18); position:absolute; top:7px; width:100%; z-index:4; color:#fff; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand-mark { width:36px; aspect-ratio:1; display:grid; place-items:center; background:var(--lime); color:var(--ink); font:800 24px/1 var(--display); transform:rotate(-4deg); }
.brand-name { font:800 24px/1 var(--display); letter-spacing:.08em; }
nav { display:flex; gap:28px; margin-left:auto; }
nav a { text-decoration:none; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }
nav a:hover { color:var(--lime); }
.edition-pill { padding:8px 12px; border:1px solid rgba(255,255,255,.5); border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.13em; }
.hero { min-height:720px; padding:155px clamp(24px,7vw,108px) 80px; background:radial-gradient(circle at 78% 34%,#3863ff 0 2%,transparent 28%),linear-gradient(128deg,#071027 0%,#112165 52%,#1647ff 100%); color:#fff; position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(to right,black,transparent 75%); }
.hero-copy { max-width:700px; z-index:1; }
.eyebrow { margin:0 0 18px; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--lime); }
.eyebrow.dark { color:var(--blue); }
.hero h1 { margin:0; font:800 clamp(72px,10.2vw,154px)/.75 var(--display); letter-spacing:-.055em; text-transform:uppercase; }
.hero h1 span { color:transparent; -webkit-text-stroke:2px #fff; }
.hero h1 strong { color:var(--lime); }
.intro { max-width:530px; margin:34px 0 28px; font-size:clamp(18px,2vw,24px); line-height:1.4; }
.hero-cta { display:inline-flex; align-items:center; gap:26px; padding:15px 20px; background:#fff; color:var(--ink); text-decoration:none; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.hero-cta span { color:var(--blue); font-size:20px; }
.hero-disc { width:min(38vw,470px); aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle,#111 0 3px,#1f2229 4px 7px); box-shadow:0 48px 100px rgba(0,0,0,.45); justify-self:center; position:relative; transform:rotate(-7deg); }
.hero-disc::after { content:""; position:absolute; inset:9%; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--blue)); box-shadow:inset 0 0 0 5px rgba(255,255,255,.18); }
.disc-label { position:absolute; inset:34%; z-index:2; border-radius:50%; background:var(--lime); color:var(--ink); display:grid; place-content:center; text-align:center; font:800 24px/.8 var(--display); box-shadow:0 0 0 8px #101319; }
.disc-label span { letter-spacing:.1em; font-size:13px; }
.disc-label b { font-size:42px; }
.hero-note { position:absolute; right:clamp(20px,4vw,64px); bottom:32px; padding-left:15px; border-left:3px solid var(--lime); font:700 10px/1.5 var(--body); letter-spacing:.15em; }
.hero-note span { color:var(--cyan); }
.spotlight { display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:center; padding:40px clamp(24px,7vw,108px); background:var(--lime); border-bottom:1px solid var(--ink); }
.spotlight-rank { font:800 clamp(70px,9vw,130px)/.7 var(--display); letter-spacing:-.08em; }
.spotlight h2 { margin:0 0 5px; font:800 clamp(28px,4vw,54px)/.95 var(--display); text-transform:uppercase; }
.spotlight p { margin:0; font-weight:600; }
.spotlight .eyebrow { color:var(--ink); opacity:.66; margin-bottom:10px; }
.spotlight-stats { display:flex; gap:32px; }
.stat { min-width:74px; }
.stat small { display:block; margin-bottom:5px; font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; opacity:.6; }
.stat b { font:800 28px/1 var(--display); }
.chart-section { padding:90px clamp(18px,7vw,108px) 110px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:42px; }
.section-heading h2 { margin:0; font:800 clamp(48px,7.8vw,112px)/.8 var(--display); letter-spacing:-.045em; }
.section-heading>p { max-width:390px; margin:0; font-size:15px; line-height:1.6; }
.chart-tools { display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-top:3px solid var(--ink); border-bottom:1px solid var(--ink); }
.search-box { flex:1; max-width:520px; display:flex; gap:12px; align-items:center; }
.search-box svg { width:21px; fill:none; stroke:currentColor; stroke-width:2; }
.search-box input { width:100%; border:0; outline:0; background:transparent; font-size:16px; }
.view-toggle { display:flex; gap:7px; }
.view-toggle button { border:1px solid var(--ink); background:transparent; padding:9px 14px; cursor:pointer; font-weight:700; font-size:12px; }
.view-toggle button.active { background:var(--ink); color:#fff; }
.chart-head, .chart-row { display:grid; grid-template-columns:90px minmax(0,1fr) 92px 92px 92px; align-items:center; }
.chart-head { min-height:48px; border-bottom:1px solid var(--ink); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.chart-head span:nth-child(n+3) { text-align:center; }
.chart-list { list-style:none; padding:0; margin:0; }
.chart-row { min-height:96px; border-bottom:1px solid var(--line); transition:background .2s,transform .2s; }
.chart-row:hover { background:#fff; transform:translateX(5px); }
.rank { font:800 42px/1 var(--display); letter-spacing:-.05em; }
.song { min-width:0; padding-right:20px; }
.song h3 { margin:0 0 6px; display:flex; align-items:center; min-width:0; font:800 clamp(20px,2vw,28px)/1 var(--display); text-transform:uppercase; }
.song-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.song p { margin:0; font-size:13px; font-weight:600; color:#555; }
.metric { text-align:center; }
.metric small { display:none; }
.metric b { font-size:16px; }
.movement { display:inline-flex; flex:0 0 auto; margin-left:8px; padding:3px 6px; vertical-align:middle; font:800 9px/1 var(--body); border-radius:10px; }
.movement.up { background:#d8ff3e; }
.movement.down { background:#ffd8d8; }
.movement.new { background:var(--cyan); }
.empty-state { padding:60px 10px; text-align:center; font-size:20px; font-weight:700; }
.about { padding:90px clamp(24px,7vw,108px); display:grid; grid-template-columns:1fr 1fr; gap:60px; background:var(--ink); color:#fff; }
.about h2 { margin:0; font:800 clamp(48px,6vw,88px)/.86 var(--display); text-transform:uppercase; }
.about-copy { align-self:end; max-width:520px; font-size:18px; line-height:1.65; }
.about-copy a { display:inline-block; margin-top:18px; color:var(--lime); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:12px; }
footer { min-height:150px; padding:40px clamp(24px,7vw,108px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:36px; background:#fff; }
.footer-brand { font:800 34px/1 var(--display); }
.footer-brand span { color:var(--blue); }
footer p { margin:0; font-size:11px; line-height:1.5; color:#565656; }
.version { padding:7px 10px; border:1px solid var(--line); font-weight:700; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:800px) {
  .site-header { gap:18px; min-height:66px; }
  nav { display:none; }
  .edition-pill { margin-left:auto; }
  .hero { min-height:680px; padding-top:125px; grid-template-columns:1fr; align-content:center; }
  .hero-copy { z-index:2; }
  .hero h1 { font-size:clamp(64px,20vw,112px); }
  .hero-disc { position:absolute; width:330px; right:-150px; bottom:75px; opacity:.42; }
  .hero-note { display:none; }
  .spotlight { grid-template-columns:auto 1fr; gap:20px; padding-block:28px; }
  .spotlight-rank { font-size:64px; }
  .spotlight-stats { grid-column:1/-1; justify-content:space-between; border-top:1px solid rgba(0,0,0,.3); padding-top:18px; }
  .section-heading { display:block; }
  .section-heading>p { margin-top:25px; }
  .chart-tools { align-items:stretch; flex-direction:column; }
  .search-box { min-height:45px; }
  .chart-head { display:none; }
  .chart-row { grid-template-columns:54px minmax(0,1fr) 54px; min-height:90px; }
  .chart-row .metric:nth-of-type(2), .chart-row .metric:nth-of-type(3) { display:none; }
  .metric small { display:block; font-size:8px; text-transform:uppercase; letter-spacing:.08em; color:#666; }
  .rank { font-size:31px; }
  .song h3 { font-size:20px; }
  .about { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr auto; }
  footer>p:nth-child(2) { grid-column:1/-1; grid-row:2; }
}
@media (max-width:420px) {
  .edition-pill { display:none; }
  .hero { padding-inline:20px; }
  .hero h1 { font-size:21vw; }
  .intro { font-size:17px; }
  .spotlight { padding-inline:18px; }
  .spotlight-rank { font-size:52px; }
  .spotlight h2 { font-size:27px; }
  .chart-section { padding-inline:14px; }
  .view-toggle button { flex:1; }
  .view-toggle { width:100%; }
  .chart-row { grid-template-columns:46px minmax(0,1fr) 44px; }
  .song { padding-right:8px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }