/* Little Pulse · shared brand pieces (the wordmark, the 8-count, figures).
   Link after tokens.css. */

.lp-wm { font-family: var(--fd); font-weight: 800; letter-spacing: -.03em; color: var(--lp-ink); white-space: nowrap; line-height: 1; }
.lp-wm-i { position: relative; display: inline-block; }
.lp-wm-i::after {
  content: ""; position: absolute; left: 50%; top: -.1em; width: .3em; height: .42em; transform: translateX(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='17 5 30 46'><path d='M32 5c3 9 15 15 15 31a15 15 0 0 1-30 0c0-8 4-13 8-17 0 6 2 9 5 10-1-9 0-17 2-24z' fill='%23FF5FAE'/></svg>") center/contain no-repeat;
}
[data-lp-mark] svg { display: block; width: 100%; height: 100%; }
[data-fig] { display: inline-flex; align-items: center; justify-content: center; }
[data-fig] svg { width: 100%; height: 100%; }

/* the running 8-count: digits in a row, the first (place in the phrase) in pink;
   beats already played are ink, the ones still to come are pale */
[data-lp-count] { display: inline-flex; gap: .08em; font-family: var(--fd); font-weight: 700; font-variant-numeric: tabular-nums; color: #CFCAC4; }
[data-lp-count] span { min-width: .62em; text-align: center; transition: color .08s; }
[data-lp-count] .lp-c-first { color: var(--pink-deep); }
[data-lp-count] .lp-c-on { color: var(--lp-ink); }
[data-lp-count] .lp-c-first.lp-c-on { color: var(--pink-deep); }