Switch, label don't work :(

dabblet.css

/* Switch, label don't work :( */

.board {
	position: absolute;
	top: 0;
	z-index: 0;
}

.board:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #FFF;
	z-index: -1;
}

.board .board {
	z-index: -2;
}

.board .board:not(:active)  {
	z-index: -2;

	transition: z-index 0s 999999s;
}
.board label:active ~ .board {
	z-index: 0;
	transition: z-index 0s;
}

dabblet.html

<div class="board">
	<input type="checkbox" id="a1"><label for="a1">a1</label>
	
	<div class="board">
		<input type="checkbox" id="a2"><label for="a2">a2</label>
	
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}