/* The Listening dancers while the music plays (listening-dancer-20261107.mjs): the same 240 x 80 px box as the
   slow-dance couple before Play, one of the two on view at a time (the idle box is not laid out while the music
   plays, this box not while idle). */
.listening-dancer{position:relative;width:240px;max-width:90vw;height:80px;margin:0 auto -.6rem;opacity:0;visibility:hidden;transition:opacity 900ms ease,visibility 0s linear 900ms}
html:not(.is-idle) .listening-dancer.is-on{opacity:1;visibility:visible;transition:opacity 900ms ease}
html.is-idle .listening-dancer{display:none}
.listening-dancer canvas{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.listening-dancer,html:not(.is-idle) .listening-dancer.is-on{transition:none}}
/* Movement off (html.meter-off): the dancers stay on view and rest (listening-dancer-*.mjs v43). */
/* (The pair's speech bubbles of v8 went 8 Nov 2026: the lines are above the dancers, speech-lines-20261108.css.) */
/* The dancers' own words (dancer-say-20261108.mjs; owner 8 Nov 2026): a small text at the head, Sims-like, no bubble;
   his ends at his head, hers starts at hers, both just above it (--x, --y: the head in px from the box's top left,
   set each frame). The letters form from the middle outwards (--d) and go back the same way. */
.dancer-say{position:absolute;top:var(--y,12px);max-width:7.5rem;color:var(--klf-text-primary);font-size:.5rem;line-height:1.3;text-align:left;pointer-events:none;transform:translateY(calc(-100% - 4px));z-index:1}
.dancer-say-m{right:calc(100% - var(--x,78px) + 8px)}
.dancer-say-f{left:calc(var(--x,162px) + 8px)}
.dancer-say>span{display:inline-block;opacity:0;transform:translateY(.15em);transition:opacity 260ms ease var(--d,0ms),transform 260ms ease var(--d,0ms)}
.dancer-say.is-on>span{opacity:1;transform:none}
.listening-dancer.is-still .dancer-say>span{transition:opacity 200ms ease;transform:none}