/*
 * The home-page tour embed. The iframe reserves its final height before it loads, from the same
 * geometry static/alpswebsite/demos/tour-demo.html draws with, so nothing below it moves:
 *   desktop  8 + (width - 24) * .625    + 204   =  62.5%     + 197px
 *   mobile   6 + (width - 8)  * 1.38235 + 276   =  138.235%  + 270.94px   (below 700px of width)
 * The container query measures the iframe's own width, which is what the demo switches on.
 */
.tour-embed { container-type: inline-size; }
.tour-embed-box { position: relative; height: 0; padding-top: calc(62.5% + 197px); }
.tour-embed-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; color-scheme: light; }
@container (max-width: 699.98px) {
  .tour-embed-box { padding-top: calc(138.235% + 270.94px); }
}

/*
 * A feature-page demo: one responsive document in one iframe, a fixed height per breakpoint, and a
 * full-screen button above the frame so it never covers the product drawn inside it.
 * The heights come from the macro as --demo-h (768px and wider) and --demo-h-phone.
 */
.demo-frame { position: relative; }
.demo-frame-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.demo-fs-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .4); background: transparent; color: #94a3b8;
  font-size: 12.5px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: color .2s, border-color .2s;
}
.demo-fs-btn:hover, .demo-fs-btn:focus-visible { color: #1864F2; border-color: #1864F2; }
.bg-gray-900 .demo-fs-btn:hover, .bg-gray-900 .demo-fs-btn:focus-visible { color: #fff; border-color: #fff; }
.demo-frame-iframe { display: block; width: 100%; height: var(--demo-h, 660px); border: 0; background: #fafafa; color-scheme: light; }
@media (max-width: 767.98px) { .demo-frame-iframe { height: var(--demo-h-phone, 620px); } }

.demo-fs {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  z-index: 9999; flex-direction: column; background: #0b0f19;
}
.demo-fs[open] { display: flex; }
.demo-fs::backdrop { background: #0b0f19; }
.demo-fs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #111827; border-bottom: 1px solid #1f2937; flex: none; }
.demo-fs-title { min-width: 0; color: #cbd5e1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-fs-close { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .08); color: #e2e8f0; font-size: 13px; font-weight: 500; cursor: pointer; }
.demo-fs-close:hover, .demo-fs-close:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; }
.demo-fs iframe { flex: 1; width: 100%; border: 0; background: #fafafa; color-scheme: light; }