:root{
  --sh-text:var(--ink1);        /* caption name, pin fill */
  --sh-sub:var(--ink3);         /* caption text */
  --sh-bg:var(--paper);         /* page background, for the faint line and pin text */
  --sh-card:var(--card);        /* frame behind the image */
  --sh-line:var(--hairline);    /* frame outline */
  --sh-shadow:var(--shadow-tight);
  --sh-faint:color-mix(in srgb,var(--sh-sub) 60%,var(--sh-bg)); /* source line: the caption grey, lighter */
}
.shots{margin:36px 0 8px}
.shots .shots-lead{margin:0 0 18px}
.shots-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.shots-grid{grid-template-columns:1fr}}
.shot{margin:0}
.shot-frame{border-radius:14px;overflow:hidden;background:var(--sh-card);border:1px solid var(--sh-line);box-shadow:var(--sh-shadow);line-height:0}
.shot-frame img{display:block;width:100%;height:auto}
.shot figcaption{text-wrap:balance;margin:10px 2px 0;font-size:14.5px;line-height:1.5;color:var(--sh-sub)}
.shot figcaption b{color:var(--sh-text);font-weight:600}
.shot .shot-src{display:block;font-size:12.5px;color:var(--sh-faint);margin-top:2px}
/* single screenshot with numbered pins (step posts) */
.shot-pinbox{position:relative;overflow:visible}
.shot-pinbox .shot-inner{border-radius:14px;overflow:hidden}
.shot-pin{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--sh-text);color:var(--sh-bg);font-size:13px;font-weight:700;line-height:24px;text-align:center;box-shadow:0 0 0 3px color-mix(in srgb,var(--sh-bg) 80%,transparent),0 4px 10px rgba(0,0,0,.25)}
.shot-keys{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.shot-keys li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--sh-sub)}
.shot-keys i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--sh-text);color:var(--sh-bg);font-size:12px;font-weight:700;line-height:20px;text-align:center;font-style:normal;margin-top:1px}
/* dark-image swap: this site switches theme with prefers-color-scheme only (no data-theme anywhere in css/page.css).
   Selectors carry .shot-frame so they beat ".shot-frame img{display:block}". */
.shot-frame img.img-dark{display:none}
@media (prefers-color-scheme:dark){
  .shot-frame img.img-light{display:none}
  .shot-frame img.img-dark{display:block}
}
/* css/page.css styles every .article ol and li (a counter and a 38px indent): undo that for the key list */
.article .shot-keys{margin:12px 0 0;counter-reset:none}
.article .shot-keys li{padding-left:0;margin:0;font-size:15px;line-height:1.45;color:var(--sh-sub);text-wrap:wrap}
.article .shot-keys li::before{content:none}
.article .shot-keys i{font-style:normal}
.article .shots .shots-lead{font-size:15.5px;color:var(--ink2)}
@media (max-width:480px){.shot-pin{width:20px;height:20px;font-size:11.5px;line-height:20px}}
@media (max-width:360px){.shot figcaption{font-size:14px}.shot .shot-src{font-size:11.5px}}
@media (max-width:340px){.shot figcaption{font-size:12px;letter-spacing:-.01em}.shot .shot-src{font-size:11px}}
/* comparison pages: two columns inside the article measure, so the longest source line (a vendor domain) needs a little less room */
.shots-compare .shot .shot-src{font-size:11.5px}
@media (max-width:480px){.shots-compare .shot .shot-src{font-size:11px}}
@media (max-width:340px){.shots-compare .shot .shot-src{font-size:10.5px}}
/* comparison pages with a tall (3:4) Chorus panel beside a 16:9 rival: centre both figures on one line */
.shots-tall .shots-grid{align-items:center}