:root {
  --demo-chrome-top: max(20px, env(safe-area-inset-top, 0px) + 14px);
  --demo-chrome-left: max(16px, env(safe-area-inset-left, 0px) + 12px);
}

html.phone-fit-enabled,
html.phone-fit-enabled body {
  min-height: 100%;
  height: auto;
}

html.phone-fit-enabled body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 16px 24px;
  box-sizing: border-box;
  overflow: auto;
}

/* 电脑：顶部对齐切换 tab，默认 92% 缩放时顶边不漂移 */
@media (min-width: 961px) and (pointer: fine) {
  html.phone-fit-enabled body {
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--demo-chrome-top);
    padding-bottom: 24px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.phone-stage {
  width: 390px;
  height: 844px;
  flex-shrink: 0;
  transform: scale(var(--phone-scale, 1));
  transform-origin: center center;
}

@media (min-width: 961px) and (pointer: fine) {
  .phone-stage {
    transform-origin: top center;
  }
}

/* 手机打开：一屏铺满，无顶栏留白 */
html.is-mobile-phone,
html.is-mobile-phone body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

html.is-mobile-phone.phone-fit-enabled body {
  padding: 0;
  align-items: center;
  justify-content: center;
  background: #000;
}

html.is-mobile-phone .phone-stage {
  transform-origin: center center;
}

html.is-mobile-phone .demo-scene-switch {
  display: none !important;
}