.tempo-control{position:relative;height:45px;margin:0 0 7px}
.tempo-control .tempo-input{position:relative;z-index:3;touch-action:none;opacity:0;cursor:pointer}
.tempo-track{position:absolute;left:8px;right:8px;top:10px;height:4px;border-radius:10px;background:#dedede;pointer-events:none}
.tempo-track-fill{width:var(--tempo-position,0%);height:100%;border-radius:inherit;background:#292929}
.tempo-thumb{position:absolute;left:var(--tempo-position,0%);top:50%;width:16px;height:16px;transform:translate(-50%,-50%);border:1px solid #bcbcbc;border-radius:50%;background:white;box-shadow:0 1px 4px #0002;z-index:1}
.tempo-control:hover .tempo-thumb{box-shadow:0 0 0 5px #00000008,0 1px 4px #0002}
.tempo-control:has(.tempo-input:focus-visible) .tempo-thumb{outline:2px solid #777;outline-offset:3px}
.tempo-control:has(.tempo-input:active) .tempo-thumb{box-shadow:0 0 0 6px #0000000c,0 1px 4px #0002}
.tempo-control.disabled{opacity:.45}
.tempo-ticks{position:absolute;left:8px;right:8px;top:21px;height:23px;pointer-events:none}
.tempo-slot{position:absolute;top:-11px;height:4px;border-radius:2px;background:#7772}.tempo-slot.major{background:#5553}
.tempo-tick{position:absolute;top:0;height:3px;width:1px;background:#ccc;transform:translateX(-.5px)}
.tempo-tick.major{height:6px;background:#969696}
.tempo-tick.active{background:#111;width:2px}
.tempo-tick small{position:absolute;top:9px;left:50%;transform:translateX(-50%);font:10px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#888}
.tempo-tick.active small{color:#111;font-weight:650}