/* Small custom layer on top of Tailwind CDN. Keep this light. */

/* Make embedded videos/iframes fill their 16:9 slot cleanly. */
.video-slot > video,
.video-slot > iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0.75rem;
  object-fit: cover;
}

/* Anchor offset so sticky header doesn't cover section headings. */
:target {
  scroll-margin-top: 5rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Console tour (screenshot slideshow in #demos) ---- */
.tour-slide { display: grid; gap: 1.25rem; }
.tour-text .tour-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0f5ad6; }
.tour-text h4 { margin-top: 0.25rem; font-size: 1.25rem; font-weight: 700; color: #0b1220; }
.tour-text p:not(.tour-kicker) { margin-top: 0.75rem; line-height: 1.6; color: #475569; }
.tour-img { width: 100%; height: auto; background: #f1f5f9; }

@media (min-width: 1024px) {
  .tour-on .tour-slide { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: start; }
}

/* JS-enhanced state: one slide visible at a time. */
.tour-on .tour-slides { display: block; }
.tour-on .tour-slide { display: none; }
.tour-on .tour-slide.is-active { display: grid; animation: tour-fade 0.35s ease; }
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tour-on .tour-slide.is-active { animation: none; } }

.tour-bar { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tour-btn { border: 1px solid #cbd5e1; background: #fff; color: #0b1220; border-radius: 0.5rem; padding: 0.4rem 0.8rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.tour-btn:hover { background: #f1f5f9; }
.tour-btn:focus-visible, .tour-chip:focus-visible { outline: 2px solid #1f74f2; outline-offset: 2px; }
.tour-count { margin-left: 0.5rem; font-size: 0.875rem; color: #64748b; font-variant-numeric: tabular-nums; }
.tour-chips { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tour-chip { border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.8rem; cursor: pointer; }
.tour-chip:hover { border-color: #84bbff; color: #0f5ad6; }
.tour-chip[aria-current="true"] { background: #0f5ad6; border-color: #0f5ad6; color: #fff; }

/* ---- Try it live: embedded demo window (#try-live) ---- */
.live-frame { border: 1px solid #cbd5e1; border-radius: 0.75rem; overflow: hidden; background: #fff; box-shadow: 0 10px 30px -12px rgba(11, 18, 32, 0.35); }
.live-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; background: #f1f5f9; border-bottom: 1px solid #cbd5e1; }
.live-dots { display: inline-flex; gap: 0.35rem; }
.live-dots i { width: 0.65rem; height: 0.65rem; border-radius: 999px; background: #cbd5e1; }
.live-address { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.2rem 0.75rem; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; color: #475569; font-size: 0.8rem; }
.live-actions { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.live-btn { border: 1px solid #cbd5e1; background: #fff; color: #0b1220; border-radius: 0.5rem; padding: 0.25rem 0.6rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.live-btn:hover { background: #e2e8f0; }
.live-btn[hidden] { display: none; }
.live-btn:focus-visible, .live-launch:focus-visible { outline: 2px solid #1f74f2; outline-offset: 2px; }
.live-stage { position: relative; height: min(78vh, 820px); min-height: 520px; background: #0b1220; }
.live-stage:fullscreen { height: 100%; min-height: 0; }
.live-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.live-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center;
  background: radial-gradient(ellipse at 30% 20%, #12356b 0%, #0b1220 70%); }
.live-placeholder[hidden] { display: none; }
.live-launch { margin-top: 1.25rem; border: 0; border-radius: 0.5rem; background: #1f74f2; color: #fff; padding: 0.75rem 1.5rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.live-launch:hover { background: #4a97ff; }
.live-launch:disabled { opacity: 0.7; cursor: progress; }
.live-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; background: #0b1220; color: #cbd5e1; font-size: 0.9rem; pointer-events: none; }
@media (max-width: 640px) {
  .live-dots { display: none; }
  .live-stage { height: 70vh; min-height: 440px; }
}

/* ---- Guided tour over the live demo (assets/main.js, #try-live) ---- */
/* .live-guide dims the iframe and swallows clicks so the page can't drift from the step shown. */
.live-guide { position: absolute; inset: 0; z-index: 2; cursor: default; }
.live-guide-spot { position: absolute; border-radius: 0.5rem; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(11, 18, 32, 0.62), 0 0 0 3px #1f74f2;
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease; }
.live-guide-spot.is-none { left: 50%; top: 50%; width: 0; height: 0; box-shadow: 0 0 0 9999px rgba(11, 18, 32, 0.62); }
.live-guide-wait { z-index: 3; background: rgba(11, 18, 32, 0.7); }
.live-guide-card { position: absolute; z-index: 1; width: 300px; max-width: calc(100% - 24px); box-sizing: border-box;
  padding: 1rem 1.1rem; border-radius: 0.75rem; background: #fff; color: #0b1220; font-size: 0.9rem; line-height: 1.45;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55); }
.live-guide-card.is-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.live-guide-count { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.live-guide-title { margin: 0.2rem 0 0; font-size: 1.05rem; font-weight: 700; }
.live-guide-text { margin: 0.4rem 0 0; color: #334155; }
.live-guide-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.live-guide-skip { margin-right: auto; border: 0; background: none; padding: 0.25rem 0; color: #64748b; font-size: 0.8rem; cursor: pointer; text-decoration: underline; }
.live-guide-skip:hover { color: #0b1220; }
.live-guide-skip[hidden] { display: none; }
.live-guide-btn { border: 1px solid #cbd5e1; background: #fff; color: #0b1220; border-radius: 0.5rem; padding: 0.35rem 0.8rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.live-guide-btn:hover { background: #e2e8f0; }
.live-guide-btn.is-primary { border-color: #1f74f2; background: #1f74f2; color: #fff; }
.live-guide-btn.is-primary:hover { background: #0f5ad6; }
.live-guide-btn:disabled { opacity: 0.45; cursor: default; }
.live-guide-btn:focus-visible, .live-guide-skip:focus-visible { outline: 2px solid #1f74f2; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .live-guide-spot { transition: none; }
}