:root{
  --sh-text:var(--text-primary);        /* caption name, pin fill */
  --sh-sub:var(--text-secondary);       /* caption text */
  --sh-bg:var(--bg-main);               /* pin text */
  --sh-card:var(--bg-card);             /* frame behind the image */
  --sh-line:var(--border-subtle);       /* frame outline */
  --sh-shadow:var(--shadow-tight);
  --sh-faint:var(--text-tertiary);      /* source line */
}
.shots{margin:36px 0 8px}
.article-body .shots h2{margin-top:0}
.article-body .shots .shots-lead{margin:0 0 18px;text-wrap:balance}
.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:clamp(12px,3.6vw,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:clamp(9.5px,3.1vw,11.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)}
.article-body .shot-keys{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.article-body .shot-keys li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--sh-sub);margin:0;padding:0}
.shot-keys i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--sh-text);color:var(--sh-bg);font-weight:700;font-size:12px;line-height:20px;text-align:center;font-style:normal;margin-top:1px}
/* dark-image swap: this site sets data-theme on the html element ("dark" by default). Selectors carry
   .shot-frame so they beat ".shot-frame img{display:block}". */
.shot-frame img.img-dark{display:none}
:root:not([data-theme="light"]) .shot-frame img.img-light{display:none}
:root:not([data-theme="light"]) .shot-frame img.img-dark{display:block}