@property --ab-pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.abba{background:var(--abba-bg);color:var(--abba-fg)}
.abba__wrap{max-width:1240px;margin:0 auto;padding:52px 16px;display:grid;gap:26px;align-items:center}
.abba__copy .ab-h2{margin:0}
.abba__text{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--abba-muted);max-width:52ch}
.abba__text p{margin:0}
.abba__points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.abba__points li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.abba__points .ab-icon{flex:none;width:22px;height:22px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--abba-fg);color:var(--abba-bg);stroke-width:3}
.abba__btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;margin-top:24px;border-radius:100px;background:var(--abba-fg);color:var(--abba-bg);font-weight:800;text-decoration:none;transition:transform .2s ease}
.abba__btn:hover{transform:translateY(-2px)}
.abba__frame{--ab-pos:50%;position:relative;border-radius:28px;overflow:hidden;background:var(--abba-soft);user-select:none;-webkit-user-select:none;touch-action:pan-y;box-shadow:0 24px 60px rgb(42 22 25/.12)}
.abba__frame img,.abba__frame svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.abba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ab-pos)) 0 0)}
.abba__label{position:absolute;top:14px;z-index:2;padding:7px 12px;border-radius:100px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;transition:opacity .2s ease}
.abba__label--before{left:14px;background:rgb(42 22 25/.72);color:#fff}
.abba__label--after{right:14px;background:rgb(255 255 255/.92);color:var(--abba-ink)}
.abba__line{position:absolute;top:0;bottom:0;left:var(--ab-pos);width:2px;margin-left:-1px;background:#fff;z-index:2;pointer-events:none;box-shadow:0 0 0 1px rgb(0 0 0/.06)}
.abba__knob{position:absolute;top:50%;left:var(--ab-pos);z-index:3;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:var(--abba-ink);display:grid;place-items:center;box-shadow:0 8px 24px rgb(0 0 0/.22);pointer-events:none;transition:transform .2s ease}
.abba__knob svg{position:static;width:22px;height:22px}
.abba__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.abba__frame:has(.abba__range:focus-visible) .abba__knob{outline:3px solid var(--abba-fg);outline-offset:3px}
.abba__frame:has(.abba__range:active) .abba__knob{transform:scale(1.08)}
.abba__frame.is-hint{animation:abba-hint 2.4s cubic-bezier(.45,0,.2,1) 1}
.abba__caption{margin:12px 0 0;font-size:12px;color:var(--abba-muted);text-align:center}
@keyframes abba-hint{0%{--ab-pos:50%}30%{--ab-pos:72%}65%{--ab-pos:30%}100%{--ab-pos:50%}}
@media (min-width:990px){.abba__wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;padding:96px 32px}.abba__wrap--right .abba__media{order:-1}}
@media (prefers-reduced-motion:reduce){.abba__frame.is-hint{animation:none}}