Custom code editor palette in pure CSS

<div class="topbar">
	FileEditingSearchShowNavigationDevelopmentToolsHelp
	<div class="controls">
		
		
		
	</div>
</div>
<div class="menu">
	Work area
	<a href="#" class="current save css">style.css</a>
	<a href="#" class="html">index.html</a>
	<a href="#" class="js">javascript.js</a>
	<a href="#" class="add"></a>
</div>
<div class="code">
	<n><cm>/*</cm> </n>
	<n><cmm>Pen created by: <a href="https://codepen.io/Varo/" target="blank">Varo</a></cmm> </n>
	<n><cmm>Test it and make your own color palette!</cmm> </n>
	<n><cmm>Looks awesome right? Follow me to see more pens like it!</cmm> </n>
	<n><cm>*/</cm> </n>
	<n> </n>
	<n><c>.body </c>{ </n>
		<n><v>margin: <num>0</num>;</v> </n>
		<n><v>padding: <num>0</num>;</v> </n>
		<n><v>background: <hex>#32353D</hex>;</v> </n>
		<n><v>font-family: <cf>'Varela Round'</cf>, <cf>'Ionicons'</cf>, <f>sans-serif</f>;</v> </n>
		<n><v>user-select: <val>none</val>;</v> </n>
		<n><v><pr>-webkit-</pr>user-select: <val>none</val>;</v> </n>
	<n>} </n>
		<n><pr>::selection </pr>{ <vn>background: <rgba>rgba</rgba>(<num>95,191,249,.4</num>)</vn>; } </n>
	<n><c>.topbar </c>{ </n>
		<n><v>position: <val>fixed</val>;</v> </n>
		<n><v>top: <num>0px</num>;</v> </n>
		<n><v>left: <num>0px</num>;</v> </n>
		<n><v>height: <num>30px</num>;</v> </n>
		<n><v>width: <num>100%</num>;</v> </n>
		<n><v>background: <hex>#32353D</hex>;</v> </n>
		<n><v>line-height: <num>30px</num>;</v> </n>
		<n><v>z-index: <num>100</num>;</v> </n>
	<n>} </n>
	<n><c>.topbar span </c>{ </n>
		<n><v>padding: <num>2px 10px</num>;</v> </n>
		<n><v>margin: <num>0px 2px</num>;</v> </n>
		<n><v>font-size: <num>13px</num>;</v> </n>
		<n><v>border-radius: <num>5px</num>;</v> </n>
		<n><v>cursor: <val>pointer</val>;</v> </n>
	<n>} </n>
	<n><c>.menu </c>{ </n>
		<n><v>position: <val>fixed</val>;</v> </n>
		<n><v>top: <num>30px</num>;</v> </n>
		<n><v>left: <num>0px</num>;</v> </n>
		<n><v>width: <num>300px</num>;</v> </n>
		<n><v>height: <calc>calc</calc>(<num> 100% </num>-<num> 32px </num>);</v> </n>
		<n><v>height: <calc><pr>-webkit-</pr>calc</calc>(<num> 100% </num>-<num> 32px </num>);</v> </n>
		<n><v>padding-top: <num>2px</num>;</v> </n>
		<n><v>background: <hex>#32353D</hex>;</v> </n>
		<n><v>box-shadow: <val>inset</val> <num>0 2px 0</num> <rgba>rgba</rgba>(<num>255,255,255,.05</num>), <val>inset</val> <num>0 1px 0</num> <rgba>rgba</rgba>(<num>0,0,0,.4</num>);</v> </n>
		<n><v>transition: <val>all</val> <num>.2s</num> <val>ease</val>;</v> </n>
		<n><v><pr>-webkit-</pr>transition: <val>all</val> <num>.2s</num> <val>ease</val>;</v> </n>
	<n>} </n>
	<n><c>.menu a </c>{ </n>
		<n><v>display: <val>block</val>;</v> </n>
		<n><v>padding: <num>10px 10px 10px 40px</num>;</v> </n>
		<n><v>text-decoration: <val>none</val>;</v> </n>
		<n><v>color: <rgba>rgba</rgba>(<num>255,255,255,.5</num>);</v> </n>
		<n><v>box-shadow: <val>inset</val> <num>0 -1px 0</num> <rgba>rgba</rgba>(<num>255,255,255,.05</num>), <val>inset</val> <num>0 -2px 0</num> <rgba>rgba</rgba>(<num>0,0,0,.1</num>);</v> </n>
		<n><v>transition: <val>all</val> <num>.08s</num> <val>ease</val>;</v> </n>
		<n><v><pr>-webkit-</pr>transition: <val>all</val> <num>.08s</num> <val>ease</val>;</v> </n>
	<n>} </n>
	<n><c>.menu a<pr>:hover</pr></c> { </n>
		<n class="current"><v><cursor>|</cursor></v> </n>
	<n>} </n>
</div>