:root { color-scheme: light; background: #f7fbfa; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
.guide { position: relative; width: 100%; height: 100vh; height: 100dvh; }
.guide-progress {
  position: absolute;
  z-index: 1;
  top: env(safe-area-inset-top, 0px);
  left: env(safe-area-inset-left, 0px);
  right: env(safe-area-inset-right, 0px);
  height: 3px;
  overflow: hidden;
  background: rgb(0 141 153 / 12%);
  pointer-events: none;
}
.guide-progress-fill {
  display: block;
  height: 100%;
  background: #008d99;
  transform: scaleX(calc(1 / 14));
  transform-origin: left;
  transition: transform 150ms ease-out;
}
.first-slide-art {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: size;
}
.swipe-cue {
  position: absolute;
  /* Center in the PNG's blank band, between the Android card and footer.
     Account for contain-fit letterboxing without changing the image size. */
  top: calc(50% + min(42cqh, 74.6667cqw));
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #082747;
  font: 500 min(13px, 2.8cqh) / 1.4 system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.swipe-cue span { color: #008d99; margin-left: 3px; }
@media (prefers-reduced-motion: reduce) {
  .guide-progress-fill { transition: none; }
}
.slides {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.slides::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  cursor: pointer;
}
.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}
.sr-only, .keyboard-control {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Controls appear only for keyboard focus; touch uses the entire slide. */
.keyboard-control:focus-visible {
  z-index: 2;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 10px 16px;
  border: 2px solid #008d99;
  border-radius: 8px;
  color: #082747;
  background: #fff;
  font: 16px system-ui, sans-serif;
}
#next:focus-visible { left: auto; right: 12px; }