:root{--paper:#f3f0e8;--surface:#fffdf8;--surface-subtle:#f8f6ef;--ink:#202623;--muted:#68716c;--border:#d6d8d0;--border-strong:#b7bdb6;--accent:#176c50;--accent-hover:#105b42;--accent-soft:#e0eee7;--image-a:#c96943;--image-a-soft:#f5e5dc;--image-b:#436e9a;--image-b-soft:#e3eaf2;--danger:#a23832;--danger-soft:#f8e8e5;--canvas:#1f2422;--canvas-border:#363d39}.app-shell{min-height:100vh}.site-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;width:min(100% - 2rem,90rem);min-height:4.5rem;margin-inline:auto;display:flex}.wordmark{color:var(--ink);letter-spacing:-.015em;align-items:center;gap:.65rem;font-size:1rem;font-weight:700;text-decoration:none;display:inline-flex}.wordmark__mark{color:#fff;background:var(--accent);border-radius:.55rem;place-items:center;width:2rem;height:2rem;display:grid}.wordmark__mark svg{width:1.15rem;height:1.15rem}.privacy-note{color:var(--muted);letter-spacing:.01em;align-items:center;gap:.5rem;font-size:.8125rem;display:inline-flex}.privacy-note>span{background:var(--accent);border-radius:50%;width:.5rem;height:.5rem}main{gap:clamp(2.75rem,6vw,5.5rem);width:min(100% - 2rem,90rem);margin-inline:auto;padding-block:clamp(3.5rem,8vw,7rem) 3rem;display:grid}.intro{gap:1rem;max-width:58rem;display:grid}.eyebrow{color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;font-weight:700}.intro h1{max-width:19ch;font-size:clamp(2.4rem,6vw,4.75rem);font-weight:720}.intro__copy{max-width:62ch;color:var(--muted);font-size:clamp(1rem,2vw,1.1875rem);line-height:1.5}.source-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.source-panel{background:var(--surface);border:1px solid var(--border);border-radius:1.25rem;gap:1.25rem;min-width:0;padding:clamp(1.25rem,2.5vw,2rem);display:grid}.source-panel__heading{align-items:flex-start;gap:.875rem;display:flex}.source-panel__heading h2{margin-bottom:.3rem;font-size:1.125rem}.source-panel__heading p{color:var(--muted);font-size:.875rem}.source-panel__badge{border-radius:50%;flex:none;place-items:center;width:2.125rem;height:2.125rem;font-size:.8125rem;font-weight:750;display:grid}.source-panel__badge--a{color:#7b351d;background:var(--image-a-soft)}.source-panel__badge--b{color:#284c73;background:var(--image-b-soft)}.url-form{gap:.5rem;display:grid}.url-form>label{width:fit-content;color:var(--ink);font-size:.8125rem;font-weight:650}.url-form__controls{grid-template-columns:minmax(0,1fr) auto;gap:.5rem;display:grid}.input-with-icon{min-width:0;position:relative}.input-with-icon svg{width:1.125rem;height:1.125rem;color:var(--muted);pointer-events:none;position:absolute;top:50%;left:.875rem;transform:translateY(-50%)}.input-with-icon input{width:100%;min-height:2.875rem;color:var(--ink);border:1px solid var(--border-strong);background:#fff;border-radius:.625rem;padding:.7rem .875rem .7rem 2.6rem;font-size:1rem;transition:border-color .15s ease-out,box-shadow .15s ease-out}.input-with-icon input:hover{border-color:#939c95}.input-with-icon input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);outline:none}.input-with-icon input[aria-invalid=true]{border-color:var(--danger)}.input-with-icon input::placeholder{color:#8a928d}.button,.icon-button,.segmented-control button,.scale-control button,.zoom-control button{border:0;justify-content:center;align-items:center;min-height:2.75rem;transition:color .15s ease-out,background-color .15s ease-out,border-color .15s ease-out,transform .1s ease-out;display:inline-flex}.button{border-radius:.625rem;gap:.5rem;padding:.65rem 1rem;font-size:.875rem;font-weight:700}.button--primary{color:#fff;background:var(--accent)}.button--primary:not(:disabled):hover{background:var(--accent-hover)}.button--primary:not(:disabled):active,.icon-button:not(:disabled):active,.segmented-control button:not(:disabled):active,.scale-control button:not(:disabled):active,.zoom-control button:not(:disabled):active{transform:scale(.98)}button:disabled{cursor:not-allowed;opacity:.45}.spinner{border:2px solid #ffffff6b;border-top-color:#fff;border-radius:50%;width:1rem;height:1rem;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.source-panel__divider{color:var(--muted);grid-template-columns:1fr auto 1fr;align-items:center;gap:.625rem;font-size:.75rem;display:grid}.source-panel__divider:before,.source-panel__divider:after{content:"";background:var(--border);height:1px}.drop-zone{min-height:4.5rem;color:var(--muted);text-align:center;background:var(--surface-subtle);border:1px dashed var(--border-strong);border-radius:.75rem;justify-content:center;align-items:center;gap:.625rem;padding:1rem;font-size:.875rem;transition:color .15s ease-out,background-color .15s ease-out,border-color .15s ease-out;display:flex}.drop-zone:hover,.drop-zone--active{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}.drop-zone:has(input:focus-visible){color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}.drop-zone svg{flex:none;width:1.25rem;height:1.25rem}.drop-zone strong{color:var(--ink)}.inline-message{border-radius:.625rem;padding:.75rem .875rem;font-size:.8125rem;line-height:1.45}.inline-message--error{color:#762d29;background:var(--danger-soft);border:1px solid #e2b8b2}.loaded-file{border:1px solid var(--border);background:#fff;border-radius:.75rem;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.625rem;display:grid}.loaded-file__thumbnail{object-fit:cover;background:var(--surface-subtle);border:1px solid var(--border);border-radius:.5rem;width:3.25rem;height:3.25rem}.loaded-file__details{min-width:0}.loaded-file__status{color:var(--accent);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:.3rem;margin-bottom:.1rem;font-size:.6875rem;font-weight:750;display:flex}.loaded-file__status svg{width:.875rem;height:.875rem}.loaded-file__name{text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:650;overflow:hidden}.loaded-file__meta{color:var(--muted);font-variant-numeric:tabular-nums lining-nums;font-size:.75rem}.icon-button{width:2.75rem;color:var(--muted);background:0 0;border-radius:.5rem;padding:0}.icon-button:hover{color:var(--danger);background:var(--danger-soft)}.icon-button svg{width:1.125rem;height:1.125rem}.source-panel__empty{color:#8a928d;align-items:center;gap:.45rem;min-height:2rem;font-size:.75rem;display:flex}.source-panel__empty svg{width:1rem;height:1rem}.workspace{min-width:0}.workspace__heading{justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:1rem;display:flex}.workspace__heading .eyebrow{margin-bottom:.5rem}.workspace__heading h2{font-size:clamp(1.75rem,3vw,2.5rem)}.workspace__hint{max-width:44ch;color:var(--muted);text-align:right;font-size:.8125rem}.comparison-toolbar{background:var(--surface);border:1px solid var(--border);border-bottom:0;border-radius:1rem 1rem 0 0;justify-content:space-between;align-items:center;gap:.75rem;min-height:4.25rem;padding:.625rem;display:flex}.segmented-control,.scale-control,.zoom-control{background:var(--surface-subtle);border:1px solid var(--border);border-radius:.75rem;gap:.25rem;padding:.25rem;display:flex}.segmented-control button,.scale-control button,.zoom-control button{min-height:2.5rem;color:var(--muted);background:0 0;border-radius:.5rem;gap:.45rem;padding:.5rem .75rem;font-size:.8125rem;font-weight:650}.segmented-control button:not(.is-active):hover:not(:disabled),.scale-control button:not(.is-active):hover:not(:disabled),.zoom-control button:hover:not(:disabled){color:var(--ink);background:#edece6}.segmented-control button.is-active,.scale-control button.is-active{color:#fff;background:var(--accent)}.segmented-control svg,.scale-control svg,.zoom-control svg{width:1rem;height:1rem}.comparison-toolbar__right{align-items:center;gap:.75rem;display:flex}.zoom-control{align-items:center;gap:0}.zoom-control button{width:2.5rem;padding:0}.zoom-control input{width:clamp(4.5rem,8vw,7rem);min-height:2.5rem;accent-color:var(--accent);margin-inline:.375rem}.zoom-control__value{min-width:3.5rem;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;text-align:center;font-size:.75rem;font-weight:650}.opacity-control{min-height:2.75rem;color:var(--muted);grid-template-columns:auto minmax(5rem,8rem) 2.75rem;align-items:center;gap:.625rem;font-size:.75rem;display:grid}.opacity-control input{min-height:2.75rem;accent-color:var(--accent)}.opacity-control output{color:var(--ink);font-variant-numeric:tabular-nums lining-nums;text-align:right}.workspace__canvas{background:repeating-conic-gradient(#292f2c 0 25%, #242a27 0 50%) 50% / 1.25rem 1.25rem;border:1px solid var(--canvas-border);border-radius:0 0 1rem 1rem;min-height:32rem;overflow:hidden}.comparison-empty{color:#b7c0bb;text-align:center;place-content:center;justify-items:center;min-height:32rem;padding:2rem;display:grid}.comparison-empty__illustration{width:5rem;height:3.75rem;margin-bottom:1.25rem;position:relative}.comparison-empty__illustration svg{stroke-width:1px;width:3.25rem;height:3.25rem;position:absolute}.comparison-empty__illustration svg:first-child{color:#d38464;top:0;left:0}.comparison-empty__illustration svg:last-child{color:#6f93b7;bottom:0;right:0}.comparison-empty h3{color:#f0f3f1;margin-bottom:.625rem;font-size:1.125rem}.comparison-empty p{max-width:50ch;font-size:.875rem;line-height:1.5}.side-by-side{grid-template-columns:repeat(2,minmax(0,1fr));min-height:32rem;display:grid}.image-pane{grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:32rem;display:grid}.image-pane+.image-pane{border-left:1px solid #49504c}.image-pane figcaption{color:#c1c8c4;background:#252b28;border-bottom:1px solid #3c4440;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.625rem;min-height:3rem;padding:.5rem .75rem;font-size:.75rem;display:grid}.image-pane figcaption>span{color:#fff;background:var(--image-a);border-radius:50%;place-items:center;width:1.5rem;height:1.5rem;font-size:.6875rem;font-weight:750;display:grid}.image-pane+.image-pane figcaption>span{background:var(--image-b)}.image-pane figcaption strong{color:#f2f4f3;text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.image-pane figcaption small{font-variant-numeric:tabular-nums lining-nums;font-size:.6875rem}.image-pane__viewport{justify-content:safe center;align-items:safe center;min-width:0;min-height:29rem;display:flex;overflow:auto;container-type:size}.image-pane__zoom-surface{flex:none;place-items:center;margin:auto;display:grid}.image-pane__zoom-surface[data-scale=fit]{width:var(--fit-surface-width);height:var(--fit-surface-height)}.image-pane__zoom-surface .comparison-image{object-fit:contain;width:100%;height:100%}.comparison-image{-webkit-user-select:none;user-select:none;image-rendering:auto}.stage-scroll{justify-content:safe center;align-items:safe center;min-height:32rem;max-height:76vh;padding:1rem;display:flex;overflow:auto}.comparison-stage{background:var(--canvas);flex:none;margin:auto;position:relative;overflow:hidden}.comparison-stage[data-scale=fit]{width:var(--stage-fit-width);aspect-ratio:var(--stage-aspect)}.comparison-stage[data-scale=actual]{width:var(--stage-width);height:var(--stage-height)}.comparison-image--layer{margin:auto;position:absolute;inset:0}.comparison-stage[data-scale=fit] .comparison-image--layer{object-fit:contain;width:100%;height:100%}.comparison-stage[data-scale=actual] .comparison-image--layer{width:auto;max-width:none;height:auto;max-height:none;transform:translate(-50%, -50%) scale(var(--image-zoom));margin:0;top:50%;left:50%}.comparison-image--clipped{will-change:clip-path}.canvas-label{z-index:3;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#141816d1;border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:.45rem;max-width:min(42%,22rem);min-height:1.875rem;padding:.3rem .6rem .3rem .35rem;font-size:.6875rem;display:flex;position:absolute;top:.75rem}.canvas-label--left{left:.75rem}.canvas-label--right{right:.75rem}.canvas-label>span{background:var(--image-a);border-radius:50%;flex:none;place-items:center;width:1.25rem;height:1.25rem;font-weight:750;display:grid}.canvas-label--right>span{background:var(--image-b)}.canvas-label strong{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.swipe-divider{z-index:4;pointer-events:none;background:#fff;width:2px;position:absolute;top:0;bottom:0;transform:translate(-50%)}.swipe-divider>span{width:2.75rem;height:2.75rem;color:var(--ink);background:#fff;border:1px solid #0000001f;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.swipe-divider svg{width:1.15rem;height:1.15rem}.swipe-range{z-index:5;cursor:ew-resize;opacity:0;width:100%;height:100%;margin:0;position:absolute;inset:0}.comparison-stage:has(.swipe-range:focus-visible){outline-offset:3px;outline:3px solid #67d3aa}.raw-note{max-width:46rem;color:var(--muted);border:1px solid var(--border);background:0 0;border-radius:.75rem;justify-self:center;align-items:flex-start;gap:.875rem;padding:1rem 1.25rem;font-size:.8125rem;display:flex}.raw-note__mark{color:var(--accent);letter-spacing:.09em;background:var(--accent-soft);border-radius:.25rem;flex:none;padding:.25rem .35rem;font-size:.625rem;font-weight:800}@media (width<=56rem){.source-grid{grid-template-columns:1fr}.workspace__heading{align-items:flex-start}.comparison-toolbar{flex-direction:column;align-items:stretch}.comparison-toolbar__right{flex-wrap:wrap;justify-content:space-between}.workspace__canvas,.comparison-empty,.side-by-side,.image-pane,.stage-scroll{min-height:26rem}.image-pane__viewport{min-height:23rem}}@media (width<=42rem){.site-header{width:min(100% - 1.25rem,90rem)}.privacy-note{font-size:0}.privacy-note:after{content:"Private";font-size:.75rem}main{gap:3rem;width:min(100% - 1.25rem,90rem);padding-top:3.5rem}.intro h1{font-size:clamp(2.25rem,12vw,3.4rem)}.url-form__controls{grid-template-columns:1fr}.button--primary{width:100%}.workspace__heading{flex-direction:column;gap:.75rem}.workspace__hint{text-align:left}.comparison-toolbar{padding:.5rem}.segmented-control{grid-template-columns:repeat(3,1fr);display:grid}.segmented-control button{padding-inline:.45rem}.segmented-control button span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.comparison-toolbar__right{flex-direction:column;align-items:stretch}.opacity-control{grid-template-columns:auto minmax(4rem,1fr) 2.5rem;padding-inline:.25rem}.scale-control{grid-template-columns:repeat(2,1fr);display:grid}.zoom-control{grid-template-columns:auto minmax(0,1fr) auto auto auto;display:grid}.zoom-control input{width:100%}.workspace__canvas,.comparison-empty,.side-by-side,.image-pane,.stage-scroll{min-height:21rem}.image-pane__viewport{min-height:18rem}.image-pane figcaption{grid-template-columns:auto minmax(0,1fr)}.image-pane figcaption small{display:none}.side-by-side{grid-template-columns:repeat(2,minmax(15rem,1fr));overflow-x:auto}.stage-scroll{padding:.625rem}.canvas-label{max-width:38%}.canvas-label strong{display:none}.raw-note{width:100%}}@media (width<=24rem){.segmented-control button svg{display:none}}:root{color:#202623;font-synthesis:none;text-rendering:optimizelegibility;font-feature-settings:"kern" 1, "liga" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f3f0e8;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;min-width:320px}body{min-width:320px;min-height:100vh;margin:0;font-size:16px;line-height:1.42}button,input{font:inherit}button,label{-webkit-tap-highlight-color:transparent}button{color:inherit}button:not(:disabled),label[for]{cursor:pointer}img{display:block}h1,h2,h3,p,figure{margin:0}h1,h2,h3{letter-spacing:-.028em;text-wrap:balance;line-height:1.08}p{text-wrap:pretty}:focus-visible{outline-offset:3px;outline:3px solid #268c69}::selection{color:#fff;background:#176c50}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
