Production mode styles

I have two different layout

@Theme(value = Material.class, variant = Material.LIGHT)
@HtmlImport("frontend://styles/shared-styles.html")
@HtmlImport("frontend://styles/landing-styles.html")
public class LandingLayout extends Composite<Div> implements RouterLayout, LocaleChangeObserver {}
	
@Theme(value = Material.class, variant = Material.LIGHT)
@HtmlImport("frontend://styles/shared-styles.html")
@HtmlImport("frontend://styles/application-styles.html")
public class ApplicationLayout extends Composite<Div> implements RouterLayout, LocaleChangeObserver {}

Why in production mode all styles are mixed into one file?
As an example, LandingLayout sees application-styles.html styles. And vice versa
Can I separate them?

In production mode, all HTML imports are combined into a single bundle to avoid the performance impact from making hundreds of network requests.

https://vaadin.com/docs/v13/flow/production/tutorial-production-mode-customising.html describes how you can split up the bundle into multiple fragments to avoid loading everything up-front.

Thank you