/* Architectural studies occupy the upper scene, behind the app mockup. */
.product-window .window-images::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #10131160, transparent 70%);
  pointer-events: none;
}
.preview-sketches {
  position: absolute;
  top: 5%;
  left: -1%;
  width: 84%;
  height: 58%;
  z-index: 2;
  pointer-events: none;
  mask-image: linear-gradient(#000 88%, transparent);
}
.sketch-filter-defs { position: absolute; pointer-events: none; }
.preview-sketch {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: .88;
  animation: sketchArrival .75s var(--ease) both;
}
.preview-sketch[hidden] { display: none; }
.preview-sketches img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.sketch-marker { filter: url(#sketch-yellow-only); }
.sketch-original { z-index: 1; }
.product-window { contain: layout paint; }
.product-window .preview-apps { z-index: 3; }
@keyframes sketchArrival {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: .88; transform: translateY(0); }
}
@media (max-width: 700px) {
  .preview-sketches { top: 47px; left: 0; width: 72%; height: 46%; }
  .preview-sketches img { object-position: left top; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-sketch { animation: none; }
}