:root {
	color-scheme: light dark;
	--colorBg: light-dark(#fff, #181818);
	--colorBgField: light-dark(#fcfcfc, #2c2c2c);
	--colorBgFieldHover: light-dark(#fff, #171717);

	--colorBgHeader: light-dark(#ededef, #141414);
	--colorBgHeaderField: light-dark(#fbfbfb, #222);

	--colorBorder: light-dark(#e0e0e0, #2c2c2c);
	--colorBorderActive: light-dark(#c8c8c8, #3c3c3c);

	--colorLabel: light-dark(#555, #aaa);
	--colorText: light-dark(#000, #fff);

	--colorAccent: light-dark(#0081ff, #2495ff);
	--colorHover: light-dark(#dbedff, #062d59);

	--colorRed: light-dark(#da0f00, #f41606);
	--colorPink: light-dark(#ed206a, #ff2e7a);
	--colorPurple: light-dark(#9b71e8, #ae81ff);
	--colorGreen: light-dark(#388e3c, #a6e22e);
	--colorBg4xx: light-dark(#ffedd1, #68554a);

	accent-color: var(--colorAccent);
	--radius: 16px;
	--subtoolbarHeight: 42px;

	--shadowRim: light-dark(#fff, #333);
	--shadowDrop: light-dark(rgba(0, 0, 0, 0.2), #000);
	--boxShadowRimDrop: inset 0 0 1px 0.5px var(--shadowRim), 0 1px 2px var(--shadowDrop);
}

html,
body {
	overflow: hidden;
	height: 100%;
	font-size: 12px;
}
body {
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--colorBg);
	color: var(--colorText);
	font-family: system-ui, sans-serif;
}

* {
	box-sizing: border-box;
	padding: 0;
	border: 0;
	margin: 0;
	letter-spacing: -0.2px;
	line-height: 14px;
	font-family: inherit;
	font-size: 100%;
	scrollbar-width: thin;
	corner-shape: squircle;
}

label,
button, 
select {
	user-select: none;
}

a:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
	outline-offset: -1px;
	outline: 2px solid var(--colorAccent);
}

a,
select,
button,
input[type=checkbox] {
	cursor: pointer;
}

a:active,
select:active,
button:active,
input[type=checkbox]:active {
	cursor: grabbing;
}

a {
	text-decoration: none;
	color: var(--colorAccent);
}

select {
	color: var(--colorText);
	border-radius: var(--radius);
	appearance: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") no-repeat;
	background-size: 16px;
	background-position: calc(100% - 3px) center;
	transition: all 240ms ease-out;

	&:enabled {
		border-color: var(--colorBorder);
		background-color: var(--colorBgField);

		&:hover {
			border-color: var(--colorHover);
			background-color: var(--colorBgFieldHover);
		}
	}

	&:disabled {
		cursor: not-allowed;
		opacity: 50%;
	}
}

main {
	display: flex;
	min-width: 0;
	min-height: 0;

	@media (max-width: 760px) {
		flex-direction: column;

		.Resizer {
			display: none;
		}

		.leftSide {
			width: 100% !important; /* because it's resizable in js */
			height: 50%;
			border-right: 0;
		}
	}

	.leftSide {
		display: grid;
		width: 50%;
		border-top: 1px solid var(--colorBorder);
		border-right: 1px solid var(--colorBorder);
		grid-template-rows: var(--subtoolbarHeight) 1fr;
	}

	.rightSide {
		position: relative;
		min-width: 100px;
		min-height: 0;
		flex: 1;
		border-top: 1px solid var(--colorBorder);

		.Resizer {
			position: absolute;
			top: 0;
			left: -1px;
			width: 8px;
			height: 100%;
			border-left: 1px solid transparent;
			cursor: col-resize;

			&:hover,
			&:active {
				border-color: var(--colorBorderActive);
			}

			&::before,
			&::after {
				position: absolute;
				left: -2px;
				content: '';
			}
			&::before {
				top: calc(50% + 6px);
				height: 22px;
				border-left: 2px solid var(--colorBg);
			}
			&::after {
				top: calc(50% + 10px);
				height: 14px;
				border-left: 3px dotted var(--colorBorder);
			}
		}
	}
}

.ErrorToast {
	position: fixed;
	z-index: 9999;
	bottom: 12px;
	left: 12px;
	padding: 12px 16px;
	padding-right: 42px;
	cursor: pointer;
	background: var(--colorRed);
	color: white;
	border-radius: var(--radius);
	opacity: 0;
	transform: translateY(20px);
	animation: _kfToastIn 240ms forwards;

	&::after {
		position: absolute;
		top: 0;
		right: 16px;
		width: 12px;
		height: 12px;
		text-align: center;
		content: '×';
		font-size: 28px;
		line-height: 34px;
	}
}
@keyframes _kfToastIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}