html,body{width:100vw;min-height:100vh}html,body,.editor,.editor-pane{overflow-x:hidden}a{color:inherit;text-decoration:none;transition:color .2s ease-in-out}body{--whitespace:20px;--total-whitespace:((var(--no-columns) + 1) * var(--whitespace));padding:var(--whitespace);grid-template-columns:repeat(calc((100vw - var(--total-whitespace)) / var(--no-columns)), var(--no-columns));justify-content:stretch;align-items:stretch;gap:var(--whitespace);display:grid}@media screen and (width<1000px){body{--no-columns:1;gap:calc(var(--whitespace) * 4) var(--whitespace);padding-bottom:calc(var(--whitespace) * 4);grid-template-rows:min-content repeat(3,minmax(300px,60svh)) min-content;grid-template-areas:"header""input""config""output""footer"}}@media screen and (width>=1000px) and (width<1500px){body{--no-columns:2;grid-template-rows:repeat(2,1fr) min-content;grid-template-areas:"header input""config output""footer footer"}}@media screen and (width>=1500px){body{--no-columns:3;grid-template-areas:"header config output""input config output""footer footer footer"}}body #input-editor{grid-area:input}body #config-editor{grid-area:config}body #output-editor{grid-area:output}body .editor{width:calc((100vw - var(--total-whitespace)) / var(--no-columns));border:2px solid var(--lightningcss-light,#b2b7bd)var(--lightningcss-dark,#262a2f);border-radius:8px;flex-direction:column;display:flex;box-shadow:0 10px 20px -10px var(--lightningcss-light,#9ca5af7e)var(--lightningcss-dark,#000)}body .editor>.header{background-color:var(--lightningcss-light,#fff)var(--lightningcss-dark,#0d1116);border-bottom:2px solid var(--lightningcss-light,#c5ccd5)var(--lightningcss-dark,#262a2f);width:100%;padding:10px 20px;font-size:1rem;font-weight:700;line-height:normal}body .editor>.header .hint{color:var(--lightningcss-light,#ff7e15)var(--lightningcss-dark,#ffb47e);background-color:var(--lightningcss-light,#fff3e9)var(--lightningcss-dark,#502b0c);border-radius:4px;padding:3px 5px;transform:skew(20deg)}body .editor>.editor-pane{background-color:var(--lightningcss-light,#fff)var(--lightningcss-dark,#0d1116);flex-grow:1}body header{grid-area:header}body header a{text-decoration:underline}body header>:not(:is(:first-child,:last-child)){margin:10px 0}body header h1{font-size:2em}body header p{opacity:.8;max-width:500px}body footer{text-align:center;text-wrap:balance;flex-wrap:wrap;grid-area:footer;justify-content:center;align-items:center;width:100%;display:flex}body footer a{padding-inline:7px;text-decoration:underline}body footer a:hover{color:var(--lightningcss-light,#000)var(--lightningcss-dark,#dbebff)}