:root {
  --page-bg: #f2f4f7;
  --stage-shadow: 0 26px 80px rgba(22, 30, 44, 0.22);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  scrollbar-width: none;
}

body {
  min-height: 100vh;
  overflow: hidden;
  font-family: "Manrope", Arial, sans-serif;
  color: #1d2533;
  background: var(--page-bg);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.demo-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vh, 28px);
}

.phone-stage {
  width: min(100%, 520px);
  height: calc(100vh - clamp(24px, 4.8vh, 56px));
  min-height: 620px;
  display: grid;
  place-items: center;
}

.le-phone {
  position: relative;
  width: 448px;
  height: 916px;
  transform-origin: center;
  transform: scale(min(1, calc((100vh - 56px) / 916)));
  filter: drop-shadow(var(--stage-shadow));
  overflow: visible;
}

.le-phone img,
.le-phone svg {
  user-select: none;
}

.le-phone-aluminum,
.le-phone-corner,
.le-phone-buttons,
.le-speaker-cutout {
  pointer-events: none;
  position: absolute;
  object-fit: fill;
  z-index: 2;
}

.le-phone-aluminum,
.le-phone-corner {
  left: 9px;
  top: 6px;
  width: 432px;
  height: 904px;
}

.le-phone-corner {
  z-index: 5;
}

.le-phone-body {
  pointer-events: none;
  position: absolute;
  left: 15px;
  top: 12px;
  z-index: 3;
  width: 420px;
  height: 892px;
  border-radius: 70px;
  background-color: color(display-p3 0.216 0.216 0.216);
  box-shadow:
    0 0 1px color(display-p3 0.129 0.145 0.165),
    0 0 8px color(display-p3 0.384 0.404 0.498),
    0 0 7px color(display-p3 0.384 0.404 0.498),
    0 0 4px color(display-p3 0.878 0.945 1),
    0 0 5px color(display-p3 1 1 1),
    0 0 4px color(display-p3 1 1 1);
}

.le-phone-mask-fill {
  pointer-events: none;
  position: absolute;
  left: 17px;
  top: 14px;
  z-index: 4;
  width: 414px;
  height: 886px;
}

.le-phone-clip-def {
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
}

.le-phone-screen-shadow {
  pointer-events: none;
  position: absolute;
  left: 23px;
  top: 21px;
  z-index: 5;
  width: 404px;
  height: 878px;
  background: #000;
  clip-path: url("#le-phone-screen-clip");
}

.le-phone-screen {
  position: absolute;
  left: 24px;
  top: 21px;
  z-index: 6;
  width: 402px;
  height: 874px;
  overflow: hidden;
  background: #fff;
  clip-path: url("#le-phone-screen-clip");
  scrollbar-width: none;
}

.le-phone-screen::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.live-demo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
  scrollbar-width: none;
}

.live-demo::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.le-status-time {
  pointer-events: none;
  position: absolute;
  left: 58px;
  top: 42px;
  z-index: 11;
  display: flex;
  width: 110px;
  height: 20px;
  align-items: center;
  justify-content: flex-start;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.le-status-icons {
  pointer-events: none;
  position: absolute;
  left: 304px;
  top: 41px;
  z-index: 11;
  display: flex;
  width: 91px;
  height: 20px;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #111827;
}

.le-phone-buttons {
  left: 6px;
  top: 191px;
  z-index: 7;
  width: 438.5px;
  height: 225.5px;
}

.le-dynamic-island {
  pointer-events: none;
  position: absolute;
  left: 163px;
  top: 35px;
  z-index: 8;
  width: 124px;
  height: 36px;
  border-radius: 999px;
  background: #000;
}

.le-speaker-cutout {
  left: 133px;
  top: 12px;
  z-index: 9;
  width: 183px;
  height: 6px;
}

@media (max-width: 520px) {
  body {
    overflow: auto;
  }

  .demo-shell {
    padding: 10px;
    align-items: start;
  }

  .phone-stage {
    min-height: 0;
    height: auto;
  }

  .le-phone {
    transform: scale(min(1, calc((100vw - 20px) / 448)));
  }
}