:root{
  --sh-text:var(--ink);         /* caption name, pin fill */
  --sh-sub:var(--body);         /* caption text */
  --sh-bg:var(--canvas);        /* page background, for the faint line and pin text */
  --sh-card:var(--panel);       /* frame behind the image */
  --sh-line:var(--hairline);    /* frame outline */
  --sh-shadow:var(--sh);
  --sh-faint:var(--muted);      /* source line: the lighter caption grey */
}
.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:700}
.shot .shot-src{display:block;font-size:12.5px;color:var(--sh-faint);margin-top:2px}
@media (max-width:340px){.shot figcaption{font-size:13px}}
@media (max-width:420px){.shot .shot-src{font-size:11px;letter-spacing:-.01em}}
/* 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 ol / .article li also match here, so the list is re-stated with .article in front */
.article .shot-keys{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.article .shot-keys li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:0;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-weight:700;font-size:12px;line-height:20px;text-align:center;font-style:normal;margin-top:1px}
/* dark-image swap: the page sets data-theme on <html> from the system theme.
   Selectors carry .shot-frame so they beat ".shot-frame img{display:block}". */
.shot-frame img.img-dark{display:none}
:root[data-theme="dark"] .shot-frame img.img-light{display:none}
:root[data-theme="dark"] .shot-frame img.img-dark{display:block}
/* smaller pins on narrow screens: placed after the base rule so they win */
@media (max-width:420px){
  .shot-pin{width:16px;height:16px;line-height:16px;font-size:10px;box-shadow:0 0 0 2px color-mix(in srgb,var(--sh-bg) 80%,transparent),0 2px 6px rgba(0,0,0,.25)}
}