/* Central contract for every full-page Playground animation. Not index previews. */
html[data-playground="true"] { --playground-header-height: 80px; }
@media (max-width: 1199px) {
 html[data-playground="true"] { --playground-header-height: 64px; }
}
body[data-playground-demo] .playground-stage {
 position: fixed; inset: var(--playground-header-height) 0 0;
 width: 100%; height: calc(100dvh - var(--playground-header-height));
 margin: 0; padding: 0; z-index: 4; overflow: hidden;
}
/* Keep the drawing area at the top on tall screens, rather than centring it
   in the full viewport. The artwork never adds document space. */
body[data-playground-demo] .playground-stage:not(.murmuration) > canvas,
body[data-playground-demo] .playground-stage > .xray-stage {
 position: absolute; top: 0; height: min(100vw, 100%);
}
body[data-playground-demo] .playground-stage > .xray-stage { background: transparent; }
body[data-playground-demo] .content-006 { isolation: auto; }
body[data-playground-demo] .demos-index,
body[data-playground-demo] .demos-index * { pointer-events: none; }
body[data-playground-demo] .demos-index a { pointer-events: auto; }
body[data-playground-demo] .demos-list { position: relative; z-index: 5; }
body[data-playground-demo] .demos-list a { width: fit-content; max-width: 100%; }

@media (max-width: 1199px) {
 /* Retain the Globe's requested mobile enlargement, anchored to the same top. */
 body[data-playground-demo] .playground-stage.globe > canvas { height: min(125vw, 125%); }
}

@media (max-width: 809px) {
 /* Phone only: 90% of the former 125% drawing surface, centred below header. */
 body[data-playground-demo] .playground-stage.globe > canvas {
  width: 112.5%; left: -6.25%; height: min(112.5vw, 112.5%);
 }
}