*{box-sizing:border-box}body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden}#cp,#lp{width:50%;height:100%;float:left}#cp{background-color:#eee;overflow-y:scroll}#lp{text-align:center;background-color:#000}p,pre{margin:0}#pre{font-family:monospace;width:100%;color:#666;padding:20px;background-color:transparent;outline:0;border:none;white-space:pre-wrap}#cw{font-family:monospace;width:100%;height:calc(60% - 80px);padding:20px;background-color:transparent;outline:0;border:none;border-top:solid 1px #aaa;border-bottom:solid 1px #aaa}#cr,#ex,#le{font-family:sans-serif;font-weight:100;margin-top:15px;margin-left:15px;height:50px;line-height:50px;font-size:18px;text-align:center;text-decoration:none;padding:0 40px;float:left;display:block;color:#fff;background-color:#00a2ff;position:relative}#cr:hover,#le:hover{background-color:#40f}.examples{width:90%;max-width:400px;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);height:0;overflow:hidden}.examples.show{height:auto;max-height:400px;overflow-y:scroll}.examples a{text-transform:uppercase;background-color:#00a2ff;color:#fff;text-align:center;text-decoration:none;font-size:18px;font-family:sans-serif;font-weight:100;height:50px;line-height:50px;display:block;width:100%}.examples a:hover{background-color:#40f}.bar{height:69vh;width:3vh;margin:20vh 3vh;display:inline-block;background-color:#0f0f0f}.light{width:1vh;height:1vh;margin:.15vh 1vh;background-color:red;transform:scale(.8);transform-origin:center;filter:blur(2px);border-radius:50%}