body>main{max-width:none;padding:0}
.why-copy{max-width:1460px;margin-inline:auto;padding-inline:4.5%}
.why-controls{display:grid;grid-template-columns:minmax(160px,1fr) minmax(220px,1.5fr) auto minmax(220px,1.4fr);align-items:end;gap:24px;padding:24px clamp(10px,2vw,30px);border-top:1px solid var(--line);background:var(--paper)}
.why-controls label{display:grid;gap:9px;font-size:10px;letter-spacing:.6px;min-width:0}
.why-controls .width-control{grid-template-columns:1fr auto}
.width-control input{grid-column:1/-1;width:100%;min-width:0}
.width-control output{font-variant-numeric:tabular-nums;color:var(--accent)}
.why-controls button{font-size:10px;min-height:44px}
.why-controls .pixelated-option{display:flex;gap:10px;font-size:11px;letter-spacing:0}
.comparison-stage{width:100%;border-bottom:1px solid var(--line);background:var(--panel);padding:0}
.why-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;width:100%;margin:auto;background:var(--line)}
.why-triptych figure{min-width:0;background:var(--paper)}
.why-triptych figcaption{padding:20px clamp(10px,2vw,30px);border-bottom:1px solid var(--line);min-height:116px}
.panel-number{font-size:9px;color:var(--accent);letter-spacing:1px}
.why-triptych h2{font-size:clamp(14px,2vw,24px);line-height:1.4;letter-spacing:-.7px;margin:7px 0 4px}
.why-triptych figcaption p{font-size:10px}
.why-image{width:100%;overflow:hidden;background:var(--paper)}
.why-image img,.why-image canvas{display:block;width:100%;max-width:none;height:auto}
#whyOriginal,#whyExport{image-rendering:auto}
#whyExport.pixelated{image-rendering:pixelated}
.panel-measure{min-height:48px;padding:14px clamp(10px,2vw,30px);font-size:10px;font-variant-numeric:tabular-nums;line-height:1.6;border-top:1px solid var(--line)}
.comparison-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pixelated-option{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.pixelated-option input{width:18px;height:18px;margin:0}
.why-article{max-width:760px;margin-inline:auto;padding:48px 0 56px}
.why-article h1{font-size:clamp(24px,3.4vw,40px);line-height:1.2;letter-spacing:-1.2px;margin:0 0 24px}
.why-article h2{font-size:22px;line-height:1.4;letter-spacing:-.6px;margin:32px 0 14px}
.why-article p{font-size:14px;line-height:1.9;margin:0 0 18px}
.why-article code{overflow-wrap:anywhere}
.why-article .actions{margin:32px 0 0}
@media(max-width:760px){.why-copy{padding-inline:6%}.why-controls{gap:16px}.why-triptych figcaption{padding:12px 8px;min-height:105px}.panel-number{font-size:7px;letter-spacing:0}.why-triptych h2{font-size:14px;letter-spacing:-.5px}.why-triptych figcaption p{font-size:8px}.panel-measure{padding:10px 7px;font-size:8px;min-height:56px}.why-article{padding:36px 0 40px}.why-article p{font-size:13px}}

@media(max-width:1100px){.why-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.why-controls button{justify-self:start}}
@media(max-width:600px){.why-controls{grid-template-columns:minmax(0,1fr);gap:14px}}