/*!
 * 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.ipad {
  background: #242324;
  border-radius: 44px;
  width: 576px;
  height: 768px;
  padding: 90px 25px;
}

.mockframe.ipad:before {
  content: "";
  background: #1e1e1e;
  border-radius: 40px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.ipad .camera {
  background: #3c3d3d;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: 44px;
  left: 50%;
}

.mockframe.ipad .top-bar, .mockframe.ipad .bottom-bar {
  display: none;
}

.mockframe.ipad .home {
  background: #242324;
  border-radius: 36px;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  position: absolute;
  bottom: 22px;
  left: 50%;
}

.mockframe.ipad .home:after {
  content: "";
  border: 1px solid #ffffff1a;
  border-radius: 4px;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}

.mockframe.ipad.landscape {
  width: 768px;
  height: 576px;
  padding: 25px 90px;
}

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

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

.mockframe.ipad.silver {
  background: #bcbcbc;
}

.mockframe.ipad.silver:before {
  background: #fcfcfc;
}

.mockframe.ipad.silver .home {
  background: #fcfcfc;
  box-shadow: inset 0 0 0 1px #bcbcbc;
}

.mockframe.ipad.silver .home:after {
  border: 1px solid #0003;
}

.mockframe.macbook {
  background: #bebebe;
  border-radius: 34px;
  width: 960px;
  height: 600px;
  margin: 0 auto;
  padding: 44px 44px 76px;
}

.mockframe.macbook:before {
  content: "";
  background: #1e1e1e;
  border-radius: 30px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.macbook .top-bar {
  content: "";
  background: #bebebe;
  border-bottom-right-radius: 90px 18px;
  border-bottom-left-radius: 90px 18px;
  width: calc(100% + 140px);
  height: 40px;
  display: block;
  position: absolute;
  top: 680px;
  left: -70px;
  box-shadow: inset 0 -4px 13px 3px #2229;
}

.mockframe.macbook .top-bar:before {
  content: "";
  background: #f0f0f0;
  border-bottom: 2px solid #aaa;
  border-radius: 5px;
  width: 100%;
  height: 24px;
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

.mockframe.macbook .top-bar:after {
  content: "";
  background: #ddd;
  border-radius: 0 0 20px 20px;
  width: 16%;
  height: 14px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 -3px 10px #999;
}

.mockframe.macbook .bottom-bar {
  content: "";
  background: none;
  width: calc(100% + 140px);
  height: 26px;
  display: block;
  position: absolute;
  top: 680px;
  left: -70px;
}

.mockframe.macbook .bottom-bar:before, .mockframe.macbook .bottom-bar:after {
  content: "";
  width: 80px;
  height: calc(100% - 2px);
  display: block;
  position: absolute;
  top: 0;
}

.mockframe.macbook .bottom-bar:before {
  background: linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80% 100%, #f0f0f0 100%);
  left: 0;
}

.mockframe.macbook .bottom-bar:after {
  background: linear-gradient(to right, #f0f0f0 0% 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);
  right: 0;
}

.mockframe.macbook .camera {
  background: #3c3d3d;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: 20px;
  left: 50%;
}

.mockframe.macbook .home {
  display: none;
}

.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;
}

.mockframe.ipad-pro {
  background: linear-gradient(145deg, #3a3a3a 0%, #2a2a2a 15%, #1e1e1e 50%, #2a2a2a 85%, #3a3a3a 100%);
  border-radius: 36px;
  width: 512px;
  height: 683px;
  padding: 18px;
  position: relative;
  box-shadow: inset 0 0 0 1px #ffffff26, inset 0 1px #fff3, 0 40px 80px -20px #00000080, 0 0 0 1px #0000004d;
}

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

.mockframe.ipad-pro:after {
  content: "";
  z-index: 2;
  background: #000;
  border-radius: 26px;
  position: absolute;
  inset: 14px;
}

.mockframe.ipad-pro .camera {
  z-index: 10;
  background: radial-gradient(circle at 35% 35%, #2a2a3a 0%, #1a1a25 50%, #0a0a10 100%);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 2px #000c, 0 0 0 1px #32323c66;
}

.mockframe.ipad-pro .camera:before {
  content: "";
  background: #64649666;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  position: absolute;
  top: 1px;
  left: 2px;
}

.mockframe.ipad-pro .sleep {
  z-index: 4;
  background: linear-gradient(to right, #4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 2px 2px 0 0;
  width: 50px;
  height: 3px;
  position: absolute;
  top: -3px;
  right: 80px;
}

.mockframe.ipad-pro .volume-up {
  z-index: 4;
  background: linear-gradient(#4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 45px;
  position: absolute;
  top: 80px;
  right: -3px;
}

.mockframe.ipad-pro .volume-down {
  z-index: 4;
  background: linear-gradient(#4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 45px;
  position: absolute;
  top: 135px;
  right: -3px;
}

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

.mockframe.ipad-pro .corner-highlight.tl {
  background: radial-gradient(at 100% 100%, #ffffff1f 0%, #ffffff0a 40%, #0000 70%);
  border-radius: 30px 0 0;
  top: 8px;
  left: 8px;
}

.mockframe.ipad-pro .corner-highlight.tr {
  background: radial-gradient(at 0 100%, #ffffff1f 0%, #ffffff0a 40%, #0000 70%);
  border-radius: 0 30px 0 0;
  top: 8px;
  right: 8px;
}

.mockframe.ipad-pro .corner-highlight.bl {
  background: radial-gradient(at 100% 0, #ffffff14 0%, #ffffff08 40%, #0000 70%);
  border-radius: 0 0 0 30px;
  bottom: 8px;
  left: 8px;
}

.mockframe.ipad-pro .corner-highlight.br {
  background: radial-gradient(at 0 0, #ffffff14 0%, #ffffff08 40%, #0000 70%);
  border-radius: 0 0 30px;
  bottom: 8px;
  right: 8px;
}

.mockframe.ipad-pro .inner-edge {
  z-index: 1;
  pointer-events: none;
  border: 1px solid #46464666;
  border-radius: 27px;
  position: absolute;
  inset: 13px;
}

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

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

.mockframe.ipad-pro.silver {
  background: linear-gradient(145deg, #e8e8e8 0%, #d0d0d0 15%, silver 50%, #d0d0d0 85%, #e8e8e8 100%);
  box-shadow: inset 0 0 0 1px #ffffffe6, inset 0 1px #fff, 0 40px 80px -20px #00000040, 0 0 0 1px #00000014;
}

.mockframe.ipad-pro.silver:before {
  background: linear-gradient(145deg, #b8b8b8 0%, #a8a8a8 100%);
}

.mockframe.ipad-pro.silver .corner-highlight.tl, .mockframe.ipad-pro.silver .corner-highlight.tr {
  background: radial-gradient(at 50% 100%, #ffffffb3 0%, #fff3 50%, #0000 80%);
}

.mockframe.ipad-pro.silver .corner-highlight.bl, .mockframe.ipad-pro.silver .corner-highlight.br {
  background: radial-gradient(at 50% 0, #ffffff80 0%, #ffffff26 50%, #0000 80%);
}

.mockframe.ipad-pro.silver .inner-edge {
  border-color: #a0a0a080;
}

.mockframe.ipad-pro.silver .sleep {
  background: linear-gradient(to right, #e0e0e0 0%, #c8c8c8 10%, #b8b8b8 50%, #c8c8c8 90%, #e0e0e0 100%);
}

.mockframe.ipad-pro.silver .volume-up, .mockframe.ipad-pro.silver .volume-down {
  background: linear-gradient(#e0e0e0 0%, #c8c8c8 10%, #b8b8b8 50%, #c8c8c8 90%, #e0e0e0 100%);
}

.mockframe.ipad-pro.landscape {
  width: 683px;
  height: 512px;
}

.mockframe.ipad-pro.landscape .camera {
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}

.mockframe.ipad-pro.landscape .sleep {
  background: linear-gradient(#4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 50px;
  top: 80px;
  left: auto;
  right: -3px;
}

.mockframe.ipad-pro.landscape .volume-up {
  background: linear-gradient(to right, #4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 2px 2px 0 0;
  width: 45px;
  height: 3px;
  top: -3px;
  left: 80px;
  right: auto;
}

.mockframe.ipad-pro.landscape .volume-down {
  background: linear-gradient(to right, #4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 2px 2px 0 0;
  width: 45px;
  height: 3px;
  top: -3px;
  left: 135px;
  right: auto;
}

.mockframe.ipad-pro.landscape.silver .sleep {
  background: linear-gradient(#e0e0e0 0%, #c8c8c8 10%, #b8b8b8 50%, #c8c8c8 90%, #e0e0e0 100%);
}

.mockframe.ipad-pro.landscape.silver .volume-up, .mockframe.ipad-pro.landscape.silver .volume-down {
  background: linear-gradient(to right, #e0e0e0 0%, #c8c8c8 10%, #b8b8b8 50%, #c8c8c8 90%, #e0e0e0 100%);
}

.mockframe.macbook-pro {
  background: #333;
  border-radius: 20px 20px 0 0;
  width: 960px;
  height: 600px;
  margin: 0 auto;
  padding: 24px 24px 0;
}

.mockframe.macbook-pro:before {
  content: "";
  z-index: 1;
  background: #0d0d0d;
  border-radius: 16px 16px 0 0;
  width: calc(100% - 8px);
  height: calc(100% - 4px);
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.macbook-pro .screen {
  box-shadow: none;
  border-radius: 10px 10px 0 0;
}

.mockframe.macbook-pro .notch {
  z-index: 4;
  background: #0d0d0d;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  width: 180px;
  height: 24px;
  margin-left: -90px;
  position: absolute;
  top: 24px;
  left: 50%;
}

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

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

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

.mockframe.macbook-pro .notch .camera {
  z-index: 5;
  background: #3c3d3d;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  position: absolute;
  top: 8px;
  left: 50%;
}

.mockframe.macbook-pro .notch .camera:before {
  content: "";
  background: radial-gradient(circle at 30% 30%, #1a1a2a 0%, #0a0a10 100%);
  border-radius: 100%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.mockframe.macbook-pro .top-bar {
  content: "";
  background: #333;
  border-bottom-right-radius: 90px 18px;
  border-bottom-left-radius: 90px 18px;
  width: calc(100% + 140px);
  height: 40px;
  display: block;
  position: absolute;
  top: 624px;
  left: -70px;
  box-shadow: inset 0 -4px 13px 3px #0009;
}

.mockframe.macbook-pro .top-bar:before {
  content: "";
  background: linear-gradient(#444 0%, #2a2a2a 100%);
  border-bottom: 1px solid #1a1a1a;
  width: 100%;
  height: 10px;
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

.mockframe.macbook-pro .top-bar:after {
  content: "";
  background: #222;
  border-radius: 0 0 10px 10px;
  width: 14%;
  height: 6px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  box-shadow: inset 0 -2px 6px #0009;
}

.mockframe.macbook-pro .bottom-bar {
  content: "";
  background: none;
  width: calc(100% + 140px);
  height: 26px;
  display: block;
  position: absolute;
  top: 624px;
  left: -70px;
}

.mockframe.macbook-pro .bottom-bar:before, .mockframe.macbook-pro .bottom-bar:after {
  content: "";
  width: 80px;
  height: calc(100% - 2px);
  display: block;
  position: absolute;
  top: 0;
}

.mockframe.macbook-pro .bottom-bar:before {
  background: linear-gradient(to right, #2a2a2a 0%, #444 5%, #555 14%, #3a3a3a 41%, #4a4a4a 80% 100%);
  left: 0;
}

.mockframe.macbook-pro .bottom-bar:after {
  background: linear-gradient(to right, #4a4a4a 0% 20%, #3a3a3a 59%, #555 86%, #444 95%, #2a2a2a 100%);
  right: 0;
}

.mockframe.macbook-pro .home, .mockframe.macbook-pro .volume, .mockframe.macbook-pro .sleep, .mockframe.macbook-pro .sensor, .mockframe.macbook-pro .speaker, .mockframe.macbook-pro .sensors, .mockframe.macbook-pro .more-sensors, .mockframe.macbook-pro .inner-shadow, .mockframe.macbook-pro .inner {
  display: none;
}

.mockframe.macbook-pro.silver {
  background: #c5c5c5;
}

.mockframe.macbook-pro.silver:before {
  background: #0d0d0d;
}

.mockframe.macbook-pro.silver .notch {
  background: #0d0d0d;
}

.mockframe.macbook-pro.silver .notch:after {
  background: radial-gradient(circle at 0 100%, #0000 0 70%, #0d0d0d 70% 100%);
}

.mockframe.macbook-pro.silver .notch:before {
  background: radial-gradient(circle at 100% 100%, #0000 0 70%, #0d0d0d 70% 100%);
}

.mockframe.macbook-pro.silver .top-bar {
  background: #c5c5c5;
}

.mockframe.macbook-pro.silver .top-bar:before {
  background: linear-gradient(#d8d8d8 0%, #b5b5b5 100%);
  border-bottom-color: #a0a0a0;
}

.mockframe.macbook-pro.silver .top-bar:after {
  background: #a0a0a0;
  box-shadow: inset 0 -2px 6px #0000004d;
}

.mockframe.macbook-pro.silver .bottom-bar:before {
  background: linear-gradient(to right, #909090 0%, #b5b5b5 5%, #d0d0d0 14%, #a5a5a5 41%, silver 80% 100%);
}

.mockframe.macbook-pro.silver .bottom-bar:after {
  background: linear-gradient(to right, silver 0% 20%, #a5a5a5 59%, #d0d0d0 86%, #b5b5b5 95%, #909090 100%);
}

.mockframe.pixel10 {
  background: #1a1a1a;
  border-radius: 48px;
  width: 412px;
  height: 915px;
  padding: 12px;
}

.mockframe.pixel10:before {
  content: "";
  z-index: 1;
  background: #0d0d0d;
  border-radius: 44px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.pixel10:after {
  content: "";
  z-index: 2;
  pointer-events: none;
  border-radius: 40px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  display: block;
  position: absolute;
  top: 8px;
  left: 8px;
  box-shadow: inset 0 0 8px #ffffff0d;
}

.mockframe.pixel10 .screen {
  box-shadow: none;
  border-radius: 38px;
}

.mockframe.pixel10 .camera {
  z-index: 5;
  background: #101010;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  position: absolute;
  top: 24px;
  left: 50%;
  box-shadow: inset 0 0 4px #000c;
}

.mockframe.pixel10 .camera:before {
  content: "";
  background: radial-gradient(circle at 30% 30%, #2a2a3a 0%, #0a0a10 100%);
  border-radius: 100%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 3px;
  left: 3px;
}

.mockframe.pixel10 .sleep {
  background: #1a1a1a;
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 72px;
  position: absolute;
  top: 180px;
  right: -3px;
}

.mockframe.pixel10 .volume {
  background: #1a1a1a;
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 100px;
  position: absolute;
  top: 260px;
  right: -3px;
}

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

.mockframe.pixel10.porcelain {
  background: #e8e5e1;
}

.mockframe.pixel10.porcelain:before {
  background: #0d0d0d;
}

.mockframe.pixel10.porcelain .sleep, .mockframe.pixel10.porcelain .volume {
  background: #d5d2ce;
}

.mockframe.pixel10.mint {
  background: #afdbc5;
}

.mockframe.pixel10.mint:before {
  background: #0d0d0d;
}

.mockframe.pixel10.mint .sleep, .mockframe.pixel10.mint .volume {
  background: #9bcdb5;
}

.mockframe.pixel10.rose {
  background: #e8c4c4;
}

.mockframe.pixel10.rose:before {
  background: #0d0d0d;
}

.mockframe.pixel10.rose .sleep, .mockframe.pixel10.rose .volume {
  background: #dab5b5;
}

.mockframe.pixel10.landscape {
  width: 915px;
  height: 412px;
}

.mockframe.pixel10.landscape .camera {
  margin-top: -6px;
  margin-left: 0;
  top: 50%;
  left: 24px;
}

.mockframe.pixel10.landscape .sleep {
  border-radius: 2px 2px 0 0;
  width: 72px;
  height: 3px;
  top: -3px;
  left: 180px;
  right: auto;
}

.mockframe.pixel10.landscape .volume {
  border-radius: 2px 2px 0 0;
  width: 100px;
  height: 3px;
  top: -3px;
  left: 260px;
  right: auto;
}

.mockframe.galaxy-s25 {
  background: #1e1e1e;
  border-radius: 42px;
  width: 412px;
  height: 892px;
  padding: 10px;
  box-shadow: inset 0 0 2px #ffffff26;
}

.mockframe.galaxy-s25:before {
  content: "";
  z-index: 1;
  background: #0a0a0a;
  border-radius: 40px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
}

.mockframe.galaxy-s25 .inner {
  z-index: 1;
  pointer-events: none;
  background: none;
  border-top: 2px solid #ffffff1a;
  border-bottom: 2px solid #ffffff1a;
  border-radius: 42px;
  width: 100%;
  height: calc(100% - 4px);
  position: absolute;
  top: 2px;
  left: 0;
  box-shadow: inset 0 0 4px #ffffff1a;
}

.mockframe.galaxy-s25 .screen {
  box-shadow: none;
  border-radius: 36px;
}

.mockframe.galaxy-s25 .camera {
  z-index: 5;
  background: #050505;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: 22px;
  left: 50%;
  box-shadow: 0 0 0 2px #0a0a0a;
}

.mockframe.galaxy-s25 .camera:before {
  content: "";
  background: radial-gradient(circle at 30% 30%, #1a1a2a 0%, #050510 100%);
  border-radius: 100%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
}

.mockframe.galaxy-s25 .speaker {
  z-index: 4;
  background: #0a0a0a;
  border-radius: 4px;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  position: absolute;
  top: 14px;
  left: 50%;
}

.mockframe.galaxy-s25 .sleep {
  background: #2a2a2a;
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 54px;
  position: absolute;
  top: 220px;
  right: -3px;
}

.mockframe.galaxy-s25 .volume {
  background: #2a2a2a;
  border-radius: 2px 0 0 2px;
  width: 3px;
  height: 80px;
  position: absolute;
  top: 180px;
  left: -3px;
}

.mockframe.galaxy-s25 .volume:before {
  content: "";
  background: inherit;
  border-radius: 2px 0 0 2px;
  width: 3px;
  height: 80px;
  position: absolute;
  top: 100px;
  left: 0;
}

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

.mockframe.galaxy-s25 .overflow {
  pointer-events: none;
  border-radius: 42px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.mockframe.galaxy-s25 .shadow {
  background: radial-gradient(#0006 0%, #0000 60%);
  border-radius: 100%;
  width: 80px;
  height: 80px;
  position: absolute;
}

.mockframe.galaxy-s25 .shadow--tl {
  top: -15px;
  left: -15px;
}

.mockframe.galaxy-s25 .shadow--tr {
  top: -15px;
  right: -15px;
}

.mockframe.galaxy-s25 .shadow--bl {
  bottom: -15px;
  left: -15px;
}

.mockframe.galaxy-s25 .shadow--br {
  bottom: -15px;
  right: -15px;
}

.mockframe.galaxy-s25.icy-blue {
  background: #c5d5e0;
  box-shadow: inset 0 0 2px #fff6;
}

.mockframe.galaxy-s25.icy-blue:before {
  background: #0a0a0a;
}

.mockframe.galaxy-s25.icy-blue .inner {
  border-top-color: #ffffff4d;
  border-bottom-color: #ffffff4d;
}

.mockframe.galaxy-s25.icy-blue .sleep, .mockframe.galaxy-s25.icy-blue .volume {
  background: #a5b8c8;
}

.mockframe.galaxy-s25.navy {
  background: #1a2a40;
}

.mockframe.galaxy-s25.navy .sleep, .mockframe.galaxy-s25.navy .volume {
  background: #152235;
}

.mockframe.galaxy-s25.silver {
  background: silver;
  box-shadow: inset 0 0 2px #ffffff80;
}

.mockframe.galaxy-s25.silver:before {
  background: #0a0a0a;
}

.mockframe.galaxy-s25.silver .inner {
  border-top-color: #fff6;
  border-bottom-color: #fff6;
}

.mockframe.galaxy-s25.silver .sleep, .mockframe.galaxy-s25.silver .volume {
  background: #a8a8a8;
}

.mockframe.galaxy-s25.mint {
  background: #a8d8c8;
  box-shadow: inset 0 0 2px #fff6;
}

.mockframe.galaxy-s25.mint:before {
  background: #0a0a0a;
}

.mockframe.galaxy-s25.mint .sleep, .mockframe.galaxy-s25.mint .volume {
  background: #90c5b5;
}

.mockframe.galaxy-s25.landscape {
  width: 892px;
  height: 412px;
}

.mockframe.galaxy-s25.landscape .camera {
  margin-top: -5px;
  margin-left: 0;
  top: 50%;
  left: 22px;
}

.mockframe.galaxy-s25.landscape .speaker {
  width: 4px;
  height: 40px;
  margin-top: -20px;
  margin-left: 0;
  top: 50%;
  left: 14px;
}

.mockframe.galaxy-s25.landscape .sleep {
  border-radius: 2px 2px 0 0;
  width: 54px;
  height: 3px;
  top: -3px;
  left: 220px;
  right: auto;
}

.mockframe.galaxy-s25.landscape .volume {
  border-radius: 0 0 2px 2px;
  width: 80px;
  height: 3px;
  top: 100%;
  left: 180px;
}

.mockframe.galaxy-s25.landscape .volume:before {
  border-radius: 0 0 2px 2px;
  width: 80px;
  height: 3px;
  top: 0;
  left: 100px;
}