/* Shared runtime screenshot carousel. Inherits each runtime page's native
   theme via its CSS variables (--bg-card, --border, --radius, --accent,
   --text, --text-muted, --font-mono), so the frame matches the vendor
   palette of whichever page embeds it. */
.rt-carousel { margin: 12px 0 40px; }
.rt-carousel .rtc-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
}
.rt-carousel .rtc-frame img { display: block; width: 100%; height: auto; }
.rt-carousel .rtc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 85%, transparent);
  color: var(--text);
  font-size: 18px; line-height: 1; padding: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0.85; transition: opacity 0.15s, border-color 0.15s;
}
.rt-carousel .rtc-arrow:hover { opacity: 1; border-color: var(--accent); }
.rt-carousel .rtc-prev { left: 10px; }
.rt-carousel .rtc-next { right: 10px; }
.rt-carousel .rtc-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 10px;
}
.rt-carousel .rtc-caption {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.rt-carousel .rtc-dots { display: flex; gap: 6px; }
.rt-carousel .rtc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: none; padding: 0; background: var(--border);
  cursor: pointer; transition: background 0.15s;
}
.rt-carousel .rtc-dot.on { background: var(--accent); }