/* This stylesheet is scoped to the studio document inside the WordPress iframe. */
html, body { overscroll-behavior: none; }
aside, .stock-tray, .view-controls, dialog { overscroll-behavior: contain; }
body > header { position: sticky; top: 0; z-index: 20; }
.header-right { margin-left: auto; }
.fullscreen-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex-shrink: 0; min-height: 40px; padding: 10px 12px;
  border: 1px solid #9bafbb; border-radius: 8px;
  background: #f2f7f8; color: #263f4b; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.fullscreen-toggle[hidden] { display: none; }
.fullscreen-toggle:hover { border-color: #d57a0e; background: #fff5e6; }
.fullscreen-toggle[aria-pressed="true"] { background: #263f4b; border-color: #263f4b; color: #fff; }
.fullscreen-toggle svg { flex-shrink: 0; }
.fullscreen-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (min-width: 761px) {
  html { height: 100%; }
  body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body > header { flex: 0 0 76px; }
  body > main { flex: 1; height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr) 78px; }
  main > aside { min-height: 0; }
}
@media (min-width: 761px) and (max-height: 599px) {
  body { overflow-y: auto; }
  body > main { flex: 0 0 540px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .header-right #download span, .header-right #loadProject span { display: none; }
  .header-right #shot { display: none; }
  .fullscreen-toggle { padding: 9px; font-size: 12px; }
}
@media (max-width: 760px) {
  body > header { gap: 8px; }
  .brand { order: 0; }
  .fullscreen-toggle { order: 1; margin-left: auto; font-size: 12px; padding: 8px; gap: 5px; }
  .header-right { order: 2; margin-left: 0; }
  .header-right .share-launch { margin-left: auto; }
}
@media (max-width: 380px) {
  .brand img { width: 125px; }
  .fullscreen-toggle { font-size: 11px; }
}