How i can create a blurred panel (with border settings support)?

[It_Used]

I'm trying to create a transparent panel that blurs the background, I tried to write this in css using: "filter: blur();" as well as the "backdrop-filter: blur();"
But there was no effect, I decided to write it on stock graphics. and here are the problems I have encountered:

1. When zooming, the rounded rectangle scales too. (Half fixed)
2. The panel borders are not defined correctly. I understand that if you use Paint Routine, then this is how it should be, but I also apply a mask, but the mask does not affect the blur effect.
3. When zooming, the blur factor increases or decreases (it depends on the distance of the camera to the panel).
   I need some advice. Thanks all in advance))) ️

Script:

/*

	Author: It_Used
	Date: 18.05.25 | 1:47
	
*/

Content.makeFrontInterface(600, 600);

// Declare the main panel.
const var Panel1 = Content.getComponent("Panel1");

// Declare corners settings var.
reg CornerSize = 10;

// Declare the path var.
const var panelPath = Content.createPath();

// Draw a blurred panel.
Panel1.setPaintRoutine(function(g)
{
	
	// Draw path. for mask.	
	panelPath.addRoundedRectangle([0, 0, this.getWidth(), this.getHeight()], CornerSize);
		
	// Start 1st. layer for blur.
	g.beginLayer(true);
	
	// Set blur.
	g.gaussianBlur(5);
	
	// End 1st. blur layer.
	g.endLayer();
	
	// Start 2nd. layer for border rectangle and apply a mask.
	g.beginLayer(false);
	
	// Apply mask.
	g.applyMask(panelPath, [0, 0, this.getWidth(), this.getHeight()], false);
	
	// End of 2nd. layer.
	g.endLayer();
	
	// Set colour for border rect. 
	g.setColour(Colours.withAlpha(Colours.black, 0.25));
	
	// Draw border rect.
	g.fillRoundedRectangle([0, 0, this.getWidth(), this.getHeight()], CornerSize);	
	
});

Snippet:

HiseSnippet 1451.3ocyX1saaaCE.lJIZqVacncnWrKE5UNEIJx+kZ2gg437ypwZbsiS6FvvVAsDsEajIEnnZp2ZA5CvdH1E6QXO.8xcwdD1CQeC1NTx1RVMcqKncPNAIjm+3GOh5PS1WvcHggbARy3zYADj1GqObFS5suGlxPcO.ostdETmYA3vPhKRSa8uRoPqzFn3Ou5K6f8wLGRpHD5gbpC4dzoTYpz9s+Zpu+QXWxozoYrtd6tNb19bedjPMX1n.ryY3IjdXkYqoitKNzCocK8pUG6zz1tYsZMrw3ZtXb8JjZsHi2crSC6V1tiZXC+rKR6CNzkJ4hgRrjDhz1nC2c1PO94rjA3gzP5HeRxTaHLxIhOh66plhJon88n9t8WjcBQPT5mlqVOIWcC8iotzkxSyYWKVgYpGYSfZqsJdquBdUxhmcF7t.jzxfzFIHcc8gNBZfLUihmORuKSRDiwvyornjXKZsecC8ctkgQo8hjdbwcL6JezC.SLJc.f3cLqzzxtgU0FlOyrxcpeaiRF2ZGCi84PLYRqo3yHGIfNKGix6ZaukI7mM+bCic1w7.hiOVPLkdDyoPNxL.yH9VFvC9Po4SvBy9JAUL+ByEAcBQtOeZ.mAcJeyD02LW3b3BFQDZFRjRJaRnJRVFBxDHJJMCo+HABYE6Wmh.rzKw7TFhgpuRQJFNBBjATBKuXvE3yMwli7iDBh6hYRBfV.I8g4m7DdDPDo73HlijxYkmrowOAosRKBfZ7sLGyEP9H7LKPyxQ2B65B9yf0hmPbjX1DeR4uCxmvuROZnJ07MTWEQoBtKgNwSVdyueqLycf3RIiIrTSHMqDJsL8wyHh3QVMErLJMwZDYBkcOk7xRQTraIdQjoFMAGEFRwrNffxMVZygL2j3pLLI3wlSXtIQLMZwLTk4tBCbgKzTrXhZhg3gCB7mA433TSN.Gi8CSIbuXKWZWriGC8JuLatk4+gT2pAWM03iyP7aZhAoIm35W4mRVlJOBUKkUpKm7uPqyoRu87C7vKkLxGJ5AbBujs4x.GuRIa3TQaLTE8c0xCXXLdtZcsQ7RaXBaYYsXMqIm0iKI2mUNYs6yMLyqZ73KTm5kGA22Wkjt.0p5+h+IGKyhlNhH1BdqzGVNtvPnF2pEN0eyENyVW2I4c4LFxYcYT48CHr2T0dz7B.PqGzEJBhUUamKCrKfHjTEBZGPdBrWWRs2R5GPBOSxCPZe5xhWvtQxXsWcdk4tSgM2PTn96UziaWA8zkaG9hAsmkt23osOW8jbofW9r1dwOIWJocTaTlg5CWcntGdDwe9PE29eZnjjmBQnsdq5185zbfcq5M50ry11CZUqdil85r8.6Z0a0PIp0fZ06AsrGrcqjVC1Fz0qQmln4Dqq8GZHzBZ00tAJNo9VSZUEo5ZGAdMS0vEZTrHrVNBeZgiv54H7mKbD1HGg+YgivcyQ3uT3H714H72JbD1LGg+dgivV4H7YZEFBKMuxscNDaW7PrRNDOs3gX9sU7JdHleekWgJbHleikMJdYw76r7YEODyu0xV+ui3mrJhwGhcdYwjCzl4qK19wY+5hON22L8Eix+MSe4OzdzjrWqCURldw8qlHPM2yZPxIeNA6RiByd6RA7fnf6yNQMb66ScNKwbOtua2v7RSBh53NYCA50u3jqoeL2MxGKW8dbT210bEvYTV4xSTW2AKjJmk81vdmc4NusHdc89Toi2Ey3ZW.ivIYdev37qD6p5GNdLbtzT.2P+nu88y8egRtlkIGikBp5codQSGBKebHvnyf0upyHpslZMeReaUeUFXHbJ93N+E7YtxJp9ZyUVYgRzTrif+HmjSlptzsqDKAXhEeAkkzOV02rBJ9zpYyySotzG43rZndMGqdYcr1k0w5WVGabYcb2Kqi29x5Xy+cGUWQ6dQR9zjWaPni6eX7Q80zNjggUfwqVQ+MzhLpKJ

[ustk]

@It_Used You're just hitting the two ancestral scale factor problems with blur and mask that have been raised a million times...

I'm no good with CSS but I hope it can handle this in Hise

[It_Used]

@ustk Thank you very much for your reply)
I'll take that into consideration. ️