.circuit-board {
	--cb-bg: #06090c;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--cb-bg);
	color: #c3d0dc;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.circuit-board--zoom {
	touch-action: none;
}

.circuit-board::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.025;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

.circuit-board canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.circuit-board__fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 1.5rem;
	text-align: center;
	font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}