.fig{padding:8px 0}
label,button,select{font:500 12px/1.5 var(--mono)}label{color:var(--muted)}
select,button{border:1px solid var(--rule);border-radius:0;background:var(--bg);color:var(--ink);padding:7px 10px}button{cursor:pointer}button:hover{border-color:var(--green-text)}
.scene-choices{display:grid;grid-template-columns:repeat(var(--scene-count,4),minmax(0,1fr));gap:10px}.scene-choice{padding:4px 4px 6px;text-align:left;border-color:transparent;border-bottom:2px solid var(--rule);transition:border-color .18s,background .18s}.scene-choice img{display:block;width:100%;aspect-ratio:2;height:auto;object-fit:cover;margin-bottom:6px}.scene-choice span{display:block}.scene-choice[aria-pressed="true"]{border-bottom-color:var(--green-text);background:var(--card);color:var(--green-text)}button:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}.comparison-stage[aria-busy="true"] #outputs{opacity:.5}.comparison-stage[aria-busy="true"] .wipe-divider{visibility:hidden}.comparison-stage #outputs{transition:opacity .18s}
.detail-hint{font:13px/1.6 var(--font);color:var(--muted);margin:8px 0 14px}
.pair-controls{display:flex;justify-content:space-between;align-items:center;gap:12px}.pair-controls label{display:flex;align-items:center;gap:10px}.pair-controls select{min-width:80px}
.zoom-controls{display:flex;align-items:center;gap:10px;margin:16px 0}.zoom-controls label{white-space:nowrap}.zoom-controls input{flex:1;min-width:40px;accent-color:var(--green-text)}.zoom-controls output{display:inline-block;min-width:3em;text-align:right}
.pair-labels{display:flex;justify-content:space-between;gap:12px;margin:8px auto;font:500 11px/1.5 var(--mono)}.pair-labels span:last-child{text-align:right}
.comparison-stage{position:relative;width:100%;aspect-ratio:1;margin:0 auto;background:var(--card);border:1px solid var(--rule)}
.resolution-card{position:absolute;inset:0;margin:0;overflow:hidden}.resolution-card[data-side="right"]{z-index:1}.resolution-card[data-side="left"]{z-index:2}
.resolution-viewport{position:absolute;inset:0;overflow:hidden;cursor:zoom-in;touch-action:pan-y}.resolution-viewport[data-zoomed="true"]{cursor:grab;touch-action:none}.resolution-viewport[data-dragging="true"]{cursor:grabbing}
.resolution-viewport canvas{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;image-rendering:auto}
.resolution-viewport:focus-visible{outline:2px solid var(--green-text);outline-offset:-3px}
.wipe-divider{position:absolute;top:0;bottom:0;left:50%;z-index:3;width:2px;background:white;box-shadow:0 0 0 1px #0004;pointer-events:none}
.wipe-divider button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border-radius:50%;font-size:22px;cursor:ew-resize;touch-action:none;pointer-events:auto}
.detail-note{font:12px/1.6 var(--font);color:var(--muted);margin:10px 0}.detail-note:empty{display:none}
@media(max-width:560px){.fig{padding:8px 4px}.pair-controls{gap:6px}.pair-controls label{gap:6px}.pair-controls select{min-width:66px}.zoom-controls{gap:6px}.zoom-controls button{padding:7px}.scene-choices{gap:4px;grid-template-columns:repeat(3,minmax(0,1fr))}.scene-choice{padding:3px 2px 6px;font-size:11px;letter-spacing:-.2px}.scene-choice img{aspect-ratio:1.5}.detail-hint{font-size:12px}}
@media(prefers-reduced-motion:reduce){.scene-choice,.comparison-stage #outputs{transition:none}}