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

/* ===============================
   Global page
   =============================== */

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

	max-width: 1200px;
	margin: 0 auto;
}

/* ===============================
   Panels (base)
   =============================== */

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

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

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

/* ===============================
   Top layout (A)
   =============================== */

.top-layout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	align-items: start;
	margin-bottom: 24px;
}

/* ===============================
   Left controls (B)
   =============================== */

.left-controls {
	display: flex;
	flex-direction: column;
	gap: 16px;

	/* squeeze to content */
	width: max-content;
}

/* ===============================
   Right controls (C)
   =============================== */

.right-controls {
	width: 100%;
}

/* ===============================
   Inputs
   =============================== */

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);
}

/* ===============================
   Kernel sliders
   =============================== */

.kernel-panel {
	width: 100%;
	box-sizing: border-box;
}

.kslider {
	margin-bottom: 10px;
}

.kslider-title {
	color: var(--cyan);
	font-size: 12px;
	margin-bottom: 2px;
}

.kslider input[type="range"] {
	width: 100%;
	height: 16px;
	border: 0;
	padding: 0;
	margin: 0;
}

/* ===============================
   3-face viewer
   =============================== */

.faces {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 8px;
}

.faces > div {
	flex: 0 0 auto;
	text-align: center;
}

.face-title {
	color: var(--dim);
	font-size: 12px;
	margin-bottom: 6px;
}

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

/* ===============================
   Toroidal translation
   =============================== */

.torus-panel {
	margin-top: 24px;
}

/* tighter vertical spacing for torus sliders */

.torus-panel .kslider {
	margin-bottom: 6px;
}

.torus-panel .kslider-title {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

/* ===============================
   Misc
   =============================== */

.pad-switch {
	display: flex;
	gap: 12px;
	font-size: 12px;
}

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

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

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

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

/* ===============================
   Slider header: title + hint
   =============================== */

.kslider-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 2px;
}

.kslider-hint {
	color: var(--dim);
	font-size: 12px;
	white-space: nowrap;
}

#isoCanvas {
	display: block;
	margin: 0 auto;
	border: 1px solid var(--cyan);
	background: #000;
}

.sync-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--dim);
	margin-bottom: 6px;
	user-select: none;
}

.sync-toggle input {
	margin: 0;
}