.world {
  position: absolute;
  inset: 0;
}

.tour-track,
.tour-caption { display: none; }

html.tour {
  --phone-w: 100vw;
  --card-w: calc(100vw - 24px);
  --card-top: calc(env(safe-area-inset-top) + 10px);
  --card-bottom: calc(var(--card-top) + var(--card-h));
  --bar-lift: calc(100lvh - 100svh + env(safe-area-inset-bottom));
}

html.tour .brand { padding-top: calc(var(--card-bottom) + 28px); }

html.tour .hero {
  display: block;
  min-height: 0;
  padding-top: 28px;
  padding-bottom: 0;
}

html.tour .what,
html.tour .scroll-modes {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

html.tour .tour-track { display: block; }

html.tour .phone {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100lvh;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

html.tour .phone::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: var(--card-top);
  background: var(--bg);
}

html.tour .screen {
  border-radius: 0;
  background: none;
}

html.tour .world { opacity: var(--world, 0); }

html.tour .island,
html.tour .sound { display: none; }

html.tour .home {
  inset: auto;
  top: 50%;
  left: 50%;
  width: max(100%, calc(100lvh * 780 / 1696));
  aspect-ratio: 780 / 1696;
  transform: translate(-50%, -50%);
}

html.tour .prompter { top: var(--card-top); }

html.tour .screen .voice { background: var(--voice-on); }
html.tour .screen .voice.waiting { background: var(--voice-off); }
html.tour .screen .voice.off { opacity: 0; }

html.tour .script.glide { transition: opacity 0.3s ease; }

html.tour .camera::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 48%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
}

html.tour .record {
  z-index: 2;
  bottom: calc(var(--bar-lift) + var(--phone-w) * 0.07);
}

html.tour .touch-shutter { bottom: calc(var(--bar-lift) + var(--phone-w) * 0.17); }

html.tour .tour-caption {
  position: absolute;
  right: 0;
  bottom: calc(var(--bar-lift) + var(--phone-w) * 0.4);
  left: 0;
  z-index: 2;
  display: block;
  color: var(--text);
  font-size: calc(var(--phone-w) * 0.098);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.13s linear;
}

html.tour .tour-caption.shown { opacity: 1; }