:root {
	--color-a3: #ff4d4d;
	--color-a2b: #4da6ff;
	--color-ab2: #33cc33;
	--color-b3: #ffcc00;
}

body {
	margin: 0;
	font-family: system-ui,sans-serif;
}

.container {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
	width:100%;
	max-width:950px;
	margin:20px auto;
}

.controls-panel {
	width:100%;
	max-width:700px;
}

.controls-table {
	border-collapse:collapse;
	width:300px;
	margin:auto;
}

.controls-table td {
	text-align:center;
}

.controls-table input[type="range"] {
	width:100%;
}

label { display: block; font-weight: 500; margin-bottom: 5px;  }

input[type="range"] { width: 100%; cursor: pointer; }

.formula-box {
	padding:12px;
	border:1px solid #000;
	border-radius:8px;
	text-align:center;
	margin:10px auto;
	width:300px;
}

.legend {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	width:300px;
	margin:auto;
}

.legend-item { display: flex; align-items: center; gap: 8px; }

.color-box { width: 14px; height: 14px; border-radius: 3px; }

.a3  { background: var(--color-a3); }
.a2b { background: var(--color-a2b); }
.ab2 { background: var(--color-ab2); }
.b3  { background: var(--color-b3); }

.scene-container {
	perspective: 1000px;
	width: 500px;
	max-width: 100%;
	height: 500px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: grab;
	user-select: none;
	touch-action: pan-y;
}
			
.cube-group {
	width: 0;
	height: 0;
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
}

.block {
	position: absolute;
	transform-style: preserve-3d;
}

.face {
	position: absolute;
	opacity: 0.85;
	border: 1px solid rgba(0,0,0,0.15);
	backface-visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.face-label {
	font-size: 15px;
	font-weight: 700;
	color: white;
	text-shadow: 0 1px 3px rgba(0,0,0,.7);
	pointer-events: none;
	padding: 2px 5px;
	border-radius: 4px;
	background: rgba(0,0,0,.20);
}

.container h2 {
	margin: 0;
}

.container p {
	margin: 0;
}