.street-figure {
  width: min(1100px, 88vw);
  margin: 125px 0 135px auto;
}
.street-image {
  aspect-ratio: 1.62;
  background: url("/assets/preview/quiet-street.png") center 54% / cover no-repeat;
  filter: saturate(0.45) brightness(0.72);
}
.hall-figure {
  width: min(1000px, 82vw);
  margin: 10px auto 140px;
}
.hall-image {
  aspect-ratio: 1.6;
  background: url("/assets/preview/velvet-hall.png") center 52% / cover no-repeat;
  filter: saturate(0.5) brightness(0.72);
}
.caption-mark {
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  color: #827782;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.caption-mark:hover {
  color: var(--rose);
}
.trace-mark {
  display: block;
  appearance: none;
  border: 0;
  background: none;
  text-align: left;
  font: 70px var(--serif);
  color: #675565;
  opacity: 0.8;
  padding: 23px 0 0;
  cursor: pointer;
  transition:
    transform 0.6s,
    color 0.3s;
}
.trace-mark:hover {
  transform: rotate(180deg);
  color: var(--rose);
}
.mirror-scene {
  position: relative;
}
.silhouette-image {
  background-image:
    linear-gradient(0deg, #100e1240, #100e1250),
    url("/assets/preview/mirror-witness.png");
  background-position: center 46%;
  background-size: cover;
}
.watch-eyes {
  position: absolute;
  left: 57%;
  top: 28%;
  display: flex;
  gap: 8px;
  opacity: 0.19;
  filter: blur(1.5px);
  transition:
    opacity 0.45s,
    filter 0.5s;
  pointer-events: none;
}
.watch-eyes i {
  position: relative;
  display: block;
  width: 11px;
  height: 5px;
  border-radius: 50%;
  background: #ead5df;
  box-shadow: 0 0 7px 3px #edcada99;
}
.watch-eyes i:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #171319;
  left: 50%;
  top: 50%;
  transform: translate(
    calc(-50% + var(--look-x, 0px)),
    calc(-50% + var(--look-y, 0px))
  );
}
.mirror-scene:hover .watch-eyes {
  opacity: 0;
  filter: blur(8px);
}
.not-room-link {
  display: inline-block;
  margin-top: 38px;
  color: #bda9ba;
  font: 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid #746075;
  padding-bottom: 9px;
  transition:
    color 0.3s,
    border 0.3s;
}
.not-room-link:hover {
  color: var(--text);
  border-color: var(--rose);
}
.caption-mark:focus-visible,
.trace-mark:focus-visible,
.not-room-link:focus-visible {
  outline: 1px solid var(--rose);
  outline-offset: 5px;
}
body.light .topbar {
  background: #fff;
}
body.light .hero-image {
  left: 52%;
  inset-block: 0;
  background-image:
    linear-gradient(90deg, #fff 0%, #ffffffc7 15%, #ffffff00 48%),
    linear-gradient(0deg, #100e1230, #100e1208 35%, #100e1240),
    url("/assets/preview/threshold-room.png");
  background-position: center 54%;
  filter: grayscale(1) contrast(1.08) brightness(0.76);
}
body.light .hero-copy {
  width: 70%;
  max-width: 740px;
  margin-left: -2vw;
}
body.light .hero h1 {
  font-size: clamp(72px, 10vw, 144px);
}
body.light .hero-foot {
  width: 30vw;
  right: auto;
  color: #181318;
}
body.light .street-image,
body.light .hall-image {
  filter: grayscale(0.8) brightness(1.04) contrast(1.08);
}
body.light .caption-mark {
  color: #211a22;
}
body.light .trace-mark {
  color: #39313a;
  opacity: 0.6;
}
body.light .not-room-link {
  color: #221a23;
  border-color: #504451;
}
body.light .watch-eyes {
  opacity: 0.27;
}
body.light .mirror-scene:hover .watch-eyes {
  opacity: 0;
}
body.light .hero,
body.light .story,
body.light .loomiy,
body.light .visit-end {
  background: #fff;
}
body.light .prose {
  color: #262126;
}
body.light figcaption {
  color: #39323b;
}
body.light .room-image {
  filter: grayscale(1) contrast(1.1) brightness(0.73);
}
body.light .courtyard-image {
  filter: grayscale(1) contrast(1.08) brightness(0.78);
}
body.light .silhouette-image {
  filter: grayscale(1) brightness(0.57);
}
body.light .systems blockquote,
body.light .final-question {
  color: #181318;
}
body.light .socials a {
  color: #171217;
}
body.light .light-message {
  background: transparent;
  color: #fff;
  box-shadow: none;
  padding: 0;
}
body.light .light-message:hover {
  color: #161116;
}
body.light .controls button {
  color: #171217;
}
body.light .contrast span:last-child {
  color: #4d3548;
}
@media (max-width: 760px) {
  .street-figure {
    width: 88vw;
    margin: 75px 0 95px auto;
  }
  .street-image {
    aspect-ratio: 0.92;
    background-position: 53% center;
  }
  .hall-figure {
    width: 88vw;
    margin: 0 auto 100px;
  }
  .trace-mark {
    font-size: 44px;
    padding-top: 14px;
  }
  .watch-eyes {
    left: 54%;
    top: 33%;
    transform: scale(0.8);
  }
  body.light .hero-image {
    left: 0;
    background-image:
      linear-gradient(90deg, #fff 0%, #fffffff0 26%, #ffffff00 72%),
      linear-gradient(0deg, #100e1224, #100e1208 35%, #100e1230),
      url("/assets/preview/threshold-room.png");
    background-position: 57% center;
  }
  body.light .hero-copy {
    width: 90%;
    margin-left: 0;
  }
  body.light .hero h1 {
    font-size: clamp(61px, 15vw, 85px);
  }
  body.light .hero-foot {
    width: 60vw;
  }
  body.light .light-message {
    max-width: 55vw;
  }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .watch-eyes {
    display: none;
  }
}