.sound-curve{width:min(100%,19rem);margin:.75rem auto 0;font-family:Montserrat,sans-serif;font-weight:300;cursor:crosshair;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.sound-curve[hidden]{display:none}
.curve-row{display:grid;grid-template-columns:4.4rem minmax(0,1fr) 2rem;align-items:center;gap:.4rem;height:1.4rem}
.curve-row[data-band=sound_dist]{--curve:#b65562}
.curve-row[data-band=mood]{--curve:#4fa89c}
.curve-row[data-band=bpm]{--curve:#5c82ad}
.curve-row.curve-off{height:1rem}
.curve-row.curve-off svg{visibility:hidden;height:1rem}
.curve-name,.curve-value,.curve-axis{font-size:.5rem;letter-spacing:.15em;line-height:1.9;text-transform:uppercase;white-space:nowrap}
.layer .curve-name{display:block;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;font-family:inherit;font-weight:300;text-align:left;color:#535d6b;cursor:pointer;transition:color 300ms ease}
.layer .curve-name[aria-pressed=true]{color:#6c7787}
.layer .curve-name:hover{background:none;color:#7c8696}
.layer .curve-name:focus-visible{outline:1px solid #778395;outline-offset:3px}
.curve-value{text-align:right;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#7a8492}
.sound-curve svg{display:block;width:100%;height:1.4rem;overflow:visible}
.curve-line{fill:none;stroke:var(--curve);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;opacity:.7}
.curve-dot{fill:var(--curve)}
.curve-uncertain{fill:#060709;stroke:var(--curve);stroke-width:1}
.curve-cross{stroke:#3a4352;stroke-width:1}
.curve-axis{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin:.4rem 2.4rem 0 4.8rem;color:#4f5967;font-variant-numeric:tabular-nums}
.curve-caption{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center}
@media(max-width:360px){.curve-row{grid-template-columns:3.9rem minmax(0,1fr) 1.8rem}.curve-axis{margin-left:4.3rem;margin-right:2.2rem;letter-spacing:.08em}}