/* A drawing surface. It fills what it is given: a canvas has no size of its own, so the
   host decides how much room the surface gets. */
.mf-viewport {
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	block-size: 100%;
	background: var(--mf-color-background);

	/* The pinch is this surface's; the browser must not also scroll the page with it. */
	touch-action: none;
}

/* Both layers are stretched to the element, which is why their CSS size is never
   written from the component — only their buffer is. The gestures are the host
   element's, so neither canvas takes the pointer. */
.mf-viewport-gl,
.mf-viewport-hud {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	pointer-events: none;
}