/* Panel 4, the result: before and after bars that grow with the scroll. */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 12px var(--mono); } /* colour key */
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; background: var(--world-tint); opacity: 0.5; } /* before swatch */
.legend .after-key::before { background: var(--amber); opacity: 1; } /* after swatch */
.result-beat .beat-title { font-size: 14.5px; } /* the measure's name */
.result-bar { display: flex; align-items: center; gap: 10px; height: 28px; margin-bottom: 6px; } /* a row: bar, then its value */
.result-bar::before { content: ""; flex: none; width: calc(var(--w, 100%) * 0.84); min-width: 6px; height: 100%; border-radius: 8px; background: var(--world-tint); opacity: 0.55; transform: scaleX(var(--r, 1)); transform-origin: left; } /* the bar grows from the left, as long as its value */
.result-bar.after::before { background: var(--amber); opacity: 1; } /* the live set-up in amber */
.result-bar b { font: 700 15px var(--mono); opacity: var(--r, 1); } /* its value */