: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: 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="light"]) .shot-frame img.img-light{display:none}
  :root:not([data-theme="light"]) .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}
/* very narrow screens: keep caption and source on one line */
@media (max-width:340px){
  .shot figcaption{font-size:13px}
  .shot .shot-src{font-size:11.5px}
}
/* smaller pins when the picture is small */
@media (max-width:560px){
  .shot-pin{width:16px;height:16px;font-size:10px;line-height:16px;box-shadow:0 0 0 2px color-mix(in srgb,var(--sh-bg) 80%,transparent),0 2px 6px rgba(0,0,0,.25)}
}