:root {
	--rust: #237a77;
	--ink: #123039;
	--ink-2: #3c595d;
	--paper: #eee9dc;
	--paper-l: #f6f2e8;
	--rule: rgba(70, 130, 132, 0.24);
}
body.nebula {
	background: #031321;
}
.search {
	top: 18px;
	right: 18px;
	padding: 0.55rem 0.8rem;
	animation: none;
	opacity: 1;
}
.search input {
	font-size: 12px;
	width: min(32vw, 210px);
}
.modes {
	left: 18px;
	top: 18px;
	bottom: auto;
	transform: none;
	animation: none;
	opacity: 1;
}
.legend {
	left: 18px;
	bottom: 18px;
	max-width: calc(100% - 160px);
	gap: 5px;
	animation: none;
	opacity: 1;
}
.legend button {
	font-size: 10px;
	padding: 5px 8px;
}
.controls {
	right: 18px;
	bottom: 18px;
	gap: 7px;
}
.controls button {
	animation: none;
	opacity: 1;
}
.controls .hint {
	font-size: 10px;
}
.panel {
	width: min(380px, 92vw);
}
.panel .file {
	font-size: 12px;
}
#close {
	display: grid;
	place-items: center;
}
body.nebula .search,
body.nebula .modes,
body.nebula .legend button,
body.nebula .controls button {
	background: rgba(3, 19, 33, 0.75);
	border-color: rgba(117, 217, 204, 0.22);
}
body.nebula .panel {
	background: rgba(3, 19, 33, 0.97);
}
@media (max-width: 600px) {
	.search {
		top: 14px;
		right: 12px;
	}
	.search input {
		width: 135px;
		font-size: 11px;
	}
	.modes {
		left: 12px;
		top: 14px;
	}
	.legend {
		display: none;
	}
	.controls {
		bottom: 12px;
		right: 12px;
	}
	.controls .hint {
		display: none;
	}
	.panel {
		height: 60%;
		max-height: 60%;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

canvas {
	touch-action: pan-y;
}

.modes {
	right: auto;
}
body.nebula .modes button.on {
	background: #75d9cc;
	color: #031321;
}
@media (max-width: 600px) {
	.search input {
		width: min(33vw, 135px);
	}
}