Revise how the bucket bar rendering and bucket position calculations work to
remove the assumptions about where the bucket bar will be rendered relative to
the viewport. Then use this new flexibility to support a `bucketBarContainer`
config option which allows the host page to specify a selector for an existing
DOM element where the bucket bar will be rendered. The initial use case is the
video player where we want to render the bucket bar alongside the transcript
rather than the sidebar. In future this can support other use cases where the
document content is in some scrollable container that doesn't fill the viewport.

 - Render bucket bar into its own shadow root, so its styles work when the
   bucket bar is rendered into a custom container.

 - Add `container` argument to `computeBuckets` helper, and compute bucket
   positions relative to this container instead of the viewport.

 - Remove the hard-coded knowledge in `computeBuckets` about the vertical
   toolbar above the bucket bar, and instead change the positioning of the
   default bucket bar container so that it is below the vertical toolbar at the
   edge of the sidebar.

 - Move the gray background behind the bucket bar out of the `Buckets` component
   and into a separate element rendered by the toolbar. This is needed so that
   the background is still displayed even if the bucket bar is rendered into a
   custom container.

   In the process of adding this separate element, tweak the layout so
   that the right edge of the buckets aligns with the right edge of
   the toolbar icons.

 - Add a `bucketBarContainer` config option which specifies a selector for an
   element to render the bucket bar into.