/* Shared window geometry only. Each program keeps its own UI and theme. */
.program-demo {
  --demo-window-height: 860px;
  position: relative;
}
.program-demo > .win-chrome { height: 34px; }
.program-demo > .win-body { height: var(--demo-window-height); min-height: 0; }
.program-demo .demo-expand {
  display: grid;
  place-items: center;
  color: var(--surface-600);
  font: 14px Arial, sans-serif;
  cursor: pointer;
}
.program-demo .demo-expand:hover { background: var(--surface-200); }
.program-demo .demo-expand:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -3px; }
@media (min-width: 901px) {
  .program-demo:not(.is-expanded) {
    width: min(1560px, calc(100vw - 64px));
    max-width: none;
    margin-left: calc(50% - min(780px, calc(50vw - 32px)));
    margin-right: 0;
  }
}
.program-demo.is-expanded {
  position: fixed;
  inset: 16px;
  width: auto;
  max-width: none;
  margin: 0;
  z-index: 1000;
  box-shadow: 0 0 0 100vmax rgba(10, 14, 26, .7);
}
.program-demo.is-expanded > .win-body { height: calc(100% - 34px); }
/* Lift the wrapper's stacking context too, so the website navigation cannot
   cover the shared window controls while the preview is enlarged. */
.hero-demo-wrap:has(.program-demo.is-expanded),
.mp-demo:has(.program-demo.is-expanded) { z-index: 1000; }
/* Constrain the existing KP views and converter to the common window.
   Scrolling belongs to the content, never to a taller auto-sized window. */
.program-demo.mp-win > .win-body { height: var(--demo-window-height); min-height: 0; }
.program-demo.mp-win.is-expanded > .win-body { height: calc(100% - 34px); }
.program-demo.mp-win .app-main { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.program-demo.mp-win .app-global-topbar { flex-shrink: 0; }
.program-demo.mp-win-kp .app-main > .page-view.active { flex: 1 1 0; min-height: 0; height: auto; overflow-y: auto; }
.program-demo.mp-win-cv .mp-cv-page { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
html.demo-window-open { overflow: hidden; }
.demo-window-backdrop { position: fixed; inset: 0; z-index: 999; }
.demo-window-backdrop[hidden] { display: none; }
@media (max-width: 700px) {
  .program-demo { --demo-window-height: 760px; }
  .program-demo.is-expanded { inset: 8px; }
}