.centered { 
	bottom:107px; /* compensate for the caption */
}

html, body { background:#808080; }

.controlflex { 
	display:flex; 
	justify-content:space-between; 
}

input[type='range'] {
	width:138px;
}
input[type='range']+span {
	vertical-align:middle;
}
.controlgrid.one :nth-child(n+2) {
	margin-left:4px;
}
.controlgrid.one:nth-of-type(2) {
	padding-left:6px;
}

input[name='c1']+span { color:#f00; }
input[name='c2']+span { color:#0f0; }
input[name='c3']+span { color:#00f; }
.cmy input[name='c1']+span { color:#0ff; }
.cmy input[name='c2']+span { color:#f0f; }
.cmy input[name='c3']+span { color:#ff0; }

#fig text {
	font-family:Arial;
	font-size:24px;
	text-anchor:middle;
	fill:white;
}

#fig g:nth-of-type(1) circle { mix-blend-mode:screen; }
#fig g:nth-of-type(2) circle { mix-blend-mode:multiply; }

#fig g:nth-of-type(1) ellipse { fill:black; }
#fig g:nth-of-type(2) ellipse { fill:white; }

#fig g circle:nth-of-type(1) { fill:#f00; }
#fig g circle:nth-of-type(2) { fill:#0f0; }
#fig g circle:nth-of-type(3) { fill:#00f; }
.cmy #fig g circle:nth-of-type(1) { fill:#0ff; }
.cmy #fig g circle:nth-of-type(2) { fill:#f0f; }
.cmy #fig g circle:nth-of-type(3) { fill:#ff0; }