/* Reuse the site's guide layout and its real-app screenshot/icon treatment. */
.blue-light-guide .temperature-capture {
  margin: 22px 0 0;
}
.blue-light-guide .temperature-window-frame {
  position: relative;
  width: min(100%, 426px);
  aspect-ratio: 510 / 320;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 6.5% / 10.5%;
  background: #2c2c2e;
  isolation: isolate;
  box-shadow: 0 18px 42px rgba(0,0,0,.26);
}
/* Clip only the captured desktop margin; preserve the actual app UI. */
.blue-light-guide .temperature-window-frame img {
  display: block;
  position: absolute;
  left: -13.921569%;
  top: -20.625%;
  width: 127.843137%;
  max-width: none;
  height: auto;
  /* Exclude source margins, then trim 2px top and 1px from each other edge. */
  clip-path: inset(calc(14.831461% + 2px) calc(10.889571% + 1px) calc(13.258427% + 1px) calc(10.889571% + 1px));
}
/* Same high-resolution title-bar icon used by the homepage's app previews. */
.blue-light-guide .temperature-window-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 3.333333%;
  top: 3.75%;
  width: 7.058824%;
  aspect-ratio: 1;
  background: #2c2c2e url("/assets/display-dimmer-logo-header-256.png") center / contain no-repeat;
  pointer-events: none;
}
.blue-light-guide .temperature-capture figcaption {
  margin: 14px auto 0;
  max-width: 426px;
  color: rgba(246,248,248,.60);
  font-size: 14px;
  line-height: 1.55;
}
.blue-light-guide .temperature-try-button {
  margin-top: 22px;
  min-height: 48px;
  width: 100%;
  text-align: center;
  white-space: normal;
}

/* Match the homepage Settings screenshot framing and title-bar icon overlay. */
.blue-light-guide .temperature-settings-capture { margin: 28px 0; }
.blue-light-guide .temperature-settings-frame {
  position: relative;
  width: min(100%, 773px);
  aspect-ratio: 939 / 819;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1.5% / 1.7%;
  background: #2c2c2e;
  isolation: isolate;
  box-shadow: 0 18px 42px rgba(0,0,0,.26);
}
.blue-light-guide .temperature-settings-frame img {
  display: block;
  position: absolute;
  left: -3.407881%;
  top: -2.808303%;
  width: 106.496273%;
  max-width: none;
  height: auto;
}
.blue-light-guide .temperature-settings-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 1.384452%;
  top: 0.732601%;
  width: 3.833866%;
  aspect-ratio: 1;
  background: #2c2c2e url("/assets/display-dimmer-logo-header-256.png") center / contain no-repeat;
  pointer-events: none;
}
.blue-light-guide .temperature-settings-capture figcaption { max-width: 773px; }