:root{--100vh:100vh;--space:.25rem;--mobile-breakpoint:414px;--menu-height:5ex;--sidebar-width:15rem;--input-image-height:5rem;--input-width:10rem;--color-scheme:dark light;--focus-ring-color:-webkit-focus-ring-color;accent-color:var(--main-accent-color);color-scheme:var(--color-scheme);font-family:system-ui,sans-serif}*,:before,:after{box-sizing:border-box}html,body{overscroll-behavior:none;width:100vw;max-width:100vw;height:var(--100vh);max-height:var(--100vh);background-color:var(--canvas);overflow:hidden}body{margin:0;padding:0}main{height:100%;display:flex}main.window-controls-overlay{margin-block-start:env(titlebar-area-height)}progress{min-width:10rem}canvas{display:none}canvas.debug{--scale-factor:2;width:auto;height:var(--input-image-height);z-index:1;cursor:default;margin-block-start:calc(var(--menu-height) + 4 * var(--space) + var(--input-image-height));margin-inline-start:var(--space);display:block;position:absolute;inset-inline-end:var(--space)}input[type=range]{width:var(--input-width);display:inline-block}summary,label,button,details{font-family:inherit;font-size:inherit;white-space:nowrap;user-select:none;cursor:pointer;margin-block-end:var(--space)}details{margin-block-end:calc(2 * var(--space));padding-inline-end:var(--space)}summary{color:var(--alternative-accent-color);margin-block:calc(2 * var(--space));align-content:center;display:flex}summary::-webkit-details-marker{display:none}summary::marker{content:""}.main>summary{display:none}details[open]{flex-shrink:0}details[open]::details-content{display:contents}summary:after{margin-inline-start:var(--space)}[dir=ltr] details:not([open],.main)>summary:after{content:"▶"}[dir=rtl] details:not([open],.main)>summary:after{content:"◀️"}details[open]:not(.main)>summary:after{content:"▼"}details.main{z-index:1;height:100%}details.main .close-options-button{z-index:1;width:2.2rem;height:2.2rem;margin:.5rem 0 0;font-size:1rem;display:none;position:fixed;inset-inline-end:1.25rem}@media (width<=414px){summary,label,button,details{font-size:.9rem}details.main{padding:var(--space);z-index:2;margin-block-start:calc(var(--menu-height) + 4 * var(--space));margin-inline-start:var(--space);position:absolute}details[open].main{width:100vw;max-height:calc(var(--100vh) - var(--menu-height) - 9 * var(--space))}details[open].main>.sidebar{max-width:calc(100% - var(--space) * 4);backdrop-filter:saturate(180%)blur(100px);background-color:#0000}details.main>summary{background-color:var(--canvas);border-radius:var(--space);padding:var(--space);cursor:pointer;border:1px solid;place-content:center;align-items:center;display:flex}details.main[open]>summary{width:100vw;height:var(--100vh);cursor:auto;z-index:-1;opacity:0;position:fixed;top:0;left:0}details.main[open] .close-options-button{display:inline-block}}.input-image{width:auto;height:var(--input-image-height);object-fit:contain;z-index:1;cursor:default;user-select:none;margin-block-start:calc(var(--menu-height) + 2 * var(--space));margin-inline-start:var(--space);position:absolute;inset-inline-end:var(--space)}.input-image:hover{transform:translateX(calc(var(--scale-factor,0) * 50%)) scale(calc(var(--scale-factor,1) * 2))}canvas.debug:hover,.input-image:hover{z-index:2;cursor:zoom-in}[dir=ltr] canvas.debug,[dir=ltr] .input-image{transform-origin:100% 0}[dir=rtl] canvas.debug,[dir=rtl] .input-image{transform-origin:0 0}[dir=ltr] canvas.debug{transform:translateX(50%) scale(var(--scale-factor))}[dir=rtl] canvas.debug{transform:translateX(-50%) scale(var(--scale-factor))}[dir=ltr] canvas.debug:hover{transform:translateX(calc(var(--scale-factor,0) * 50%)) scale(calc(var(--scale-factor,1) * 2))}[dir=rtl] canvas.debug:hover{transform:translateX(calc(var(--scale-factor,0) * -50%)) scale(calc(var(--scale-factor,1) * 2))}summary svg{fill:var(--alternative-accent-color)}.svg-output{color:var(--canvas-text)}.checkerboard{background-position:0 0, calc(2 * var(--space)) calc(2 * var(--space));background-size:calc(4 * var(--space)) calc(4 * var(--space))}.pinch-zoom-wrapper{width:100%;height:100%}pinch-zoom{cursor:grab;width:100%;height:100%;position:absolute}pinch-zoom>*{visibility:hidden;position:absolute;inset:0}.pinch-zoom-wrapper>svg{pointer-events:none;width:100%;height:100%;position:relative;top:0;left:0}.icon{margin-inline-end:var(--space);display:flex}.icon svg{fill:currentColor;background-color:#0000;width:2.5ex;height:2.5ex}label{font-variant-numeric:tabular-nums;color:var(--canvas-text)}select,button{height:3ex;color:var(--canvas-text);border-radius:var(--space);cursor:pointer;background-color:#0000;border:1px solid;place-content:center;align-items:center;margin-inline-end:var(--space);padding:1px 6px}select{flex-shrink:0}button.menu{width:max-content;border:none;flex-shrink:0;margin-inline-end:calc(4 * var(--space))}button.menu>span:last-of-type,[data-i18n-key=svgOptions],label[for=color],label[for=monochrome]{direction:ltr}button.share,button.install{display:none}summary:hover,label:hover,button:hover{color:var(--main-accent-color);border-color:var(--main-accent-color)}.preprocess{flex-direction:column;height:100%;display:flex}.preprocess-input{margin:var(--space);flex-direction:column;display:flex}.preprocess-input>div{gap:var(--space);display:flex}.other-input{margin:var(--space);align-items:flex-start;gap:var(--space);height:3ex;display:flex}.other-input.advanced,.preprocess-input.advanced{display:none}.sidebar{scrollbar-width:none;padding:var(--space);gap:var(--space);min-width:var(--sidebar-width);background-color:var(--canvas);flex-direction:column;height:100%;display:flex;overflow:hidden auto}.sidebar::-webkit-scrollbar{display:none}.link-list{margin-block:var(--space);padding-inline-start:var(--space);line-height:2;list-style:none}.link-list>li{display:inline-block}.link-list>li:not(:last-of-type):after{content:"•"}.link-list a{color:var(--canvas-text);text-decoration:none}.link-list a:hover{color:var(--main-accent-color)}.menu{width:100%;height:var(--menu-height);align-items:center;gap:var(--space);scrollbar-width:none;flex-shrink:0;display:flex;overflow:auto hidden}.menu.window-controls-overlay{left:env(titlebar-area-x);top:env(titlebar-area-y);width:env(titlebar-area-width);height:env(titlebar-area-height);-webkit-app-region:drag;padding-block-start:calc(2 * var(--space));position:absolute}.window-controls-overlay button,.window-controls-overlay label{-webkit-app-region:no-drag;font-size:.9rem}.menu::-webkit-scrollbar{display:none}.main-area{align-items:flex-start;gap:var(--space);flex-direction:column;flex-grow:1;display:flex;overflow:hidden}.dropenter:before{content:attr(data-drop-text);z-index:2;place-items:center;width:100vw;height:100vh;display:grid;position:absolute;top:0;left:0}.toast{color:var(--canvas-text);background-color:var(--canvas);border:solid 1px var(--canvas-text);padding:var(--space);align-self:center;position:absolute;bottom:5ex}.language{max-width:fit-content;font-size:inherit;margin-block:calc(2 * var(--space))}.language:hover{color:var(--main-accent-color);border-color:var(--main-accent-color)}dark-mode-toggle{--dark-mode-toggle-light-icon:url(/moon.svg);--dark-mode-toggle-dark-icon:url(/sun.svg);--dark-mode-toggle-color:var(--canvas-text);--dark-mode-toggle-icon-filter:invert(100%);border:solid 1px var(--canvas-text);border-radius:var(--space);max-width:fit-content;margin-block:calc(2 * var(--space))}dark-mode-toggle:focus-within{outline:solid 2px var(--focus-ring-color,var(--main-accent-color));outline-offset:-1px}dark-mode-toggle:focus::part(toggleLabel){outline:none}dark-mode-toggle:hover{--dark-mode-toggle-color:var(--main-accent-color);border-color:var(--main-accent-color)}
/*$vite$:1*/