.lens-demo{margin:2.5rem 0;padding:clamp(16px,3vw,30px);background:#eaf3f6;border:1px solid #cadde4;border-radius:20px}.lens-scene{--split:50%;position:relative;overflow:hidden;border-radius:12px;isolation:isolate}.lens-scene>img{display:block;width:100%;height:auto}.lens-tint{position:absolute;inset:0;background:rgba(226,138,38,.28);clip-path:inset(0 0 0 var(--split));pointer-events:none}.lens-divider{position:absolute;inset:0 auto 0 var(--split);width:3px;background:white;box-shadow:0 0 5px #123;pointer-events:none}.lens-label{position:absolute;top:12px;padding:6px 9px;border-radius:5px;background:#102a38;color:white;font-size:12px;max-width:44%}.lens-before{left:12px}.lens-after{right:12px}.lens-controls{margin-top:18px}.lens-controls label{display:block;font-weight:700}.lens-controls input{display:block;width:100%;height:44px;margin:0;accent-color:#147d9b;cursor:ew-resize}.lens-controls input:focus-visible{outline:3px solid #147d9b;outline-offset:3px}.lens-endpoints{display:flex;justify-content:space-between;font-size:.8rem}.lens-note,.lens-source{font-size:.85rem;line-height:1.65}.lens-note{padding:14px;background:white;border-left:3px solid #147d9b}.lens-products{display:grid;grid-template-columns:1fr 1fr;gap:20px}.lens-products article{background:white;border-radius:12px;padding:20px}.lens-products img{display:block;width:100%;height:160px;object-fit:contain}.lens-products h3{font-size:1.2rem}.lens-products p{font-size:.95rem}.lens-products a{font-weight:700}.lens-source{margin-bottom:0}@media(max-width:600px){.lens-products{grid-template-columns:1fr}.lens-label{font-size:10px;top:8px;padding:5px;}.lens-before{left:6px}.lens-after{right:6px}}
/* Slider handle sits directly in the image; native range keeps keyboard/touch semantics. */
.lens-scene .lens-controls{position:absolute;inset:0;margin:0;z-index:4}.lens-scene .lens-controls input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y;border:0;opacity:1}.lens-scene .lens-controls input::-webkit-slider-runnable-track{background:transparent;border:0;height:100%}.lens-scene .lens-controls input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:44px;height:100%;background:transparent;border:0;cursor:ew-resize}.lens-scene .lens-controls input::-moz-range-track{background:transparent;border:0}.lens-scene .lens-controls input::-moz-range-thumb{width:44px;height:44px;background:transparent;border:0}.lens-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:2px solid white;border-radius:50%;background:#153341;color:white;font-size:24px;box-shadow:0 2px 12px #0005}.lens-instruction{font-size:.85rem;line-height:1.5;margin:10px 0}.lens-scene .lens-controls input:focus-visible{outline:4px solid #147d9b;outline-offset:-4px}.lens-divider{z-index:3}.lens-label{z-index:2}

/* Two illustrative renditions of the same approved scene, not measured lens performance. */
.lens-scene>img{filter:grayscale(.85) contrast(.48) brightness(1.2)}
.lens-tint{background:none}.lens-tint img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) sepia(.25) saturate(.85) contrast(1.12) brightness(1.08)}
.lens-tint:after{content:"";position:absolute;inset:0;background:rgba(245,177,73,.1);pointer-events:none}
#skibrillen>.lens-demo{max-width:1100px;margin:3rem auto}