.perspectives {
  position: fixed;
  z-index: 4;
  top: clamp(96px, 14vh, 125px);
  right: clamp(16px, 2.5vw, 42px);
  width: clamp(240px, 27vw, 430px);
  padding: 7px;
  border: 1px solid #fff9;
  border-radius: 9px;
  background: #f5f1e8f5;
  box-shadow: 0 12px 32px #15241c36;
  color: #26332d;
}
.perspectives[hidden], .perspectives-controls[hidden],
.measureMode .perspectives, .portalOpening .perspectives { display: none; }
.perspectives figure { margin: 0; }
.perspectives-image {
  display: block;
  width: 100%;
  height: clamp(116px, 33vh, 325px);
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #27342d;
  cursor: zoom-in;
}
.perspectives-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.perspectives figcaption { display: grid; gap: 3px; padding: 8px 8px 7px; }
.perspectives-label { font-size: 10px; letter-spacing: .035em; color: #4e6154; }
.perspectives-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.perspectives-controls { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 5px 2px; }
.perspectives-controls button, .perspectives-close {
  padding: 0;
  width: 30px;
  height: 27px;
  border: 1px solid #26332d2b;
  border-radius: 5px;
  background: #fffcf6;
  color: #26332d;
  font-size: 20px;
  line-height: 1;
}
.perspectives-count { font-size: 11px; font-variant-numeric: tabular-nums; }
.perspectives-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #20342deb;
  border-color: #ffffff75;
  color: #fff;
}
#reference:disabled { opacity: .64; cursor: default; }
@media (max-width: 760px) {
  .perspectives { top: 95px; right: 12px; width: min(43vw, 230px); padding: 4px; }
  .perspectives-image { height: clamp(72px, 22vh, 162px); }
  .perspectives figcaption { gap: 1px; padding: 5px 4px; }
  .perspectives-title { font-size: 11px; }
  .perspectives-label { font-size: 9px; }
  .perspectives-label span { display: none; }
  .perspectives-close { top: 7px; right: 7px; }
  .perspectives-controls button, .perspectives-close { width: 26px; height: 26px; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .perspectives { top: 77px; width: min(30vw, 260px); }
  .perspectives-image { height: clamp(70px, 25vh, 140px); }
}

#porchFanAction {
  position: fixed;
  z-index: 13;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  padding: 10px 14px;
  border: 1px solid #e9d8bba8;
  border-radius: 5px;
  background: #21372eef;
  color: #fff5e1;
  font-size: 13px;
  white-space: nowrap;
}
#porchFanAction[hidden] { display: none; }