.device-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  aspect-ratio: 570 / 470;
  container-type: inline-size;
  pointer-events: none;
  user-select: none;
}
.device-stage .ps-stage-inner { position: absolute; inset: 0; }
.device-stage .ps-stage-inner::before,
.device-stage .ps-stage-inner::after {
  content: "";
  position: absolute;
  inset: -3% -1%;
  z-index: -1;
}
.device-stage .ps-stage-inner::before {
  background: radial-gradient(ellipse at 52% 52%, rgba(82,138,255,.10), transparent 64%);
}
.device-stage .ps-stage-inner::after {
  background-image: radial-gradient(circle, rgba(146,176,222,.27) .65px, transparent .95px);
  background-size: 10px 10px;
  mask-image: radial-gradient(ellipse at 53% 49%, #000 15%, rgba(0,0,0,.9) 45%, transparent 73%);
}
.device-stage .ps-blueprint {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  color: rgba(133,162,205,.29);
  stroke-width: .85;
}
.device-stage .ps-handset {
  position: absolute;
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transform-origin: center;
  animation: ps-device-drift 6.2s ease-in-out infinite;
}
.device-stage .ps-handset-front {
  --tilt: -10deg;
  width: 35.8%;
  top: 10%;
  left: 16%;
  z-index: 2;
}
.device-stage .ps-handset-rear {
  --tilt: 11deg;
  width: 33.5%;
  top: 4%;
  left: 49%;
  z-index: 1;
  animation-delay: -2.8s;
}
.device-stage .ps-rim {
  position: relative;
  padding: 2.6%;
  border: 1px solid #707581;
  border-radius: 16% / 8.1%;
  background: linear-gradient(116deg, #9b9fac 0%, #494f5c 7%, #14171c 19%, #666e7d 33%, #20262f 46%, #07080b 69%, #626977 84%, #242932 97%);
  box-shadow: inset .13cqw .12cqw .19cqw rgba(255,255,255,.53), inset -.26cqw -.16cqw .4cqw #05060a, .45cqw 1.6cqw 2.8cqw #0006, 1.6cqw 3cqw 6cqw #0004;
}
.device-stage .ps-handset-front .ps-rim {
  border-color: #717783;
  box-shadow: inset .18cqw .12cqw .16cqw #FFFFFF90, inset -.28cqw -.15cqw .42cqw #040509, .7cqw 1.1cqw 2cqw #0009, 2.9cqw 3.4cqw 5cqw #0007;
}
.device-stage .ps-glass {
  position: relative;
  overflow: hidden;
  border: .36cqw solid #080a0e;
  border-radius: 14.4% / 7.25%;
  background: #14171c;
  box-shadow: 0 0 0 .16cqw #05060a;
}
.device-stage .ps-handset-rear .ps-glass { background: #edf1f8; }
.device-stage .ps-screen {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: Arial, Helvetica, sans-serif;
  text-rendering: geometricPrecision;
}
.device-stage .ps-focus-screen { color: #eaf0fa; fill: currentColor; }
.device-stage .ps-finance-screen { color: #202c40; fill: currentColor; }
.device-stage .ps-sidekey {
  position: absolute;
  width: .45cqw;
  border-radius: .3cqw;
  background: linear-gradient(to right, #595f6d, #242a34);
}
.device-stage .ps-sidekey-left {
  top: 24%; height: 7%; left: -.38cqw;
  box-shadow: 0 6.1cqw 0 #4b5260;
}
.device-stage .ps-sidekey-right { top: 30%; height: 11%; right: -.38cqw; }
@keyframes ps-device-drift {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50% { transform: translateY(-.85cqw) rotate(var(--tilt)); }
}
@media (prefers-reduced-motion: reduce) {
  .device-stage .ps-handset { animation: none; }
}