:root {
  color-scheme: light;
  --paper: oklch(97% 0.012 92);
  --surface: oklch(99% 0.006 92);
  --ink: oklch(25% 0.025 165);
  --muted: oklch(52% 0.025 165);
  --line: oklch(87% 0.018 92);
  --accent: oklch(62% 0.16 35);
  --green: oklch(52% 0.11 155);
  --green-soft: oklch(91% 0.035 155);
  --coral-soft: oklch(92% 0.04 35);
  --negative: oklch(55% 0.18 28);
  --shadow: 0 18px 55px oklch(30% 0.02 165 / 0.08);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; }
button, select { font: inherit; }
a { color: inherit; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 68px; padding: 0 4vw; display: flex; align-items: center; gap: 3rem; background: oklch(97% 0.012 92 / .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.identity { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.identity-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.identity strong, .identity small { display: block; }.identity strong { font-size: .9rem; }.identity small { color: var(--muted); font-size: .72rem; margin-top: .12rem; }
nav { display: flex; gap: 1.5rem; } nav a { text-decoration: none; color: var(--muted); font-size: .82rem; font-weight: 650; } nav a:hover { color: var(--ink); }
.quiet-button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: .58rem .9rem; color: var(--ink); cursor: pointer; font-weight: 650; font-size: .78rem; }
.quiet-button:hover { border-color: var(--ink); }
main { width: min(1440px, 92vw); margin: 0 auto; padding: 4rem 0 5rem; }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4rem; padding-bottom: 2.7rem; }
.eyebrow { margin: 0 0 .55rem; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 800; }
h1 { max-width: 820px; margin: 0; font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: .95; letter-spacing: -.065em; font-weight: 760; } h1 span { color: var(--muted); font-weight: 480; }
.lede { max-width: 68ch; margin: 1.4rem 0 0; color: var(--muted); line-height: 1.6; }
.as-of { min-width: 180px; padding-bottom: .4rem; }.as-of span,.as-of small { display: block; color: var(--muted); font-size: .72rem; }.as-of strong { display: block; margin: .25rem 0; font-size: 1.45rem; }
.filterbar { display: flex; align-items: end; gap: 1rem; padding: 1rem 0 2rem; border-top: 1px solid var(--line); }
.filterbar label { display: grid; gap: .4rem; color: var(--muted); font-size: .72rem; font-weight: 700; }.filterbar select { min-width: 145px; appearance: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); padding: .68rem 2.2rem .68rem .75rem; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position: calc(100% - 14px) 50%,calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat:no-repeat; }
.song-filter { flex: 1; }.song-filter select { width: 100%; }.text-button { border: 0; background: transparent; padding: .7rem; color: var(--accent); font-weight: 750; cursor: pointer; }
select:focus-visible,button:focus-visible,a:focus-visible { outline: 3px solid oklch(75% 0.12 35 / .35); outline-offset: 2px; }
.kpi-strip { display: grid; grid-template-columns: 1.55fr repeat(4,1fr); background: var(--ink); color: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.kpi-strip article { min-width: 0; padding: 1.5rem 1.3rem; border-right: 1px solid oklch(85% 0.02 92 / .18); }.kpi-strip article:last-child { border: 0; }.kpi-strip span,.kpi-strip small { display:block; color: oklch(85% 0.018 92); font-size: .7rem; }.kpi-strip strong { display:block; margin: .55rem 0 .35rem; font-size: clamp(1.15rem,2vw,1.75rem); letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.kpi-strip .primary-kpi { background: var(--accent); }.kpi-strip .primary-kpi span,.kpi-strip .primary-kpi small { color: oklch(96% 0.02 35); }.kpi-strip .primary-kpi strong { font-size: clamp(1.7rem,3vw,2.7rem); }
.analysis-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, .9fr); gap: 1.25rem; margin-top: 1.25rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; }.panel header,.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }.panel h2,.section-heading h2 { margin:0; font-size:1.25rem; letter-spacing:-.025em; }.legend { display:flex; gap:1rem; color:var(--muted); font-size:.72rem; }.legend span { display:flex; align-items:center; gap:.35rem; }.legend i { width:8px;height:8px;border-radius:50%; }.legend .national { background:var(--green); }.legend .international { background:var(--accent); }
.chart { height: 310px; margin-top: 1.5rem; }.chart svg { width:100%;height:100%;overflow:visible; }.axis-label { fill: var(--muted); font-size: 10px; }.grid-line { stroke:var(--line);stroke-width:1; }.bar-national { fill:var(--green); }.bar-international { fill:var(--accent); }.bar-negative { fill:var(--negative); }
.donut-wrap { display:grid;place-items:center;min-height:220px; }.donut { width:180px;height:180px;border-radius:50%;display:grid;place-items:center; }.donut::after { content:"";width:112px;height:112px;border-radius:50%;background:var(--surface); }.donut-center { position:absolute;text-align:center; }.donut-center strong,.donut-center small { display:block; }.donut-center strong { font-size:1.45rem; }.donut-center small { color:var(--muted);font-size:.7rem;margin-top:.2rem; }.zone-breakdown { display:grid;gap:.7rem; }.zone-row { display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center;font-size:.78rem; }.zone-row i { width:8px;height:8px;border-radius:50%; }.zone-row span { color:var(--muted); }.zone-row strong { font-size:.8rem; }
.year-section,.catalog-section,.statements-section { margin-top: 4.5rem; }.section-heading { align-items:end;padding-bottom:1.2rem;border-bottom:1px solid var(--line); }.section-heading>p { margin:0;color:var(--muted);font-size:.78rem; }.year-chart { display:grid;gap:1rem;padding-top:1.5rem; }.year-row { display:grid;grid-template-columns:60px 1fr 150px;align-items:center;gap:1rem; }.year-track { height:34px;background:var(--green-soft);border-radius:6px;overflow:hidden; }.year-fill { height:100%;background:var(--green);transform-origin:left;transition:transform 220ms cubic-bezier(.16,1,.3,1); }.year-row strong { text-align:right; }
.catalog-layout { display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,.8fr);gap:3rem;padding-top:1.5rem; }.ranking { display:grid; }.rank-row { display:grid;grid-template-columns:34px minmax(150px,1fr) 2fr 120px;align-items:center;gap:.8rem;padding:.72rem 0;border-bottom:1px solid var(--line);font-size:.78rem; }.rank-index { color:var(--muted); }.rank-title strong,.rank-title small { display:block; }.rank-title small { color:var(--muted);margin-top:.2rem; }.rank-track { height:7px;background:var(--line);border-radius:10px;overflow:hidden; }.rank-track i { display:block;height:100%;background:var(--accent);border-radius:10px; }.rank-value { text-align:right;font-weight:750; }.catalog-aside { align-self:start;background:var(--coral-soft);padding:1.5rem;border-radius:14px; }.catalog-aside>strong { display:block;font-size:3.4rem;letter-spacing:-.06em; }.catalog-aside>p:not(.eyebrow) { color:var(--muted);line-height:1.5;font-size:.82rem; }.participation-summary { margin-top:1.5rem;padding-top:1rem;border-top:1px solid oklch(75% 0.06 35);font-size:.75rem;line-height:1.6; }
.table-shell { overflow:auto;border-bottom:1px solid var(--line); }.table-shell table { width:100%;border-collapse:collapse;font-size:.75rem;white-space:nowrap; }.table-shell th { color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;text-align:left;padding:.8rem .65rem;border-bottom:1px solid var(--line); }.table-shell td { padding:.7rem .65rem;border-bottom:1px solid var(--line); }.table-shell tr:last-child td { border:0; }.number { text-align:right!important; }.negative { color:var(--negative); }.source-link { color:var(--accent);text-decoration:none;font-weight:700; }
.methodology { display:grid;grid-template-columns:180px 1fr;gap:2rem;margin-top:3rem;padding:1.25rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem;line-height:1.6; }.methodology strong { color:var(--ink); }.methodology p { margin:0;max-width:90ch; }
.loading { position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:.8rem;background:var(--paper);font-weight:700; }.loading span { width:12px;height:12px;border-radius:50%;background:var(--accent);animation:pulse 1s infinite alternate; }.loading.hidden { display:none; } @keyframes pulse { to { transform:scale(.55);opacity:.35; } }
.empty { color:var(--muted);padding:2rem 0; }
@media (max-width: 980px) { nav { display:none; }.kpi-strip { grid-template-columns:repeat(2,1fr); }.kpi-strip .primary-kpi { grid-column:span 2; }.analysis-grid,.catalog-layout { grid-template-columns:1fr; }.catalog-aside { max-width:none; }.intro { grid-template-columns:1fr;gap:1.5rem; }.as-of { display:flex;align-items:baseline;gap:.7rem; }.as-of small { margin-left:auto; } }
@media (max-width: 650px) { .topbar { padding:0 4vw; }.quiet-button { display:none; } main { width:92vw;padding-top:2.5rem; }.filterbar { display:grid;grid-template-columns:1fr 1fr; }.filterbar label,.filterbar select { width:100%;min-width:0; }.song-filter { grid-column:span 2; }.kpi-strip { display:block; }.kpi-strip article { border-right:0;border-bottom:1px solid oklch(85% 0.02 92 / .18); }.kpi-strip .primary-kpi { grid-column:auto; }.chart { height:250px;overflow-x:auto; }.rank-row { grid-template-columns:24px 1fr 100px; }.rank-track { display:none; }.year-row { grid-template-columns:44px 1fr; }.year-row>strong { grid-column:2; }.section-heading { display:block; }.section-heading>p { margin-top:.5rem; }.methodology { grid-template-columns:1fr;gap:.5rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important;animation:none!important;transition:none!important; } }