:root
{
	color-scheme:dark;
	--dwDiagnosticsBackground:rgba(10, 10, 10, 0.88);
	--dwDiagnosticsBorder:rgba(255, 255, 255, 0.18);
	--dwDiagnosticsText:#f2efe9;
	--dwDiagnosticsMuted:#9d988f;
	--dwDiagnosticsGood:#6dff8c;
	--dwDiagnosticsAccent:#72b7ff;
}

*
{
	box-sizing:border-box;
}

html,
body
{
	margin:0;
	width:100%;
	height:100%;
	overflow:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	background:transparent;
	color:var(--dwDiagnosticsText);
	font-family:Consolas, "Courier New", monospace;
}

.dwDiagnosticsPanel
{
	width:100%;
	padding:14px;
	border:1px solid var(--dwDiagnosticsBorder);
	border-radius:10px;
	background:var(--dwDiagnosticsBackground);
	box-shadow:0 12px 32px rgba(0, 0, 0, 0.45);
}

.dwDiagnosticsTitle
{
	margin:0 0 10px;
	font-size:14px;
	letter-spacing:0.06em;
	text-transform:uppercase;
}

.dwDiagnosticsHeadline
{
	display:flex;
	align-items:baseline;
	gap:12px;
	margin-bottom:12px;
}

.dwDiagnosticsFPS
{
	color:var(--dwDiagnosticsGood);
	font-size:32px;
	font-weight:700;
}

.dwDiagnosticsFrameTime
{
	color:var(--dwDiagnosticsAccent);
	font-size:16px;
}

.dwDiagnosticsGrid
{
	display:grid;
	grid-template-columns:minmax(92px, auto) 1fr;
	gap:5px 12px;
	font-size:12px;
	line-height:1.35;
}

.dwDiagnosticsLabel
{
	color:var(--dwDiagnosticsMuted);
}

.dwDiagnosticsValue
{
	text-align:right;
	white-space:nowrap;
}

.dwDiagnosticsSection
{
	margin:12px 0 6px;
	padding-top:10px;
	border-top:1px solid var(--dwDiagnosticsBorder);
	color:var(--dwDiagnosticsMuted);
	font-size:11px;
	letter-spacing:0.08em;
	text-transform:uppercase;
}

.dwDiagnosticsOutput
{
	margin:0;
	max-height:180px;
	overflow:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	white-space:pre-wrap;
	overflow-wrap:anywhere;
	color:#ff7b72;
	font:11px/1.35 Consolas, "Courier New", monospace;
	touch-action:pan-y;
}

.dwDiagnosticsHint
{
	margin-top:12px;
	color:var(--dwDiagnosticsMuted);
	font-size:10px;
	text-align:right;
}