/* Screens remain in normal flow: no perspective, rotation or scaled canvas. */
.phone-scene{position:relative;isolation:isolate;min-width:0}
.phone-scene .scene-float{position:relative;width:min(100%,360px);flex:none;animation:none;transform:none}
.phone-scene .scene-float--steps{width:min(100%,320px)}
.phone-scene .device{
  position:relative;
  width:100%;
  padding:7px;
  border:1px solid #84978c;
  border-radius:39px;
  background:linear-gradient(110deg,#253c31 0%,#060d09 10%,#101b14 80%,#304638 100%);
  box-shadow:inset 1px 0 0 #d4dfd1b0,inset -1px 0 0 #78907a70,0 24px 40px -16px #00180f69,0 8px 16px -10px #001b106b;
}
.phone-scene .device-depth{
  position:absolute;
  z-index:-1;
  inset:2px -5px 2px 4px;
  border:1px solid #596e5b;
  border-radius:inherit;
  background:linear-gradient(90deg,#2d4034 70%,#a9b7a5 92%,#46604b 98%);
  box-shadow:1px 0 0 #c6d0bc80;
  pointer-events:none;
}
.phone-scene .device-screen{
  position:relative;
  width:100%;
  aspect-ratio:6/13;
  overflow:hidden;
  border-radius:31px;
  background:#103b2e;
  isolation:isolate;
}
.phone-scene .device-screen-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:6/13;
  object-fit:contain;
  border:0;
  image-rendering:auto;
}
.phone-scene .device-camera{
  position:absolute;
  z-index:1;
  top:9px;
  left:calc(50% - 5px);
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#35434a 0%,#101a20 25%,#020604 55%,#000 75%);
  box-shadow:0 0 0 1px #1a2c21;
  pointer-events:none;
}
.phone-scene .device-key{
  position:absolute;
  z-index:-1;
  right:-7px;
  width:3px;
  border:1px solid #52705a;
  border-radius:2px;
  background:linear-gradient(90deg,#2c4332,#a0b298,#344f38);
  pointer-events:none;
}
.phone-scene .device-key--volume{top:19%;height:8%}
.phone-scene .device-key--power{top:32%;height:5%}