.slider-wrapper {
	display: flex;
	flex-direction: column;
	/* gap: 8px; */
	/* space between sliders */
	width: 100%;
	/* full width of the parent */
	max-width: 300px;
	/* optional max width */
	/* margin-bottom: 16px; */
	/* space below the slider section */
}

/* --------------------------------------- */
/* 1) Group the two buttons in a row      */
/* --------------------------------------- */
.button-group {
	display: flex;
	gap: 8px;
	/* space between buttons */
	margin-bottom: 8px;
}

/* --------------------------------------- */
/* 2) Core button styling, matches sliders */
/* --------------------------------------- */
button.start-stop-button,
button.reset-button {
	flex: 1;
	/* fill available space equally */
	height: 20px;
	/* similar to slider track height */
	background: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 12px;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

button.start-stop-button:hover,
button.reset-button:hover {
	background: #e6e6e6;
}

button.start-stop-button:active,
button.reset-button:active {
	background: #ddd;
	border-color: #999;
}

/* Optional: different colors for each button */
/*
button.start-stop-button { background: #d5e8d4; }
button.reset-button      { background: #fde0dc; }
*/


/* 1) make your wrapper a flex row */
.canvas-wrapper {
	display: flex;
	/* align children in a row */
	align-items: stretch;
	/* force controls to stretch to canvas height */
	/* spacing between canvas & controls */
	gap: 8px;

}


/* .canvas-wrapper {
	position: relative;
	display: inline-block;
} */

.simulation-container {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-shadow: 0px 4px 8px 4px #0032;
	background-color: #0032;
}


/* .simulation-container {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
} */

/* 3) style the control-panel as a column that fills the wrapper’s height */
.controls {
	/* remove any absolute/top/right */
	position: static;

	width: 130px;
	/* control-panel width */
	height: 100%;
	/* match the canvas height */

	background: rgba(244, 244, 244);
	/* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 12px;
	/* backdrop-filter: blur(2px); */
	box-sizing: border-box;
	user-select: none;

	display: flex;
	flex-direction: column;
	gap: 4px;
}


/* .controls {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 120px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
	padding: 8px;
	padding-top: 2px;
	border-radius: 8px;
	font-size: 12px;
	backdrop-filter: blur(2px);
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 4px;
} */

.controls label {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Allow full width, but align text left */
	text-align: left;
	/* Ensure text stays left-aligned */
}

.controls label div {
	margin-bottom: 0px;
	/* Space between text and slider */
}

.controls input[type="range"] {
	align-self: center;
	/* Center the slider horizontally */
	width: 100%;
	/* Or try a fixed width like 120px if you want narrower sliders */
}

.controls select {
	width: 100%;
	padding: 2px;
	font-size: 12px;
	border: none;
	border-radius: 8px;
	border: 1px solid #ccc;
	background-color: rgba(255, 255, 255, 0.8);
	color: #000;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 8px;
	/* appearance: none; */
	/* -webkit-appearance: none; */
	/* -moz-appearance: none; */
	/* outline: none; */
}

.controls select option:checked {
	background-color: #ddd;
	/* Same light gray used for slider track */
	color: #000;
}

#controls label {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
	color: #000;
}

#controls span {
	display: inline-block;
	min-width: 60px;
	font-variant-numeric: tabular-nums;
	font-family: monospace;
}

#controls input[type="range"] {
	width: 100%;
	user-select: auto;
	-webkit-user-select: auto;
}

input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100px;
	height: 12px;
	background: #bbb;
	border-radius: 8px;
	margin: 0px 0 0px 0;
	cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	background: #888;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: #888;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

input[type="range"]::-moz-range-track {
	height: 12px;
	background: #ccc;
	border-radius: 8px;
}

/* 2) set your canvas’s dimensions */
.post-canvas {
	flex-shrink: 0;
	/* never shrink below its set width */
	width: 650px;
	/* desired canvas width */
	height: 450px;
	/* optional fixed height */
	border-radius: 10px;
	/* box-shadow: 0px 0px 8px 8px #0032; */
}