/* Screenshots in the project post. Each figure holds a light and a dark image; the one matching the page theme is shown,
   following the same rule as the rest of the blog (the Light/Dark button, else the system setting). */
figure.shot{margin:2em 0;padding:0}
figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--rule-hard,var(--rule,#d9d6cf));border-radius:6px;background:var(--paper)}
figure.shot.narrow img{max-width:400px;margin:0 auto}
figure.shot figcaption{margin-top:12px}
figure.shot .dk{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) figure.shot .lt{display:none}
  :root:not([data-theme="light"]) figure.shot .dk{display:block}
}
:root[data-theme="dark"] figure.shot .lt{display:none}
:root[data-theme="dark"] figure.shot .dk{display:block}
/* side-by-side views (board and notes) are wider than the text column and spill evenly into both margins */
html.lean figure.shot.wide{--w:min(860px,calc(100vw - 40px));width:var(--w);max-width:none;margin-left:calc((100% - var(--w)) / 2);margin-right:0}