.app-tour {
  padding-block: clamp(48px, 5.5vw, 78px);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.app-tour .wrap { max-width: 820px; }
.tour-intro { margin-bottom: 26px; }
.tour-intro h2 { margin-bottom: 12px; }
.tour-intro p:not(.kicker) { max-width: 65ch; color: var(--muted); }
.tour-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.tour-stage {
  min-width: 0;
  container-type: inline-size;
  overflow: clip;
  --sign: 1;
}
.tour-stage.deck-reverse { --sign: -1; }
.tour-screen {
  margin: 0;
  padding: 12px 0 0;
  color: var(--text);
  background: transparent;
}
.deck-ready .tour-screen[hidden] { display: none; }
.deck-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tour-stage:focus-visible { outline: 2px solid #1970ad; outline-offset: 4px; }
.tour-frame {
  --card-width: min(98cqw, 480px, 64svh);
  --travel: clamp(96px, 33cqw, 244px);
  --drop: clamp(66px, 18cqw, 124px);
  --left: translate(calc(-1 * var(--sign) * var(--travel)), var(--drop))
    rotate(calc(-14deg * var(--sign))) scale(.77);
  --left-bend: translate(calc(-.75 * var(--sign) * var(--travel)), calc(.34 * var(--drop)))
    rotate(calc(-9deg * var(--sign))) scale(.88);
  --left-near: translate(calc(-.36 * var(--sign) * var(--travel)), calc(.07 * var(--drop)))
    rotate(calc(-4deg * var(--sign))) scale(.96);
  --right: translate(calc(var(--sign) * var(--travel)), var(--drop))
    rotate(calc(14deg * var(--sign))) scale(.77);
  --right-bend: translate(calc(.75 * var(--sign) * var(--travel)), calc(.34 * var(--drop)))
    rotate(calc(9deg * var(--sign))) scale(.88);
  --right-near: translate(calc(.36 * var(--sign) * var(--travel)), calc(.07 * var(--drop)))
    rotate(calc(4deg * var(--sign))) scale(.96);
  width: min(98%, 480px, 64vh);
  width: var(--card-width);
  aspect-ratio: 3 / 4;
  margin: 0 auto clamp(20px, 5cqw, 40px);
  transform-origin: center 36%;
  overflow: hidden;
  border-radius: 14px;
  background: #13221a;
  box-shadow: 0 1px 0 #10221733, 0 9px 26px -9px #20372d55;
}
.tour-open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
@media (prefers-reduced-motion: no-preference) {
  .deal-in { animation: arc-in 260ms linear both; }
  .deal-out { animation: arc-out 260ms linear both; }
}
@keyframes arc-in {
  0% { transform: var(--left); opacity: .22; }
  25% { transform: var(--left-bend); opacity: .75; }
  53% { transform: var(--left-near); opacity: .98; }
  100% { transform: none; opacity: 1; }
}
@keyframes arc-out {
  0% { transform: none; opacity: 1; }
  47% { transform: var(--right-near); opacity: .98; }
  75% { transform: var(--right-bend); opacity: .75; }
  100% { transform: var(--right); opacity: .22; }
}
.tour-open:focus-visible { outline-offset: -4px; }
.tour-open img { width: 100%; height: 100%; object-fit: contain; }
.tour-screen figcaption { display: flex; justify-content: space-between; align-items: start; gap: 16px; max-width: 600px; margin-inline: auto; padding: 12px 0 0; border-top: 1px solid var(--line); }
.tour-screen figcaption strong { font-size: 16px; }
.tour-screen figcaption p { max-width: 62ch; margin-top: 2px; color: var(--muted); font-size: 14px; }
.tour-zoom {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0 13px;
  border: 1px solid #98a695;
  border-radius: 6px;
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.tour-zoom:hover { color: white; background: var(--forest); }
.tour-dialog {
  width: min(calc(100% - 32px), 1340px);
  max-width: none;
  max-height: 92vh;
  max-height: 92dvh;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--ivory);
  color: var(--text);
  overflow: auto;
}
.tour-dialog[open] { display: flex; flex-direction: column; }
.tour-dialog::backdrop { background: rgb(9 20 14 / 82%); }
.tour-dialog-head,.tour-dialog-head > div { display: flex; align-items: center; gap: 8px 10px; }
.tour-dialog-head { flex-wrap: wrap; justify-content: space-between; flex: none; padding: 10px 14px; }
.tour-dialog-head strong { font-size: 15px; }
.tour-dialog button {
  min-height: 44px;
  padding: 5px 12px;
  border: 1px solid #91a48e;
  border-radius: 6px;
  background: var(--ivory);
  color: var(--forest);
  font: 650 13px var(--sans);
  cursor: pointer;
}
.tour-dialog button:last-child { background: var(--forest); color: #fff; }
.tour-dialog button:focus-visible,.tour-dialog-viewport:focus-visible { outline: 3px solid #1970ad; outline-offset: -3px; }
.tour-dialog-viewport { min-height: 0; overflow: auto; overscroll-behavior: contain; background: #102018; }
.tour-dialog-viewport img { width: 100%; height: auto; max-height: 65vh; max-height: 65dvh; object-fit: contain; }
.tour-original .tour-dialog-viewport img { max-width: none; max-height: none; width: auto; }
.tour-dialog-hint { padding: 8px 14px 10px; margin: 0; font-size: 12px; color: var(--muted); }

@media (max-width: 580px) {
  .tour-intro { margin-bottom: 20px; }
  .tour-screen { padding-top: 8px; }
  .tour-screen figcaption { flex-direction: column; justify-content: start; gap: 6px; padding: 10px 0 0; }
  .tour-frame { border-radius: 11px; }
  .tour-dialog { width: calc(100% - 12px); }
}

/* A static, manually scrollable strip is the reduced-motion and legacy fallback. */
.app-tour:not(.deck-ready) .tour-stage, .app-tour.deck-browse .tour-stage {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.app-tour:not(.deck-ready) .tour-stage::-webkit-scrollbar, .app-tour.deck-browse .tour-stage::-webkit-scrollbar { display: none; }
.app-tour:not(.deck-ready) .tour-screen, .app-tour.deck-browse .tour-screen { min-width: 0; scroll-snap-align: start; }

/* The stage supplies the count and each figure its zero-based slot. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timing-function: linear(0 0% 50%, 1 50% 100%)) {
    .app-tour:not(.deck-ready) .tour-stage {
      grid-auto-flow: row;
      grid-template-columns: minmax(0,1fr);
      grid-auto-columns: auto;
      overflow: clip;
      scroll-snap-type: none;
      --slot: 2s;
    }
    .app-tour:not(.deck-ready) .tour-screen {
      grid-area: 1 / 1;
      visibility: hidden;
      pointer-events: none;
      --end-slot: calc(100% / var(--cards));
      animation-name: silent-deck;
      animation-duration: calc(var(--cards) * var(--slot));
      animation-delay: calc(var(--i) * var(--slot));
      animation-timing-function: linear(0 0% var(--end-slot), 1 var(--end-slot) 100%);
      animation-iteration-count: infinite;
    }
    .app-tour:not(.deck-ready) .tour-frame { animation: silent-arc var(--slot) linear infinite; }
    .app-tour:not(.deck-ready) .tour-stage:has(a:focus-visible) :is(.tour-screen,.tour-frame) { animation-play-state: paused; }
  }
}
@keyframes silent-deck {
  from { visibility: visible; pointer-events: auto; }
  to { visibility: hidden; pointer-events: none; }
}
@keyframes silent-arc {
  0% { transform: var(--left); opacity: .22; }
  3.25% { transform: var(--left-bend); opacity: .75; }
  6.89% { transform: var(--left-near); opacity: .98; }
  13%, 87% { transform: none; opacity: 1; }
  93.11% { transform: var(--right-near); opacity: .98; }
  96.75% { transform: var(--right-bend); opacity: .75; }
  100% { transform: var(--right); opacity: .22; }
}