.public-demo [data-public-demo-hidden],
.public-demo #root aside[aria-label="Design conversations"] { display: none !important; }
.public-demo [data-public-demo-disabled] { cursor: not-allowed !important; opacity: .4; }
.public-demo-notice,
.public-demo-reopen {
  position: fixed;
  top: 66px;
  right: 16px;
  z-index: 30;
  color: #e9e9e3;
  border: 1px solid #4b4b44;
  background: #121310;
  font: 16px/1.5 "Fragment Mono", monospace;
}
.public-demo-notice {
  width: min(350px, calc(100vw - 32px));
  padding: 14px 46px 14px 16px;
  box-shadow: 0 8px 28px #0005;
}
.public-demo-notice strong { font-size: 16px; font-weight: 500; color: #ff5b18; }
.public-demo-notice p {
  margin: 7px 0 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-wrap: pretty;
  color: #cccec5;
}
.public-demo-dismiss {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 40px;
  height: 40px;
  border: 0;
  color: #d2d4c9;
  background: transparent;
  font: 24px/1 monospace;
  cursor: pointer;
}
.public-demo-reopen { padding: 8px 12px; cursor: pointer; }
.public-demo-notice[hidden],
.public-demo-reopen[hidden] { display: none; }
.public-demo-notice button:focus-visible,
.public-demo-reopen:focus-visible { outline: 2px solid #ff5b18; outline-offset: 3px; }
@media (max-width: 760px) {
  .public-demo .studio-shell,
  .public-demo .studio-space { min-width: 0 !important; }
  .public-demo .studio-header { gap: 12px; padding-inline: 12px; }
  .public-demo .studio-project { display: none; }
  .public-demo .studio-actions { margin-left: auto; }
  .public-demo .canvas-controls { max-width: calc(100vw - 24px); overflow-x: auto; }
  .public-demo .canvas-controls > * { flex-shrink: 0; }
  .public-demo-notice,
  .public-demo-reopen { top: 112px; right: 12px; }
}

.public-demo:has(.ui-popover[data-state="open"]) .public-demo-notice,
.public-demo:has(.ui-popover[data-state="open"]) .public-demo-reopen { visibility: hidden; }