:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #e9edf2;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  overflow-x: auto;
  background:
    radial-gradient(circle at 18% 16%, rgb(255 255 255 / 88%), transparent 34rem),
    radial-gradient(circle at 82% 82%, rgb(175 190 207 / 45%), transparent 38rem),
    linear-gradient(145deg, #eef2f5 0%, #dce3e9 48%, #cbd4dd 100%);
  color: #343b43;
}

.stage {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 34px 20px 42px;
}

.prototype-label {
  margin: 0;
  color: #606a74;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.ipad {
  position: relative;
  flex: 0 0 auto;
  transform: scale(var(--ipad-scale, 1));
  transform-origin: top center;
  filter: drop-shadow(0 28px 32px rgb(31 40 49 / 24%));
}

.ipad-bezel {
  position: relative;
  display: flex;
  width: 1286px;
  height: 882px;
  align-items: center;
  justify-content: center;
  padding: 30px 52px;
  border: 1px solid #3d4248;
  border-radius: 46px;
  background: linear-gradient(145deg, #2f3338 0%, #171a1e 52%, #292d32 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 16%),
    inset 0 -2px 3px rgb(0 0 0 / 52%);
}

#app-frame {
  display: block;
  width: 1180px;
  height: 820px;
  border: none;
  border-radius: 20px;
  background: #fff;
}

.ipad-camera {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 9px;
  height: 9px;
  border: 1px solid #343a42;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #536579, #10161d 58%);
  box-shadow: 0 0 0 2px #111418;
  transform: translateY(-50%);
}

.ipad-home {
  position: absolute;
  top: 50%;
  right: 19px;
  width: 5px;
  height: 96px;
  border-radius: 999px;
  background: rgb(225 229 233 / 50%);
  transform: translateY(-50%);
}

@media (max-width: 1280px) {
  .stage {
    justify-content: flex-start;
  }

  .ipad {
    --ipad-scale: 0.9;
  }
}

@media (max-width: 1160px) {
  .ipad {
    --ipad-scale: 0.8;
  }
}

@media (max-width: 1040px) {
  .ipad {
    --ipad-scale: 0.7;
  }
}

@media (max-width: 920px) {
  .ipad {
    --ipad-scale: 0.62;
  }
}

@media (max-width: 800px) {
  .ipad {
    --ipad-scale: 0.52;
  }
}

@media (max-width: 680px) {
  .ipad {
    --ipad-scale: 0.43;
  }
}

@media (max-width: 560px) {
  .ipad {
    --ipad-scale: 0.34;
  }
}