.before-after{margin:0;min-width:0;color:var(--ink,#17191b)}.ba-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:18px;flex-wrap:wrap}.ba-heading :is(h2,h3){font-size:clamp(21px,2.5vw,30px)}.ba-kind{color:var(--muted,#5b6267);font-size:12px}.ba-frame{position:relative;width:100%;overflow:clip;isolation:isolate;background:var(--surface,#eef1f1);border-radius:2px;direction:ltr;touch-action:pan-y}.ba-plane{position:absolute;inset:0;width:100%;height:100%}.ba-before{z-index:0}.ba-after{z-index:1}.ba-plane img{user-select:none;pointer-events:none}.ba-image-label{position:absolute;top:clamp(12px,2vw,24px);z-index:1;padding:6px 11px;border-radius:2px;background:var(--paper,#f5f7f7);color:var(--ink,#17191b);font-size:12px;line-height:1.5;pointer-events:none}.ba-label-before{right:clamp(12px,2vw,24px)}.ba-label-after{left:clamp(12px,2vw,24px)}.ba-divider{top:0;bottom:0;left:var(--ba-reveal);width:2px;transform:translateX(-50%);background:var(--white,#fff);box-shadow:0 0 0 1px #17191b33}.ba-divider,.ba-handle{position:absolute;z-index:2;pointer-events:none}.ba-handle{top:50%;left:clamp(24px,var(--ba-reveal),calc(100% - 24px));transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;gap:2px;width:46px;height:46px;border:1px solid #17191b40;border-radius:50%;background:var(--paper,#f5f7f7);color:var(--ink,#17191b);box-shadow:0 2px 12px #17191b33;transition:transform .18s ease}.ba-frame:has(.ba-range:focus-visible){outline:3px solid var(--accent,#0b7f85);outline-offset:5px}.ba-frame:has(.ba-range:focus-visible) .ba-handle{outline:3px solid var(--accent,#0b7f85);outline-offset:3px;transform:translate(-50%,-50%) scale(1.05)}@media (hover:hover) and (pointer:fine){.ba-frame:hover .ba-handle{transform:translate(-50%,-50%) scale(1.05)}}@media (prefers-reduced-motion:reduce){.ba-handle{transition:none}.ba-frame:has(.ba-range:focus-visible) .ba-handle,.ba-frame:hover .ba-handle{transform:translate(-50%,-50%)}}.ba-range{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;appearance:none;-webkit-appearance:none;opacity:0;background:transparent;cursor:ew-resize;touch-action:pan-y;direction:ltr}.ba-range::-webkit-slider-runnable-track,.ba-range::-webkit-slider-thumb{height:100%;background:transparent}.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:46px;border:0}.ba-range::-moz-range-thumb,.ba-range::-moz-range-track{height:100%;background:transparent}.ba-range::-moz-range-thumb{width:46px;border:0}.ba-range:disabled{cursor:default}.ba-image-fallback{display:grid;place-items:center;width:100%;height:100%;padding:40px 20px;background:var(--surface,#eef1f1);color:var(--muted,#5b6267);text-align:center}.ba-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-top:18px}.ba-control-copy{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}.ba-control-copy label{font-weight:600}.ba-value{color:var(--muted,#5b6267);font-size:13px;font-variant-numeric:tabular-nums}.ba-buttons{display:flex;gap:8px}.ba-buttons button{min-height:44px;padding:8px 14px;border:1px solid var(--line,#d6dada);border-radius:2px;background:transparent;color:inherit;font-size:13px;line-height:1.5}.ba-buttons button[aria-pressed=true]{background:var(--ink,#17191b);border-color:var(--ink,#17191b);color:var(--paper,#f5f7f7)}.ba-buttons button:disabled{cursor:default}.ba-instructions{margin-top:10px;color:var(--muted,#5b6267);font-size:12px;line-height:1.6}.ba-caption{margin-top:18px;padding-top:16px;border-top:1px solid var(--line,#d6dada);color:var(--muted,#5b6267);font-size:13px;line-height:1.65}.ba-caption p+p{margin-top:8px}.ba-project-link{display:inline-flex;gap:12px;margin-top:10px;color:var(--ink,#17191b);text-decoration:underline;text-underline-offset:4px}.ba-availability{margin-top:12px;font-size:14px}@media (max-width:480px){.ba-controls{align-items:flex-start}.ba-control-copy{width:100%;justify-content:space-between}.ba-buttons{width:100%}.ba-buttons button{flex:1}}@media (forced-colors:active){.ba-frame{border:1px solid CanvasText}.ba-handle{border:2px solid ButtonText;background:ButtonFace;color:ButtonText;forced-color-adjust:none}.ba-divider{background:CanvasText}.ba-frame:has(.ba-range:focus-visible){outline-color:Highlight}}