:root {
	color-scheme: dark;
	font-family: system-ui, sans-serif;
	line-height: 1.5;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-tap-highlight-color: transparent;
	cursor: var(--cursor, default);
}

body {
	box-sizing: border-box;
	min-block-size: 100dvb;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.hidden {
	position: absolute;
	appearance: none;
	overflow: hidden;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

button {
	all: unset;
	outline: revert;
}

button, label {
	cursor: pointer;
}

a {
	color: inherit;
}

input[type=range] {
	cursor: grab;

	&:active {
		cursor: grabbing;
	}
}

.overlay {
	color-scheme: dark;
	color: white;
	position: absolute;
	inset: 0 auto auto 0;
	inline-size: fit-content;
	padding: .4rem .7rem;
	background-color: #111a;
	border-radius: .3em;
	margin: .5em;
	accent-color: white;

	:is(input)[type=checkbox]#toggle-overlay:not(:checked) ~ & > .cog {
		display: none;
	}

	:is(input)[type=checkbox]#toggle-overlay:checked ~ & > :not(.cog) {
		display: none;
	}
}

#webgpu-unsupported {
	padding: .5rem;
	border: 1px solid red;
	margin-block: .3rem;
	background-color: #0005;
	border-radius: .3rem;
}

.settings {
	& > div {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .3rem;

		& input[type=range] {
			flex-grow: 1;
		}

		& [id] {
			font-family: monospace;
			white-space: pre-wrap;
			font-size: 1.2em;
		}
	}
}

.bottom-bar {
	position: absolute;
	pointer-events: none;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: end;
	inset: auto 0 0 0;

	& footer {
		padding: .1em .4em;
		pointer-events: auto;
		background-color: #000b;
		border-start-start-radius: .3rem;
	}
}

.camera-controls {
	/* position: absolute; */
	/* inset: auto auto 0 0; */
	margin: .5rem;
	display: grid;
	gap: .5rem;
	grid-template: repeat(2, 1fr) / repeat(3, 1fr);

	& button.move {
		pointer-events: auto;
		position: relative;
		background-color: #222e;
		border: 1px solid #8884;
		border-radius: .4rem;
		box-sizing: border-box;
		inline-size: 3rem;
		aspect-ratio: 1;
		display: grid;
		place-content: center;

		&.active {
			background-color: #111;
		}

		& kbd {
			position: absolute;
			--inset: -.3rem;
			inset-block-end: var(--inset);
			inset-inline-end: var(--inset);
			background-color: #111;
			border: 1px solid #8888;
			border-radius: .3rem;
			display: grid;
			place-content: center;
			aspect-ratio: 1;
			block-size: 1.2rem;
		}
	}
}

canvas {
	flex-grow: 1;
	flex-basis: 0;
	min-block-size: 0;
	background-color: black;
	touch-action: none;
}