:root{--bg-color: #323437;--main-color: #eb0a14;--sub-color: #646669;--text-color: #d1d0c5}*{box-sizing:border-box}html{display:flex;min-height:100lvh;font-size:16px;align-items:stretch}body{flex:1;margin:0;background-color:var(--bg-color);color:var(--text-color);line-height:1.5;font-family:Roboto Mono,monospace}input,textarea,button{font:inherit;color:inherit}::-moz-selection{background-color:var(--main-color);color:#fff}::selection{background-color:var(--main-color);color:#fff}.app-panel{display:flex;gap:8px}@media (width < 1000px){.app-panel{display:none}}.app-panel--btn{padding:8px;font-size:16px;font-weight:600;background-color:#000000a6;border-radius:4px;border:none;cursor:pointer;outline:none;transition:background-color .2s ease-out}.app-panel--btn:hover,.app-panel--btn:focus{background-color:#000000d9}:root{--viewport-padding: 16px}.app{position:relative;height:100%;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path d="M1 2V0h1v1H0v1z" fill-opacity=".025"/></svg>');background-size:20px 20px}.app--img-controller{position:absolute;z-index:5;max-width:calc(50% - var(--viewport-padding) * 1.5);max-height:calc(25% - var(--viewport-padding) * 1.5)}.app--img-controller:nth-child(1){top:var(--viewport-padding);left:var(--viewport-padding)}.app--img-controller:nth-child(2){top:var(--viewport-padding);right:var(--viewport-padding)}.app--img-controller:nth-child(3){bottom:var(--viewport-padding);right:var(--viewport-padding)}.app--img-controller:nth-child(4){bottom:var(--viewport-padding);left:var(--viewport-padding)}.app-panel{position:absolute;bottom:var(--viewport-padding);left:50%;z-index:15;transform:translate(-50%)}:root{--split-x: 0px;--split-y: 0px;--handle-x: 0px;--handle-y: 0px;--handle-size: 5px;--handle-real-size: 32px}.app-space{position:relative;height:100%;overflow:hidden}.app-space__no-handles{--handle-size: 0}.app-space--space-wrapper{position:absolute;top:0;left:0;height:100%;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.app-space--space{position:absolute;top:0;left:0;height:100%;width:100%}.app-space--img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:filter .25s ease-out;--real-split-x: calc(50% + var(--split-x));--real-split-y: calc(50% + var(--split-y))}.app-space--img:nth-child(1){clip-path:inset(0 calc(100% - var(--real-split-x)) calc(100% - var(--real-split-y)) 0)}.app-space--img:nth-child(2){clip-path:inset(0 0 calc(100% - var(--real-split-y)) var(--real-split-x))}.app-space--img:nth-child(3){clip-path:inset(var(--real-split-y) 0 0 var(--real-split-x))}.app-space--img:nth-child(4){clip-path:inset(var(--real-split-y) calc(100% - var(--real-split-x)) 0 0)}.app-space--img__loading{filter:grayscale(1)}.app-space--img__ready{display:block}.app-space--handle{--bg: rgba(0 0 0 / .7);--shadow-color: rgba(255 255 255 / .1);position:absolute;z-index:8;display:flex;justify-content:center;align-items:stretch;border:0;padding:0;background:transparent;outline:none}.app-space--handle:hover,.app-space--handle:active{--bg: #000;--shadow-color: rgba(255 255 255 / .2)}.app-space--handle:before{content:"";flex-basis:var(--handle-size);background-color:var(--bg);box-shadow:0 0 0 1px var(--shadow-color);transition:background-color .2s ease-out,box-shadow .2s ease-out}.app-space--handle__v{width:var(--handle-real-size);margin:0 calc(var(--handle-real-size) / -2);top:0;bottom:0;left:calc(50% + var(--handle-x));cursor:ew-resize}.app-space--handle__h{height:var(--handle-real-size);margin:calc(var(--handle-real-size) / -2) 0;left:0;right:0;top:calc(50% + var(--handle-y));flex-direction:column;cursor:ns-resize}.app-space--handle-xy{position:absolute;transform:translate(-50%,-50%);z-index:10;top:calc(50% + var(--handle-y));left:calc(50% + var(--handle-x));width:calc(var(--handle-real-size) * 1.1);height:calc(var(--handle-real-size) * 1.1);opacity:0;background-color:#000c;border:none;cursor:move}.img-controller{display:flex;flex-direction:column;gap:4px}.img-controller.img-controller__tr .img-controller--stats,.img-controller.img-controller__br .img-controller--stats{text-align:right}.img-controller--url{min-height:35px}.img-controller--url{font-size:14px;display:block}.img-controller--inp{padding:8px;width:350px;max-width:100%;background-color:#000000a6;border-radius:4px;border:none;outline:none;transition:background-color .2s ease-out;font-family:Roboto;word-break:break-all;resize:none;scrollbar-width:thin;scrollbar-color:var(--sub-color) transparent}.img-controller--inp:hover,.img-controller--inp:focus{background-color:#000000d9}.img-controller--stats{margin:0;text-shadow:0 0 1px rgba(0 0 0 / .5);font-size:14px;font-weight:600;padding:8px;background-color:#000000a6;border-radius:4px;border:none}