/* Public demo chrome: a centered mobile experience on laptops, edge-to-edge on phones. */
body.presentation .design-shell { display:block; max-width:520px; padding:18px 24px 8px; }
body.presentation .design-rail, body.presentation .design-context { display:none; }
body.presentation .design-shell.catalog-open .design-rail { display:block; max-width:430px; margin:auto; }
body.presentation .design-shell.catalog-open .preview-area { display:none; }
body.presentation .design-shell.catalog-open { height:auto; overflow:visible; }
body.presentation .preview-toolbar { max-width:406px; margin-bottom:12px; gap:7px; }
body.presentation .preview-toolbar > div { flex:1; }
body.presentation .review-button { padding:9px 10px; }
body.presentation #catalog-toggle { display:block; }
body.presentation .device { height:min(844px,calc(100dvh - 116px)); min-height:0; }
body.presentation .preview-caption { margin:9px 0; }
@media(max-width:520px) {
  body.presentation .design-shell { padding:8px 0 0; }
  body.presentation .preview-toolbar { padding:0 12px; max-width:430px; margin-bottom:8px; }
  body.presentation .device { width:100%; max-width:430px; height:calc(100dvh - 93px); min-height:0; border:0; border-radius:0; box-shadow:none; }
  body.presentation .status-bar, body.presentation .home-indicator { display:none; }
  body.presentation .preview-caption { padding:0 12px; width:100%; max-width:430px; }
  body.presentation .design-rail { padding:16px; }
}

/* Quiet atmosphere around the mobile canvas; the product keeps its geometry. */
body.presentation {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 8% 6%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 48%),
    radial-gradient(ellipse at 92% 86%, color-mix(in srgb, var(--green) 7%, transparent), transparent 50%),
    var(--canvas);
  background-attachment: fixed;
}
body.presentation:before {
  content: '';
  position: fixed;
  width: min(900px, 85vw);
  height: min(760px, 80vw);
  right: -28vw;
  top: 3vh;
  z-index: -1;
  opacity: .035;
  pointer-events: none;
  background: var(--ink);
  transform: rotate(-12deg);
  -webkit-mask: var(--bridge-symbol) center / contain no-repeat;
  mask: var(--bridge-symbol) center / contain no-repeat;
}
body.presentation .device {
  border: 1px solid color-mix(in srgb, var(--ink) 17%, transparent);
  border-radius: 36px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .14), 0 0 0 7px color-mix(in srgb, var(--surface) 42%, transparent), inset 0 1px rgba(255, 255, 255, .45);
}
body.presentation .preview-toolbar .review-button {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
@media (max-width: 520px) {
  body.presentation .device {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.presentation:before { width: 100vw; height: 90vw; top: 20vh; right: -55vw; }
}
@media (prefers-reduced-motion: reduce) {
  body.presentation { background-attachment: scroll; }
}