/* Load after site.css and marinofolio.css; media remains original UI pixels. */
.expert-device,
.feature-stage .expert-device {
  aspect-ratio: 750 / 1556;
  border: 0;
  padding: 0;
  border-radius: 16% / 7.712082%;
  background: #0e0f11;
  overflow: hidden;
}
.expert-device img {
  position: absolute;
  left: 3.6%;
  top: 1.735219%;
  width: 92.8%;
  height: 96.529562%;
  max-width: none;
  aspect-ratio: 696 / 1502;
  object-fit: fill;
  border-radius: 13.362069% / 6.191744%;
}
/* Use .unwind-device for static app viewports and .video-frame.unwind-phone for cropped videos. */
.unwind-device,
.video-frame.unwind-phone {
  position: relative;
  padding: 0;
  border: 0;
  aspect-ratio: 950 / 1864;
  border-radius: 15.263158% / 7.778970%;
  background: #0e0f11;
  overflow: hidden;
}
.unwind-device > img,
.video-frame.unwind-phone > video {
  display: block;
  position: absolute;
  left: 3.368421%;
  top: 1.716738%;
  width: 93.263158%;
  height: 96.566524%;
  max-width: none;
  aspect-ratio: 886 / 1800;
  object-fit: fill;
  border-radius: 12.753950% / 6.277778%;
  background: #08738b;
}
/* These assets contain only the original Watch display; remove the source case once. */
.unwind-watch,
.video-frame.unwind-watch {
  position: relative;
  padding: 0;
  border: 0;
  aspect-ratio: 440 / 518;
  border-radius: 17.272727% / 14.671815%;
  background: #191b1d;
  overflow: hidden;
}
.unwind-watch > img,
.video-frame.unwind-watch > video {
  display: block;
  position: absolute;
  left: 2.727273%;
  top: 2.316602%;
  width: 94.545455%;
  height: 95.366795%;
  max-width: none;
  aspect-ratio: 416 / 494;
  object-fit: fill;
  border-radius: 15.384615% / 12.955466%;
  background: #000;
}

/* Preserve the absolute position assigned to the home-card Watch. */
.project-watch.unwind-watch,
.card[data-id="unwind"] .project-watch.unwind-watch {
  position: absolute;
  padding: 0;
  border: 0;
  aspect-ratio: 440 / 518;
  border-radius: 17.272727% / 14.671815%;
  background: #191b1d;
}
/* If preserving the existing .watch class for width rules, also override its case. */
.video-frame.watch.unwind-watch {
  padding: 0;
  border: 0;
  aspect-ratio: 440 / 518;
  border-radius: 17.272727% / 14.671815%;
  background: #191b1d;
}
.video-frame.watch.unwind-watch > video {
  border-radius: 15.384615% / 12.955466%;
}

/* Other original screenshots retain the same curve proportions across breakpoints. */
.phone:not(.unwind-device){border-radius:16% / 7.4%}
.phone:not(.unwind-device)>img{border-radius:13.8% / 6.4%}
.tablet{border-radius:4% / 5.3%}
.tablet>img,.puppet-screen{border-radius:2% / 2.67%}
