html,body {font-family:sans-serif;}

h2 {margin-bottom:2rem;}

div#container {}

div#container div.level {padding:.25rem 0; /*border:2px dashed #0004;*/}
div#container>div.level,
div#container>div.level>div.level {padding:1rem 0;}

div#container div.level div.level {margin-left:3rem; position:relative;}

div#container div.level div.level:before {content:''; position:absolute; top:0; left:0; box-sizing:border-box; width:3rem; height:calc(1.125rem + .25rem); border-left:1px solid black; border-bottom:1px solid black;}
div#container>div.level>div.level:before {height:calc(1.125rem + 1rem);}
div#container div.level div.level::after {content:''; position:absolute; bottom:0; left:0; box-sizing:border-box; width:3rem; height:100%; border-left:1px solid black;}
div#container div.level div.level:last-child::after {border-left:0 none;}

div#container div.level div.block {text-align:center; padding:.5rem; min-width:6rem; min-height:2.25rem; box-sizing:border-box; border: 1px solid black; display:inline-block; margin-left:3rem; position:relative;}
div#container div.level div.block::before {content:''; position:absolute; top:50%; left:0; height:1px; width:1px; transform:translate(-50%,-50%);}
div#container div.level div.block::before {border:.3rem solid transparent; border-left-color:black; border-width:.3rem .75rem;}

div#container div.level div.block label:before {content:'<'; margin:0 3px;}
div#container div.level div.block label::after {content:'>'; margin:0 3px;}