/* The landing stays visible while the full-size demo prepares its first screen. */
.demo-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border: 0;
  z-index: 2147483000;
  opacity: 0;
  pointer-events: none;
  background: #faf9f6;
}
.demo-viewer.is-ready { opacity: 1; pointer-events: auto; }
html.demo-presenting, html.demo-presenting body { overflow: hidden; }
.demo-document-frame{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;border:0;z-index:2147483001;background:#faf9f6;opacity:0;pointer-events:none}
.demo-document-frame.is-ready{opacity:1;pointer-events:auto}
html.demo-document-active,html.demo-document-active body{overflow:hidden}
html.demo-opening { background: #faf9f6; }
#demo-entry-cover {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  place-content: center;
  gap: 16px;
  padding: 24px;
  margin: 0;
  background: #faf9f6;
  color: #302735;
  text-align: center;
  font: 15px/1.5 system-ui, sans-serif;
}
#demo-entry-cover strong { font: 600 40px/1.2 Georgia, serif; letter-spacing: -.04em; }
.demo-opening body > :not(#demo-entry-cover) { visibility: hidden; }
.demo-opening #demo-entry-cover { display: grid; opacity: 0; animation: demo-entry-delay 1ms step-end 180ms forwards; }
@keyframes demo-entry-delay { to { opacity: 1; } }
#demo-entry-cover p { margin: 0; }
#demo-entry-cover a { color: inherit; text-underline-offset: 4px; }
.demo-image-unavailable {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 16px;
  background: #eeeae3;
  color: #514953;
  text-align: center;
  font: 14px/1.4 system-ui, sans-serif;
}