/* Chrome-free 390x844 Expo captures scale uniformly inside one device frame. */
.device-shell {
  container-type: inline-size;
  aspect-ratio: auto !important;
  padding: 4px !important;
  border-radius: 16% / 7%;
}
.device-display {
  height: auto !important;
  border: 3px solid #111 !important;
  border-radius: 14cqw !important;
  display: block;
}
.os-status {
  height: 14cqw !important;
  min-height: 0;
  display: grid !important;
  grid-template-columns: 1fr 30% 1fr;
  align-items: center;
  gap: 4cqw;
  padding: 0 6cqw !important;
  font: 600 3.8cqw/1 system-ui !important;
  letter-spacing: 0;
}
.os-status > span:first-child {
  justify-self: start;
}
.os-status > i {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 6.6cqw !important;
  border-radius: 4cqw;
  margin: 0;
}
.os-status > i::after {
  width: 1.7cqw !important;
  height: 1.7cqw !important;
  right: 2cqw !important;
  top: 2.4cqw !important;
}
.os-status .os-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.3cqw;
  min-width: 0;
  letter-spacing: 0;
  font-size: 0;
}
.os-icons svg {
  display: block;
  flex: none;
  height: 3.8cqw !important;
  width: auto !important;
  fill: currentColor;
}
.os-icons .system-battery {
  height: 4cqw !important;
}
.os-icons b {
  display: none;
}
.app-viewport {
  position: relative;
  flex: none;
  width: 100%;
  height: auto !important;
  aspect-ratio: 390/844;
  overflow: hidden;
}
.app-viewport > img {
  position: absolute;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 390/844;
  object-fit: contain !important;
  transform: none;
  max-width: none;
}
.app-viewport::before,
.app-viewport::after {
  display: none !important;
}
.download-device .device-shell {
  border-radius: 16% / 7% !important;
}
.home-indicator {
  display: none !important;
}
.walk-focus {
  z-index: 4;
}