diff --git a/src/Tracy/BlueScreen/assets/bluescreen.css b/src/Tracy/BlueScreen/assets/bluescreen.css
index 9f43ed979..8dd5f6a96 100644
--- a/src/Tracy/BlueScreen/assets/bluescreen.css
+++ b/src/Tracy/BlueScreen/assets/bluescreen.css
@@ -2,14 +2,23 @@
  * This file is part of the Tracy (https://tracy.nette.org)
  */
 
+:host {
+	--tracy-space: 16px;
+}
+
+@media (max-width: 600px) {
+	:root {
+		--tracy-space: 8px;
+	}
+}
+
 html.tracy-bs-visible,
 html.tracy-bs-visible body {
 	display: block;
 	overflow: auto;
 }
 
-#tracy-bs {
-	--tracy-space: 16px;
+:host {
 	font: 9pt/1.5 Verdana, sans-serif;
 	background: white;
 	color: #333;
@@ -19,403 +28,391 @@ html.tracy-bs-visible body {
 	top: 0;
 	width: 100%;
 	text-align: left;
+}
 
-	@media (max-width: 600px) {
-		--tracy-space: 8px;
-	}
+a {
+	text-decoration: none;
+	color: #328ADC;
+	padding: 0 4px;
+	margin: 0 -4px;
+}
 
-	& a {
-		text-decoration: none;
-		color: #328ADC;
-		padding: 0 4px;
-		margin: 0 -4px;
+a + a {
+	margin-left: 0;
+}
 
-		&:hover,
-		&:focus {
-			color: #085AA3;
-		}
-	}
+a:hover,
+a:focus {
+	color: #085AA3;
+}
 
-	& a + a {
-		margin-left: 0;
-	}
+#tracy-bs-toggle {
+	position: absolute;
+	right: .5em;
+	top: .5em;
+	text-decoration: none;
+	background: #CD1818;
+	color: white !important;
+	padding: 3px;
+}
 
-	#tracy-bs-toggle {
-		position: absolute;
-		right: .5em;
-		top: .5em;
-		text-decoration: none;
-		background: #CD1818;
-		color: white !important;
-		padding: 3px;
-
-		&.tracy-collapsed {
-			position: fixed;
-		}
-	}
+#tracy-bs-toggle.tracy-collapsed {
+	position: fixed;
+}
 
-	.tracy-bs-main {
-		display: flex;
-		flex-direction: column;
-		padding-bottom: 80vh;
+.tracy-bs-main {
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 80vh;
+}
 
-		&.tracy-collapsed {
-			display: none;
-		}
-	}
+.tracy-bs-main.tracy-collapsed {
+	display: none;
+}
 
-	& h1 {
-		font-size: 15pt;
-		font-weight: normal;
-		text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
+p,
+table,
+pre,
+h1,
+h2,
+h3 {
+	margin: 0 0 var(--tracy-space);
+}
 
-		& span {
-			white-space: pre-wrap;
-		}
-	}
+h1 {
+	font-size: 15pt;
+	font-weight: normal;
+	text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
+}
 
-	& h2 {
-		font-size: 14pt;
-		font-weight: normal;
-	}
+h1 span {
+	white-space: pre-wrap;
+}
 
-	& h3 {
-		font-size: 10pt;
-		font-weight: bold;
-	}
+h2 {
+	font-size: 14pt;
+	font-weight: normal;
+	margin-top: var(--tracy-space);
+}
 
-	& pre,
-	& code,
-	& table {
-		font: 9pt/1.5 Consolas, monospace !important;
-	}
+h3 {
+	font-size: 10pt;
+	font-weight: bold;
+}
 
-	& pre,
-	& table {
-		background: #FDF5CE;
-		padding: .4em .7em;
-		border: 2px solid #ffffffa6;
-		box-shadow: 1px 2px 6px #00000005;
-		overflow: auto;
-	}
+pre,
+code,
+table {
+	font: 9pt/1.5 Consolas, monospace !important;
+}
 
-	& table {
-		border-collapse: collapse;
-		width: 100%;
+pre,
+table {
+	background: #FDF5CE;
+	padding: .4em .7em;
+	border: 2px solid #ffffffa6;
+	box-shadow: 1px 2px 6px #00000005;
+	overflow: auto;
+}
 
-		& pre {
-			padding: 0;
-			margin: 0;
-			border: none;
-			box-shadow: none;
-		}
-	}
+table pre {
+	padding: 0;
+	margin: 0;
+	border: none;
+	box-shadow: none;
+}
 
-	& td,
-	& th {
-		vertical-align: top;
-		text-align: left;
-		padding: 2px 6px;
-		border: 1px solid #e6dfbf;
-	}
+table {
+	border-collapse: collapse;
+	width: 100%;
+}
 
-	& th {
-		font-weight: bold;
-	}
+td,
+th {
+	vertical-align: top;
+	text-align: left;
+	padding: 2px 6px;
+	border: 1px solid #e6dfbf;
+}
 
-	& tr > :first-child {
-		width: 20%;
-	}
+th {
+	font-weight: bold;
+}
 
-	& tr:nth-child(2n),
-	& tr:nth-child(2n) pre {
-		background-color: #F7F0CB;
-	}
+tr > :first-child {
+	width: 20%;
+}
 
-	.tracy-footer--sticky {
-		position: fixed;
-		width: 100%;
-		bottom: 0;
-	}
+tr:nth-child(2n),
+tr:nth-child(2n) pre {
+	background-color: #F7F0CB;
+}
 
-	& footer ul {
-		font-size: 7pt;
-		padding: var(--tracy-space);
-		margin: var(--tracy-space) 0 0;
-		color: #777;
-		background: #F6F5F3;
-		border-top: 1px solid #DDD;
-		list-style: none;
-	}
+.tracy-footer--sticky {
+	position: fixed;
+	width: 100%;
+	bottom: 0;
+}
 
-	.tracy-footer-logo {
-		position: relative;
-
-		& a {
-			position: absolute;
-			bottom: 0;
-			right: 0;
-			width: 100px;
-			height: 50px;
-			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAUBAMAAAD/1DctAAAAMFBMVEWupZzj39rEvbTy8O3X0sz9/PvGwLu8tavQysHq6OS0rKP5+Pbd2dT29fPMxbzPx8DKErMJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACGUlEQVQoFX3TQWgTQRQA0MWLIJJDYehBTykhG5ERTx56K1u8eEhCYtomE7x5L4iLh0ViF7egewuFFqSIYE6hIHsIYQ6CQSg9CDKn4QsNCRlB59C74J/ZNHW1+An5+bOPyf6/s46oz2P+A0yIeZZ2ieEHi6TOnLKTxvWq+b52mxlVO3xnM1s7xLX1504XQH65OnW2dBqn7cCkYsFsfYsWpyY/2salmFTpEyzeR8zosYqMdiPDXdyU52K1wgEa/SjGpdEwUAxqvRfckQCDOyFearsEHe2grvkh/cFAHKvdtI3lcVceKQIOFpv+FOZaNPQBwJZLPp+hfrvT5JZXaUFsR8zqQc9qSgAharkfS5M/5F6nGJJAtXq/eLr3ucZpHccSxOOIPaQhtHohpCH2Xu6rLmQ0djnr4/+J3C6v+AW8/XWYxwYNdlhWj/P5fPSTQwVr0T9lGxdaBCqErNZaqYnEwbkjEB3NasGF3lPdrHa1nnxNOMgj0+neePUPjd2v/qVvUv29ifvc19huQ48qwXShy/9o8o3OSk0cs37mOFd0Ydgvsf/oZEnPVtggfd66lORn9mDyyzXU13SRtH2L6aR5T/snGAcZPfAXz5J1YlJWBEuxdMYqQecpBrlM49xAbmqyHA+xlA1FxBtqT2xmJoNXZlIt74ZBLeJ9ZGDqByNI7p543idzJ23vXEv7IgnsxiS+eNtwNbFdLq7+Bi4wQ0I4SVb9AAAAAElFTkSuQmCC') no-repeat;
-			opacity: .6;
-			padding: 0;
-			margin: 0;
-
-			&:hover,
-			&:focus {
-				opacity: 1;
-				transition: opacity 0.1s;
-			}
-		}
-	}
+footer ul {
+	font-size: 7pt;
+	padding: var(--tracy-space);
+	margin: var(--tracy-space) 0 0;
+	color: #777;
+	background: #F6F5F3;
+	border-top: 1px solid #DDD;
+	list-style: none;
+}
 
+.tracy-footer-logo {
+	position: relative;
+}
 
-	.tracy-section {
-		padding: var(--tracy-space);
-	}
+.tracy-footer-logo a {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 100px;
+	height: 50px;
+	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAUBAMAAAD/1DctAAAAMFBMVEWupZzj39rEvbTy8O3X0sz9/PvGwLu8tavQysHq6OS0rKP5+Pbd2dT29fPMxbzPx8DKErMJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACGUlEQVQoFX3TQWgTQRQA0MWLIJJDYehBTykhG5ERTx56K1u8eEhCYtomE7x5L4iLh0ViF7egewuFFqSIYE6hIHsIYQ6CQSg9CDKn4QsNCRlB59C74J/ZNHW1+An5+bOPyf6/s46oz2P+A0yIeZZ2ieEHi6TOnLKTxvWq+b52mxlVO3xnM1s7xLX1504XQH65OnW2dBqn7cCkYsFsfYsWpyY/2salmFTpEyzeR8zosYqMdiPDXdyU52K1wgEa/SjGpdEwUAxqvRfckQCDOyFearsEHe2grvkh/cFAHKvdtI3lcVceKQIOFpv+FOZaNPQBwJZLPp+hfrvT5JZXaUFsR8zqQc9qSgAharkfS5M/5F6nGJJAtXq/eLr3ucZpHccSxOOIPaQhtHohpCH2Xu6rLmQ0djnr4/+J3C6v+AW8/XWYxwYNdlhWj/P5fPSTQwVr0T9lGxdaBCqErNZaqYnEwbkjEB3NasGF3lPdrHa1nnxNOMgj0+neePUPjd2v/qVvUv29ifvc19huQ48qwXShy/9o8o3OSk0cs37mOFd0Ydgvsf/oZEnPVtggfd66lORn9mDyyzXU13SRtH2L6aR5T/snGAcZPfAXz5J1YlJWBEuxdMYqQecpBrlM49xAbmqyHA+xlA1FxBtqT2xmJoNXZlIt74ZBLeJ9ZGDqByNI7p543idzJ23vXEv7IgnsxiS+eNtwNbFdLq7+Bi4wQ0I4SVb9AAAAAElFTkSuQmCC') no-repeat;
+	opacity: .6;
+	padding: 0;
+	margin: 0;
+}
 
-	.tracy-section-panel {
-		background: #F4F3F1;
-		padding: var(--tracy-space);
-		border-radius: 8px;
-		box-shadow: inset 1px 1px 0px 0 #00000005;
-		overflow: hidden;
-	}
+.tracy-footer-logo a:hover,
+.tracy-footer-logo a:focus {
+	opacity: 1;
+	transition: opacity 0.1s;
+}
 
-	.outer, /* deprecated */
-	.tracy-pane {
-		overflow: auto;
-	}
 
-	.tracy-pane:not(:last-child) {
-		margin-bottom: var(--tracy-space);
-	}
+.tracy-section {
+	padding-left: calc(1.5 * var(--tracy-space));
+	padding-right: calc(1.5 * var(--tracy-space));
+}
 
-	&.tracy-mac .tracy-pane {
-		padding-bottom: 12px;
-	}
+.tracy-section-panel {
+	background: #F4F3F1;
+	padding: var(--tracy-space) var(--tracy-space) 0;
+	margin: 0 0 var(--tracy-space);
+	border-radius: 8px;
+	box-shadow: inset 1px 1px 0px 0 #00000005;
+	overflow: hidden;
+}
 
+.outer, /* deprecated */
+.tracy-pane {
+	overflow: auto;
+}
 
-	/* header */
-	.tracy-section--error {
-		background: #CD1818;
-		color: white;
-		font-size: 13pt;
-
-		& h1 {
-			color: white;
-		}
-
-		&::selection,
-		& ::selection {
-			color: black !important;
-			background: #FDF5CE !important;
-		}
-
-		& a {
-			color: #ffefa1 !important;
-		}
-
-		& span span {
-			font-size: 80%;
-			color: rgba(255, 255, 255, 0.5);
-			text-shadow: none;
-		}
-
-		& a.tracy-action {
-			color: white !important;
-			opacity: 0;
-			font-size: .7em;
-			border-bottom: none !important;
-		}
-
-		&:hover a.tracy-action {
-			opacity: .6;
-		}
-
-		& a.tracy-action:hover {
-			opacity: 1;
-		}
-
-		& i {
-			color: #ffefa1;
-			font-style: normal;
-		}
-	}
+#tracy-bs.tracy-mac .tracy-pane {
+	padding-bottom: 12px;
+}
 
 
-	/* source code */
-	& pre.tracy-code > div {
-		min-width: 100%;
-		float: left;
-		white-space: pre;
-	}
+/* header */
+.tracy-section--error {
+	background: #CD1818;
+	color: white;
+	font-size: 13pt;
+	padding-top: var(--tracy-space);
+}
 
-	.tracy-code-comment {
-		color: rgba(0, 0, 0, 0.5);
-		font-style: italic;
-	}
+.tracy-section--error h1 {
+	color: white;
+}
 
-	.tracy-code-keyword {
-		color: #D24;
-		font-weight: bold;
-	}
+.tracy-section--error::selection,
+.tracy-section--error ::selection {
+	color: black !important;
+	background: #FDF5CE !important;
+}
 
-	.tracy-code-var {
-		font-weight: bold;
-	}
+.tracy-section--error a {
+	color: #ffefa1 !important;
+}
 
-	.tracy-line-highlight {
-		background: #CD1818;
-		color: white;
-		font-weight: bold;
-		font-style: normal;
-		display: block;
-		padding: 0 1ch;
-		margin: 0 -1ch -1lh;
-	}
+.tracy-section--error span span {
+	font-size: 80%;
+	color: rgba(255, 255, 255, 0.5);
+	text-shadow: none;
+}
 
-	.tracy-column-highlight {
-		display: inline-block;
-		backdrop-filter: grayscale(1);
-		margin: 0 -1px;
-		padding: 0 1px;
-	}
+.tracy-section--error a.tracy-action {
+	color: white !important;
+	opacity: 0;
+	font-size: .7em;
+	border-bottom: none !important;
+}
 
-	.tracy-line {
-		color: #9F9C7F;
-		font-weight: normal;
-		font-style: normal;
-	}
+.tracy-section--error:hover a.tracy-action {
+	opacity: .6;
+}
 
-	& a.tracy-editor {
-		color: inherit;
-		border-bottom: 1px dotted rgba(0, 0, 0, .3);
-		border-radius: 3px;
+.tracy-section--error a.tracy-action:hover {
+	opacity: 1;
+}
 
-		&:hover {
-			background: #0001;
-		}
-	}
+.tracy-section--error i {
+	color: #ffefa1;
+	font-style: normal;
+}
 
-	& span[data-tracy-href] {
-		border-bottom: 1px dotted rgba(0, 0, 0, .3);
-	}
 
-	.tracy-dump-whitespace {
-		color: #0003;
-	}
+/* source code */
+pre.tracy-code > div {
+	min-width: 100%;
+	float: left;
+	white-space: pre;
+}
 
-	.tracy-caused {
-		float: right;
-		padding: .3em calc(1.5 * var(--tracy-space));
-		background: #df8075;
-		border-radius: 0 0 0 8px;
-		white-space: nowrap;
+.tracy-line-highlight {
+	background: #CD1818;
+	color: white;
+	font-weight: bold;
+	font-style: normal;
+	display: block;
+	padding: 0 1ch;
+	margin: 0 -1ch;
+}
 
-		& a {
-			color: white;
-		}
-	}
+.tracy-column-highlight {
+	display: inline-block;
+	backdrop-filter: grayscale(1);
+	margin: 0 -1px;
+	padding: 0 1px;
+}
 
-	.tracy-callstack {
-		display: grid;
-		grid-template-columns: max-content 1fr;
-	}
+.tracy-line {
+	color: #9F9C7F;
+	font-weight: normal;
+	font-style: normal;
+}
 
-	.tracy-callstack-file {
-		text-align: right;
-		padding-right: var(--tracy-space);
-		white-space: nowrap;
-		height: calc(1.5 * var(--tracy-space));
-	}
+a.tracy-editor {
+	color: inherit;
+	border-bottom: 1px dotted rgba(0, 0, 0, .3);
+	border-radius: 3px;
+}
 
-	.tracy-callstack-callee {
-		white-space: nowrap;
-		height: calc(1.5 * var(--tracy-space));
-	}
+a.tracy-editor:hover {
+	background: #0001;
+}
 
-	.tracy-callstack-additional {
-		grid-column-start: 1;
-		grid-column-end: 3;
-	}
+span[data-tracy-href] {
+	border-bottom: 1px dotted rgba(0, 0, 0, .3);
+}
 
-	.tracy-callstack-additional:not(:last-child) {
-		margin-bottom: var(--tracy-space);
-	}
+.tracy-dump-whitespace {
+	color: #0003;
+}
 
-	.tracy-callstack-args tr:first-child > * {
-		position: relative;
-	}
+.tracy-caused {
+	float: right;
+	padding: .3em calc(1.5 * var(--tracy-space));
+	background: #df8075;
+	border-radius: 0 0 0 8px;
+	white-space: nowrap;
+}
 
-	.tracy-callstack-args tr:first-child td:before {
-		position: absolute;
-		right: .3em;
-		content: 'may not be true';
-		opacity: .4;
-	}
+.tracy-caused a {
+	color: white;
+}
 
-	.tracy-panel-fadein {
-		animation: tracy-panel-fadein .12s ease;
-	}
+.tracy-callstack {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	margin-bottom: calc(.5 * var(--tracy-space));
+}
 
-	@keyframes tracy-panel-fadein {
-		0% {
-			opacity: 0;
-		}
-	}
+.tracy-callstack-file {
+	text-align: right;
+	padding-right: var(--tracy-space);
+	white-space: nowrap;
+	height: calc(1.5 * var(--tracy-space));
+}
 
-	.tracy-section--causedby {
-		flex-direction: column;
-		padding: 0;
+.tracy-callstack-callee {
+	white-space: nowrap;
+	height: calc(1.5 * var(--tracy-space));
+}
 
-		&:not(.tracy-collapsed) {
-			display: flex;
-		}
+.tracy-callstack-additional {
+	grid-column-start: 1;
+	grid-column-end: 3;
+}
 
-		& .tracy-section--error {
-			background: #cd1818a6;
-		}
-	}
+.tracy-callstack-args tr:first-child > * {
+	position: relative;
+}
 
-	.tracy-section--error + .tracy-section--stack {
-		margin-top: calc(1.5 * var(--tracy-space));
-	}
+.tracy-callstack-args tr:first-child td:before {
+	position: absolute;
+	right: .3em;
+	content: 'may not be true';
+	opacity: .4;
+}
 
+.tracy-panel-fadein {
+	animation: tracy-panel-fadein .12s ease;
+}
 
-	/* tabs */
-	.tracy-tab-bar {
-		display: flex;
-		list-style: none;
-		padding-left: 0;
-		margin: 0;
-		width: 100%;
-		font-size: 110%;
-
-		& > *:not(:first-child) {
-			margin-left: var(--tracy-space);
-		}
-
-		& a {
-			display: block;
-			padding: calc(.5 * var(--tracy-space)) var(--tracy-space);
-			margin: 0;
-			height: 100%;
-			box-sizing: border-box;
-			border-radius: 5px 5px 0 0;
-			text-decoration: none;
-			transition: all 0.1s;
-		}
-
-		& > .tracy-active a {
-			background: white;
-		}
+@keyframes tracy-panel-fadein {
+	0% {
+		opacity: 0;
 	}
+}
 
-	.tracy-tab-panel {
-		border-top: 2px solid white;
-		padding-top: var(--tracy-space);
-		overflow: auto;
-	}
+.tracy-section--causedby {
+	flex-direction: column;
+	padding: 0;
+}
+
+.tracy-section--causedby:not(.tracy-collapsed) {
+	display: flex;
+}
+
+.tracy-section--causedby .tracy-section--error {
+	background: #cd1818a6;
+}
+
+.tracy-section--error + .tracy-section--stack {
+	margin-top: calc(1.5 * var(--tracy-space));
+}
+
+
+/* tabs */
+.tracy-tab-bar {
+	display: flex;
+	list-style: none;
+	padding-left: 0;
+	margin: 0;
+	width: 100%;
+	font-size: 110%;
+}
+
+.tracy-tab-bar > *:not(:first-child) {
+	margin-left: var(--tracy-space);
+}
+
+.tracy-tab-bar a {
+	display: block;
+	padding: calc(.5 * var(--tracy-space)) var(--tracy-space);
+	margin: 0;
+	height: 100%;
+	box-sizing: border-box;
+	border-radius: 5px 5px 0 0;
+	text-decoration: none;
+	transition: all 0.1s;
+}
+
+.tracy-tab-bar > .tracy-active a {
+	background: white;
+}
+
+.tracy-tab-panel {
+	border-top: 2px solid white;
+	padding-top: var(--tracy-space);
+	overflow: auto;
 }
diff --git a/src/Tracy/BlueScreen/assets/bluescreen.js b/src/Tracy/BlueScreen/assets/bluescreen.js
index 42985fad7..cb4291bec 100644
--- a/src/Tracy/BlueScreen/assets/bluescreen.js
+++ b/src/Tracy/BlueScreen/assets/bluescreen.js
@@ -31,7 +31,7 @@ class BlueScreen
 			sessionStorage.setItem('tracy-toggles-bskey', id);
 		}
 
-		(new ResizeObserver(stickyFooter)).observe(blueScreen);
+		//(new ResizeObserver(stickyFooter)).observe(blueScreen);
 
 		if (document.documentElement.classList.contains('tracy-bs-visible')) {
 			window.scrollTo(0, 0);
@@ -76,3 +76,4 @@ function stickyFooter() {
 
 let Tracy = window.Tracy = window.Tracy || {};
 Tracy.BlueScreen = Tracy.BlueScreen || BlueScreen;
+
diff --git a/src/Tracy/BlueScreen/assets/content.phtml b/src/Tracy/BlueScreen/assets/content.phtml
index 107b6a0c4..d54251d61 100644
--- a/src/Tracy/BlueScreen/assets/content.phtml
+++ b/src/Tracy/BlueScreen/assets/content.phtml
@@ -23,7 +23,12 @@ namespace Tracy;
  * @var \Fiber[] $fibers
  */
 ?>
-<tracy-div id="tracy-bs" itemscope>
+<tracy-bs id="tracy-bs" itemscope>
+<template shadowrootmode="open">
+	<style class="tracy-debug">
+	<?= str_replace('</', '<\/', $css) ?>
+	</style>
+
 	<a id="tracy-bs-toggle" href="#" class="tracy-toggle">&#xfeff;</a>
 	<div class="tracy-bs-main">
 <?php $ex = $exception; $exceptions = []; ?>
@@ -70,4 +75,5 @@ namespace Tracy;
 		</footer>
 	</div>
 	<meta itemprop=tracy-snapshot content=<?= Dumper::formatSnapshotAttribute($snapshot) ?>>
-</tracy-div>
+</template>
+</tracy-bs>
diff --git a/src/Tracy/BlueScreen/assets/page.phtml b/src/Tracy/BlueScreen/assets/page.phtml
index 0dff01fbb..0dfa87ef6 100644
--- a/src/Tracy/BlueScreen/assets/page.phtml
+++ b/src/Tracy/BlueScreen/assets/page.phtml
@@ -31,9 +31,6 @@ $chain = Helpers::getExceptionChain($exception);
 <?php endif ?>
 	<!-- <?= Helpers::escapeHtml($source) ?> -->
 
-	<style class="tracy-debug">
-	<?= str_replace('</', '<\/', $css) ?>
-	</style>
 </head>