html,body{font:15px/1.3 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:400}#in,#out,#code{position:absolute;box-sizing:border-box;top:0;height:100%;width:50%;padding:10px;background:#f9f9f9;border:none;font:inherit}#in{left:0;background:#fff;outline:none;border-top:4px solid red;border-right:4px solid blue;border-bottom:4px solid green;border-left:4px solid yellow;animation:border 2s linear}@keyframes border{0%{border-top-color:red;border-right-color:#00f;border-bottom-color:green;border-left-color:#ff0}25%{border-top-color:#ff0;border-right-color:red;border-bottom-color:#00f;border-left-color:green}50%{border-top-color:green;border-right-color:#ff0;border-bottom-color:red;border-left-color:#00f}75%{border-top-color:#00f;border-right-color:green;border-bottom-color:#ff0;border-left-color:red}to{border-top-color:red;border-right-color:#00f;border-bottom-color:green;border-left-color:#ff0}}#out,#code{left:50%;height:75%;border-left:1px solid #CCC;overflow:auto}#code{top:75%;height:25%;background:#333;color:#ddd;margin:0}br{content:"A";display:block;margin-bottom:.5em}code{padding:0 3px;border:1px solid #CCC;border-radius:2px;background:#fff}pre.code>code{display:block;padding:2px 5px;border:1px solid #DDD;background:#fff;border-left-width:3px}