/* Shared lightweight window frame for the homepage and Maestro demos. */
.device-stage.demo-window::before,
.device-stage.demo-window .mac-lid::before,
.device-stage.demo-window .mac-camera,
.device-stage.demo-window .mac-base,
.device-stage.demo-window .mac-address {
  display: none;
}

.device-stage.demo-window .mac-lid {
  width: 100%;
  padding: 0;
  border: 1px solid #dde1e6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(26, 34, 31, 0.06);
  overflow: hidden;
}

.device-stage.demo-window .mac-display {
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.device-stage.demo-window .mac-menubar {
  display: flex;
  height: 42px;
  padding: 0 20px;
  background: var(--demo-window-surface, #dcebf0);
  border-bottom: 0;
  box-shadow: none;
}

.device-stage.demo-window .traffic i {
  background: #ff5f57;
  box-shadow: none;
}

.device-stage.demo-window .traffic i:nth-child(2) {
  background: #febc2e;
}

.device-stage.demo-window .traffic i:nth-child(3) {
  background: #28c840;
}

.device-stage.demo-window .mac-screen {
  height: calc(100% - 42px);
}

/* Intro screens supply their own live background all the way to the top. */
.device-stage.demo-window[data-window-view='login'] .mac-menubar,
.device-stage.demo-window[data-window-view='selection'] .mac-menubar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  pointer-events: none;
  background: transparent;
}

.device-stage.demo-window[data-window-view='login'] .mac-screen,
.device-stage.demo-window[data-window-view='selection'] .mac-screen {
  height: 100%;
}

@media (max-width: 760px) {
  .device-stage.demo-window .mac-lid {
    border-radius: 14px;
  }
}