:root{--gutter-colour:#cce1cf;--tab-hover:#bfd9c3;--tab-active:#a5caab;--line-hover:#f2f7f354;--line-selection:#f0ebbc64}button{font-family:monospace}.tab button{background-color:inherit;border:none;cursor:pointer;flex:1;float:left;outline:none;padding:6px;transition:.3s;white-space:nowrap}.tab button:hover{background-color:var(--tab-hover)}.tab button.active{background-color:var(--tab-active)}pre.tabcontent{background-color:#faf1f1;font-size:1rem;white-space:pre-wrap}iframe{padding:0!important}.tab{background-color:var(--gutter-colour);display:flex;flex-wrap:wrap;max-height:min-content;overflow:hidden}.tab,.tabcontent{border:1px solid #ccc}.tabcontent{display:none;flex:1;overflow:scroll;padding:6px 12px}.view{display:flex;flex-direction:column;grid-area:view;overflow:scroll;padding:0}.view *{margin:0}.input-area{display:flex;flex-direction:column;grid-area:input;overflow:scroll}#textbox{display:flex;flex:1;overflow:auto}.cm-editor{flex-grow:1;font-size:1rem}#editor-view{border:1px solid grey;display:grid;grid-template-areas:"input view";grid-template-columns:50% 50%;height:100%;overflow:hidden}body{background-color:#fafafa;font-size:1.25em;line-height:1.4;margin:0}header p{background-image:none;color:#7e8170;font-weight:400;margin:0}header{align-items:center;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:.15em .05em}h1,h2,h3,header{background-clip:text;-webkit-background-clip:text;background-image:linear-gradient(to bottom right,#13223f,#139323);color:transparent;font-weight:600;margin:0}@media (max-width:850px){#editor-view{grid-template-areas:"input" "view";grid-template-columns:100%;grid-template-rows:50% 50%}header{height:auto}body{font-size:1.125em}}