.xp-bar { margin-bottom: 4rem; }

.xp-bar__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem; /* Tailwind text-xs */
  color: var(--color-muted-fg);
  margin-bottom: 0.375rem; /* Tailwind mb-1.5 */
}

.xp-bar__counts { color: var(--color-primary); }

.xp-bar__track {
  height: 4px;
  /* Tinted from the primary so the empty portion stays visible across
     themes — the muted-bg token is too close to the page bg in blossom. */
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

.xp-bar__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(.2,.8,.2,1);
}