.controlsFrame {
  position: relative;
  display: block;
  text-align: center;
  direction: ltr;
  white-space: nowrap;
}
.controlsFrame > *:first-child {
  margin-inline-start: 0;
}
:global(.carbon) .controlsFrame {
  bottom: 1.75rem;
}
:global(.carbon) .controlsFrame .button {
  height: inherit;
  min-width: 3.5rem;
  margin: 0 1.25rem;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.carbon) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.carbon) .controlsFrame .button .bg {
  border: inherit;
}
:global(.carbon) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  padding: inherit;
  width: 2rem;
}
:global(.carbon) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.carbon) .controlsFrame .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.carbon) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.carbon) .controlsFrame .button.playPauseButton .icon,
:global(.carbon) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.carbon) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-accent-color, #8fd43a);
}
:global(.carbon) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.carbon) .controlsFrame.tiny .button {
  height: inherit;
  margin: 0 1.25rem;
  min-width: inherit;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.carbon) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.carbon) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.carbon) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.carbon) .controlsFrame.tiny .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.carbon) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.carbon) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.cobalt) .controlsFrame {
  bottom: 1.75rem;
}
:global(.cobalt) .controlsFrame .button {
  height: inherit;
  min-width: 3.5rem;
  margin: 0 1.25rem;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.cobalt) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.cobalt) .controlsFrame .button .bg {
  border: inherit;
}
:global(.cobalt) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  padding: inherit;
  width: 2rem;
}
:global(.cobalt) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.cobalt) .controlsFrame .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.cobalt) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.cobalt) .controlsFrame .button.playPauseButton .icon,
:global(.cobalt) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.cobalt) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-highlight-color, #fff);
}
:global(.cobalt) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.cobalt) .controlsFrame.tiny .button {
  height: inherit;
  margin: 0 1.25rem;
  min-width: inherit;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.cobalt) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.cobalt) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.cobalt) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.cobalt) .controlsFrame.tiny .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.cobalt) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.cobalt) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.cobalt):global(.night) .controlsFrame {
  bottom: 1.75rem;
}
:global(.cobalt):global(.night) .controlsFrame .button {
  height: inherit;
  min-width: 3.5rem;
  margin: 0 1.25rem;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.cobalt):global(.night) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.cobalt):global(.night) .controlsFrame .button .bg {
  border: inherit;
}
:global(.cobalt):global(.night) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  padding: inherit;
  width: 2rem;
}
:global(.cobalt):global(.night) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.cobalt):global(.night) .controlsFrame .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.cobalt):global(.night) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.cobalt):global(.night) .controlsFrame .button.playPauseButton .icon,
:global(.cobalt):global(.night) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.cobalt):global(.night) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-highlight-color, #fff);
}
:global(.cobalt):global(.night) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.cobalt):global(.night) .controlsFrame.tiny .button {
  height: inherit;
  margin: 0 1.25rem;
  min-width: inherit;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.cobalt):global(.night) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.cobalt):global(.night) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.cobalt):global(.night) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.cobalt):global(.night) .controlsFrame.tiny .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.cobalt):global(.night) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.cobalt):global(.night) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.copper) .controlsFrame {
  bottom: 1.75rem;
}
:global(.copper) .controlsFrame .button {
  height: inherit;
  min-width: 3.5rem;
  margin: 0 1.25rem;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.copper) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.copper) .controlsFrame .button .bg {
  border: inherit;
}
:global(.copper) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  padding: inherit;
  width: 2rem;
}
:global(.copper) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.copper) .controlsFrame .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.copper) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.copper) .controlsFrame .button.playPauseButton .icon,
:global(.copper) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.copper) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-accent-color, #a47d66);
}
:global(.copper) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.copper) .controlsFrame.tiny .button {
  height: inherit;
  margin: 0 1.25rem;
  min-width: inherit;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.copper) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.copper) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.copper) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.copper) .controlsFrame.tiny .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.copper) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.copper) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.copper):global(.night) .controlsFrame {
  bottom: 1.75rem;
}
:global(.copper):global(.night) .controlsFrame .button {
  height: inherit;
  min-width: 3.5rem;
  margin: 0 1.25rem;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.copper):global(.night) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.copper):global(.night) .controlsFrame .button .bg {
  border: inherit;
}
:global(.copper):global(.night) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  padding: inherit;
  width: 2rem;
}
:global(.copper):global(.night) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.copper):global(.night) .controlsFrame .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.copper):global(.night) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.copper):global(.night) .controlsFrame .button.playPauseButton .icon,
:global(.copper):global(.night) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.copper):global(.night) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-highlight-color, #fff);
}
:global(.copper):global(.night) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.copper):global(.night) .controlsFrame.tiny .button {
  height: inherit;
  margin: 0 1.25rem;
  min-width: inherit;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.copper):global(.night) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.copper):global(.night) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.copper):global(.night) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.copper):global(.night) .controlsFrame.tiny .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.copper):global(.night) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.copper):global(.night) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.electro) .controlsFrame {
  bottom: 1.75rem;
}
:global(.electro) .controlsFrame .button {
  height: inherit;
  min-width: 3.5rem;
  margin: 0 1.25rem;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.electro) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.electro) .controlsFrame .button .bg {
  border: inherit;
}
:global(.electro) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  padding: inherit;
  width: 2rem;
}
:global(.electro) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.electro) .controlsFrame .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.electro) .controlsFrame .button.playPauseButton .bg {
  border-radius: 0.41667rem;
}
:global(.electro) .controlsFrame .button.playPauseButton .icon,
:global(.electro) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.electro) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-accent-color, #0359f0);
}
:global(.electro) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.electro) .controlsFrame.tiny .button {
  height: inherit;
  margin: 0 1.25rem;
  min-width: inherit;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.electro) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.electro) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.electro) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.electro) .controlsFrame.tiny .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.electro) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.electro) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.gallium) .controlsFrame {
  bottom: 1.75rem;
}
:global(.gallium) .controlsFrame .button {
  height: 2.5rem;
  min-width: 2.5rem;
  margin: 0 1.25rem 0 1.25rem;
  width: 2.5rem;
}
:global(.enact-locale-right-to-left) :global(.gallium) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium) .controlsFrame .button .bg {
  border: transparent;
}
:global(.gallium) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 1.25rem;
  line-height: 1.25rem;
  padding: inherit;
  width: 1.25rem;
}
:global(.gallium) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0 1.25rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.gallium) .controlsFrame .button.playPauseButton {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.gallium) .controlsFrame .button.playPauseButton .icon,
:global(.gallium) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.gallium) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-accent-color, #8b7efe);
}
:global(.gallium) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.gallium) .controlsFrame.tiny .button {
  height: 2.5rem;
  margin: 0 1.25rem 0 1.25rem;
  min-width: 2.5rem;
  width: 2.5rem;
}
:global(.enact-locale-right-to-left) :global(.gallium) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 1.25rem;
  line-height: 1.25rem;
  width: 1.25rem;
}
:global(.gallium) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0 1.25rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.gallium) .controlsFrame.tiny .button.playPauseButton {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.gallium) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.gallium):global(.night) .controlsFrame {
  bottom: 1.75rem;
}
:global(.gallium):global(.night) .controlsFrame .button {
  height: 2.5rem;
  min-width: 2.5rem;
  margin: 0 1.25rem 0 1.25rem;
  width: 2.5rem;
}
:global(.enact-locale-right-to-left) :global(.gallium):global(.night) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium):global(.night) .controlsFrame .button .bg {
  border: transparent;
}
:global(.gallium):global(.night) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 1.25rem;
  line-height: 1.25rem;
  padding: inherit;
  width: 1.25rem;
}
:global(.gallium):global(.night) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0 1.25rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.gallium):global(.night) .controlsFrame .button.playPauseButton {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium):global(.night) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.gallium):global(.night) .controlsFrame .button.playPauseButton .icon,
:global(.gallium):global(.night) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.gallium):global(.night) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-accent-color, #8b7efe);
}
:global(.gallium):global(.night) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.gallium):global(.night) .controlsFrame.tiny .button {
  height: 2.5rem;
  margin: 0 1.25rem 0 1.25rem;
  min-width: 2.5rem;
  width: 2.5rem;
}
:global(.enact-locale-right-to-left) :global(.gallium):global(.night) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium):global(.night) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 1.25rem;
  line-height: 1.25rem;
  width: 1.25rem;
}
:global(.gallium):global(.night) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0 1.25rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.gallium):global(.night) .controlsFrame.tiny .button.playPauseButton {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium):global(.night) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.gallium):global(.night) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.silicon) .controlsFrame {
  bottom: 0.625rem;
}
:global(.silicon) .controlsFrame .button {
  height: 3.75rem;
  min-width: 2.5rem;
  margin: 0 0.875rem 0 0.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.silicon) .controlsFrame .button {
  margin: 0 0.75rem 0 0.875rem;
}
:global(.silicon) .controlsFrame .button .bg {
  border: transparent;
}
:global(.silicon) .controlsFrame .button .icon {
  font-size: 5.75rem;
  height: 2.875rem;
  line-height: 2.875rem;
  padding: inherit;
  width: 2.875rem;
}
:global(.silicon) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0 1.5rem 0 1rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.silicon) .controlsFrame .button.playPauseButton {
  margin: 0 1rem 0 1.5rem;
}
:global(.silicon) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.silicon) .controlsFrame .button.playPauseButton .icon,
:global(.silicon) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 5rem;
  height: 4.25rem;
  line-height: 4.25rem;
  padding: 0;
  width: 4.25rem;
}
:global(.silicon) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-accent-color, #ff2d55);
}
:global(.silicon) .controlsFrame.tiny {
  bottom: 1rem;
}
:global(.silicon) .controlsFrame.tiny .button {
  height: 2.25rem;
  margin: 0 0.5rem 0 0.75rem;
  min-width: 2.25rem;
  width: 2.25rem;
}
:global(.enact-locale-right-to-left) :global(.silicon) .controlsFrame.tiny .button {
  margin: 0 0.75rem 0 0.5rem;
}
:global(.silicon) .controlsFrame.tiny .button .icon {
  font-size: 3.25rem;
  height: 1.625rem;
  line-height: 1.625rem;
  width: 1.625rem;
}
:global(.silicon) .controlsFrame.tiny .button.playPauseButton {
  height: 3.125rem;
  margin: 0 0.75rem 0 1rem;
  min-width: 3.125rem;
  width: 3.125rem;
}
:global(.enact-locale-right-to-left) :global(.silicon) .controlsFrame.tiny .button.playPauseButton {
  margin: 0 1rem 0 0.75rem;
}
:global(.silicon) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.silicon) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  width: 2.5rem;
}
:global(.silicon):global(.night) .controlsFrame {
  bottom: 0.625rem;
}
:global(.silicon):global(.night) .controlsFrame .button {
  height: 3.75rem;
  min-width: 2.5rem;
  margin: 0 0.875rem 0 0.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.silicon):global(.night) .controlsFrame .button {
  margin: 0 0.75rem 0 0.875rem;
}
:global(.silicon):global(.night) .controlsFrame .button .bg {
  border: transparent;
}
:global(.silicon):global(.night) .controlsFrame .button .icon {
  font-size: 5.75rem;
  height: 2.875rem;
  line-height: 2.875rem;
  padding: inherit;
  width: 2.875rem;
}
:global(.silicon):global(.night) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0 1.5rem 0 1rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.silicon):global(.night) .controlsFrame .button.playPauseButton {
  margin: 0 1rem 0 1.5rem;
}
:global(.silicon):global(.night) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.silicon):global(.night) .controlsFrame .button.playPauseButton .icon,
:global(.silicon):global(.night) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 5rem;
  height: 4.25rem;
  line-height: 4.25rem;
  padding: 0;
  width: 4.25rem;
}
:global(.silicon):global(.night) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-accent-color, #ff2d55);
}
:global(.silicon):global(.night) .controlsFrame.tiny {
  bottom: 1rem;
}
:global(.silicon):global(.night) .controlsFrame.tiny .button {
  height: 2.25rem;
  margin: 0 0.5rem 0 0.75rem;
  min-width: 2.25rem;
  width: 2.25rem;
}
:global(.enact-locale-right-to-left) :global(.silicon):global(.night) .controlsFrame.tiny .button {
  margin: 0 0.75rem 0 0.5rem;
}
:global(.silicon):global(.night) .controlsFrame.tiny .button .icon {
  font-size: 3.25rem;
  height: 1.625rem;
  line-height: 1.625rem;
  width: 1.625rem;
}
:global(.silicon):global(.night) .controlsFrame.tiny .button.playPauseButton {
  height: 3.125rem;
  margin: 0 0.75rem 0 1rem;
  min-width: 3.125rem;
  width: 3.125rem;
}
:global(.enact-locale-right-to-left) :global(.silicon):global(.night) .controlsFrame.tiny .button.playPauseButton {
  margin: 0 1rem 0 0.75rem;
}
:global(.silicon):global(.night) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.silicon):global(.night) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  width: 2.5rem;
}
:global(.titanium) .controlsFrame {
  bottom: 1.75rem;
}
:global(.titanium) .controlsFrame .button {
  height: inherit;
  min-width: 3.5rem;
  margin: 0 1.25rem;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.titanium) .controlsFrame .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.titanium) .controlsFrame .button .bg {
  border: inherit;
}
:global(.titanium) .controlsFrame .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  padding: inherit;
  width: 2rem;
}
:global(.titanium) .controlsFrame .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.titanium) .controlsFrame .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.titanium) .controlsFrame .button.playPauseButton .bg {
  border-radius: 3.75rem;
}
:global(.titanium) .controlsFrame .button.playPauseButton .icon,
:global(.titanium) .controlsFrame .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}
:global(.titanium) .controlsFrame .button.repeat .bg {
  background-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
:global(.titanium) .controlsFrame.tiny {
  bottom: 1.75rem;
}
:global(.titanium) .controlsFrame.tiny .button {
  height: inherit;
  margin: 0 1.25rem;
  min-width: inherit;
  width: inherit;
}
:global(.enact-locale-right-to-left) :global(.titanium) .controlsFrame.tiny .button {
  margin: 0 1.25rem 0 1.25rem;
}
:global(.titanium) .controlsFrame.tiny .button .icon {
  font-size: 2.5rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
:global(.titanium) .controlsFrame.tiny .button.playPauseButton {
  height: 3.75rem;
  margin: 0.5rem;
  min-width: 3.75rem;
  width: 3.75rem;
}
:global(.enact-locale-right-to-left) :global(.titanium) .controlsFrame.tiny .button.playPauseButton {
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
:global(.titanium) .controlsFrame.tiny .button.playPauseButton .icon,
:global(.titanium) .controlsFrame.tiny .button.playPauseButton .client .icon {
  font-size: 4rem;
  height: 2rem;
  line-height: 2rem;
  width: 2rem;
}
