/* The demo fills the window below the heading; the header and heading keep the site's width. */
.spooly-page .page { --page-inner: 1200px; height: 100svh; min-height: 0; max-width: none; }
@media (min-width: 1600px) { .spooly-page .page { --page-inner: 1280px; } }
.spooly-page .header, .spooly-page .lab-heading, .spooly-frame { width: 100%; max-width: var(--page-inner); margin-inline: auto; }
.spooly-page .header { flex: none; }
.laboratory { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 24px 0 26px; }
.lab-heading { flex: none; text-align: center; position: relative; margin-bottom: 44px; }
.lab-heading h1 { font-size: 30px; font-weight: 300; letter-spacing: -.045em; }
.lab-back { position: absolute; left: 0; top: 0; font-size: 22px; font-weight: 200; color: var(--muted); }
.spooly-frame { display: block; flex: 1; min-height: 520px; border: 0; background: transparent; }
@media (max-width: 620px) {
  .spooly-page .page { padding: 0 22px; }
  .laboratory { padding-top: 20px; }
}
/* Short windows scroll the page rather than squeezing the demo. */
@media (max-height: 700px) {
  .spooly-page .page { height: auto; min-height: 100svh; }
  .spooly-frame { flex: none; height: 600px; }
}