.compare-scene{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:18px;overflow:hidden;isolation:isolate}.compare-layer{position:absolute;inset:0}.compare-after{background:radial-gradient(ellipse at 60% 40%,#24516a,#0b2334)}.compare-before{background:radial-gradient(ellipse at 40% 40%,#293440,#101b26);clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-art{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}.compare-art svg{width:80px;height:80px;fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round}.compare-before svg{stroke:#a4b3c5}.compare-art p{margin:0;color:var(--ink);font-size:14px}.compare-tag{position:absolute;top:20px;z-index:1;right:20px;padding:8px 14px;background:#051322c9;border:1px solid #9bddf533;border-radius:8px;font-size:13px}.compare-before .compare-tag{right:auto;left:20px}.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:var(--accent);transform:translateX(-50%);pointer-events:none}.compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#0b1b2b;border:2px solid var(--accent);color:var(--accent);font-size:28px;box-shadow:0 0 0 6px #9bddf50d,0 0 16px #9bddf547,0 0 32px #9bddf521;white-space:nowrap}.compare-range{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y;z-index:3}.compare-scene:focus-within{outline:2px solid var(--accent);outline-offset:5px}.compare-help{margin:16px 0 0;font-size:12px;max-width:680px}@media(max-width:700px){.compare-scene{aspect-ratio:1.15}.compare-art svg{width:60px;height:60px}.compare-art p{font-size:12px}.compare-tag{top:14px;right:14px}.compare-before .compare-tag{left:14px}}