.tour-mirror {
  overflow: hidden;
  border-radius: 4px;
  clip-path: polygon(0 0, 100% 16%, 100% 87%, 0 100%);
}

.tour-mirror::before, .tour-mirror::after {
  content: '';
  position: absolute;
  inset: 25%;
  border: 2px solid #fff9;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.tour-mirror.is-rippling::before, .tour-mirror.is-rippling::after {
  animation: mirror-ripple .64s ease-out both;
}
.tour-mirror.is-rippling::after { animation-delay: .12s; }
@keyframes mirror-ripple {
  from { transform: scale(.15); opacity: .9; }
  to { transform: scale(2.4); opacity: 0; }
}
body:has(#tourDialog[open][data-kind="mirror-wall"]) :is(.tour-hotspot, .tour-back, .tour-nav) {
  visibility: hidden;
}
#tourDialog[data-kind="mirror-wall"] {
  --mirror-paper: #dce7e8;
  --mirror-ink: #35464b;
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--mirror-paper);
  box-shadow: none;
}
#tourDialog[data-kind="mirror-wall"][open] {
  animation: mirror-reveal .76s cubic-bezier(.23,.65,.25,1) both;
}
#tourDialog[data-kind="mirror-wall"]::backdrop { background: transparent; }
@keyframes mirror-reveal {
  from { clip-path: circle(2% at var(--mirror-x, 30%) var(--mirror-y, 32%)); opacity: .28; }
  to { clip-path: circle(150% at var(--mirror-x, 30%) var(--mirror-y, 32%)); opacity: 1; }
}
[data-kind="mirror-wall"] .tour-dialog-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: transparent;
  border: 0;
  pointer-events: none;
}
[data-kind="mirror-wall"] .tour-dialog-head h2 {
  color: var(--mirror-ink);
  font-size: clamp(18px, 3vw, 26px);
  font-family: 'Songti SC', SimSun, serif;
  letter-spacing: .09em;
  text-shadow: 0 1px 6px var(--mirror-paper);
}
[data-kind="mirror-wall"] #tourDialogClose {
  pointer-events: auto;
  border-radius: 50%;
  border-color: #a3b8be;
  background: var(--mirror-paper);
  color: var(--mirror-ink);
  padding: 0;
  font: 25px/1 Georgia, serif;
}
[data-kind="mirror-wall"] #tourDialogClose:hover { background: #edf4f4; }
[data-kind="mirror-wall"] .tour-dialog-body { position: absolute; inset: 0; padding: 0; }
.mirror-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
  perspective: 1300px;
  mask-image: linear-gradient(to right, transparent, #0003 5%, #000b 13%, #000 23%, #000 77%, #000b 87%, #0003 95%, transparent),
    linear-gradient(to bottom, transparent, #0002 6%, #0009 15%, #000 27%, #000 73%, #0009 85%, #0002 94%, transparent);
  mask-composite: intersect;
}
.mirror-wall.is-dragging, .mirror-wall.is-dragging .mirror-print { cursor: grabbing; }
#tourDialog .mirror-print {
  position: absolute;
  top: 50%;
  left: 50%;
  visibility: hidden;
  width: max-content;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 2px 8px #344d5616;
  cursor: zoom-in;
}
#tourDialog .is-dragging .mirror-print { cursor: grabbing; }
.mirror-print img {
  display: block;
  width: auto;
  height: auto;
  max-height: var(--mirror-photo-height);
  border-radius: inherit;
  pointer-events: none;
}
.mirror-wall-hint {
  position: absolute;
  inset: auto 0 max(14px, env(safe-area-inset-bottom));
  margin: 0;
  color: var(--mirror-ink);
  font-size: 13px;
  text-shadow: 0 0 6px var(--mirror-paper), 0 0 6px var(--mirror-paper);
  pointer-events: none;
}
.mirror-viewer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  background: color-mix(in srgb, var(--mirror-paper) 96%, transparent);
  animation: tour-fade .28s ease-out both;
}
.mirror-viewer[hidden] { display: none; }
.mirror-viewer img {
  display: block;
  max-width: calc(100vw - 36px);
  max-height: 83dvh;
  object-fit: contain;
  border-radius: 7px;
  box-shadow: 0 8px 32px #344d5633;
}
@media (prefers-reduced-motion: reduce) {
  #tourDialog[data-kind="mirror-wall"][open], .mirror-viewer,
  .tour-mirror.is-rippling::before, .tour-mirror.is-rippling::after { animation: none; }
}