.render-area{position:relative;isolation:isolate;min-height:360px;flex:1;aspect-ratio:1.65;--reveal:50%;margin:12px -4% 6px}.render-area img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none}.render-area #configured-image{z-index:1}.render-area.comparing #configured-image{clip-path:inset(0 0 0 var(--reveal))}.comparison-overlay{position:absolute;inset:0;z-index:2;pointer-events:none}.comparison-overlay>span{position:absolute;top:16px;font-size:8px;letter-spacing:1.4px;padding:7px 9px;background:#111314b8;color:#dde6d5}.base-label{left:5%}.configured-label{right:5%}.compare-line{position:absolute;left:var(--reveal);top:10%;bottom:9%;width:1px;background:#dce7cb9c}.compare-line>span{position:absolute;left:-15px;top:48%;border:1px solid #c6df8b88;background:#172016e8;color:#d7e7c3;border-radius:50%;width:31px;height:31px;display:grid;place-items:center;font-size:17px}#initial-loading{position:absolute;inset:0;display:grid;place-content:center;color:#a8b59f;font-size:12px;z-index:3;background:#151819}.slider-wrap{display:flex;align-items:center;gap:14px;padding:12px 0 0;min-height:44px}.slider-wrap label{font-size:10px;color:#aeb9a6;white-space:nowrap}.slider-wrap input{flex:1;min-width:0;accent-color:var(--accent);height:28px;margin:0}.slider-wrap output{font-size:10px;color:#b3bda9;min-width:31px;text-align:right}@media(min-width:1600px){.render-area{min-height:510px}}@media(max-width:1120px){.render-area{min-height:340px;aspect-ratio:1.35}}@media(max-width:800px){.render-area{flex:none;aspect-ratio:1.65;min-height:0;margin:5px -5% 2px}.comparison-overlay>span{top:8px;font-size:7px;letter-spacing:.8px}.compare-line{top:15%;bottom:13%}.compare-line>span{width:27px;height:27px;left:-13px;font-size:15px}.slider-wrap{padding-top:5px;gap:10px}.slider-wrap label{font-size:9px}}
.slider-slot{min-height:44px}
.comparison-overlay{pointer-events:auto;touch-action:none;cursor:ew-resize;user-select:none}
.compare-line{width:44px;transform:translateX(-50%);background:transparent;touch-action:none}
.compare-line::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#dce7cb9c}
.compare-line>span{left:50%;transform:translateX(-50%)}
.compare-line:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}