/* TILT (tilt-20261106.mjs): at the left of BANDS, over CURVES, in the bands' view (it comes and goes with them). A thin
   upright line, a mark in the middle (as broadcast), a dot for the listener's own sound; up brighter, down darker;
   beside it 2.5K at the top, TILT in the middle and 250 at the bottom, as on the bands' axis. */
.band-view .tilt{position:absolute;top:.15rem;bottom:1.45rem;left:-4.8rem;width:3.4rem;display:flex;align-items:stretch;gap:.45rem;outline:0;cursor:ns-resize;touch-action:none;-webkit-tap-highlight-color:transparent}
.tilt-track{position:relative;flex:none;width:.7rem}
.tilt-track::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:#2b323c;transform:translateX(-50%)}
.tilt-mid{position:absolute;top:50%;left:50%;width:.45rem;height:1px;background:#4f5967;transform:translate(-50%,-50%)}
.tilt-dot{--tilt:0;position:absolute;left:50%;top:calc((1 - var(--tilt)) * 50%);width:.42rem;height:.42rem;border-radius:50%;background:#6c7787;transform:translate(-50%,-50%);transition:top 180ms ease,background 300ms ease,box-shadow 300ms ease}
.tilt.is-dragging .tilt-dot{transition:background 300ms ease,box-shadow 300ms ease}
.tilt.is-tilted .tilt-dot{background:#bcc3cc}
.tilt:hover .tilt-dot,.tilt:focus-visible .tilt-dot{background:#dfe3e8;box-shadow:0 0 0 3px rgba(188,195,204,.12)}
.tilt:focus-visible .tilt-track::before{background:#4f5967}
.tilt-scale{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.tilt-end{font-size:.5rem;letter-spacing:.06em;line-height:1;white-space:nowrap;color:var(--klf-text-faint);font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none}
.tilt-name{font-size:.5rem;font-weight:300;letter-spacing:.15em;line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--klf-text-faint);transition:color 300ms ease;user-select:none;-webkit-user-select:none}
.tilt.is-tilted .tilt-name,.tilt:hover .tilt-name{color:var(--klf-text-secondary)}
@media(max-width:360px){.band-view .tilt{left:-4.3rem}}
@media(prefers-reduced-motion:reduce){.tilt-dot,.tilt-name{transition:none}}