/* ProxyBench qualitative prototype: one spatial input and one comparison per row. */
.qualitative-showcase { margin: 42px 0 52px; }
.qualitative-intro { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: #5f6858; }
.qual-row { margin-top: 28px; padding-top: 23px; border-top: 1px solid var(--line); }
.qual-row-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.qual-row-heading h4 { font:400 25px var(--serif); letter-spacing:-.025em; margin:0; }
.qual-row-heading h4 span { color:#8c987e; font:11px var(--mono); margin-right:12px; }
.qual-row-heading > span { font:9px var(--mono); color:#8b816b; }
.qual-row-grid { display:grid; grid-template-columns:.85fr 1.65fr; gap:16px; align-items:start; }
.qual-proxy { position:relative; background:#e1e6da; border:1px solid #cfd6c6; border-radius:12px; overflow:hidden; }
.qual-proxy-stage { aspect-ratio: 1.4; position:relative; }
.qual-proxy-stage canvas { display:block; width:100%; height:100%; touch-action:pan-y; cursor:grab; }
.qual-proxy-stage canvas:active { cursor:grabbing; }
.qual-proxy-stage > p { padding:40px 24px; font-size:12px; color:#627158; }
.qual-proxy-badge { position:absolute; z-index:1; top:11px; left:11px; font:8px var(--mono); color:#3c4c32; padding:6px 8px; border-radius:5px; background:#f6f8eedb; pointer-events:none; }
.qual-proxy-footer { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 11px; background:#d8dfcf; color:#526346; font:8px var(--mono); line-height:1.5; }
.qual-proxy-footer i { display:inline-block; width:15px; height:2px; background:#8962cc; }
.qual-proxy-footer button { margin-left:auto; border:1px solid #a3b394; background:transparent; border-radius:99px; padding:4px 7px; font:inherit; color:inherit; cursor:pointer; }
.qual-result { min-width:0; }
.qual-result .compare { aspect-ratio: 16 / 9; }
.qual-result .media-label { font-size:8px; }
.qual-method-switch { margin-top:12px; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:#ede9df; }
.qual-method-title { display:flex; gap:12px; justify-content:space-between; align-items:center; font-size:11px; margin-bottom:10px; }
.qual-method-title strong { font-weight:500; color:#7057ad; }
.qual-method-title span { font-size:9px; color:#857d6d; }
.qual-method-range { width:100%; margin:0; accent-color:#8263c6; cursor:pointer; }
.qual-method-labels { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin-top:8px; }
.qual-method-labels button { padding:4px 0; border:0; background:transparent; color:#7f8274; font-size:9px; cursor:pointer; }
.qual-method-labels button[aria-pressed="true"] { color:#6545ad; font-weight:700; }
.qual-row .fine-print { font-size:9px; }
@media(max-width:720px) {
 .qual-row-grid { grid-template-columns:1fr; gap:12px; }
 .qual-proxy-stage { aspect-ratio:1.8; }
 .qual-row-heading { align-items:start; }
 .qual-row-heading h4 { font-size:22px; }
 .qual-row-heading > span { font-size:8px; }
 .qual-method-labels { gap:3px; }
 .qual-method-labels button { font-size:8px; overflow-wrap:anywhere; }
 .qual-method-switch { padding:12px 9px; }
 .qual-method-title span { font-size:8px; }
}