:root {
	--bg:#000;
	--panel:#0a0a0a;
	--cyan:#5ff;
	--magenta:#f5f;
	--white:#fff;
	--dim:#777;
}

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

.panel {
	border:1px solid var(--cyan);
	background:var(--panel);
	padding:14px 16px;
	display:inline-block;
}

.panel-magenta { border-color:var(--magenta); }
.panel-cyan { border-color:var(--cyan); }

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

label {
	display:block;
	margin-bottom:8px;
}

input, select, button {
	background:#000;
	color:var(--white);
	border:1px solid var(--cyan);
	font-family:monospace;
	padding:4px 6px;
}

button {
	cursor:pointer;
}

button:hover {
	border-color:var(--magenta);
	color:var(--magenta);
}

canvas {
	display:block;
	margin-top:18px;
	border:1px solid var(--cyan);
}

#myCanvas {
	margin-bottom: 12px;
}

.kernel-panel {
	width: 100%;
	max-width: 514px; /* 512 + 2px border */
	margin: 0 auto;
	box-sizing: border-box;
}

.kernel-grid {
	display:grid;
	grid-template-columns:1fr; /* 9 vertical rows */
	gap:12px;
}

.kcell {
	text-align:center;
}

.kcell input[type=range] {
	width:100%;
}

.kcell div {
	color:var(--dim);
	font-size:12px;
	margin-top:4px;
}

.kcell.center div {
	color:var(--white);
}

.hint {
	color:var(--dim);
	font-size:12px;
	margin-top:6px;
}

#kernelDump {
	margin-top:14px;
	font-family:monospace;
	color:var(--dim);
}

/* --- squeeze kernel sliders vertically --- */
.kernel-grid input[type="range"] {
	padding: 0;
	border: 0;
	height: 16px;
	margin: 0;
}

.kernel-grid .kcell {
	padding: 0;
	margin: 0;
	line-height: 1;
}

.pad-switch {
	display: flex;
	gap: 12px;
	margin-bottom: 6px;
	font-family: monospace;
	font-size: 12px;
}

.pad-switch input {
	margin-right: 4px;

}


a{
	color: var(--cyan);
}