.desktop-demo-shell {
  display: none;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  html:not(.demo-direct) body {
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #edf2ec 0%, #fff 48%, #edf4da 100%);
  }

  html:not(.demo-direct) body > :not(.desktop-demo-shell):not(script) {
    display: none !important;
  }

  html:not(.demo-direct) .desktop-demo-shell {
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 34px;
  }

  .phone-mockup {
    position: relative;
    width: 430px;
    height: min(850px, calc(100dvh - 68px));
    min-height: 620px;
    padding: 18px 12px 12px;
    border: 3px solid #10271f;
    border-radius: 48px;
    background: #10271f;
    box-shadow: 0 34px 80px rgba(16, 39, 31, .24);
  }

  .phone-speaker {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 2;
    width: 72px;
    height: 5px;
    border-radius: 99px;
    background: #5d6e65;
    transform: translateX(-50%);
  }

  .phone-mockup iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 34px;
    background: #f4f6f1;
  }
}