.before-after{width:100%;max-width:1000px;margin:0 auto;padding:0 1.5rem}.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}@media(max-width:640px){.ba-grid{grid-template-columns:1fr}}.ba-card{background:var(--den-color-white,#fff);border:1px solid var(--den-color-border,#d2d2d7);border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.08);display:flex;flex-direction:column}.ba,.ba-card{overflow:hidden}.ba{position:relative;aspect-ratio:4/3;-webkit-user-select:none;user-select:none;touch-action:pan-y;cursor:ew-resize;background:#f2f2f4}.ba-layer{position:absolute;inset:0;display:grid;place-items:center}.ba-before{clip-path:inset(0 50% 0 0)}.ba-img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.ba-img,.ba-tag{pointer-events:none}.ba-tag{position:absolute;top:.6rem;padding:.2rem .55rem;border-radius:980px;font-size:.66rem;font-weight:700;letter-spacing:.05em;background:rgba(0,0,0,.55);color:#fff}.ba-tag.before{left:.6rem}.ba-tag.after{right:.6rem}.ba-divider{top:0;bottom:0;width:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-1px)}.ba-divider,.ba-handle{position:absolute;left:50%;background:#fff;pointer-events:none}.ba-handle{top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3);display:grid;place-items:center}.ba-handle svg{width:18px;height:18px;color:var(--den-color-primary,#1a1a2e)}.ba-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.65rem;flex:1 1}.ba-tagline{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;color:var(--den-color-dark,#6e6e73)}.ba-dot{width:16px;height:16px;border-radius:5px;display:inline-block}.ba-dot.sell{background:linear-gradient(135deg,#dcfce7,#86efac)}.ba-dot.style{background:linear-gradient(135deg,#dbeafe,#93c5fd)}.ba-dot.designer{background:linear-gradient(135deg,#fde68a,#fbbf24)}.ba-dot.create{background:linear-gradient(135deg,#fce7f3,#f9a8d4)}.ba-title{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--den-color-primary,#1a1a2e);margin:0}.ba-desc{font-size:.85rem;color:var(--den-color-dark,#6e6e73);line-height:1.45;flex:1 1;margin:0}.ba-cta{margin-top:.2rem;padding:.7rem 1rem;border-radius:12px;background:var(--den-color-primary,#1a1a2e);color:var(--den-color-white,#fff);font-weight:600;font-size:.9rem;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;transition:transform .2s}.ba-cta:hover{transform:translateY(-1px)}.ba-cta svg{flex-shrink:0}@media(prefers-reduced-motion:reduce){.ba-cta{transition:none}}