/* "Meet your platform": the live guest platform inside the existing browser frame. */
.live-preview .preview-bar { position: relative; }
.lp-status { display: inline-flex; align-items: center; gap: 6px; position: absolute; left: 50%; transform: translateX(-50%); }
.lp-status b { width: 6px; height: 6px; border-radius: 50%; background: #8a7360; }
.live-preview:is([data-state="ready"],[data-state="loaded"]) .lp-status b { background: #34d17f; box-shadow: 0 0 0 3px #34d17f2e; }

.lp-screen { position: relative; height: min(720px, calc(100svh - 160px)); overflow: hidden; background: #f3ece4; }
.lp-screen iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.live-preview[data-live="true"] .lp-screen iframe { pointer-events: auto; }
.live-preview[data-live="true"] { box-shadow: 0 0 0 2px #c97b4a, 0 25px 65px #0005; }
.lp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transition: opacity .5s; }
.live-preview:is([data-state="ready"],[data-state="loaded"]) .lp-poster { opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }

.lp-shield {
  position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0 0 26px; background: transparent;
  display: flex; align-items: flex-end; justify-content: center;
}
.lp-shield span {
  padding: 11px 18px; border-radius: 30px; background: #211b15e6; color: #fff0db; font-size: 13px;
  box-shadow: 0 12px 30px #0006; transition: transform .2s;
}
.lp-shield:hover span, .lp-shield:focus-visible span { transform: translateY(-3px); }
.live-preview[data-live="true"] .lp-shield { display: none; }

.lp-toast {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 18px; padding: 13px 16px 13px 20px; border-radius: 40px;
  background: #211b15f2; color: #fff0db; font-size: 13px; white-space: nowrap; box-shadow: 0 20px 50px #0007;
}
.lp-toast[hidden] { display: none; }
.lp-toast a { border-bottom: 1px solid currentColor; font-weight: 600; }
.lp-toast button { background: none; font-size: 18px; line-height: 1; opacity: .7; }

/* Phones: the real screen as an image; the pill link below opens the platform. */
@media (max-width: 760px) {
  .lp-screen { height: auto; aspect-ratio: 1440 / 900; }
  .lp-screen iframe, .lp-shield, .lp-status { display: none; }
  .live-preview .lp-poster { opacity: 1 !important; visibility: visible !important; }
}