Improved: How to make note after checked checklist have a faded colour?

Custom CSS & Theme Design
,
1

NOTE: The Obsidian forum currently auto-closes topics after 90 days, so I had to create a new topic for this follow-up to How to make note after checked checklist have a faded colour?
(hey admins, how about not auto-closing topics?)

Currently checked checklist entries that span multiple lines only show up correctly in Reading mode. In Live Preview mode, only the first line show as checked (strike-through and faded color).

@holroy did some impressive CSS sleuthing and came up with a nice fix. The only downside is that it required hard-coding the style settings. I have (I think) a slightly-improved version that uses vars to avoid having to hard-code any values:

.HyperMD-task-line[data-task="x"],
.HyperMD-task-line[data-task="x"] + .HyperMD-list-line-nobullet,
.HyperMD-task-line[data-task="x"] ~ .HyperMD-list-line-nobullet + .HyperMD-list-line-nobullet {
  color: var(--checklist-done-color);
  text-decoration: var(--checklist-done-decoration);
}

.HyperMD-task-line[data-task="x"] ~ *:not(.HyperMD-list-line-nobullet) ~ .HyperMD-list-line-nobullet {
  background-color: inherit;
  color: inherit;
}

Any corrections or improvements are welcome.