:root{
  --sh-text:var(--text);        /* caption name, pin fill */
  --sh-sub:var(--text-muted);         /* caption text */
  --sh-bg:var(--bg);         /* page background, for the faint line and pin text */
  --sh-card:var(--surface);        /* frame behind the image */
  --sh-line:var(--border);    /* frame outline */
  --sh-shadow:var(--shadow-soft);
  --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;container-type:inline-size}
.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: show .img-dark in dark, .img-light otherwise. ADAPT to the site's theme mechanism.
   Selectors carry .shot-frame so they beat ".shot-frame img{display:block}". */
.shot-frame img.img-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .shot-frame img.img-light{display:none}
  :root:not([data-theme]) .shot-frame img.img-dark{display:block}
}
:root[data-theme="dark"] .shot-frame img.img-light{display:none}
:root[data-theme="dark"] .shot-frame img.img-dark{display:block}
/* narrow phones: caption and source line scale with the figure so each stays on one line */
@media (max-width:420px){
  .shot figcaption{font-size:min(14.5px,4.1cqw)}
  .shot .shot-src{font-size:min(12.5px,3.7cqw)}
}