/* BANDS (band-meter-20261105.mjs): the sound on air in frequency bands in the place of the curves. The button sits
   under the curve names, on the line of the time axis. The two views cross in 0.6 s. */
.sound-curve{position:relative}
.sound-curve .curve-row>*,.sound-curve .curve-axis{transition:opacity 600ms ease}
.layer .sound-curve .curve-name{transition:color 300ms ease,opacity 600ms ease}
.sound-curve.is-bands .curve-row>*,.sound-curve.is-bands .curve-axis{opacity:0;visibility:hidden;transition:opacity 600ms ease,visibility 0s linear 600ms}
.sound-curve.is-bands .curve-row.curve-off{height:1.4rem}
.band-view{position:absolute;top:0;bottom:0;left:4.8rem;right:2.4rem;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 600ms ease,visibility 0s linear 600ms}
.sound-curve.is-bands .band-view{opacity:1;visibility:visible;pointer-events:auto;cursor:default;transition:opacity 600ms ease}
.band-meter{display:block;flex:1;min-height:0;width:100%;opacity:.85}
.band-axis{display:flex;margin-top:.4rem;font-size:.5rem;letter-spacing:.06em;line-height:1.9;text-transform:uppercase;white-space:nowrap;color:#4f5967;font-variant-numeric:tabular-nums}
.band-axis span{flex:1;min-width:0;text-align:center}
.layer .band-switch{position:absolute;left:0;bottom:0;display:block;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;font-family:inherit;font-size:.5rem;font-weight:300;letter-spacing:.15em;line-height:1.9;text-align:left;text-transform:uppercase;white-space:nowrap;color:#bcc3cc;cursor:pointer;transition:color 300ms ease}
.layer .band-switch:hover{background:none;color:#bcc3cc}
.layer .band-switch:focus-visible{outline:1px solid #778395;outline-offset:3px}
@media(max-width:360px){.band-view{left:4.3rem;right:2.2rem}}
@media(prefers-reduced-motion:reduce){.sound-curve .curve-row>*,.sound-curve .curve-axis,.band-view,.layer .sound-curve .curve-name{transition:none!important}}