/* Keep the illustration and percentage-positioned controls on one scrollable canvas.
   Native browser zoom supplies magnification; no transforms or image changes. */
body.landing-page:is(.is-treehouse,.is-coloring-room,.is-booktree,.is-crew,.is-rabbit-hole,.is-woodland-shop) {
  overflow:auto;
}
.landing-page.landing-page main > :is(.woodland-home,.treehouse-room,.coloring-room,#books,#crew.is-parade-ready,#app,#merch) {
  width:var(--scene-width,100%);
  max-width:none;
  height:var(--scene-height,100dvh);
  overflow:visible;
}
/* The parade still clips characters leaving its canvas, not the viewport. */
.landing-page :is(.woodland-stage,.treehouse-stage,.booktree-stage,.crew-stage,.rabbit-stage,.stall-stage,.craft-desk) {
  width:100%;
  height:100%;
  flex-shrink:0;
}
.landing-page :is(.woodland-stage,.treehouse-stage,.booktree-stage,.crew-stage,.rabbit-stage,.stall-stage,.craft-desk) :is(a,button,input,select,textarea):focus-visible {
  scroll-margin:16px;
}

/* Viewport-sized covers and parade content must magnify with the canvas too.
   These overrides apply only during desktop page zoom; phone pinch zoom is native. */
.scene-magnified .booktree-book {max-width:calc(8 * var(--scene-vw))}
.scene-magnified .booktree-note h2 {font-size:clamp(24px,calc(3 * var(--scene-vw)),42px)}
.scene-magnified .booktree-note p {font-size:clamp(12px,calc(1.4 * var(--scene-vw)),19px)}
.scene-magnified .crew-introduction {top:max(12%,var(--crew-heading-top,0px))}
.scene-magnified .crew-introduction h2 {display:block;font-size:clamp(15px,calc(1.7 * var(--scene-vw)),24px);margin-bottom:12px}
.scene-magnified .crew-name {font-size:clamp(36px,calc(5.5 * var(--scene-vw)),80px);margin-bottom:10px}
.scene-magnified .crew-story {font-size:clamp(16px,calc(2 * var(--scene-vw)),24px);line-height:1.4;max-width:650px}
.scene-magnified .crew-walker {width:clamp(130px,calc(24 * var(--scene-vw)),320px);bottom:22%}
.scene-magnified .crew-walker.is-flying {bottom:26%}
.scene-magnified .crew-walker[data-friend="buzz"] {width:clamp(55px,calc(10 * var(--scene-vw)),105px)}
.scene-magnified .crew-controls {position:relative;right:auto;top:auto;flex-direction:row;gap:8px;margin-top:12px}
.scene-magnified .crew-controls button {font-size:15px;padding:8px 12px}
.scene-magnified .crew-controls .crew-pause {min-width:82px}
.scene-magnified .crew-back {top:max(14px,env(safe-area-inset-top));left:18px;padding:8px 15px;font-size:clamp(14px,calc(1.5 * var(--scene-vw)),20px)}
.scene-magnified .crew-music {width:clamp(160px,calc(22 * var(--scene-vw)),300px);right:24px;bottom:max(18px,env(safe-area-inset-bottom))}
@media (orientation:portrait) {
  .scene-magnified .booktree-book {max-width:calc(15 * var(--scene-vw))}
  .scene-magnified .booktree-note h2 {font-size:clamp(24px,calc(5 * var(--scene-vw)),40px)}
  .scene-magnified .crew-introduction {left:8%;width:84%}
  .scene-magnified .crew-introduction h2 {font-size:16px;margin-bottom:8px}
  .scene-magnified .crew-name {font-size:clamp(32px,calc(8 * var(--scene-vw)),48px);margin-bottom:8px}
  .scene-magnified .crew-story {font-size:clamp(16px,calc(4 * var(--scene-vw)),22px)}
  .scene-magnified .crew-walker {width:clamp(125px,calc(48 * var(--scene-vw)),330px);bottom:23%}
  .scene-magnified .crew-walker.is-flying {bottom:26%}
  .scene-magnified .crew-walker[data-friend="buzz"] {width:clamp(55px,calc(20 * var(--scene-vw)),100px)}
  .scene-magnified .crew-back {left:12px;font-size:14px}
  .scene-magnified .crew-controls {gap:6px;margin-top:10px}
  .scene-magnified .crew-controls button {font-size:14px;padding:6px 8px}
  .scene-magnified .crew-music {width:43%;right:12px}
}