
.vs-tour-open { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; box-sizing: border-box;
  min-height: 36px; padding: 0 14px; border: 1px solid var(--vs-accent-act-ink); border-radius: var(--vs-corner-pill);
  background: var(--vs-surface-panel); color: var(--vs-accent-act-ink); font: 600 14px/1 var(--vs-font-sans);
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vs-tour-open::after { content: ''; position: absolute; inset: -4px 0; }
.vs-tour-open:hover { background: var(--vs-accent-act-wash); }
.vs-tour-open:focus-visible { outline: 3px solid var(--vs-state-focus); outline-offset: 2px; }
.vs-tour-open svg { width: 16px; height: 16px; flex: none; }
.vs-tour-open__short { display: none; }
[data-vs-tour-slot][hidden] { display: none; }
@media (max-width: 767px) {
  .vs-tour-open { min-height: 44px; }
  .vs-tour-open::after { inset: 0; }
  .vs-tour-open__long { display: none; }
  .vs-tour-open__short { display: inline; }
}

dialog.vs-tour { box-sizing: border-box; width: min(840px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px);
  margin: auto; padding: 0; border: 0; border-radius: var(--vs-corner-overlay); overflow: auto; overscroll-behavior: contain;
  background: var(--vs-surface-panel); color: var(--vs-ink-body); box-shadow: var(--vs-shadow-modal);
  font: 400 15px/1.55 var(--vs-font-sans); text-align: left; }
dialog.vs-tour::backdrop { background: rgba(15, 22, 32, 0.6); }
.vs-tour * { box-sizing: border-box; }
.vs-tour__head { padding: 22px 28px 0; }
.vs-tour__top { display: flex; align-items: center; gap: 12px; }
.vs-tour__eyebrow { margin: 0; font: 700 11px/1.4 var(--vs-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vs-accent-act-ink); }
.vs-tour__close { flex: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--vs-surface-sunken); color: var(--vs-ink-heading); font: 400 22px/1 var(--vs-font-sans); cursor: pointer; }
.vs-tour__outcome { margin: 4px 0 0; max-width: 700px; font: 700 24px/1.25 var(--vs-font-sans); color: var(--vs-ink-heading); text-wrap: balance; }
.vs-tour__lede { margin: 6px 0 0; max-width: 700px; }
.vs-tour__tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--vs-surface-border); }
.vs-tour__tab { min-height: 44px; margin-bottom: -1px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--vs-ink-muted); font: 400 14px/1 var(--vs-font-sans); cursor: pointer; }
.vs-tour__tab[aria-selected="true"] { border-bottom-color: var(--vs-accent-act-ink); color: var(--vs-ink-heading); font-weight: 700; }
.vs-tour button:focus-visible, .vs-tour a:focus-visible { outline: 3px solid var(--vs-state-focus); outline-offset: 2px; }
.vs-tour__panel { display: flex; gap: 22px; padding: 20px 28px; }
.vs-tour__panel[hidden] { display: none; }
.vs-tour__figure { position: relative; flex: 0 0 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 240px; margin: 0; padding: 20px; border: 1px solid var(--vs-surface-border); border-radius: var(--vs-corner-card);
  background: var(--vs-surface-sunken); overflow: hidden; text-align: center; }
.vs-tour__figure img { display: block; width: 100%; height: auto; border-radius: var(--vs-corner-control-sm); }
.vs-tour__badge { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--vs-accent-act-ink); color: var(--vs-surface-panel); font: 700 13px/1 var(--vs-font-sans); }
.vs-tour__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vs-tour__count { margin: 0; font: 700 11px/1.4 var(--vs-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-ink-muted); }
.vs-tour__title { margin: 6px 0 0; font: 700 18px/1.3 var(--vs-font-sans); color: var(--vs-ink-heading); }
.vs-tour__text { margin: 6px 0 0; }
.vs-tour__nav { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; }
.vs-tour__dots { display: flex; gap: 6px; margin: 0 auto 0 0; padding: 0; list-style: none; }
.vs-tour__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-surface-border-strong); }
.vs-tour__dot[aria-current="step"] { background: var(--vs-accent-act-ink); }
.vs-tour__btn { min-height: 44px; padding: 0 16px; border-radius: var(--vs-corner-control-md); font: 600 14px/1 var(--vs-font-sans); cursor: pointer; }
.vs-tour__btn[hidden] { display: none; }
.vs-tour__btn--quiet { border: 1px solid var(--vs-surface-border); background: var(--vs-surface-panel); color: var(--vs-ink-heading); }
.vs-tour__btn--quiet:hover { background: var(--vs-surface-sunken); }
.vs-tour__btn--act { border: 0; background: var(--vs-accent-act); color: var(--vs-accent-on-act); }
.vs-tour__btn--act:active { background: var(--vs-accent-act-active); }
.vs-tour__btn--dark { border: 0; background: var(--vs-surface-inverse); color: var(--vs-ink-on-dark); }
.vs-tour__show { border: 1px solid var(--vs-accent-act-ink); background: var(--vs-surface-panel); color: var(--vs-accent-act-ink); }
.vs-tour__show:hover { background: var(--vs-accent-act-wash); }
.vs-tour__media { flex: 0 0 56%; position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; max-width: 100%;
  border-radius: var(--vs-corner-card); background: var(--vs-surface-inverse); color: var(--vs-ink-on-dark-muted); overflow: hidden; }
.vs-tour__media video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vs-tour__pending { margin: 0; padding: 24px; font: 400 13px/1.5 var(--vs-font-sans); text-align: center; }
.vs-tour__figure .vs-tour__pending { max-width: 32ch; padding: 0; color: var(--vs-ink-muted); }
.vs-tour__chapters { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.vs-tour__chapters li { display: flex; gap: 10px; }
.vs-tour__chapters time { flex: none; font: 400 13px/1.55 var(--vs-font-mono); color: var(--vs-accent-act-ink); font-variant-numeric: tabular-nums; }
.vs-tour__foot { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-top: 1px solid var(--vs-surface-border);
  background: var(--vs-surface-canvas); }
.vs-tour__foot a { color: var(--vs-accent-act-ink); font-weight: 600; }
.vs-tour__foot .vs-tour__btn { margin-left: auto; }
@media (max-width: 767px) {
  dialog.vs-tour { width: 100vw; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .vs-tour__head { padding: 14px 18px 0; }
  .vs-tour__outcome { font-size: 20px; }
  .vs-tour__panel { flex-direction: column; gap: 14px; padding: 16px 18px; }
  .vs-tour__figure { flex-basis: auto; min-height: 168px; }
  .vs-tour__media { flex-basis: auto; width: 100%; }
  .vs-tour__foot { flex-wrap: wrap; padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .vs-tour__foot .vs-tour__btn { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.vs-tour[open] { animation: vs-tour-in 0.16s ease-out; }
}
@keyframes vs-tour-in { from { opacity: 0; transform: translateY(8px); } }

.driver-popover.vs-tour-pop { max-width: 340px; padding: 16px; border-radius: var(--vs-corner-card); background: var(--vs-surface-panel);
  color: var(--vs-ink-body); box-shadow: var(--vs-shadow-popup); font-family: var(--vs-font-sans); }
.driver-popover.vs-tour-pop .driver-popover-title { font: 700 16px/1.3 var(--vs-font-sans); color: var(--vs-ink-heading); }
.driver-popover.vs-tour-pop .driver-popover-description { margin-top: 6px; font: 400 14px/1.5 var(--vs-font-sans); color: var(--vs-ink-body); }
.driver-popover.vs-tour-pop .driver-popover-progress-text { font: 700 11px/1.4 var(--vs-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vs-ink-muted); }
.driver-popover.vs-tour-pop .driver-popover-navigation-btns button { min-height: 36px; padding: 0 12px; border-radius: var(--vs-corner-control-md);
  border: 1px solid var(--vs-surface-border); background: var(--vs-surface-panel); color: var(--vs-ink-heading); font: 600 13px/1 var(--vs-font-sans); text-shadow: none; }
.driver-popover.vs-tour-pop .driver-popover-navigation-btns .driver-popover-next-btn { border-color: transparent; background: var(--vs-accent-act); color: var(--vs-accent-on-act); }
.driver-popover.vs-tour-pop .driver-popover-close-btn { color: var(--vs-ink-muted); }
.driver-popover.vs-tour-pop .driver-popover-arrow { border-color: var(--vs-surface-panel); }
