:root{
  --phone-w:430px;
  --phone-h:932px;
  --shell-pad:12px;
--desktop-scale:1;
}

/* base shell */
.desktop-phone-shell{
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  box-sizing:border-box;
  padding:0;
}

/* normal desktop */
@media (min-width:700px){

  html,
  body{
    background:#dfe6ef;
    overflow-y:hidden;
  }

  .desktop-phone-shell{
    width:var(--phone-w);
    margin:0 auto;
    padding:var(--shell-pad) 0;

    transform:translateZ(0) scale(var(--desktop-scale));
    transform-origin:top center;
  }

  .app{
  width:var(--phone-w);
  height:calc(100dvh - (var(--shell-pad) * 2));
  min-height:0;
  max-height:var(--phone-h);
  margin:0;
  border-radius:18px;
  overflow:hidden;

  box-shadow:
    0 20px 60px rgba(0,0,0,.14),
    0 2px 10px rgba(0,0,0,.06);
}

/* narrow desktop window still behaves like desktop */
@media (hover:hover) and (pointer:fine) and (max-width:699px){

  html,
  body{
    background:#dfe6ef;
    overflow-y:hidden;
  }

  body.desktop-shell-page .desktop-phone-shell{
    width:var(--phone-w);
    margin:0 auto;
    padding:var(--shell-pad) 0;

    transform:translateZ(0) scale(var(--desktop-scale));
    transform-origin:top center;
  }

  body.desktop-shell-page .app{
    width:var(--phone-w);

    height:calc(
      (100dvh - (var(--shell-pad) * 2))
      / var(--desktop-scale)
    );

    min-height:0;
    max-height:var(--phone-h);

    margin:0;

    border-radius:18px;
    overflow:hidden;

    box-shadow:
      0 20px 60px rgba(0,0,0,.14),
      0 2px 10px rgba(0,0,0,.06);
  }
}