/*
 * Homepage phone mode (?embed=1). The iframe covers the host's whole stage: the phone
 * screen sits exactly over the host's handset and the Apple TV is laid beside it (wide)
 * or above it (narrow). The host draws the handset, status bar and navigation bar, so
 * everything outside the screen and TV stays transparent.
 *
 * Geometry mirrors /phone/phone.css: bezel 11px, screen 412x880, handset 434x902,
 * TV 760px wide at a 64px gap (wide; phone.js widens it on big screens via --sp-tv-left/--sp-tv-w) or above the handset (stacked: phone.js makes
 * the TV as wide as the screen allows and centres the handset below it, via --sp-tv-left/--sp-tv-w/--sp-dx/--sp-dy and data-sp-layout).
 */
html.embed,
html.embed body {
  height: 100%;
  overflow: hidden;
  background: transparent;
}
html.embed .demo {
  position: relative;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
html.embed .demo-heading {
  display: none;
}
html.embed .devices {
  display: block;
  position: absolute;
  inset: 0;
}
html.embed .phone-area {
  position: absolute;
  left: calc(var(--sp-dx, 0px) + 11px);
  top: calc(var(--sp-dy, 0px) + 11px);
  width: 412px;
  height: 880px;
}
html.embed .phone-shell {
  --device-scale: 1;
  width: 412px;
  height: 880px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html.embed .phone-shell:before,
html.embed .phone-shell:after {
  display: none;
}
html.embed .phone-screen {
  width: 412px;
  height: 880px;
  border-radius: 46px;
  transform: translateZ(0);
}
/* The host paints the real status bar and navigation bar over these spacers. */
html.embed .android-status {
  height: 44px;
}
html.embed .android-status > * {
  visibility: hidden;
}
html.embed .android-navigation {
  display: none;
}
html.embed .phone-app {
  height: 788px;
}
/* The taller screen leaves a little spare height; keep the pad from hugging the top. */
html.embed .remote-fit {
  padding-top: 28px;
}
html.embed .tv-area {
  position: absolute;
  left: var(--sp-tv-left, 498px);
  top: 50%;
  width: var(--sp-tv-w, 760px);
  margin: 0;
  padding: 0 0 18px;
  transform: translateY(-50%);
  background: none;
  opacity: 0;
  transition: opacity 160ms ease-out;
}
/* Let the handset make room before revealing the TV, so its upper edge never
   sweeps through the page header on a narrow screen. */
html.embed[data-sp-visible='true'] .tv-area {
  opacity: 1;
  transition-delay: 200ms;
}
html.embed[data-sp-layout='stacked'] .tv-area {
  top: 0;
  height: auto;
  padding: 0;
  transform: none;
}
html.embed[data-sp-layout='stacked'] .tv-set {
  padding: 5px 5px 0;
}
html.embed[data-sp-layout='stacked'] .tv-bezel {
  height: 7px;
}
html.embed[data-sp-layout='stacked'] .tv-stand {
  height: 11px;
}
@media (prefers-reduced-motion: reduce) {
  html.embed .tv-area {
    transition: none;
  }
}