/* Ladder tour video: a poster that opens it, and the dialog player. */
.tour-poster {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--s4); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #0d141b; cursor: pointer;
}
.tour-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease; }
.tour-poster:hover img { transform: scale(1.03); }
.tour-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-play { position: absolute; inset: 0; display: grid; place-items: center; }
.tour-play > span {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
}
.tour-play svg { width: 20px; height: 20px; margin-left: 3px; }
.tour-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px var(--s3);
  background: rgb(13 20 27 / 0.8); color: #e3eaf0; font-size: 0.8125rem; font-weight: 600; text-align: left;
}

.tour-dialog {
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #0d141b; overflow: visible;
  width: min(100% - 2 * var(--s4), 1100px); box-shadow: var(--shadow);
}
.tour-dialog::backdrop { background: rgb(13 20 27 / 0.82); }
.tour-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); }
.tour-close { position: absolute; right: 0; bottom: calc(100% + var(--s2)); }
.tour-credit { position: absolute; left: 0; right: 0; top: calc(100% + var(--s2)); text-align: center; font-size: 0.75rem; color: #8f9dab; }