/* Demo-only viewport exit. The link is not adjacent to .demo-app in the DOM,
 * so target the actual top-level anchor rather than a sibling relationship. */
body > a.back-to-site-cottage {
  position: fixed;
  z-index: 1000;
  top: auto;
  left: auto;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
width: clamp(90px, 8vw, 115px);
  max-height: none;
  transform: none;
}

body > a.back-to-site-cottage img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  body > a.back-to-site-cottage {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 64px;
  }
}

@media (min-width: 701px) {
  /* Split the difference between the crowded original and the over-spaced pass. */
  .demo-app .title-logo,
  .demo-app .title-logo.small {
    width: min(1300px, 89vw);
  }

  .demo-app .home-panel {
    margin-top: -95px;
  }
}

.demo-results-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
}

.demo-results-actions a {
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}