#demo-header {
  position: fixed;
  z-index: 7;
  top: max(22px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  right: max(24px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: 500 12px -apple-system, system-ui, sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 1px 4px #0009;
}

#demo-header[hidden] { display: none; }
#demo-header a { color: #f5f5f7; text-decoration: none; }
#demo-title { color: #d0d0d3; letter-spacing: 0; }

.viewer-promo {
  position: fixed;
  z-index: 8;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(420px, calc(100vw - 80px));
  padding: 16px;
  border: 1px solid #ffffff24;
  border-radius: 18px;
  background: #1b1b1ef2;
  color: #f5f5f7;
  box-shadow: 0 8px 32px #0004;
  font: 14px -apple-system, system-ui, sans-serif;
}

.viewer-promo-copy { flex: 1; }
.viewer-promo-brand {
  display: block;
  margin-bottom: 9px;
  color: #b8b8bc;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.viewer-promo-cta {
  display: block;
  color: #ffb340;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}
.viewer-promo-cta:hover { color: #ffcd81; }
.viewer-promo-note { display: block; margin-top: 7px; color: #d0d0d3; font-size: 12px; }
.viewer-promo-qr { flex: 0 0 135px; text-align: center; text-decoration: none; color: #d0d0d3; }
.viewer-promo-qr img { display: block; width: 135px; height: 135px; background: #fff; border-radius: 12px; }
.viewer-promo-qr span { display: block; margin-top: 8px; font-size: 12px; }
.viewer-promo a:focus-visible, #demo-header a:focus-visible, .view-nav:focus-visible, .store-link:focus-visible {
  outline: 3px solid #ffb340;
  outline-offset: 5px;
  border-radius: 4px;
}
.viewer-noscript {
  position: fixed;
  z-index: 10;
  top: 25%;
  left: 20px;
  right: 20px;
  text-align: center;
}
.is-embedded .viewer-promo, .is-embedded #demo-header { display: none !important; }

/* Leave the view-navigation arrows clear in short desktop windows. */
@media (max-height: 540px) {
  .viewer-promo-qr { display: none; }
}

@media (max-width: 700px), (pointer: coarse) and (max-width: 1100px) {
  .viewer-promo {
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-width: 420px;
    margin: 0 auto;
    padding: 12px 16px;
  }
  .viewer-promo-brand { margin-bottom: 6px; }
  .viewer-promo-cta { font-size: 15px; }
  .viewer-promo-note { margin-top: 5px; font-size: 11px; }
  .viewer-promo-qr { display: none; }
  #demo-header { left: 20px; right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #canvas, #loader, #loader-fill { transition: none !important; }
}