.tour { margin: 0; border: 1px solid var(--line); border-radius: 7px; background: #fffdf8; overflow: clip; }
.tour-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.tour-bar h2 { font: 500 13px/1.5 system-ui, sans-serif; margin: 0; }
.tour-bar > span { font: 11px/1.5 ui-monospace, monospace; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink); }
/* Identical dimensions before and after releasing the real demo. */
.tour-scene { position: relative; height: clamp(460px, 76svh, 680px); overflow: hidden; background: #fafaf6; isolation: isolate; }
#demo-frame-slot { position: absolute; inset: 0; }
#demo-frame-slot iframe { display: block; width: 100%; height: 100%; border: 0; }
.tour-controls { display: flex; align-items: center; padding: 8px 12px; gap: 12px; border-top: 1px solid var(--line); }
.tour-controls button { cursor: pointer; color: var(--muted); background: transparent; border: 0; border-radius: 3px; min-height: 44px; }
.tour-controls button:hover:not(:disabled) { background: #edf0e7; color: var(--ink); }
.tour button:disabled { cursor: default; opacity: .45; }
.tour-play, .tour-expand { flex-shrink: 0; width: 44px; border: 1px solid var(--line) !important; font-size: 17px; display: grid; place-items: center; }
.tour-chapters { display: flex; flex: 1; gap: 6px; }
.tour-chapters button { text-align: left; flex: 1; font-size: 12px; padding: 9px 12px; }
.tour-chapters button span { font: 10px ui-monospace, monospace; margin-right: 7px; }
.tour-chapters button[aria-pressed="true"] { background: #eaf0e5; color: var(--ink); }
.tour figcaption > p { font-size: 11px; color: var(--muted); padding: 0 20px 12px; margin: 0; }
.tour-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; text-align: center; font: 30px/1.4 Georgia, serif; }
.tour.ready .tour-fallback { display: none; }
.demo-anchor { scroll-margin-top: 18px; }
#demo-retry { min-height: 44px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 12px; border-radius: 3px; padding: 8px 12px; cursor: pointer; }
#demo-retry { margin: 0 12px 12px; }
.tour.demo-expanded { position: fixed; inset: 12px; z-index: 1000; display: flex; flex-direction: column; }
.tour.demo-expanded .tour-scene { flex: 1; height: auto; min-height: 0; }
.tour.demo-expanded figcaption { flex-shrink: 0; }
.tour.demo-expanded .tour-chapters { display: none; }
.setup-price { display: block; }
.setup-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.setup-summary strong { font: 28px/1.3 Georgia, serif; }
.setup-import { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.setup-import h4 { margin: 0; font-size: 14px; font-weight: 600; }
.setup-import p { max-width: 850px; }
.setup-import h4 small { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 8px; }
.price-grid h3 { overflow-wrap: anywhere; }
.tour button:focus-visible { outline-offset: -3px; }
@media (max-width: 700px) {
  .tour-scene { height: max(500px, 72svh); }
  .tour-bar { padding: 12px; flex-wrap: wrap; gap: 2px 12px; }
  .tour-bar h2 { font-size: 12px; }
  .tour-bar > span { font-size: 10px; flex-basis: 100%; }
  .tour-controls { gap: 8px; padding: 8px; flex-wrap: wrap; }
  .tour.demo-expanded { inset: 6px; }
  .tour-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .tour-chapters button { font-size: 10px; padding: 8px 5px; }
  .tour-chapters button span { font-size: 9px; margin-right: 3px; }
  .setup-summary { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
}