.native-comparison{color:var(--ink,#25271e);width:100%;min-width:0}.compare-stage{position:relative;width:100%;aspect-ratio:var(--compare-ratio,16/9);overflow:hidden;background:var(--paper,#fffde9);isolation:isolate}.compare-layer{position:absolute;inset:0;overflow:hidden}.compare-layer>img,.compare-layer>video{display:block;width:100%;height:100%;max-width:none;position:absolute;inset:0;user-select:none;pointer-events:none}.compare-a{z-index:1;clip-path:inset(0 0 calc(100% - var(--split)) 0)}[data-axis=vertical] .compare-a{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-label{position:absolute;z-index:2;color:var(--compare-label,#fff);background:color-mix(in srgb,var(--compare-label-bg,#222620) 65%,transparent);font-family:inherit;font-size:9px;font-weight:500;line-height:1.2;letter-spacing:.17em;text-transform:uppercase;padding:8px 11px;pointer-events:none;max-width:45%;overflow-wrap:anywhere}.compare-label-a{top:16px;left:16px}.compare-label-b{bottom:16px;left:16px}[data-axis=vertical] .compare-label-b{top:16px;right:16px;left:auto;bottom:auto}.compare-divider{position:absolute;z-index:3;left:0;top:calc(var(--split) - 22px);width:100%;height:44px;cursor:ns-resize;touch-action:none;outline:none}.compare-divider:before{content:'';position:absolute;left:0;top:calc(50% - var(--compare-line-width)/2);width:100%;height:var(--compare-line-width);background:var(--compare-line);box-shadow:0 0 2px #0002}.compare-grip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:28px;border-radius:30px;display:grid;place-items:center;color:var(--compare-line);background:color-mix(in srgb,var(--compare-handle,#fff) 23%,transparent);border:1px solid var(--compare-line);box-shadow:0 1px 7px #0002;backdrop-filter:blur(9px);transition:box-shadow .2s,background .2s}.compare-grip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.compare-divider:hover .compare-grip,.compare-divider:focus-visible .compare-grip,.is-comparing .compare-grip{background:color-mix(in srgb,var(--compare-handle,#fff) 38%,transparent);box-shadow:0 0 0 4px #ffffff20,0 2px 10px #0002}.compare-divider:focus-visible:before{box-shadow:0 0 0 1px #0003}[data-axis=vertical] .compare-divider{left:calc(var(--split) - 22px);top:0;width:44px;height:100%;cursor:ew-resize}[data-axis=vertical] .compare-divider:before{top:0;left:calc(50% - var(--compare-line-width)/2);height:100%;width:var(--compare-line-width)}[data-axis=vertical] .compare-grip{width:28px;height:44px}[data-axis=vertical] .compare-grip svg{transform:rotate(90deg)}.compare-loading{position:absolute;inset:0;z-index:4;display:grid;place-items:center;font-size:11px;letter-spacing:.03em;color:#fff;background:#22262080;padding:25px;text-align:center;pointer-events:none}.native-comparison [hidden]{display:none!important}.compare-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;background:#fffde9!important;color:#25271e!important;border:1px solid #fff9!important;border-radius:30px;padding:12px 20px!important;font-size:12px!important}.compare-tools{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0}.compare-hint{font-size:10px;color:var(--muted,#7a7f70);letter-spacing:.03em}.compare-tools>div{display:flex;align-items:center;gap:10px}.native-comparison .compare-tools button{padding:5px;color:var(--muted,#7a7f70);background:transparent;border:0;border-radius:3px;display:grid;place-items:center;flex-shrink:0}.compare-tools button:hover{color:var(--ink,#25271e);background:#8881}.compare-tools button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.compare-tools button[data-compare-action=play] svg path:first-child{fill:currentColor;stroke:none}.is-playing .compare-tools button[data-compare-action=play] svg path:first-child{stroke:currentColor;fill:none;stroke-width:3}.native-comparison .compare-seek{width:90px;height:3px;padding:0;accent-color:var(--muted,#7a7f70);border:0;cursor:pointer}.compare-time{font-size:9px;color:var(--muted,#7a7f70);font-variant-numeric:tabular-nums;min-width:25px}.compare-caption{font-size:11px;line-height:1.7;color:var(--muted,#7a7f70);margin:8px 0 0}.native-comparison:fullscreen{width:100vw;height:100vh;padding:24px;background:var(--paper,#fffde9);display:flex;flex-direction:column;justify-content:center}.native-comparison:fullscreen .compare-stage{max-height:calc(100vh - 100px);width:auto;max-width:100%;align-self:center;flex-shrink:1;height:calc(100vh - 100px)}.compare-options{margin-top:20px;border-top:1px solid var(--line,#dddfd2);padding-top:16px}.compare-options summary{cursor:pointer;font-size:12px;margin-bottom:16px}.compare-checks{display:flex;flex-wrap:wrap;gap:15px;margin:18px 0}.compare-checks label{display:flex;align-items:center;gap:7px}.comparison-editor-preview{margin-top:22px}.compare-side-panel{min-width:0}.compare-side-panel h4{font-size:12px;font-weight:500;margin:15px 0}.compare-swap{margin-top:16px}.comparison-metadata{font-size:11px;color:var(--muted,#7a7f70);line-height:1.7}@media(max-width:600px){.compare-label{top:10px;left:10px;font-size:8px;padding:6px 8px;letter-spacing:.12em}.compare-label-b{top:auto;bottom:10px}[data-axis=vertical] .compare-label-b{top:10px;right:10px;left:auto}.compare-tools{gap:6px}.compare-tools>div{gap:5px}.native-comparison .compare-seek{width:52px}.compare-hint{font-size:9px}.compare-grip{width:42px;height:28px}.compare-time{display:none}.compare-tools button svg{width:14px;height:14px}}@media(prefers-reduced-motion:reduce){.compare-grip{transition:none}}