html.comparison-artwork-open,
html.comparison-artwork-open body{overflow:hidden}
.comparison-image[aria-haspopup="dialog"]{cursor:zoom-in}
.comparison-artwork-viewer{
  box-sizing:border-box;width:calc(100vw - 40px);height:calc(100vh - 40px);
  height:calc(100dvh - 40px);max-width:1440px;max-height:1100px;
  margin:auto;padding:0;border:1px solid #b8a3cc;border-radius:22px;
  overflow:hidden;background:#fbf7ff;color:#332140;
  box-shadow:0 24px 100px #150a2499;
}
.comparison-artwork-viewer:not([open]){display:none}
.comparison-artwork-viewer[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.comparison-artwork-viewer::backdrop{background:#160e24d9}
.comparison-artwork-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 22px;border-bottom:1px solid #d9c8e5}
.comparison-artwork-header>div{min-width:0}
.comparison-artwork-kicker{margin:0 0 5px;font-size:10px;font-weight:700;letter-spacing:.13em;color:#756081}
.comparison-artwork-header h2{margin:0;font-family:inherit;font-size:clamp(16px,2vw,24px);font-weight:600;line-height:1.25;letter-spacing:-.4px;overflow-wrap:anywhere}
.comparison-artwork-caption{margin:5px 0 0;font-size:12px;line-height:1.4;color:#756081}
.comparison-artwork-close{display:flex;align-items:center;justify-content:center;gap:12px;flex:none;min-height:44px;padding:8px 15px;border:1px solid #b8a3cc;border-radius:999px;background:#fffaf2;color:#332140;font:inherit;font-size:13px;cursor:pointer}
.comparison-artwork-close span{font-size:25px;line-height:1}
.comparison-artwork-close:hover{background:#eee2f6}
.comparison-artwork-close:focus-visible{outline:3px solid #7f58a4;outline-offset:3px}
.comparison-artwork-frame{box-sizing:border-box;min-width:0;min-height:0;width:100%;height:100%;padding:18px;overflow:hidden;background:linear-gradient(135deg,#f4eef8,#eee8f3)}
.comparison-artwork-image{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.comparison-artwork-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 12px;border-bottom:1px solid #d9c8e5}
.comparison-artwork-nav button{width:44px;height:44px;border:1px solid #b8a3cc;border-radius:50%;background:#fffaf2;color:#332140;font:inherit;font-size:22px;cursor:pointer}
.comparison-artwork-nav button:disabled{opacity:.35;cursor:default}
.comparison-artwork-nav button:focus-visible{outline:3px solid #7f58a4;outline-offset:2px}
.comparison-artwork-position{min-width:48px;text-align:center;font-size:12px;color:#756081;font-variant-numeric:tabular-nums}
.comparison-artwork-image{transform:translateX(var(--scene-drag-x,0px));transition:transform 180ms cubic-bezier(.2,.8,.2,1);user-select:none;-webkit-user-select:none}
.scene-dragging .comparison-artwork-image{transition:none}
.comparison-artwork-frame[data-scene-swipe]{touch-action:pan-y pinch-zoom}
.comparison-artwork-frame.scene-browser-zoomed{touch-action:auto}
@media(prefers-reduced-motion:reduce){.comparison-artwork-image{transition:none}}
@media(max-width:600px){
  .comparison-artwork-viewer{width:calc(100vw - 16px);height:calc(100vh - 16px);height:calc(100dvh - 16px);border-radius:14px}
  .comparison-artwork-header{padding:12px;gap:10px}
  .comparison-artwork-kicker{font-size:8px}
  .comparison-artwork-caption{font-size:10px}
  .comparison-artwork-close{gap:8px;padding:8px 12px}
  .comparison-artwork-frame{padding:8px}
}
@media(max-height:500px){
  .comparison-artwork-header{padding-block:8px}
  .comparison-artwork-kicker,.comparison-artwork-caption{display:none}
  .comparison-artwork-frame{padding:6px}
}