.cvb{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}.cvb-stage,.cvb-controls{box-sizing:border-box;border:1px solid var(--border);background:var(--surface);min-width:0;box-shadow:0 30px 60px -40px color-mix(in srgb, var(--tl) 45%, transparent);border-radius:24px;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;padding:16px;display:grid}.cvb-compare{border-radius:10px;width:100%;max-height:420px;position:relative;overflow:hidden}.cvb-compare img{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.cvb-after{clip-path:inset(0 0 0 var(--split));transition:opacity .2s,filter .2s}.cvb-after[data-busy]{opacity:.6;filter:blur(2px)}.cvb-handle{top:0;bottom:0;left:var(--split);pointer-events:none;background:#fff;place-items:center;width:3px;display:grid;position:absolute;translate:-50%;box-shadow:0 0 0 1px #0f172a40}.cvb-handle svg{box-sizing:content-box;color:var(--tl);background:#fff;border-radius:50%;flex:none;padding:8px;box-shadow:0 6px 16px -6px #0f172a99}.cvb-tag{color:#fff;pointer-events:none;background:#0f172ab8;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;position:absolute;top:10px}.cvb-tag[data-side=before]{left:10px}.cvb-tag[data-side=after]{background:var(--tl);right:10px}.cvb-range{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.cvb-range:focus-visible~.cvb-handle{outline:2px solid var(--tl);outline-offset:2px}.cvb-compare:has(.cvb-range:focus-visible){outline:2px solid var(--tl);outline-offset:2px}.cvb-sizes{justify-items:center;gap:12px;display:grid}.cvb-saved{background:color-mix(in srgb, #16a34a 12%, var(--surface));font-variant-numeric:tabular-nums;color:#15803d;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-size:22px;font-weight:800;display:inline-flex}.cvb-saved[data-up]{background:color-mix(in srgb, #d97706 12%, var(--surface));color:#b45309}.cvb-bars{font-variant-numeric:tabular-nums;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;width:100%;font-size:13px;display:grid}.cvb-bar-label{color:var(--muted,#64748b);font-weight:600}.cvb-bar{background:var(--surface-alt,#f1f5f9);border-radius:999px;height:10px;overflow:hidden}.cvb-bar i{background:color-mix(in srgb, var(--muted,#64748b) 55%, var(--surface));transform-origin:0;border-radius:999px;height:100%;transition:transform .45s cubic-bezier(.77,0,.175,1);display:block}.cvb-bar[data-after] i{background:var(--tl)}.cvb-bars b{color:var(--heading)}.cvb-format{line-height:1.15;display:grid}.cvb-format small{opacity:.75;font-size:11px;font-weight:600}.cvb-quality{gap:4px;display:grid}.cvb-quality label{color:var(--heading);justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:700;display:flex}.cvb-quality label b{font-variant-numeric:tabular-nums;color:var(--tl);font-size:22px}.cvb-quality input[type=range]{cursor:pointer;appearance:none;background:0 0;width:100%;height:44px;margin:0}.cvb-quality input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--tl) var(--fill), var(--surface-alt,#e2e8f0) var(--fill));border-radius:999px;height:10px}.cvb-quality input[type=range]::-moz-range-track{background:var(--surface-alt,#e2e8f0);border-radius:999px;height:10px}.cvb-quality input[type=range]::-moz-range-progress{background:var(--tl);border-radius:999px;height:10px}.cvb-quality input[type=range]::-webkit-slider-thumb{border:4px solid var(--surface);background:var(--tl);width:28px;height:28px;box-shadow:0 6px 16px -6px var(--tl);appearance:none;border-radius:50%;margin-top:-9px}.cvb-quality input[type=range]::-moz-range-thumb{border:4px solid var(--surface);background:var(--tl);border-radius:50%;width:22px;height:22px}.cvb-quality input[type=range]:focus-visible{outline:2px solid var(--tl);outline-offset:4px;border-radius:8px}@media (min-width:960px){.cvb{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px}.cvb-stage,.cvb-controls{padding:24px}}@media (prefers-reduced-motion:reduce){.cvb-bar i{transition:none}}