:root{--color-toolbox-webp-before:hsl(214,27%,45%);--color-toolbox-webp-after:hsl(201,100%,39%);}#preview{position:relative;width:100%;overflow:hidden;user-select:none;touch-action:none;background-color:#ffffff;background-image:linear-gradient(45deg,#dedede 25%,transparent 25%,transparent 75%,#dedede 75%),linear-gradient(45deg,#dedede 25%,transparent 25%,transparent 75%,#dedede 75%);background-position:8px 8px,24px 24px;background-size:32px 32px;border:1px solid rgba(0,0,0,0.5);border-radius:8px;}#viewport{position:relative;width:100%;aspect-ratio:16/9;transform-origin:top left;transform:translate(0,0) scale(1);}#viewport img{position:absolute;top:0;left:0;width:auto;height:auto;max-width:none;max-height:none;pointer-events:none;user-select:none;}#preview.busy img{display:none;}#clip{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;}#clip .inner{position:absolute;top:0;left:-100%;width:200%;height:100%;}#clip .after{position:absolute;top:0;left:0;}#viewport img.after{position:absolute;}#viewport img,#clip .inner{transform-origin:top left;}#separator{position:absolute;top:0;left:50%;width:1px;height:100%;transform:translateX(-1px);z-index:10;backdrop-filter:invert(100%);opacity:0.5;}#quality-value{font-size:var(--nurume-size-22);--fuchi-color:var(--color-main);}#quality-value:after{content:'%';font-size:var(--nurume-size-16);}#separator.hide{display:none;}.before-after{display:flex;width:100%;}.before-after li{width:50%;text-align:center;}#result-top{margin-bottom:8px;}#result-top h4{font-size:var(--nurume-size-16);color:#fff;padding:0 16px;display:inline-flex;align-items:center;border-radius:9999px;height:36px;}#result-top .before h4{background:var(--color-toolbox-webp-before);}#result-top .after h4{background:var(--color-toolbox-webp-after);}#result-bottom{width:100%;margin-top:8px;}#result-bottom h4{margin-bottom:12px;color:#fff;display:inline-flex;border-radius:9999px;background:var(--color-main);height:32px;align-items:center;padding:0 16px;font-size:var(--nurume-size-16);}#controller{margin-top:16px;filter:hue-rotate(-90deg) saturate(90%);}#controller li{margin-top:16px;}#controller li:first-child{margin:0;}#zoom{display:flex;align-items:center;justify-content:center;width:100%;}#zoom input[type='button']{background:var(--color-main);color:#fff;border:none;}#scale{text-align:center;width:120px;font-size:var(--nurume-size-22);--fuchi-color:var(--color-main);}#scale:after{content:'%';font-size:var(--nurume-size-18);}#info{font-size:var(--nurume-size-22);}#info .before{color:var(--color-toolbox-webp-before);}#info .after{color:var(--color-toolbox-webp-after);}#result .btn{margin-top:64px;}#note{margin-top:64px;font-size:var(--nurume-size-12);}