/* before-after-slider: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.as-work, .px-work, .ba-work { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 900px) { .as-work, .px-work, .ba-work { grid-template-columns: 1.6fr 1fr; } }
.as-panel, .px-panel, .ba-panel { display: flex; flex-direction: column; gap: 12px; }
.ba-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba-pick.is-done { border-color: var(--good); background: var(--good-soft); }
.ba-stage { position: relative; }
.ba-stage canvas { display: block; width: 100%; height: auto; border-radius: 10px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: col-resize; }
.ba-range.is-y { writing-mode: vertical-lr; cursor: row-resize; }