:root{--max-h:60vh;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--fg:#111;--bg:#fafafa;--muted:#595959;--line:#ccc;--line-strong:#858585;--accent:#15803d}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--fg:#eee;--bg:#161616;--muted:#a8a8a8;--line:#444;--line-strong:#6e6e6e;--accent:#4ade80}}@supports (height:100dvh){:root{--max-h:60dvh}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100vh;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));color:var(--fg);background:var(--bg);overflow-wrap:anywhere;place-items:center;margin:0;font:16px/1.4 system-ui,sans-serif;display:grid}@supports (height:100dvh){body{min-height:100dvh}}:focus-visible{outline:2px solid var(--fg);outline-offset:2px}main{text-align:center;gap:16px;width:min(640px,100%);display:grid}#drop{border:2px dashed var(--line-strong);cursor:pointer;border-radius:16px;place-items:center;min-height:240px;padding:48px 16px;display:grid}body.dragging #drop{border-color:var(--fg);background:color-mix(in srgb, var(--fg) 6%, transparent)}#drop img{max-width:100%;max-height:var(--max-h);background:repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 20px 20px;border-radius:8px}#status{color:var(--muted);min-height:1.4em}#status:empty{min-height:0;margin:0}.actions{justify-items:center;gap:16px;display:grid}.actions[hidden]{display:none}.buttons{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}button,a.button{font:inherit;border:1px solid var(--line-strong);color:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:10px 20px;text-decoration:none}a.button,button.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}.compare{--checker:repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 20px 20px;width:min(100%, calc(var(--max-h) * var(--ar,1)));aspect-ratio:var(--ar,1);background:var(--bg-fill,var(--checker));-webkit-user-select:none;user-select:none;touch-action:none;border-radius:8px;margin:0 auto;display:grid;position:relative;overflow:hidden}.compare img{grid-area:1/1;width:100%;height:100%;display:block}#before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.handle{top:0;bottom:0;left:var(--pos);pointer-events:none;background:#fff;width:2px;margin-left:-1px;position:absolute;box-shadow:0 0 0 1px #00000059}.handle:after{content:"‹ ›";color:#111;letter-spacing:2px;background:#fff;border-radius:50%;place-items:center;width:36px;height:36px;font:700 16px/1 system-ui;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0006}.tag{color:#fff;pointer-events:none;background:#000000bf;border-radius:999px;padding:2px 8px;font-size:13px;position:absolute;top:8px}.tag.left{left:8px}.tag.right{right:8px}#slider:focus-visible{outline:none}#slider{opacity:0;cursor:ew-resize;appearance:none;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}#slider::-webkit-slider-thumb{appearance:none;width:1px;height:100vh}.compare:has(#slider:focus-visible){outline:2px solid var(--fg);outline-offset:2px}.swatches{gap:10px;display:flex}.swatch{border:2px solid var(--line-strong);background:var(--c);cursor:pointer;border-radius:50%;width:32px;height:32px;padding:0;position:relative;overflow:hidden}.swatch.checker{background:repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 10px 10px}.swatch.custom{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.swatch.custom input{opacity:0;cursor:pointer;position:absolute;inset:0}.swatch.custom:has(input:focus-visible){outline:2px solid var(--fg);outline-offset:2px}.swatch[aria-pressed=true]{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--fg)}.welcome{gap:24px;width:min(520px,100%)}.welcome section{gap:8px;display:grid}.welcome h1,.page-header h1{margin:0;font-size:28px;line-height:1.2}.lead{color:var(--muted);margin:0}.check{color:var(--accent)}.bar{background:var(--line-strong);border-radius:999px;height:10px;overflow:hidden}.bar>div{background:var(--fg);width:0;height:100%;transition:width .25s}.bar.indeterminate>div{width:30%;animation:1.2s ease-in-out infinite slide}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(340%)}}.progress-text{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:8px;font-size:14px;display:flex}.points{text-align:left;border:1px solid var(--line-strong);border-radius:16px;gap:10px;margin:0;padding:16px 20px;list-style:none;display:grid}.points li{gap:12px;display:flex}.small{color:var(--muted);margin:0;font-size:14px}[hidden]{display:none!important}.page-header{gap:8px;display:grid}.download{text-align:left;gap:12px;display:grid}.download .lead{text-align:center}.download .progress-text{margin-top:-4px}.small a{color:inherit}main.doc{text-align:left;gap:0;line-height:1.6}.doc h1{margin:8px 0 0;font-size:32px;line-height:1.2}.doc h2{margin:28px 0 4px;font-size:20px}.doc p,.doc ul{margin:8px 0}.doc ul{padding-left:20px}.doc li+li{margin-top:8px}.doc a{color:inherit}.setting{color:var(--muted);cursor:pointer;justify-self:center;align-items:center;gap:8px;font-size:14px;display:inline-flex}html.popup .setting{display:none}html.popup{--max-h:330px}html.popup body{width:480px;min-height:0;padding:12px}html.popup main{gap:12px}html.popup #drop{min-height:160px;padding:16px}@media (width<=600px){button,a.button{min-height:44px}.swatches{gap:8px}.swatch{width:44px;height:44px}.buttons{width:100%}.buttons>*{flex:auto}.doc h1{font-size:28px}.doc h2{font-size:22px}.doc h3{font-size:18px}.small a,.doc a{min-height:44px;padding:0 2px;line-height:44px;display:inline-block}.setting{align-items:center;min-height:44px;display:inline-flex}.setting input{width:24px;height:24px}}