/* Annotated evidence screenshots: the original image stays untouched;
   numbered boxes on top point to the English notes beside it. */
.proof-group + .proof-group { margin-top:64px; }
.proof-group h3 { margin:0 0 6px; font-size:1.35rem; letter-spacing:-.025em; }
.proof-group > p { margin:0 0 26px; color:#55555a; line-height:1.6; max-width:46rem; }
.proof-shots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 32px; margin:0; padding:0; list-style:none; }
.shot figure { display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr); align-items:start; gap:22px; margin:0; }
.shot-frame { position:relative; display:block; border-radius:20px; background:#f2f2f4; box-shadow:0 0 0 1px var(--hair,#e5e5ea); cursor:zoom-in; }
.shot-frame img { display:block; width:100%; height:auto; border-radius:20px; }
.shot-mark { position:absolute; border:2px solid #0a84ff; border-radius:8px; background:rgba(10,132,255,.07); box-shadow:0 0 0 1px rgba(255,255,255,.75); pointer-events:none; transition:background .2s ease,box-shadow .2s ease; }
.shot-mark::after { content:attr(data-n); position:absolute; top:-9px; left:-9px; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#0a84ff; color:#fff; font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; box-shadow:0 0 0 2px #fff; }
.shot-mark.is-active { background:rgba(10,132,255,.22); box-shadow:0 0 0 3px rgba(10,132,255,.35); }
.shot figcaption { min-width:0; }
.shot-title { margin:2px 0 12px; font-size:1rem; font-weight:650; line-height:1.35; letter-spacing:-.01em; }
.shot-key { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.shot-key li { position:relative; padding-left:28px; color:#3a3a3f; font-size:.88rem; line-height:1.45; }
.shot-key li::before { content:attr(data-n); position:absolute; left:0; top:1px; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#0a84ff; color:#fff; font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
.shot-key li.is-active { color:#000; }
.proof-shots--pair { grid-template-columns:1fr; gap:32px; }
/* Landscape screenshots (desktop AI answers): image on top, notes below. */
.proof-shots--wide { gap:44px 36px; }
.shot--wide figure { display:block; }
.shot--wide .shot-frame,.shot--wide .shot-frame img { border-radius:14px; }
.shot--wide figcaption { margin-top:18px; }
.proof-shots--pair .shot figure { grid-template-columns:minmax(0,230px) minmax(0,1fr); }

/* Larger view */
.shot-dialog { width:min(1100px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:26px; background:#fff; color:#000; box-shadow:0 40px 120px -20px rgba(0,0,0,.45); overflow:auto; }
.shot-dialog::backdrop { background:rgba(10,10,12,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.shot-dialog-close { position:sticky; top:12px; float:right; z-index:2; margin:12px 12px 0 0; padding:9px 16px; border:0; border-radius:999px; background:rgba(0,0,0,.78); color:#fff; font:600 .9rem/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; cursor:pointer; }
.shot-dialog .shot figure { grid-template-columns:auto minmax(0,1fr); gap:32px; padding:28px; }
.shot-dialog .shot-frame { cursor:default; width:min(430px,calc((100dvh - 120px) * 600 / 1200)); }
.shot-dialog .shot-title { font-size:1.35rem; margin-top:8px; }
.shot-dialog .shot-key { gap:12px; }
.shot-dialog .shot-key li { font-size:1rem; }
.shot-dialog .shot--wide figure { display:block; }
.shot-dialog .shot--wide .shot-frame { width:100%; }
.shot-dialog .shot--wide figcaption { margin-top:22px; }

@media(max-width:1000px) {
  .proof-shots { grid-template-columns:1fr; }
}
@media(max-width:560px) {
  .proof-shots { gap:30px; }
  .shot figure,.proof-shots--pair .shot figure { grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:14px; }
  .shot--wide figure { display:block; }
  .shot-frame,.shot-frame img { border-radius:14px; }
  .shot-title { font-size:.92rem; margin-bottom:9px; }
  .shot-key { gap:7px; }
  .shot-key li { padding-left:24px; font-size:.8rem; }
  .shot-key li::before,.shot-mark::after { width:17px; height:17px; font-size:9.5px; }
  .shot-mark::after { top:-8px; left:-8px; }
  .shot-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:20px; }
  .shot-dialog .shot figure { grid-template-columns:1fr; padding:16px; gap:18px; }
  .shot-dialog .shot-frame { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .shot-mark { transition:none; } }