/*!
 * MockFrame device styles
 * Adapted from Marvel devices.css (https://github.com/marvelapp/devices.css)
 * Original work Copyright (c) 2014 Marvelapp — MIT License
 * Modifications Copyright (c) 2026 Mohammed Banani — MIT License
 */
.mockframe {
  transition: all .5s cubic-bezier(.075, .82, .165, 1);
  display: inline-block;
  position: relative;
  box-sizing: content-box !important;
}

.mockframe .screen {
  z-index: 3;
  background: #fff;
  border-radius: 1px;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 3px #111;
}

.mockframe .top-bar, .mockframe .bottom-bar {
  background: #000;
  width: 100%;
  height: 3px;
  display: block;
}

.mockframe .middle-bar {
  background: #000;
  width: 3px;
  height: 4px;
  position: absolute;
  top: 0;
  left: 90px;
}

.mockframe.iphone8 {
  background: #d9dbdc;
  border-radius: 56px;
  width: 375px;
  height: 667px;
  padding: 105px 24px;
  box-shadow: inset 0 0 3px #0003;
}

.mockframe.iphone8:before {
  content: "";
  z-index: 1;
  background: #f8f8f8;
  border-radius: 50px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  position: absolute;
  top: 6px;
  left: 6px;
}

.mockframe.iphone8:after {
  content: "";
  z-index: 2;
  border-radius: 48px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  position: absolute;
  top: 8px;
  left: 8px;
  box-shadow: inset 0 0 3px #0000001a, inset 0 0 6px 3px #fff;
}

.mockframe.iphone8 .home {
  z-index: 3;
  background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
  border-radius: 100%;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  position: absolute;
  bottom: 22px;
  left: 50%;
}

.mockframe.iphone8 .home:before {
  content: "";
  background: #f8f8f8;
  border-radius: 100%;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.iphone8 .top-bar {
  background: #bfbfc0;
  height: 14px;
  position: absolute;
  top: 68px;
  left: 0;
}

.mockframe.iphone8 .bottom-bar {
  background: #bfbfc0;
  height: 14px;
  position: absolute;
  bottom: 68px;
  left: 0;
}

.mockframe.iphone8 .sleep {
  background: #d9dbdc;
  border-radius: 0 2px 2px 0;
  width: 4px;
  height: 66px;
  position: absolute;
  top: 190px;
  right: -4px;
}

.mockframe.iphone8 .volume {
  z-index: 0;
  background: #d9dbdc;
  border-radius: 2px 0 0 2px;
  width: 4px;
  height: 66px;
  position: absolute;
  top: 188px;
  left: -4px;
}

.mockframe.iphone8 .volume:before {
  background: inherit;
  content: "";
  border-radius: 2px 0 0 2px;
  width: 2px;
  height: 40px;
  display: block;
  position: absolute;
  top: -78px;
  left: 2px;
}

.mockframe.iphone8 .volume:after {
  background: inherit;
  content: "";
  border-radius: 2px 0 0 2px;
  width: 4px;
  height: 66px;
  display: block;
  position: absolute;
  top: 82px;
  left: 0;
}

.mockframe.iphone8 .camera {
  z-index: 3;
  background: #3c3d3d;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  position: absolute;
  top: 24px;
  left: 50%;
}

.mockframe.iphone8 .sensor {
  z-index: 3;
  background: #3c3d3d;
  border-radius: 100%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 49px;
  left: 134px;
}

.mockframe.iphone8 .speaker {
  z-index: 3;
  background: #292728;
  border-radius: 6px;
  width: 70px;
  height: 6px;
  margin-left: -35px;
  position: absolute;
  top: 54px;
  left: 50%;
}

.mockframe.iphone8.gold {
  background: #f9e7d3;
}

.mockframe.iphone8.gold .top-bar, .mockframe.iphone8.gold .bottom-bar {
  background: #fff;
}

.mockframe.iphone8.gold .sleep, .mockframe.iphone8.gold .volume {
  background: #f9e7d3;
}

.mockframe.iphone8.gold .home {
  background: linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
}

.mockframe.iphone8.black {
  background: #464646;
  box-shadow: inset 0 0 3px #000000b3;
}

.mockframe.iphone8.black:before {
  background: #080808;
}

.mockframe.iphone8.black:after {
  box-shadow: inset 0 0 3px #0000001a, inset 0 0 6px 3px #212121;
}

.mockframe.iphone8.black .top-bar, .mockframe.iphone8.black .bottom-bar {
  background: #212121;
}

.mockframe.iphone8.black .volume, .mockframe.iphone8.black .sleep {
  background: #464646;
}

.mockframe.iphone8.black .camera {
  background: #080808;
}

.mockframe.iphone8.black .home {
  background: linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%);
}

.mockframe.iphone8.black .home:before {
  background: #080808;
}

.mockframe.iphone8.landscape {
  width: 667px;
  height: 375px;
  padding: 24px 105px;
}

.mockframe.iphone8.landscape .sleep {
  border-radius: 0 0 2px 2px;
  width: 66px;
  height: 4px;
  top: 100%;
  right: 190px;
}

.mockframe.iphone8.landscape .volume {
  border-radius: 2px 2px 0 0;
  width: 66px;
  height: 4px;
  top: -4px;
  left: calc(100% - 254px);
}

.mockframe.iphone8.landscape .volume:before {
  border-radius: 2px 2px 0 0;
  width: 40px;
  height: 2px;
  top: 2px;
  left: auto;
  right: -78px;
}

.mockframe.iphone8.landscape .volume:after {
  border-radius: 2px 2px 0 0;
  width: 66px;
  height: 4px;
  top: 0;
  left: -82px;
}

.mockframe.iphone8.landscape .top-bar {
  width: 14px;
  height: 100%;
  top: 0;
  left: calc(100% - 82px);
}

.mockframe.iphone8.landscape .bottom-bar {
  width: 14px;
  height: 100%;
  top: 0;
  left: 68px;
}

.mockframe.iphone8.landscape .home {
  margin-top: -34px;
  margin-left: 0;
  top: 50%;
  left: 22px;
}

.mockframe.iphone8.landscape .sensor {
  top: 134px;
  left: calc(100% - 65px);
}

.mockframe.iphone8.landscape .speaker {
  width: 6px;
  height: 70px;
  margin-top: -35px;
  margin-left: 0;
  top: 50%;
  left: calc(100% - 60px);
}

.mockframe.iphone8.landscape .camera {
  margin-top: -5px;
  margin-left: 0;
  top: 50%;
  left: calc(100% - 32px);
}

.mockframe.iphone8plus {
  background: #d9dbdc;
  border-radius: 56px;
  width: 414px;
  height: 736px;
  padding: 112px 26px;
  box-shadow: inset 0 0 3px #0003;
}

.mockframe.iphone8plus:before {
  content: "";
  z-index: 1;
  background: #f8f8f8;
  border-radius: 50px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  position: absolute;
  top: 6px;
  left: 6px;
}

.mockframe.iphone8plus:after {
  content: "";
  z-index: 2;
  border-radius: 48px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  position: absolute;
  top: 8px;
  left: 8px;
  box-shadow: inset 0 0 3px #0000001a, inset 0 0 6px 3px #fff;
}

.mockframe.iphone8plus .home {
  z-index: 3;
  background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
  border-radius: 100%;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  position: absolute;
  bottom: 24px;
  left: 50%;
}

.mockframe.iphone8plus .home:before {
  content: "";
  background: #f8f8f8;
  border-radius: 100%;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.iphone8plus .top-bar {
  background: #bfbfc0;
  height: 14px;
  position: absolute;
  top: 68px;
  left: 0;
}

.mockframe.iphone8plus .bottom-bar {
  background: #bfbfc0;
  height: 14px;
  position: absolute;
  bottom: 68px;
  left: 0;
}

.mockframe.iphone8plus .sleep {
  background: #d9dbdc;
  border-radius: 0 2px 2px 0;
  width: 4px;
  height: 66px;
  position: absolute;
  top: 190px;
  right: -4px;
}

.mockframe.iphone8plus .volume {
  z-index: 0;
  background: #d9dbdc;
  border-radius: 2px 0 0 2px;
  width: 4px;
  height: 66px;
  position: absolute;
  top: 188px;
  left: -4px;
}

.mockframe.iphone8plus .volume:before {
  background: inherit;
  content: "";
  border-radius: 2px 0 0 2px;
  width: 2px;
  height: 40px;
  display: block;
  position: absolute;
  top: -78px;
  left: 2px;
}

.mockframe.iphone8plus .volume:after {
  background: inherit;
  content: "";
  border-radius: 2px 0 0 2px;
  width: 4px;
  height: 66px;
  display: block;
  position: absolute;
  top: 82px;
  left: 0;
}

.mockframe.iphone8plus .camera {
  z-index: 3;
  background: #3c3d3d;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  position: absolute;
  top: 29px;
  left: 50%;
}

.mockframe.iphone8plus .sensor {
  z-index: 3;
  background: #3c3d3d;
  border-radius: 100%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 54px;
  left: 154px;
}

.mockframe.iphone8plus .speaker {
  z-index: 3;
  background: #292728;
  border-radius: 6px;
  width: 70px;
  height: 6px;
  margin-left: -35px;
  position: absolute;
  top: 59px;
  left: 50%;
}

.mockframe.iphone8plus.gold {
  background: #f9e7d3;
}

.mockframe.iphone8plus.gold .top-bar, .mockframe.iphone8plus.gold .bottom-bar {
  background: #fff;
}

.mockframe.iphone8plus.gold .sleep, .mockframe.iphone8plus.gold .volume {
  background: #f9e7d3;
}

.mockframe.iphone8plus.gold .home {
  background: linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
}

.mockframe.iphone8plus.black {
  background: #464646;
  box-shadow: inset 0 0 3px #000000b3;
}

.mockframe.iphone8plus.black:before {
  background: #080808;
}

.mockframe.iphone8plus.black:after {
  box-shadow: inset 0 0 3px #0000001a, inset 0 0 6px 3px #212121;
}

.mockframe.iphone8plus.black .top-bar, .mockframe.iphone8plus.black .bottom-bar {
  background: #212121;
}

.mockframe.iphone8plus.black .volume, .mockframe.iphone8plus.black .sleep {
  background: #464646;
}

.mockframe.iphone8plus.black .camera {
  background: #080808;
}

.mockframe.iphone8plus.black .home {
  background: linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%);
}

.mockframe.iphone8plus.black .home:before {
  background: #080808;
}

.mockframe.iphone8plus.landscape {
  width: 736px;
  height: 414px;
  padding: 26px 112px;
}

.mockframe.iphone8plus.landscape .sleep {
  border-radius: 0 0 2px 2px;
  width: 66px;
  height: 4px;
  top: 100%;
  right: 190px;
}

.mockframe.iphone8plus.landscape .volume {
  border-radius: 2px 2px 0 0;
  width: 66px;
  height: 4px;
  top: -4px;
  left: calc(100% - 254px);
}

.mockframe.iphone8plus.landscape .volume:before {
  border-radius: 2px 2px 0 0;
  width: 40px;
  height: 2px;
  top: 2px;
  left: auto;
  right: -78px;
}

.mockframe.iphone8plus.landscape .volume:after {
  border-radius: 2px 2px 0 0;
  width: 66px;
  height: 4px;
  top: 0;
  left: -82px;
}

.mockframe.iphone8plus.landscape .top-bar {
  width: 14px;
  height: 100%;
  top: 0;
  left: calc(100% - 82px);
}

.mockframe.iphone8plus.landscape .bottom-bar {
  width: 14px;
  height: 100%;
  top: 0;
  left: 68px;
}

.mockframe.iphone8plus.landscape .home {
  margin-top: -34px;
  margin-left: 0;
  top: 50%;
  left: 24px;
}

.mockframe.iphone8plus.landscape .sensor {
  top: 154px;
  left: calc(100% - 70px);
}

.mockframe.iphone8plus.landscape .speaker {
  width: 6px;
  height: 70px;
  margin-top: -35px;
  margin-left: 0;
  top: 50%;
  left: calc(100% - 65px);
}

.mockframe.iphone8plus.landscape .camera {
  margin-top: -5px;
  margin-left: 0;
  top: 50%;
  left: calc(100% - 29px);
}

.mockframe.iphone-x {
  background: #fdfdfd;
  border-radius: 66px;
  width: 375px;
  height: 812px;
  padding: 26px;
  box-shadow: inset 0 0 11px #000;
}

.mockframe.iphone-x .overflow {
  border-radius: 66px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.mockframe.iphone-x .shadow {
  background: radial-gradient(#0009 0%, #fff0 60%);
  border-radius: 100%;
  width: 90px;
  height: 90px;
  position: absolute;
}

.mockframe.iphone-x .shadow--tl {
  top: -20px;
  left: -20px;
}

.mockframe.iphone-x .shadow--tr {
  top: -20px;
  right: -20px;
}

.mockframe.iphone-x .shadow--bl {
  bottom: -20px;
  left: -20px;
}

.mockframe.iphone-x .shadow--br {
  bottom: -20px;
  right: -20px;
}

.mockframe.iphone-x:before {
  content: "";
  z-index: 1;
  background: #000;
  border-radius: 61px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  position: absolute;
  top: 5px;
  left: 5px;
}

.mockframe.iphone-x .inner-shadow {
  z-index: 1;
  border-radius: 56px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  position: absolute;
  top: 10px;
  left: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 15px #ffffffa8;
}

.mockframe.iphone-x .inner-shadow:before {
  content: "";
  z-index: 2;
  border-radius: 200px / 112px;
  width: 100%;
  height: 116%;
  position: absolute;
  top: -8%;
  left: 0;
  box-shadow: inset 0 0 20px #fff;
}

.mockframe.iphone-x .screen {
  box-shadow: none;
  border-radius: 40px;
}

.mockframe.iphone-x .top-bar, .mockframe.iphone-x .bottom-bar {
  background: #0000001a;
  width: 100%;
  height: 8px;
  position: absolute;
  left: 0;
}

.mockframe.iphone-x .top-bar {
  top: 80px;
}

.mockframe.iphone-x .bottom-bar {
  bottom: 80px;
}

.mockframe.iphone-x .volume, .mockframe.iphone-x .volume:before, .mockframe.iphone-x .volume:after, .mockframe.iphone-x .sleep {
  background: #b5b5b5;
  width: 3px;
  position: absolute;
}

.mockframe.iphone-x .volume {
  height: 32px;
  top: 116px;
  left: -3px;
}

.mockframe.iphone-x .volume:before {
  content: "";
  height: 62px;
  top: 62px;
  left: 0;
}

.mockframe.iphone-x .volume:after {
  content: "";
  height: 62px;
  top: 140px;
  left: 0;
}

.mockframe.iphone-x .sleep {
  height: 96px;
  top: 200px;
  right: -3px;
}

.mockframe.iphone-x .camera {
  background: #0d4d71;
  border-radius: 100%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 9px;
  left: 154px;
}

.mockframe.iphone-x .speaker {
  background: #171818;
  border-radius: 6px;
  width: 60px;
  height: 6px;
  margin-left: -30px;
  position: absolute;
  top: 9px;
  left: 50%;
}

.mockframe.iphone-x .notch {
  z-index: 4;
  background: #000;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 24px;
  width: 210px;
  height: 30px;
  position: absolute;
  top: 26px;
  left: 108px;
}

.mockframe.iphone-x .notch:before, .mockframe.iphone-x .notch:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 0;
}

.mockframe.iphone-x .notch:after {
  background: radial-gradient(circle at 0 100%, #0000 0 70%, #000 70% 100%);
  left: -8px;
}

.mockframe.iphone-x .notch:before {
  background: radial-gradient(circle at 100% 100%, #0000 0 70%, #000 70% 100%);
  right: -8px;
}

.mockframe.iphone-x.landscape {
  width: 812px;
  height: 375px;
}

.mockframe.iphone-x.landscape .top-bar, .mockframe.iphone-x.landscape .bottom-bar {
  width: 8px;
  height: 100%;
  top: 0;
}

.mockframe.iphone-x.landscape .top-bar {
  left: 80px;
}

.mockframe.iphone-x.landscape .bottom-bar {
  bottom: auto;
  left: auto;
  right: 80px;
}

.mockframe.iphone-x.landscape .volume, .mockframe.iphone-x.landscape .volume:before, .mockframe.iphone-x.landscape .volume:after, .mockframe.iphone-x.landscape .sleep {
  height: 3px;
}

.mockframe.iphone-x.landscape .inner-shadow:before {
  border-radius: 112px / 200px;
  width: 116%;
  height: 100%;
  top: 0;
  left: -8%;
}

.mockframe.iphone-x.landscape .volume {
  width: 32px;
  top: auto;
  bottom: -3px;
  left: 116px;
}

.mockframe.iphone-x.landscape .volume:before {
  width: 62px;
  top: 0;
  left: 62px;
}

.mockframe.iphone-x.landscape .volume:after {
  width: 62px;
  top: 0;
  left: 140px;
}

.mockframe.iphone-x.landscape .sleep {
  width: 96px;
  top: -3px;
  left: 200px;
  right: auto;
}

.mockframe.iphone-x.landscape .camera {
  top: auto;
  bottom: 154px;
  left: 9px;
}

.mockframe.iphone-x.landscape .speaker {
  width: 6px;
  height: 60px;
  margin-top: -30px;
  margin-left: 0;
  top: 50%;
  left: 9px;
}

.mockframe.iphone-x.landscape .notch {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 0;
  width: 30px;
  height: 210px;
  top: auto;
  bottom: 108px;
  left: 26px;
}

.mockframe.iphone-x.landscape .notch:before, .mockframe.iphone-x.landscape .notch:after {
  left: 0;
}

.mockframe.iphone-x.landscape .notch:after {
  background: radial-gradient(circle at 100% 100%, #0000 0 70%, #000 70% 100%);
  top: auto;
  bottom: -8px;
}

.mockframe.iphone-x.landscape .notch:before {
  background: radial-gradient(circle at 100% 0, #0000 0 70%, #000 70% 100%);
  top: -8px;
}

.mockframe.iphone17 {
  background: linear-gradient(145deg, #4a4a4a 0%, #333 15%, #252525 50%, #333 85%, #4a4a4a 100%);
  border-radius: 52px;
  width: 375px;
  height: 812px;
  padding: 12px;
  position: relative;
  box-shadow: inset 0 0 0 1px #fff3, inset 0 1px #ffffff40, 0 30px 60px -15px #00000080, 0 0 0 1px #0006;
}

.mockframe.iphone17:before {
  content: "";
  z-index: 1;
  background: linear-gradient(145deg, #1a1a1a 0%, #111 100%);
  border-radius: 50px;
  position: absolute;
  inset: 3px;
}

.mockframe.iphone17:after {
  content: "";
  z-index: 2;
  background: #000;
  border-radius: 44px;
  position: absolute;
  inset: 10px;
}

.mockframe.iphone17 .antenna {
  z-index: 5;
  background: linear-gradient(to right, #0000 0%, #1a1a1a 15%, #0a0a0a 50%, #1a1a1a 85%, #0000 100%);
  border-radius: 1px;
  width: 12px;
  height: 3px;
  position: absolute;
}

.mockframe.iphone17 .antenna.top-left {
  top: 82px;
  left: 0;
}

.mockframe.iphone17 .antenna.top-right {
  top: 82px;
  right: 0;
}

.mockframe.iphone17 .antenna.bottom-left {
  bottom: 82px;
  left: 0;
}

.mockframe.iphone17 .antenna.bottom-right {
  bottom: 82px;
  right: 0;
}

.mockframe.iphone17 .corner-highlight {
  z-index: 1;
  pointer-events: none;
  width: 60px;
  height: 60px;
  position: absolute;
}

.mockframe.iphone17 .corner-highlight.tl {
  background: radial-gradient(at 100% 100%, #ffffff26 0%, #ffffff0f 30%, #0000 60%);
  border-radius: 46px 0 0;
  top: 6px;
  left: 6px;
}

.mockframe.iphone17 .corner-highlight.tr {
  background: radial-gradient(at 0 100%, #ffffff26 0%, #ffffff0f 30%, #0000 60%);
  border-radius: 0 46px 0 0;
  top: 6px;
  right: 6px;
}

.mockframe.iphone17 .corner-highlight.bl {
  background: radial-gradient(at 100% 0, #ffffff1f 0%, #ffffff0d 30%, #0000 60%);
  border-radius: 0 0 0 46px;
  bottom: 6px;
  left: 6px;
}

.mockframe.iphone17 .corner-highlight.br {
  background: radial-gradient(at 0 0, #ffffff1f 0%, #ffffff0d 30%, #0000 60%);
  border-radius: 0 0 46px;
  bottom: 6px;
  right: 6px;
}

.mockframe.iphone17 .inner-edge {
  z-index: 1;
  pointer-events: none;
  border: 1px solid #50505080;
  border-radius: 45px;
  position: absolute;
  inset: 9px;
}

.mockframe.iphone17 .screen {
  z-index: 3;
  background: #fff;
  border-radius: 42px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2px #000;
}

.mockframe.iphone17 .dynamic-island {
  z-index: 10;
  box-sizing: border-box;
  background: #000;
  border-radius: 15px;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  width: 128px;
  height: 29px;
  padding-right: 11px;
  display: flex;
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.mockframe.iphone17 .dynamic-island .indicator {
  background: #22c55e;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 5px #22c55e, 0 0 8px #22c55e80;
}

.mockframe.iphone17 .dynamic-island .camera {
  background: radial-gradient(circle at 40% 40%, #3a3a4a 0%, #252530 40%, #15151a 70%, #0a0a0f 100%);
  border-radius: 50%;
  width: 11px;
  height: 11px;
  position: relative;
  box-shadow: inset 0 1px 2px #000c, 0 0 0 1px #3c3c504d;
}

.mockframe.iphone17 .dynamic-island .camera:before {
  content: "";
  background: radial-gradient(#64649666 0%, #0000 100%);
  border-radius: 50%;
  width: 3px;
  height: 2px;
  position: absolute;
  top: 2px;
  left: 2px;
}

.mockframe.iphone17 .dynamic-island .camera:after {
  content: "";
  background: radial-gradient(circle, #3c508c59 0%, #0000 70%);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mockframe.iphone17 .sleep {
  z-index: 4;
  background: linear-gradient(#5a5a5a 0%, #454545 8%, #353535 20%, #2d2d2d 50%, #353535 80%, #454545 92%, #5a5a5a 100%);
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 85px;
  position: absolute;
  top: 165px;
  right: -3px;
  box-shadow: 1px 0 2px #0000004d;
}

.mockframe.iphone17 .action {
  z-index: 4;
  background: linear-gradient(#5a5a5a 0%, #454545 8%, #353535 20%, #2d2d2d 50%, #353535 80%, #454545 92%, #5a5a5a 100%);
  border-radius: 2px 0 0 2px;
  width: 3px;
  height: 34px;
  position: absolute;
  top: 165px;
  left: -3px;
  box-shadow: -1px 0 2px #0000004d;
}

.mockframe.iphone17 .volume {
  z-index: 4;
  background: linear-gradient(#5a5a5a 0%, #454545 8%, #353535 20%, #2d2d2d 50%, #353535 80%, #454545 92%, #5a5a5a 100%);
  border-radius: 2px 0 0 2px;
  width: 3px;
  height: 58px;
  position: absolute;
  top: 215px;
  left: -3px;
  box-shadow: -1px 0 2px #0000004d;
}

.mockframe.iphone17 .volume:before {
  content: "";
  background: linear-gradient(#5a5a5a 0%, #454545 8%, #353535 20%, #2d2d2d 50%, #353535 80%, #454545 92%, #5a5a5a 100%);
  border-radius: 2px 0 0 2px;
  width: 3px;
  height: 58px;
  position: absolute;
  top: 70px;
  left: 0;
  box-shadow: -1px 0 2px #0000004d;
}

.mockframe.iphone17 .camera-control {
  z-index: 4;
  background: linear-gradient(#5a5a5a 0%, #454545 8%, #353535 20%, #2d2d2d 50%, #353535 80%, #454545 92%, #5a5a5a 100%);
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 42px;
  position: absolute;
  top: 380px;
  right: -3px;
  box-shadow: 1px 0 2px #0000004d;
}

.mockframe.iphone17 .top-bar, .mockframe.iphone17 .bottom-bar, .mockframe.iphone17 .home, .mockframe.iphone17 .sensor, .mockframe.iphone17 .speaker, .mockframe.iphone17 .sensors, .mockframe.iphone17 .more-sensors, .mockframe.iphone17 .inner, .mockframe.iphone17 .inner-shadow {
  display: none;
}

.mockframe.iphone17.white {
  background: linear-gradient(145deg, #fafaf7 0%, #e8e8e3 15%, #d8d8d3 50%, #e8e8e3 85%, #fafaf7 100%);
  box-shadow: inset 0 0 0 1px #fffffff2, inset 0 1px #fff, 0 30px 60px -15px #0003, 0 0 0 1px #0000000f;
}

.mockframe.iphone17.white:before {
  background: linear-gradient(145deg, #d0d0cb 0%, #c0c0bb 100%);
}

.mockframe.iphone17.white .antenna {
  background: linear-gradient(to right, #0000 0%, #a0a09b 15%, #888883 50%, #a0a09b 85%, #0000 100%);
}

.mockframe.iphone17.white .corner-highlight.bl, .mockframe.iphone17.white .corner-highlight.br {
  background: radial-gradient(at 50% 0, #fff9 0%, #fff3 40%, #0000 70%);
}

.mockframe.iphone17.white .corner-highlight.tl, .mockframe.iphone17.white .corner-highlight.tr {
  background: radial-gradient(at 50% 100%, #ffffffb3 0%, #ffffff40 40%, #0000 70%);
}

.mockframe.iphone17.white .inner-edge {
  border-color: #b4b4af99;
}

.mockframe.iphone17.white .sleep, .mockframe.iphone17.white .camera-control, .mockframe.iphone17.white .action, .mockframe.iphone17.white .volume {
  box-shadow: none;
  background: linear-gradient(#f0f0eb 0%, #d8d8d3 15%, #c8c8c3 50%, #d8d8d3 85%, #f0f0eb 100%);
}

:is(.mockframe.iphone17.white .sleep, .mockframe.iphone17.white .camera-control, .mockframe.iphone17.white .action, .mockframe.iphone17.white .volume):before {
  box-shadow: none;
  background: linear-gradient(#f0f0eb 0%, #d8d8d3 15%, #c8c8c3 50%, #d8d8d3 85%, #f0f0eb 100%);
}

.mockframe.iphone17.mist-blue {
  background: linear-gradient(145deg, #c8d5e0 0%, #a8bac8 15%, #95a8b8 50%, #a8bac8 85%, #c8d5e0 100%);
  box-shadow: inset 0 0 0 1px #ffffff8c, inset 0 1px #ffffffa6, 0 30px 60px -15px #00000047, 0 0 0 1px #0000001a;
}

.mockframe.iphone17.mist-blue:before {
  background: linear-gradient(145deg, #8598a8 0%, #758898 100%);
}

.mockframe.iphone17.mist-blue .antenna {
  background: linear-gradient(to right, #0000 0%, #6a7a8a 15%, #5a6a7a 50%, #6a7a8a 85%, #0000 100%);
}

.mockframe.iphone17.mist-blue .corner-highlight {
  opacity: .7;
}

.mockframe.iphone17.mist-blue .inner-edge {
  border-color: #788ca080;
}

.mockframe.iphone17.mist-blue .sleep, .mockframe.iphone17.mist-blue .camera-control, .mockframe.iphone17.mist-blue .action, .mockframe.iphone17.mist-blue .volume {
  box-shadow: none;
  background: linear-gradient(#bccad5 0%, #a0b2c2 15%, #90a5b5 50%, #a0b2c2 85%, #bccad5 100%);
}

:is(.mockframe.iphone17.mist-blue .sleep, .mockframe.iphone17.mist-blue .camera-control, .mockframe.iphone17.mist-blue .action, .mockframe.iphone17.mist-blue .volume):before {
  box-shadow: none;
  background: linear-gradient(#bccad5 0%, #a0b2c2 15%, #90a5b5 50%, #a0b2c2 85%, #bccad5 100%);
}

.mockframe.iphone17.sage {
  background: linear-gradient(145deg, #c5d4c0 0%, #a5b8a1 15%, #94a890 50%, #a5b8a1 85%, #c5d4c0 100%);
  box-shadow: inset 0 0 0 1px #ffffff8c, inset 0 1px #ffffffa6, 0 30px 60px -15px #00000047, 0 0 0 1px #0000001a;
}

.mockframe.iphone17.sage:before {
  background: linear-gradient(145deg, #859884 0%, #758874 100%);
}

.mockframe.iphone17.sage .antenna {
  background: linear-gradient(to right, #0000 0%, #6a7a69 15%, #5a6a59 50%, #6a7a69 85%, #0000 100%);
}

.mockframe.iphone17.sage .corner-highlight {
  opacity: .7;
}

.mockframe.iphone17.sage .inner-edge {
  border-color: #78967380;
}

.mockframe.iphone17.sage .sleep, .mockframe.iphone17.sage .camera-control, .mockframe.iphone17.sage .action, .mockframe.iphone17.sage .volume {
  box-shadow: none;
  background: linear-gradient(#b8cab5 0%, #9eb89a 15%, #8ea88a 50%, #9eb89a 85%, #b8cab5 100%);
}

:is(.mockframe.iphone17.sage .sleep, .mockframe.iphone17.sage .camera-control, .mockframe.iphone17.sage .action, .mockframe.iphone17.sage .volume):before {
  box-shadow: none;
  background: linear-gradient(#b8cab5 0%, #9eb89a 15%, #8ea88a 50%, #9eb89a 85%, #b8cab5 100%);
}

.mockframe.iphone17.lavender {
  background: linear-gradient(145deg, #e0d2e8 0%, #c5b5d2 15%, #b5a2c2 50%, #c5b5d2 85%, #e0d2e8 100%);
  box-shadow: inset 0 0 0 1px #ffffff8c, inset 0 1px #ffffffa6, 0 30px 60px -15px #00000047, 0 0 0 1px #0000001a;
}

.mockframe.iphone17.lavender:before {
  background: linear-gradient(145deg, #9c8cac 0%, #8c7c9c 100%);
}

.mockframe.iphone17.lavender .antenna {
  background: linear-gradient(to right, #0000 0%, #7c6c8c 15%, #6c5c7c 50%, #7c6c8c 85%, #0000 100%);
}

.mockframe.iphone17.lavender .corner-highlight {
  opacity: .7;
}

.mockframe.iphone17.lavender .inner-edge {
  border-color: #9682a580;
}

.mockframe.iphone17.lavender .sleep, .mockframe.iphone17.lavender .camera-control, .mockframe.iphone17.lavender .action, .mockframe.iphone17.lavender .volume {
  box-shadow: none;
  background: linear-gradient(#d2c5dc 0%, #baa8ca 15%, #aa98ba 50%, #baa8ca 85%, #d2c5dc 100%);
}

:is(.mockframe.iphone17.lavender .sleep, .mockframe.iphone17.lavender .camera-control, .mockframe.iphone17.lavender .action, .mockframe.iphone17.lavender .volume):before {
  box-shadow: none;
  background: linear-gradient(#d2c5dc 0%, #baa8ca 15%, #aa98ba 50%, #baa8ca 85%, #d2c5dc 100%);
}

.mockframe.iphone17.cosmic-orange {
  background: linear-gradient(145deg, #f9a66d 0%, #f6823d 15%, #e5712c 50%, #f6823d 85%, #f9a66d 100%);
  box-shadow: inset 0 0 0 1px #ffffff8c, inset 0 1px #ffffffa6, 0 30px 60px -15px #00000047, 0 0 0 1px #0000001a;
}

.mockframe.iphone17.cosmic-orange:before {
  background: linear-gradient(145deg, #c5612a 0%, #b55520 100%);
}

.mockframe.iphone17.cosmic-orange .antenna {
  background: linear-gradient(to right, #0000 0%, #a54a1a 15%, #8a3a10 50%, #a54a1a 85%, #0000 100%);
}

.mockframe.iphone17.cosmic-orange .corner-highlight {
  opacity: .7;
}

.mockframe.iphone17.cosmic-orange .inner-edge {
  border-color: #b4643c80;
}

.mockframe.iphone17.cosmic-orange .sleep, .mockframe.iphone17.cosmic-orange .camera-control, .mockframe.iphone17.cosmic-orange .action, .mockframe.iphone17.cosmic-orange .volume {
  box-shadow: none;
  background: linear-gradient(#f8955a 0%, #f6823d 15%, #e5712c 50%, #f6823d 85%, #f8955a 100%);
}

:is(.mockframe.iphone17.cosmic-orange .sleep, .mockframe.iphone17.cosmic-orange .camera-control, .mockframe.iphone17.cosmic-orange .action, .mockframe.iphone17.cosmic-orange .volume):before {
  box-shadow: none;
  background: linear-gradient(#f8955a 0%, #f6823d 15%, #e5712c 50%, #f6823d 85%, #f8955a 100%);
}

.mockframe.iphone17.deep-blue {
  background: linear-gradient(145deg, #6a7499 0%, #4a547f 15%, #3a446f 50%, #4a547f 85%, #6a7499 100%);
  box-shadow: inset 0 0 0 1px #ffffff59, inset 0 1px #ffffff73, 0 30px 60px -15px #0006, 0 0 0 1px #0003;
}

.mockframe.iphone17.deep-blue:before {
  background: linear-gradient(145deg, #3a446a 0%, #2a345a 100%);
}

.mockframe.iphone17.deep-blue .antenna {
  background: linear-gradient(to right, #0000 0%, #2a345a 15%, #1a244a 50%, #2a345a 85%, #0000 100%);
}

.mockframe.iphone17.deep-blue .corner-highlight {
  opacity: .5;
}

.mockframe.iphone17.deep-blue .inner-edge {
  border-color: #505a7880;
}

.mockframe.iphone17.deep-blue .sleep, .mockframe.iphone17.deep-blue .camera-control, .mockframe.iphone17.deep-blue .action, .mockframe.iphone17.deep-blue .volume {
  box-shadow: none;
  background: linear-gradient(#5a6489 0%, #4a547f 15%, #3a446f 50%, #4a547f 85%, #5a6489 100%);
}

:is(.mockframe.iphone17.deep-blue .sleep, .mockframe.iphone17.deep-blue .camera-control, .mockframe.iphone17.deep-blue .action, .mockframe.iphone17.deep-blue .volume):before {
  box-shadow: none;
  background: linear-gradient(#5a6489 0%, #4a547f 15%, #3a446f 50%, #4a547f 85%, #5a6489 100%);
}

.mockframe.iphone17.landscape {
  width: 812px;
  height: 375px;
  padding: 12px;
}

.mockframe.iphone17.landscape .antenna.top-left {
  background: linear-gradient(#0000 0%, #1a1a1a 15%, #0a0a0a 50%, #1a1a1a 85%, #0000 100%);
  width: 3px;
  height: 12px;
  top: 0;
  left: 82px;
}

.mockframe.iphone17.landscape .antenna.top-right {
  background: linear-gradient(#0000 0%, #1a1a1a 15%, #0a0a0a 50%, #1a1a1a 85%, #0000 100%);
  width: 3px;
  height: 12px;
  top: 0;
  left: auto;
  right: 82px;
}

.mockframe.iphone17.landscape .antenna.bottom-left {
  background: linear-gradient(#0000 0%, #1a1a1a 15%, #0a0a0a 50%, #1a1a1a 85%, #0000 100%);
  width: 3px;
  height: 12px;
  bottom: 0;
  left: 82px;
}

.mockframe.iphone17.landscape .antenna.bottom-right {
  background: linear-gradient(#0000 0%, #1a1a1a 15%, #0a0a0a 50%, #1a1a1a 85%, #0000 100%);
  width: 3px;
  height: 12px;
  bottom: 0;
  left: auto;
  right: 82px;
}

.mockframe.iphone17.landscape .dynamic-island {
  top: 50%;
  left: -28px;
  transform: translateY(-50%)rotate(90deg);
}

.mockframe.iphone17.landscape .sleep {
  border-radius: 2px 2px 0 0;
  width: 85px;
  height: 3px;
  top: -3px;
  left: 165px;
  right: auto;
  box-shadow: 0 -1px 2px #0000004d;
}

.mockframe.iphone17.landscape .action {
  border-radius: 0 0 2px 2px;
  width: 34px;
  height: 3px;
  top: auto;
  bottom: -3px;
  left: 165px;
  box-shadow: 0 1px 2px #0000004d;
}

.mockframe.iphone17.landscape .volume {
  border-radius: 0 0 2px 2px;
  width: 58px;
  height: 3px;
  top: auto;
  bottom: -3px;
  left: 215px;
  box-shadow: 0 1px 2px #0000004d;
}

.mockframe.iphone17.landscape .volume:before {
  border-radius: 0 0 2px 2px;
  width: 58px;
  height: 3px;
  top: 0;
  left: 70px;
  box-shadow: 0 1px 2px #0000004d;
}

.mockframe.iphone17.landscape .camera-control {
  border-radius: 2px 2px 0 0;
  width: 42px;
  height: 3px;
  top: -3px;
  left: 380px;
  right: auto;
  box-shadow: 0 -1px 2px #0000004d;
}