/* The actual console stays visible behind the entry prompt. */
html:has(#demo-welcome[open]) { overflow:hidden; }
#demo-welcome {
  position:fixed;
  inset:0;
  z-index:10;
  width:100%;
  max-width:none;
  height:100vh;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:24px;
  border:0;
  background:rgb(19 22 21 / 48%);
  color:var(--ink);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
#demo-welcome[open] { display:grid; place-items:center; }
#demo-welcome::backdrop { background:transparent; }
.demo-welcome-prompt { text-align:center; }
#demo-enter {
  min-height:58px;
  padding:15px 40px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--page);
  font-size:17px;
  font-weight:500;
  text-align:center;
}
#demo-enter:hover { background:#fffdf5; border-color:#fffdf5; }
#demo-enter:focus-visible { outline-color:var(--ink); outline-offset:5px; }
#demo-limits { margin-top:16px; color:var(--muted); font-size:12px; line-height:1.6; }

/* Hide unavailable workspaces from the first paint, before deferred scripts. */
body[data-demo=true] :is(.view-navigation,.reception-bar,#workspace,#global-recording,#sources-button,.archive-bottom,#reception-notice,#recording-action-status) { display:none!important; }
body[data-demo=true] #environment { display:inline; color:var(--ink); }
body[data-demo=true] #demo-home { flex-shrink:0; }
body[data-demo=true] .app-header { border-bottom-color:var(--accent); }
.hosted-demo-notice { display:flex; align-items:center; flex-shrink:0; gap:16px; padding:10px 18px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.hosted-demo-notice p { flex:1; }
.hosted-demo-notice .button { flex-shrink:0; }
@media(max-width:760px) {
  body[data-demo=true] #demo-home { grid-column:3; grid-row:1; font-size:11px; }
  .hosted-demo-notice { padding:10px 14px; font-size:11px; }
}