body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}html{font-size:16px}button,input,select,textarea{font-family:inherit;font-size:inherit}*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,table,th,td,form,input,button,select,option{margin:0;padding:0}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:2em}button{border:1px solid;border-radius:0;background:#fff;padding:10px}html,body,div#app{height:100%}main{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;height:100%}main{>.program{width:calc(100% - 2rem);height:400px;display:flex;gap:.5rem;>.editor{flex:1;>textarea{width:100%;height:100%;padding:.5rem;font-family:Courier New,monospace}position:relative;>.variables{position:absolute;top:.5rem;right:.5rem;padding:.25rem;border:1px solid #888;font-family:Courier New,monospace;display:flex;flex-direction:column;align-items:end}}>canvas{flex:1;border:1px solid;min-width:100px;transition:background-color .25s;&.clip{background:#f003;transition:background-color .05s}}&.invalid{textarea{background:#f003}}}.buttons{display:flex;gap:1rem;button{font-size:48px}}}