:root{
	--bg: #000;
	--panel: #0a0a0a;

	--cyan: #5ff;
	--magenta: #f5f;
	--white: #fff;
	--dim: #888;

	--border-dim: #222;
}

/* ===== BASE ===== */

body{
	background: var(--bg);
	color: var(--white);
	font-family: monospace;
	margin: 0;
	padding: 16px;
}

a{
	color: var(--cyan);
	text-decoration: none;
	border-bottom: 1px solid var(--cyan);
}
a:hover{
	color: var(--magenta);
	border-bottom-color: var(--magenta);
}

/* ===== PANELS / UI STRIPS ===== */

.topbuttons{
	display: inline-block;
	padding: 10px 12px;
	margin-bottom: 12px;

	background: var(--panel);
	border: 1px solid var(--cyan);
}

.footerbuttons{
	display: inline-block;
	padding: 10px 12px;
	margin-top: 12px;

	background: var(--panel);
	border: 1px solid var(--magenta);
}

.panel{
	display: inline-block;
	padding: 10px 12px;
	margin: 0 0 12px 0;

	background: var(--panel);
	border: 1px solid var(--cyan);
	max-width: 720px;
}

.panel-title{
	color: var(--cyan);
	font-weight: bold;
	margin-bottom: 6px;
}

/* ===== BUTTONS ===== */

.topbuttons input,
.footerbuttons input[type="button"]{
	margin: 4px;
	padding: 4px 10px;

	background: #111;
	color: var(--cyan);

	border: 1px solid var(--cyan);
	font-family: monospace;
	cursor: pointer;
}

.topbuttons input:hover,
.footerbuttons input[type="button"]:hover{
	background: #000;
	color: var(--white);
	border-color: var(--magenta);
}

/* ===== TEXT INPUTS ===== */

.footerbuttons input[type="text"]{
	width: 36px;
	padding: 2px 4px;

	background: #000;
	color: var(--white);

	border: 1px solid var(--cyan);
	font-family: monospace;
}

.kv{
	display: inline-block;
	margin: 4px 8px;
	vertical-align: middle;
}

.kv .k{
	color: var(--cyan);
	margin-right: 6px;
}
.kv .v{
	color: var(--dim);
	margin-left: 6px;
}

/* ===== Z SLIDER ===== */

#zslice{
	width: 420px;
	height: 28px;
	cursor: pointer;
	accent-color: var(--magenta);
}

.zrow{
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin-bottom: 6px;
}

.zlabel{
	color: var(--dim);
}

.zval{
	color: var(--magenta);
}

/* ===== CANVAS GRID ===== */

#canv{
	margin-top: 10px;
}

.canv0{
	display: inline-block;
	background: var(--panel);
	border: 1px solid var(--border-dim);
	margin: 6px;
	padding: 6px;
}

.canv0 canvas{
	display: block;
	background: #000;
	border: 1px solid var(--cyan);
}

/* checkbox under each preview */
.canv0 input[type="checkbox"]{
	margin-top: 6px;
	accent-color: var(--magenta);
}

/* genotype block */
#canv2{
	margin-top: 8px;
}

#blanc{
	background: #000;
	border: 1px solid var(--magenta);
	image-rendering: pixelated;
}

/* ===== CONSOLE ===== */

#console-log0,
#console-log1,
#console-log2,
#console-log3{
	margin-top: 10px;
	padding: 8px 10px;

	background: var(--panel);
	border: 1px solid var(--border-dim);

	color: var(--dim);
	font-size: 12px;
	white-space: pre-wrap;
}

.clickable{
	cursor: pointer;
}

#console-rules{
	margin-top: 6px;
	padding: 8px 10px;

	background: #000;
	border: 1px dashed var(--magenta);

	color: var(--white);
	font-size: 12px;
	font-family: monospace;
	white-space: pre-wrap;
}

.hidden{
	display: none;
}

.canv0{
	display: inline-block;
	background: var(--panel);

	border: 3px solid var(--border-dim); /* constant */
	margin: 6px;
	padding: 6px;

	box-sizing: border-box;
}

.canv0.selected{
	border-color: var(--magenta);
	box-shadow: inset 0 0 0 2px #000;
}

.canv0:hover{
	border-color: var(--cyan);
}