/* SAE examples with their measured native components directly underneath.
   One shared grid: every column's title, 2x2 photos, and parts row sit on the same row tracks. */
#convnext-sae-residual{max-width:800px;margin:26px auto;padding:0;color:#30484f;font:12px/1.45 var(--sans,Arial,sans-serif)}
#convnext-sae-residual *{box-sizing:border-box}
#convnext-sae-residual .csr-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:24px;row-gap:0}
#convnext-sae-residual .csr-group{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;min-width:0}
#convnext-sae-residual h4{grid-row:1;font:600 14px/1.3 var(--sans,Arial,sans-serif);margin:0 0 8px}
#convnext-sae-residual .csr-photos{grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:3px}
#convnext-sae-residual .csr-photos img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:0;max-width:none;border:0;border-radius:0;box-shadow:none}
#convnext-sae-residual .csr-parts-label{grid-row:3;font:10px/1.3 var(--sans,Arial,sans-serif);color:#8a9792;margin:12px 0 5px}
/* Four equal thumbnail tracks plus a zero-width fifth track, all 3px apart. The -3px margin cancels that
   fifth gap, so two thumbnails span exactly one photo. The ellipsis always sits 3px after the last
   thumbnail, centred on the image row; after a fourth thumbnail it hangs into the column gutter. */
#convnext-sae-residual .csr-parts{grid-row:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 0;grid-template-rows:auto auto;grid-auto-flow:column;column-gap:3px;row-gap:3px;align-self:start;margin-right:-3px}
#convnext-sae-residual .csr-part{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:3px;min-width:0}
#convnext-sae-residual .csr-part img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:0;max-width:none;border:0;border-radius:0;box-shadow:none}
#convnext-sae-residual .csr-part span{display:block;font:9px/1.3 var(--sans,Arial,sans-serif);font-variant-numeric:tabular-nums;white-space:nowrap;color:#8a9792}
#convnext-sae-residual .csr-part b{font-weight:400}
#convnext-sae-residual .csr-neg{color:#a75e46}#convnext-sae-residual .csr-pos{color:#277f79}
#convnext-sae-residual .csr-more{grid-row:1;align-self:center;justify-self:start;font-size:11px;line-height:1;color:#8a9792;white-space:nowrap}
#convnext-sae-residual figcaption{font:12px/1.5 var(--sans,Arial,sans-serif);margin:14px 0 7px;color:#5e7069;max-width:none}
#convnext-sae-residual .csr-methods{font:11px/1.5 var(--sans,Arial,sans-serif)}
#convnext-sae-residual summary{cursor:pointer;color:#537079}
#convnext-sae-residual .csr-methods p{font:inherit;margin:10px 0;color:#657579}
@media(max-width:650px){
  #convnext-sae-residual{max-width:330px}
  #convnext-sae-residual .csr-groups{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0}
  #convnext-sae-residual .csr-group{grid-row:auto;display:block;margin-bottom:24px}
  #convnext-sae-residual .csr-group:last-child{margin-bottom:0}
  #convnext-sae-residual .csr-photos+.csr-parts{margin-top:12px}
  #convnext-sae-residual .csr-part span{font-size:10px}
}