/* Fonts */
@font-face
{
	font-family: "PixelFont";
	src: url("https://huggingface.co/camenduru/instant-ngp/resolve/c63de77e240586436c063c248c397641d8a7c407/dependencies/imgui/misc/fonts/ProggyClean.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
/* Theme */
:root
{
	--light-accent:   rgb(162, 164, 189);
	--dark-accent:    rgb(124, 125, 144);
	--light-contrast: rgb(29, 33, 39);
	--dark-contrast:  rgb(21, 25, 31);
	--frame-inline:   rgb(38, 43, 50);
	--frame-outline:  rgb(11, 14, 16);
	--normal-text:    rgb(153, 155, 159);
	--inactive-text:  rgb(115, 116, 118);
	--unsafe-text:    rgb(200, 80, 60); /* warn_dark */
	--zoom: 1;
}
/* Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* Body */
body, html
{
	height: 100%;
	margin: 0;
	background: var(--dark-contrast);
	font-family: "PixelFont", monospace;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Frame */
.frame
{
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 100;
}
/**/
.frame::before
{
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--frame-outline);
	pointer-events: none;
}
/**/
.frame::after
{
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	right: 1px;
	height: 2px;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		var(--light-accent) 0,
		var(--light-accent) 1px,
		var(--dark-accent) 1px,
		var(--dark-accent) 2px
	);
}

/* Layout placeholders */
.titlebar, .content
{
	position: absolute;
	pointer-events: none;
}

/* Button */
.btn
{
	position: relative;
	z-index: 1;
	font-family: "PixelFont", monospace;
	font-size: 18px;
	text-decoration: none;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: never;
	text-rendering: optimizeLegibility;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
		0px -1px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000;
	color: var(--normal-text);
	padding: 4px 12px;
	background: linear-gradient(180deg, var(--light-contrast) 0%, var(--dark-contrast) 100%);
	border: 1px solid var(--frame-outline);
	cursor: pointer;
	user-select: none;
}
/**/
.btn::before
{
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--frame-inline);
	pointer-events: none;
}
/**/
.btn:hover
{
	border-color: var(--light-accent);
}