.case-comparison-heading,.case-comparison-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 12px;color:#4d584d;font:500 12px/1.5 Satoshi,system-ui,sans-serif}
.case-comparison-heading strong{color:#202720;font-size:16px;font-weight:650}
.case-comparison-frame{position:relative;aspect-ratio:8/5;overflow:hidden;border-radius:8px;background:#0b0b0b;isolation:isolate}
.portfolio-case .case-comparison-frame>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;border-radius:0;object-fit:contain;pointer-events:none;user-select:none}
.case-comparison-before{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.case-comparison-label{position:absolute;z-index:1;top:12px;padding:5px 10px;border:1px solid #ffffff40;border-radius:4px;background:#111e;color:#fff;font:650 11px/1.4 Satoshi,system-ui,sans-serif;pointer-events:none}
.case-comparison-label.is-before{left:12px}.case-comparison-label.is-after{right:12px}
.case-comparison-frame[data-position="0"] .is-before,.case-comparison-frame[data-position="100"] .is-after{visibility:hidden}
.case-comparison-divider{position:absolute;z-index:2;inset:0;pointer-events:none}
.case-comparison-divider::before{content:"";position:absolute;top:0;bottom:0;left:clamp(1px,var(--reveal),calc(100% - 1px));width:2px;transform:translateX(-50%);background:#e7eadb;box-shadow:0 0 5px #0008}
.case-comparison-divider>span{position:absolute;top:50%;left:clamp(21px,var(--reveal),calc(100% - 21px));display:grid;place-items:center;width:42px;height:42px;transform:translate(-50%,-50%);border:2px solid #e7eadb;border-radius:50%;background:#202720;color:#e7eadb;font:600 22px/1 system-ui}
.case-comparison-frame>input{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.case-comparison-frame:focus-within{outline:3px solid #52604c;outline-offset:4px}
.case-comparison-controls{margin:14px 0 0;gap:10px 18px}
.case-comparison-controls>div{display:flex;flex-wrap:wrap;gap:8px 14px}
.case-comparison-controls button{min-height:36px;padding:7px 12px;border:1px solid #87917e;border-radius:5px;background:#ecebe3;color:#202720;font:650 11px/1.4 Satoshi,system-ui,sans-serif;cursor:pointer}
.case-comparison-controls button[aria-pressed="true"]{background:#202720;color:#e7eadb}@media (hover:hover) and (pointer:fine){.case-comparison-controls button:hover{background:#202720;color:#e7eadb}}
.case-comparison-controls a{color:#4f5d48;font-size:11px;text-underline-offset:3px}
.case-comparison-controls button:focus-visible,.case-comparison-controls a:focus-visible{outline:2px solid #52604c;outline-offset:3px}
@media(max-width:760px){.case-comparison-heading{gap:4px;font-size:11px}.case-comparison-label{top:8px;padding:3px 7px;font-size:10px}.case-comparison-label.is-before{left:8px}.case-comparison-label.is-after{right:8px}.case-comparison-divider>span{width:34px;height:34px}.case-comparison-controls{align-items:flex-start;flex-direction:column}}