/*!
 * Vendored from picturepan2/devices.css (MIT, 2017 Yan Zhu)
 * https://github.com/picturepan2/devices.css
 *
 * Adding a new device: paste the converted SCSS->CSS section below, separated
 * by a banner comment. Don't edit existing sections in place; fork into a new
 * section so original library updates can be diffed.
 */

/* ── Apple Watch Series 8 — src/_apple-watch-s8.scss ─────────────── */
.device-apple-watch-s8 {
  height: 380px;
  width: 360px;
}
.device-apple-watch-s8 .device-frame {
  background: #0d0d0d;
  border-radius: 92px;
  box-shadow: inset 0 0 24px 1px #0d0d0d, inset 0 0 0 12px rgb(95.5056818182, 107.75, 119.9943181818);
  height: 380px;
  margin: 0 20px;
  padding: 28px 26px;
  position: relative;
  width: 320px;
}
.device-apple-watch-s8 .device-frame::before {
  border: 1px solid #0d0d0d;
  border-radius: 80px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), inset 0 0 12px 2px rgba(255, 255, 255, 0.75);
  content: "";
  height: 356px;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 298px;
}
.device-apple-watch-s8 .device-screen {
  border: 2px solid rgb(18.1, 18.1, 18.1);
  border-radius: 62px;
  height: 324px;
  width: 268px;
}
.device-apple-watch-s8 .device-btns {
  background: rgb(95.5056818182, 107.75, 119.9943181818);
  border-left: 1px solid black;
  border-radius: 8px 6px 6px 8px/20px 6px 6px 20px;
  box-shadow: inset 8px 0 8px 0px rgb(27.6988636364, 31.25, 34.8011363636), inset -2px 0 6px #272C31, -4px 0 8px rgba(13, 13, 13, 0.25);
  height: 72px;
  position: absolute;
  right: 10px;
  top: 108px;
  width: 18px;
  z-index: 9;
}
.device-apple-watch-s8 .device-btns::after {
  background: #272C31;
  border-radius: 2px 4px 4px 2px/20px 8px 8px 20px;
  box-shadow: inset -2px 0 2px 0 black, inset -6px 0 18px #272C31;
  content: "";
  height: 72px;
  right: 0;
  position: absolute;
  top: 0px;
  width: 6px;
}
.device-apple-watch-s8 .device-btns::before {
  background: #272C31;
  border-radius: 20%;
  box-shadow: 0 -30px rgba(61.6022727273, 69.5, 77.3977272727, 0.75), 0 -27px #272C31, 0 -25px black, 0 -21px rgba(61.6022727273, 69.5, 77.3977272727, 0.75), 0 -18px #272C31, 0 -16px black, 0 -12px rgba(61.6022727273, 69.5, 77.3977272727, 0.75), 0 -9px #272C31, 0 -7px black, 0 -3px rgba(61.6022727273, 69.5, 77.3977272727, 0.75), 0 0 #272C31, 0 2px black, 0 6px rgba(61.6022727273, 69.5, 77.3977272727, 0.75), 0 9px #272C31, 0 11px black, 0 15px rgba(61.6022727273, 69.5, 77.3977272727, 0.75), 0 18px #272C31, 0 20px black, 0 24px rgba(61.6022727273, 69.5, 77.3977272727, 0.75), 0 27px #272C31, 0 29px black;
  content: "";
  height: 3px;
  margin-top: -2px;
  position: absolute;
  right: 2px;
  top: 50%;
  width: 10px;
  z-index: 9;
}
.device-apple-watch-s8 .device-power {
  background: #272C31;
  border-radius: 2px 4px 4px 2px/2px 8px 8px 2px;
  box-shadow: inset 0 0 2px 1px rgb(16.3977272727, 18.5, 20.6022727273);
  height: 72px;
  right: 18px;
  position: absolute;
  top: 212px;
  width: 4px;
}

/* ── Apple Watch Ultra — src/_apple-watch-ultra.scss (reserved — not yet used in markup) ── */
.device-apple-watch-ultra {
  height: 380px;
  width: 360px;
}
.device-apple-watch-ultra .device-frame {
  background: #0d0d0d;
  border-radius: 92px;
  box-shadow: inset 0 0 12px 1px rgba(13, 13, 13, 0.75), inset 0 0 0 6px #D6CCC2, inset 0 0 0 12px #D6CCC2;
  height: 380px;
  margin: 0 20px;
  padding: 38px;
  position: relative;
  width: 320px;
}
.device-apple-watch-ultra .device-frame::before {
  border: 1px solid rgb(244.75, 242.25, 239.75);
  border-radius: 80px;
  box-shadow: 0 0 6px rgba(13, 13, 13, 0.2), inset 0 0 4px 1px rgb(244.75, 242.25, 239.75), inset 0 0 0 10px #D6CCC2;
  content: "";
  height: 356px;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 296px;
}
.device-apple-watch-ultra .device-screen {
  border: 2px solid rgb(18.1, 18.1, 18.1);
  border-radius: 62px;
  height: 304px;
  width: 244px;
}
.device-apple-watch-ultra .device-header {
  background: radial-gradient(circle at center, #D6CCC2 50%, rgb(234.5, 229.5, 224.5) 85%, rgb(162.75, 140.25, 117.75) 100%);
  border-radius: 4px 4px 4px 4px/8px 4px 4px 8px;
  box-shadow: inset 0 0 16px 1px rgba(13, 13, 13, 0.5), -8px 0 4px rgba(13, 13, 13, 0.2), inset 4px 0 4px rgba(13, 13, 13, 0.2);
  height: 214px;
  margin-top: -107px;
  position: absolute;
  right: 4px;
  top: 50%;
  width: 18px;
  z-index: 1;
}
.device-apple-watch-ultra .device-header::before {
  border-radius: 8px 4px 4px 8px/32px 4px 4px 32px;
  box-shadow: -10px 0 8px rgba(13, 13, 13, 0.2);
  content: "";
  height: 194px;
  margin-top: -97px;
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
}
.device-apple-watch-ultra .device-btns {
  background: #D6CCC2;
  border-left: 1px solid rgb(76.25, 63.75, 51.25);
  border-radius: 8px 6px 6px 8px/20px 6px 6px 20px;
  box-shadow: inset 8px 0 8px 0px rgb(91.5, 76.5, 61.5), inset -2px 0 6px rgb(162.75, 140.25, 117.75);
  height: 72px;
  position: absolute;
  right: 1px;
  top: 108px;
  width: 24px;
  z-index: 9;
}
.device-apple-watch-ultra .device-btns::after {
  background: #D6CCC2;
  border-radius: 2px 4px 4px 2px/20px 8px 8px 20px;
  box-shadow: inset -2px 0 2px 0 rgb(106.75, 89.25, 71.75), inset -6px 0 18px rgb(162.75, 140.25, 117.75);
  content: "";
  height: 78px;
  right: 0;
  position: absolute;
  top: -4px;
  width: 6px;
}
.device-apple-watch-ultra .device-btns::before {
  background: #D6CCC2;
  border-radius: 20%;
  box-shadow: 0 -30px rgba(162.75, 140.25, 117.75, 0.5), 0 -27px #D6CCC2, 0 -25px rgb(137.25, 114.75, 92.25), 0 -21px rgba(162.75, 140.25, 117.75, 0.5), 0 -18px #D6CCC2, 0 -16px rgb(137.25, 114.75, 92.25), 0 -12px rgba(162.75, 140.25, 117.75, 0.5), 0 -9px #D6CCC2, 0 -7px rgb(137.25, 114.75, 92.25), 0 -3px rgba(162.75, 140.25, 117.75, 0.5), 0 0 #D6CCC2, 0 2px rgb(137.25, 114.75, 92.25), 0 6px rgba(162.75, 140.25, 117.75, 0.5), 0 9px #D6CCC2, 0 11px rgb(137.25, 114.75, 92.25), 0 15px rgba(162.75, 140.25, 117.75, 0.5), 0 18px #D6CCC2, 0 20px rgb(137.25, 114.75, 92.25), 0 24px rgba(162.75, 140.25, 117.75, 0.5), 0 27px #D6CCC2, 0 29px rgb(137.25, 114.75, 92.25);
  content: "";
  height: 3px;
  margin-top: -2px;
  position: absolute;
  right: 2px;
  top: 50%;
  width: 16px;
  z-index: 9;
}
.device-apple-watch-ultra .device-stripe {
  background: rgb(224.25, 216.75, 209.25);
  border-radius: 2px 8px 8px 2px;
  box-shadow: 0 14px 0 #D6CCC2, 0 28px 0 #D6CCC2;
  height: 10px;
  left: 19px;
  position: absolute;
  top: 98px;
  width: 4px;
  z-index: 1;
}
.device-apple-watch-ultra .device-power {
  background: #D6CCC2;
  border-radius: 2px 4px 4px 2px/2px 8px 8px 2px;
  box-shadow: inset 0 0 2px 1px rgb(162.75, 140.25, 117.75);
  height: 72px;
  right: 1px;
  position: absolute;
  top: 212px;
  width: 4px;
}
.device-apple-watch-ultra .device-home {
  background: #F18F42;
  border: 1px solid rgb(167.1206896552, 80.4655172414, 12.3793103448);
  border-radius: 2px 4px 4px 2px/2px 8px 8px 2px;
  box-shadow: inset 0 0 1px 1px rgb(239.2413793103, 128.9310344828, 42.2586206897);
  height: 106px;
  left: 19px;
  position: absolute;
  top: 162px;
  width: 4px;
  z-index: 1;
}

/* ── iPhone 14 Pro — src/_iphone-14-pro.scss ─────────────────────── */
.device-iphone-14-pro {
  height: 868px;
  width: 428px;
}
.device-iphone-14-pro .device-frame {
  background: #010101;
  border: 1px solid rgb(27.214953271, 23.0280373832, 32.9719626168);
  border-radius: 68px;
  box-shadow: inset 0 0 4px 2px rgb(192.0327102804, 182.8738317757, 204.6261682243), inset 0 0 0 6px #342C3F;
  height: 868px;
  padding: 19px;
  width: 428px;
}
.device-iphone-14-pro .device-screen {
  border-radius: 49px;
  height: 830px;
  width: 390px;
}
.device-iphone-14-pro .device-stripe::after, .device-iphone-14-pro .device-stripe::before {
  border: solid rgba(1, 1, 1, 0.25);
  border-width: 0 7px;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}
.device-iphone-14-pro .device-stripe::after {
  top: 85px;
}
.device-iphone-14-pro .device-stripe::before {
  bottom: 85px;
}
.device-iphone-14-pro .device-header {
  background: #010101;
  border-radius: 20px;
  height: 35px;
  left: 50%;
  margin-left: -60px;
  position: absolute;
  top: 29px;
  width: 120px;
}
.device-iphone-14-pro .device-sensors::after, .device-iphone-14-pro .device-sensors::before {
  content: "";
  position: absolute;
}
.device-iphone-14-pro .device-sensors::after {
  background: #010101;
  border-radius: 17px;
  height: 33px;
  left: 50%;
  margin-left: -60px;
  top: 30px;
  width: 74px;
}
.device-iphone-14-pro .device-sensors::before {
  background: radial-gradient(farthest-corner at 20% 20%, #6074BF 0, transparent 40%), radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555E 20%, transparent 50%);
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  height: 9px;
  left: 50%;
  margin-left: 36px;
  top: 42px;
  width: 9px;
}
.device-iphone-14-pro .device-btns {
  background: rgb(27.214953271, 23.0280373832, 32.9719626168);
  border-radius: 2px;
  height: 32px;
  left: -2px;
  position: absolute;
  top: 115px;
  width: 3px;
}
.device-iphone-14-pro .device-btns::after, .device-iphone-14-pro .device-btns::before {
  background: rgb(27.214953271, 23.0280373832, 32.9719626168);
  border-radius: 2px;
  content: "";
  height: 62px;
  left: 0;
  position: absolute;
  width: 3px;
}
.device-iphone-14-pro .device-btns::after {
  top: 60px;
}
.device-iphone-14-pro .device-btns::before {
  top: 140px;
}
.device-iphone-14-pro .device-power {
  background: rgb(27.214953271, 23.0280373832, 32.9719626168);
  border-radius: 2px;
  height: 100px;
  right: -2px;
  position: absolute;
  top: 200px;
  width: 3px;
}
.device-iphone-14-pro .device-home::after, .device-iphone-14-pro .device-home::before {
  border: solid rgba(1, 1, 1, 0.25);
  border-width: 6px 0;
  content: "";
  height: 6px;
  position: absolute;
  width: 6px;
  z-index: 9;
}
.device-iphone-14-pro .device-home::after {
  right: 86px;
  top: 0;
}
.device-iphone-14-pro .device-home::before {
  bottom: 0;
  left: 86px;
}
.device-iphone-14-pro.device-silver .device-frame {
  border-color: rgb(199.5892857143, 201.5, 203.4107142857);
  box-shadow: inset 0 0 4px 2px white, inset 0 0 0 6px #e2e3e4;
}
.device-iphone-14-pro.device-silver .device-btns {
  background: rgb(199.5892857143, 201.5, 203.4107142857);
}
.device-iphone-14-pro.device-silver .device-btns::after, .device-iphone-14-pro.device-silver .device-btns::before {
  background: rgb(199.5892857143, 201.5, 203.4107142857);
}
.device-iphone-14-pro.device-silver .device-power {
  background: rgb(199.5892857143, 201.5, 203.4107142857);
}
.device-iphone-14-pro.device-black .device-frame {
  border-color: rgb(91.7205240175, 88.6113537118, 86.2794759825);
  box-shadow: inset 0 0 4px 2px rgb(254.7576419214, 254.7489082969, 254.7423580786), inset 0 0 0 6px #76726F;
}
.device-iphone-14-pro.device-black .device-btns {
  background: rgb(91.7205240175, 88.6113537118, 86.2794759825);
}
.device-iphone-14-pro.device-black .device-btns::after, .device-iphone-14-pro.device-black .device-btns::before {
  background: rgb(91.7205240175, 88.6113537118, 86.2794759825);
}
.device-iphone-14-pro.device-black .device-power {
  background: rgb(91.7205240175, 88.6113537118, 86.2794759825);
}
.device-iphone-14-pro.device-gold .device-frame {
  border-color: rgb(230.7, 209.1, 157.8);
  box-shadow: inset 0 0 4px 2px white, inset 0 0 0 6px rgb(210.3, 170.5666666667, 76.2);
}
.device-iphone-14-pro.device-gold .device-btns {
  background: rgb(230.7, 209.1, 157.8);
}
.device-iphone-14-pro.device-gold .device-btns::after, .device-iphone-14-pro.device-gold .device-btns::before {
  background: rgb(230.7, 209.1, 157.8);
}
.device-iphone-14-pro.device-gold .device-power {
  background: rgb(230.7, 209.1, 157.8);
}