/* Fourier: disposizione come nell'applet (canvas a sinistra, controlli impilati a destra) */
html, body {
	margin: 0;
	height: 100%;
	background: #eeeeee;
	color: #000;
	font: 13px sans-serif;
}
#app {
	display: flex;
	height: 100%;
	min-height: 420px;
}
#canvasWrap {
	flex: 1 1 auto;
	min-width: 200px;
	position: relative;
	background: #000;
}
#cv {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
	cursor: default;
}
#controls {
	flex: 0 0 auto;
	width: 210px;
	padding: 4px 6px 6px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
}
#controls .label {
	text-align: center;
	margin-top: 5px;
}
#controls .label a { color: inherit; text-decoration: none; }
#controls .label a:hover { text-decoration: underline; }
#controls select, #controls button {
	font: inherit;
	width: 100%;
	padding: 2px 4px;
}
#controls .check { display: block; white-space: nowrap; }
#controls .check input:disabled + * { color: #888; }
#controls input[type=range] { width: 100%; margin: 2px 0; }

/* schermi stretti: controlli sotto il canvas */
@media (max-width: 640px) {
	#app { flex-direction: column; height: auto; }
	#canvasWrap { height: 70vh; flex: 0 0 auto; }
	#controls { width: 100%; }
}