: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;accent-color:var(--main-accent-color);font-family:system-ui,sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{overscroll-behavior:none;overflow:hidden;width:100vw;height:var(--100vh);max-height:var(--100vh);max-width:100vw;background-color:var(--canvas)}body{margin:0;padding:0}main{padding:var(--space);display:flex;height:100%}main.window-controls-overlay{margin-block-start:env(titlebar-area-height)}input[type=range]{display:inline-block;width:var(--input-width)}canvas{display:none}progress{min-width:10rem}canvas.debug{--scale-factor: 2;width:auto;height:var(--input-image-height);display:block;margin-inline-start:var(--space);margin-block-start:calc(var(--menu-height) + 4 * var(--space) + var(--input-image-height));position:absolute;z-index:1;cursor:default;transform:translate(-50%) scale(var(--scale-factor))}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);overflow:hidden auto;scrollbar-width:none}summary{color:var(--alternative-accent-color);display:flex;align-content:center;margin-block:calc(2 * var(--space))}summary::-webkit-details-marker{display:none}summary::marker{content:""}.main>summary{display:none}details::-webkit-scrollbar{display:none}details[open]{flex-shrink:0}summary:after{margin-inline-start:var(--space)}details:not([open],.main)>summary:after{content:"\25b6"}details[open]:not(.main)>summary:after{content:"\25bc"}details.main{z-index:1;background-color:var(--canvas)}details.main .close-options-button{display:none;position:fixed;margin:.5rem 0 0;width:2.2rem;height:2.2rem;z-index:1;font-size:1rem}[dir=ltr] details.main .close-options-button{right:1.25rem}[dir=rtl] details.main .close-options-button{left:1.25rem}@media (max-width: 414px){summary,label,button,details{font-size:.9rem}details.main{position:absolute;margin-inline-start:var(--space);margin-block-start:calc(var(--menu-height) + 4 * var(--space));padding:var(--space);z-index:2}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);-webkit-backdrop-filter:saturate(180%) blur(100px);backdrop-filter:saturate(180%) blur(100px);background-color:var(--sidebar-background-color)}details.main>summary{display:flex;align-items:center;place-content:center;background-color:var(--canvas);border:solid 1px currentcolor;border-radius:var(--space);padding:var(--space);cursor:pointer}details.main[open]>summary{position:fixed;top:0;left:0;width:100vw;height:var(--100vh);cursor:auto;z-index:-1;opacity:0}details.main[open] .close-options-button{display:inline-block}}.input-image{width:auto;height:var(--input-image-height);object-fit:contain;position:absolute;margin-inline-start:var(--space);margin-block-start:calc(var(--menu-height) + 2 * var(--space));z-index:1;cursor:default;user-select:none}[dir=ltr] .input-image,[dir=ltr] canvas.debug{right:var(--space)}[dir=rtl] .input-image,[dir=rtl] canvas.debug{left:var(--space)}.input-image:hover,canvas.debug:hover{transform:translate(calc(var(--scale-factor, 0) * -50%)) scale(calc(var(--scale-factor, 1) * 2));z-index:2;cursor:zoom-in}[dir=ltr] .input-image:hover,[dir=ltr] canvas.debug{transform-origin:top right}[dir=rtl] .input-image:hover,[dir=rtl] canvas.debug{transform-origin:top left}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{width:100%;height:100%;position:absolute;cursor:grab}pinch-zoom>*{position:absolute;inset:0;visibility:hidden}.pinch-zoom-wrapper>svg{position:relative;top:0;left:0;width:100%;height:100%;pointer-events:none}.icon{margin-inline-end:var(--space);display:flex}.icon svg{width:2.5ex;height:2.5ex;fill:currentcolor;background-color:transparent}label{font-variant-numeric:tabular-nums;color:var(--canvas-text)}button{height:3ex;align-items:center;place-content:center;background-color:transparent;color:var(--canvas-text);border:solid 1px currentcolor;border-radius:var(--space);margin-inline-end:var(--space);cursor:pointer;padding:1px 6px}button.menu{border:none;width:max-content;flex-shrink:0;margin-inline-end:calc(4 * var(--space))}button.menu>span:last-of-type{direction:ltr}[data-i18n-key=svgOptions],label[for=color],label[for=monochrome]{direction:ltr}button.install{display:none}summary:hover,label:hover,button:hover{color:var(--main-accent-color);border-color:var(--main-accent-color)}.preprocess{display:flex;flex-direction:column;height:100%}.preprocess-input{display:flex;flex-direction:column;margin:var(--space)}.other-input{display:flex;margin:var(--space);height:3ex}.other-input.advanced,.preprocess-input.advanced{display:none}.sidebar{display:flex;flex-direction:column;padding:var(--space);gap:var(--space);min-width:var(--sidebar-width)}.link-list{list-style:none;margin-block-start:var(--space);padding-inline-start:var(--space);line-height:2}.link-list>li{display:inline-block}.link-list>li:not(:last-of-type):after{content:"\2022"}.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);flex-shrink:0;align-items:center;display:flex;overflow:auto hidden;gap:var(--space);scrollbar-width:none}.menu.window-controls-overlay{position:absolute;padding-block-start:calc(2 * var(--space));left:env(titlebar-area-x);top:env(titlebar-area-y);width:env(titlebar-area-width);height:env(titlebar-area-height);-webkit-app-region:drag}.window-controls-overlay button,.window-controls-overlay label{-webkit-app-region:no-drag;font-size:.9rem}.menu::-webkit-scrollbar{display:none}.main-area{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space);flex-grow:1;overflow:hidden}.dropenter:before{display:grid;place-items:center;top:0;left:0;width:100vw;height:100vh;content:attr(data-drop-text);position:absolute;z-index:2}.toast{color:var(--canvas-text);background-color:var(--canvas);align-self:center;border:solid 1px var(--canvas-text);padding:var(--space);position:absolute;bottom:5ex}.language{max-width:fit-content;font-size:inherit}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%);display:none}@media (prefers-color-scheme: dark){:root{--main-accent-color: hotpink;--alternative-accent-color: #337eff;--sidebar-background-color: rgb(0 0 0 / 50%);--canvas-text: #fff;--canvas: #131313;background-color:var(--canvas);color:var(--canvas-text)}.dropenter:before{background-color:#131313dd}.monochrome svg{filter:invert(100%)}button{color:var(--canvas-text)}button.with-bg{background-color:var(--canvas)}.checkerboard{background-image:linear-gradient(45deg,#131313 25%,transparent 25%,transparent 75%,#131313 75%,#131313 100%),linear-gradient(45deg,#131313 25%,#000 25%,#000 75%,#131313 75%,#131313 100%)}}@media (prefers-color-scheme: light){:root{--main-accent-color: #e60073;--alternative-accent-color: #337eff;--sidebar-background-color: rgb(255 255 255 / 50%);--canvas-text: #000;--canvas: #fff}.dropenter:before{background-color:#fffe}button.with-bg{background-color:#fff}.checkerboard{background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee 100%),linear-gradient(45deg,#eee 25%,white 25%,white 75%,#eee 75%,#eee 100%)}}