/* One URL, two presentations: device preview on desktop, native canvas on mobile. */
@media (max-width: 600px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    background: var(--paper, #fff);
  }

  body {
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  .shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    align-items: stretch;
  }

  .device {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--paper, #fff);
    box-shadow: none;
  }

  .device::before,
  .device::after {
    display: none;
  }

  .screen {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 118%;
    text-size-adjust: 118%;
    background: var(--paper, #fff);
  }
}

/* Desktop preview scales as a complete device to stay inside the browser. */
@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
  .shell.has-desktop-preview-scale,
  body.has-desktop-preview-scale {
    align-items: flex-start;
  }

  .device.desktop-preview-scaled {
    width: auto;
    max-width: none;
    height: 812px;
    max-height: none;
    transform: scale(var(--desktop-preview-scale, 1));
    transform-origin: top center;
  }

  .device.desktop-content-boosted .screen {
    width: var(--desktop-content-width, 90.9091%);
    height: var(--desktop-content-height, calc(90.9091% + 57.2727px));
    margin-top: -43px;
    padding-top: var(--desktop-content-padding-top, 39.0909px);
    padding-bottom: var(--desktop-content-padding-bottom, 18.1818px);
    transform: scale(var(--desktop-content-scale, 1.1));
    transform-origin: top left;
  }
}