.live-compare{--split:50%;margin-top:8px}.compare-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:16px;font-size:10px;letter-spacing:1px;color:#a9bfba}.compare-toolbar b{color:var(--green);font-weight:700}.live-compare-stage{position:relative;isolation:isolate;overflow:hidden;border:1px solid #455856;border-radius:12px;aspect-ratio:1313/1198;background:#121b1e;box-shadow:0 25px 80px #0005}.live-compare-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}.live-compare-stage .compare-light{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:1}.compare-range{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;touch-action:pan-y}.compare-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;transform:translateX(-50%);background:#a4ff6d;z-index:4;pointer-events:none;box-shadow:0 0 20px #0008}.compare-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#10211eeb;border:2px solid #b0ff7b;color:white;font-size:22px;box-shadow:0 5px 30px #0007}.live-compare-stage:focus-within{outline:3px solid var(--green);outline-offset:5px}.compare-badge{position:absolute;top:10px;padding:5px 12px;background:#0b171cdb;color:white;border:1px solid #ffffff30;border-radius:30px;font-size:10px;z-index:3;pointer-events:none}.compare-badge.light{left:12px}.compare-badge.dark{right:12px}.live-reactions{position:absolute;left:36%;right:2%;top:23%;bottom:41%;z-index:3;overflow:hidden;pointer-events:none}.live-reaction{position:absolute;left:var(--x);bottom:-45px;font-size:clamp(22px,3.4vw,48px);opacity:0;filter:drop-shadow(0 3px 8px #0004);animation:reaction-rise 4s ease-out forwards;will-change:transform,opacity}.reaction-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px}.reaction-controls>span{color:var(--muted);font-size:11px}.reaction-buttons{display:flex;gap:7px}.reaction-buttons button{display:grid;place-items:center;width:40px;height:40px;font-size:21px;border-radius:50%;border:1px solid #344642;background:#182522;transition:transform .2s,background .2s}.reaction-buttons button:hover{transform:translateY(-3px);background:#2d4539}.reaction-buttons button:active{transform:scale(.9)}@keyframes reaction-rise{0%{opacity:0;transform:translate(0,0) scale(.65) rotate(0)}12%{opacity:.65}65%{opacity:.48}100%{opacity:0;transform:translate(var(--drift),-330px) scale(1.12) rotate(var(--turn))}}@media(max-width:600px){.compare-toolbar{font-size:9px;letter-spacing:0;gap:8px}.compare-toolbar b{max-width:150px;text-align:right}.compare-knob{width:38px;height:38px;font-size:18px}.compare-badge{font-size:8px;padding:3px 7px;top:7px}.reaction-controls{align-items:start;flex-direction:column;gap:10px}.reaction-buttons button{width:37px;height:37px}.live-reaction{font-size:24px;animation-name:reaction-rise-mobile}@keyframes reaction-rise-mobile{0%{opacity:0;transform:translate(0,0) scale(.7)}15%{opacity:.65}100%{opacity:0;transform:translate(var(--drift),-140px) scale(1.1) rotate(var(--turn))}}}@media(prefers-reduced-motion:reduce){.live-reaction{animation:reaction-still 1.2s ease-out forwards}@keyframes reaction-still{0%,80%{opacity:.65;bottom:15px}100%{opacity:0;bottom:15px}}.reaction-buttons button{transition:none}}
.comparison-brand-layer{position:absolute;inset:0;z-index:2;pointer-events:none}.comparison-brand-layer span{position:absolute;left:2.05%;top:1.55%;width:5.1%;height:4.75%;background:linear-gradient(#1d292d,#1b272b)}.comparison-brand-layer img{position:absolute;left:2.75%;top:1.9%;width:3.95%;height:4.3%;object-fit:contain}.comparison-brand-layer.brand-light{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.comparison-brand-layer.brand-light span{background:linear-gradient(#dff1fa,#c4e1ef)}

/* Keep theme labels clear of the original titlebar logo. */
.compare-badge{top:auto;bottom:12px}

.comparison-tab{position:absolute;left:37.4%;top:12.1%;width:7%;height:2.5%;display:flex;align-items:center;background:#223036;color:#aec9db;font:400 clamp(4px,1.1vw,14px)/1 'Segoe UI',sans-serif;white-space:nowrap}.brand-light .comparison-tab{background:#dfedf6;color:#6b92ac}