/* Hosted-demo chrome. The packaged editor still owns #root. */
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
#root { flex: 1; min-height: 0; height: auto; }
#studio-demo-banner {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 12px 20px;
  color: #f7f6f2;
  background: #33251e;
  border-bottom: 1px solid #825439;
  font-size: 13px;
  line-height: 1.5;
}
.studio-demo-notice strong { font-weight: 650; }
.studio-demo-notice p { margin: 3px 0 0; color: #e3d2c7; }
.studio-demo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; flex-shrink: 0; }
.studio-demo-actions a { color: #f7f6f2; text-underline-offset: 3px; }
#studio-demo-banner button,
#studio-demo-tour button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #8b6f5e;
  border-radius: 6px;
  background: #f1d8c7;
  color: #281b13;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
#studio-demo-banner button:focus-visible,
#studio-demo-tour button:focus-visible,
#studio-demo-banner a:focus-visible { outline: 2px solid #f4a778; outline-offset: 3px; }
#studio-demo-tour {
  position: fixed;
  z-index: 150;
  bottom: 48px;
  right: 16px;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--studio-demo-banner-height, 100px) - 64px);
  overflow: auto;
  padding: 16px;
  border: 1px solid #ad7858;
  border-radius: 12px;
  color: #f7f6f2;
  background: #262a33;
  box-shadow: 0 8px 32px #0006;
  font-size: 14px;
  line-height: 1.5;
}
#studio-demo-tour[hidden] { display: none; }
.studio-demo-tour-header, .studio-demo-tour-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#studio-demo-progress { color: #e7bc9f; font-size: 12px; }
#studio-demo-title { margin: 10px 0 8px; font-size: 19px; line-height: 1.25; }
#studio-demo-body { margin: 0; }
.studio-demo-hint { color: #b4bac6; font-size: 12px; margin: 12px 0 16px; }
#studio-demo-tour #studio-demo-close { color: #f7f6f2; background: transparent; border: none; font-size: 22px; padding: 0 8px; }
#studio-demo-tour button:disabled { opacity: .4; cursor: default; }
.studio-demo-highlight { outline: 2px solid #efaa7e !important; outline-offset: -3px; }
/* This editor sheet is fixed to the viewport, so account for the banner. */
.stu-sheet-backdrop { top: calc(var(--studio-demo-banner-height, 100px) + 48px); }
@media (max-width: 820px) {
  #studio-demo-banner { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px 12px; font-size: 12px; }
  #studio-demo-tour { bottom: 12px; right: 12px; width: min(340px, calc(100vw - 24px)); }
}