html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;vertical-align:baseline;border:0;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--white:#fff;--black:#000}html{background-color:var(--white);color:var(--black);-webkit-user-select:none;user-select:none;height:100%;font-family:Courier New,Courier,monospace}*{box-sizing:border-box}body{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100%;display:flex}main{grid-template-columns:auto 1fr;align-items:flex-start;width:100%;min-height:100%;display:grid}main>section{padding:1rem}h1{text-align:initial;grid-column:1/-1;font-size:200%;font-weight:700}#controls{grid-gap:.25rem 1rem;grid-template-columns:auto 1fr;width:100%;display:grid}#controls h2{grid-column:1/-1}#preview{flex-direction:column;width:100%;min-width:0;height:100vh;display:flex;position:sticky;top:0}#preview hr{touch-action:none}#preview>figure{min-height:2.5rem}hr{border:0;border-top:1px solid #bbb;grid-column:span 2;width:100%;margin:0}#preview>hr{cursor:ns-resize;border:none;flex:none;height:.5rem}label{text-align:right;align-self:center}label[title]{cursor:help}input[type=file]{width:100%}.range{align-items:center;gap:.5rem;display:flex}.range>input[type=range]{flex:auto;width:100%}.range>input[type=number]{flex:none;width:0;min-width:4rem}button:disabled,input:disabled{opacity:.5;cursor:not-allowed}button{width:100%}input,button{cursor:pointer;min-width:0;padding:.25rem;font-family:inherit}details>summary{cursor:pointer}figure{border:1px solid #888;position:relative}figure>figcaption{background:var(--white);border:1px solid #888;border-top:0;border-left:0;padding:.25rem;position:absolute;top:0;left:0}figure>figcaption>a:not(:hover){text-decoration:none}figure>div{background-color:#888;width:100%;height:100%;display:flex}figure>div>img{object-fit:contain;width:100%;height:100%;margin:auto}canvas,img{image-rendering:pixelated;display:block}figure figcaption button{width:auto}#output-container canvas{object-fit:contain;width:100%;height:100%;margin:auto}#preview-container{display:flex;overflow:auto}figure canvas{margin:auto}.fill{grid-column:1/-1}.grid{grid-column:1/-1;height:50vh;position:relative}.grid canvas{cursor:crosshair;width:100%;height:100%;margin:auto;position:absolute;inset:0}footer{pointer-events:none;justify-content:flex-end;width:100%;font-size:75%;display:flex;position:fixed;bottom:.25rem;right:1rem}footer>*{pointer-events:auto;width:auto}dialog{color:var(--black);background-color:var(--white);text-align:initial;max-width:48rem}dialog p:not(:first-child){margin-top:.5rem}dialog p:not(:last-child){margin-bottom:.5rem}dialog a{color:inherit;opacity:.8}dialog a:visited{opacity:.6}dialog a:hover{opacity:.9}dialog a:active{opacity:1}dialog ul{list-style:initial;margin-inline-start:1rem}dialog::backdrop,dialog+.backdrop{background-color:#000c}dialog+.backdrop{width:100%;height:100%;position:fixed;inset:0}dialog nav{flex-wrap:wrap;flex:none;width:100%;display:flex}dialog nav button{width:auto;margin-inline-start:auto}kbd{border:solid 1px var(--black);border-radius:.25rem;padding:.25rem;display:inline-block}#toggle-theme{color:#0000;width:auto;margin-inline-end:.5rem;font-size:0}#toggle-theme:after{content:"🔆";color:initial;font-size:1rem}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--white:#000;--black:#fff}:root[data-theme=dark] #toggle-theme:after{content:"🌙"}@media (prefers-color-scheme:dark){:root:not([data-theme]){--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--white:#000;--black:#fff}:root:not([data-theme]) #toggle-theme:after{content:"🌙"}}@media screen and (max-width:36rem){h1{text-align:center;font-size:125%}main{display:block}#preview{height:unset;flex-direction:column-reverse}#preview>figure{flex:none}#preview hr{display:none}}@media (pointer:coarse){button{padding:.5rem}input,details>summary,#preview hr{padding-block:.5rem}}