.rendering-guide .capture-note {
  margin: 24px 0 32px;
  padding: 15px 18px;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
  font: 0.88rem/1.6 "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

.rendering-guide .screenshot-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #282828;
  cursor: zoom-in;
}

.rendering-guide .screenshot-trigger img { width: 100%; height: auto; }
.rendering-guide .screenshot-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.rendering-guide .screenshot-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 4px;
  background: #17202a;
  color: #fff;
  font: 0.75rem/1.5 "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

.rendering-guide .image-lightbox {
  width: min(96vw, 2200px);
  max-width: 96vw;
  max-height: 94vh;
  padding: 18px;
  border: 1px solid #4c5b6b;
  border-radius: 8px;
  background: #17202a;
  color: #fff;
}
.rendering-guide .image-lightbox::backdrop { background: rgb(0 0 0 / 82%); }
.rendering-guide .image-lightbox figure { margin: 0; }
.rendering-guide .image-lightbox-image { margin: 0 auto; max-height: 76vh; width: auto; object-fit: contain; }
.rendering-guide .image-lightbox-caption { padding-top: 12px; font: 0.9rem/1.5 "Instrument Sans", ui-sans-serif, system-ui, sans-serif; }
.rendering-guide .image-lightbox-close {
  display: block;
  margin: 0 0 12px auto;
  padding: 8px 14px;
  border: 1px solid #68798c;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font: 600 0.95rem/1.3 "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.rendering-guide .image-lightbox-close:focus-visible { outline: 3px solid #9cc1f1; outline-offset: 3px; }
.rendering-guide .guide-sources li { font-size: 0.94rem; margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}