/* image-upscaler: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.up-result { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.up-result[hidden] { display: none; }
.up-compare { --pos: 50%; position: relative; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: var(--r-panel); background: var(--mist); line-height: 0; }
.up-compare canvas { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; }
.up-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.up-before canvas { width: 100%; height: 100%; max-height: none; image-rendering: auto; }
.up-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(15 29 58 / 0.3); pointer-events: none; }
.up-tag { position: absolute; top: 10px; padding: 3px 8px; border-radius: 999px; background: rgb(15 29 58 / 0.75); color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1.4; pointer-events: none; }
.up-tag-left { left: 10px; }
.up-tag-right { right: 10px; }
.up-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
#up-progress .btn { margin-top: 8px; }