/* V42 mobile-landscape optimization: avoid letterboxed desktop composition and remove overlap. */
@media (max-width: 950px) and (orientation: landscape){
  .shell{height:100dvh!important;min-height:0!important}
  #shell .scene{grid-template-columns:minmax(0,38%) minmax(0,1fr)!important;align-items:stretch!important;padding:44px 4vw calc(52px + env(safe-area-inset-bottom,0px))!important;gap:2.2vw!important;overflow:hidden!important}
  #shell .scene .copy{max-width:none!important;max-height:calc(100dvh - 104px)!important;overflow:auto!important;padding-right:8px!important;align-self:start!important}
  #shell .scene .copy h1{font-size:clamp(26px,5.4vh,42px)!important;line-height:1.1!important;margin:8px 0 10px!important}
  #shell .scene .copy h1 em{margin-top:4px!important}
  #shell .scene .copy p{font-size:clamp(11px,1.95vh,14px)!important;line-height:1.62!important;max-width:none!important}
  #shell .scene .learning{margin-top:10px!important;padding-top:8px!important;font-size:10px!important;line-height:1.48!important;gap:8px!important;max-width:none!important}
  #shell .scene .visual{height:calc(100dvh - 102px)!important;min-height:0!important;overflow:hidden!important;align-self:stretch!important}
  #shell .scene .art{height:100%!important;width:100%!important}
  #shell .brand{left:4vw!important;top:10px!important}
  #shell .topright{right:4vw!important;top:12px!important}
  #shell .chapter{display:none!important}
  #shell .bottomnav{inset:auto 4vw calc(8px + env(safe-area-inset-bottom,0px))!important;gap:12px!important;min-height:40px!important}
  #shell .bottomnav .bookmark-nav{min-height:36px!important;font-size:11px!important}
  #shell .bottomnav .bookmark-nav span{font-size:9px!important}
  #shell .bottomnav .chapter-dial{width:38px!important;height:38px!important}
  #shell .bottomnav .dial-number{font-size:14px!important}
  #shell .floral-chapter-nav,#shell .mx28-floral-nav{display:none!important}

  /* Intro / chapter transition pages: center them rather than leaving a tiny object in a large empty field. */
  #shell .scene[data-id="0"],#shell .scene[data-id="24"]{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) auto!important;justify-items:center!important;align-items:center!important;text-align:center!important;padding:38px 6vw calc(58px + env(safe-area-inset-bottom,0px))!important}
  #shell .scene[data-id="0"] .copy,#shell .scene[data-id="24"] .copy{max-width:78vw!important;max-height:none!important;overflow:visible!important;padding-right:0!important;text-align:center!important}
  #shell .scene[data-id="0"] .copy p,#shell .scene[data-id="24"] .copy p{margin-left:auto!important;margin-right:auto!important;max-width:58ch!important}
  #shell .scene[data-id="0"] .visual,#shell .scene[data-id="24"] .visual{height:48dvh!important;min-height:180px!important;max-height:58dvh!important}
  #shell .scene[data-id="0"] .halo,#shell .scene[data-id="24"] .halo{width:min(54vw,280px)!important}
  #shell .scene[data-id="0"] .bigglyph,#shell .scene[data-id="24"] .bigglyph{font-size:clamp(96px,17vw,182px)!important}

  /* Tower page: remove auxiliary overlays and reserve the right side for the model. */
  #shell .scene[data-id="13"]{grid-template-columns:minmax(0,34%) minmax(0,1fr)!important;padding:44px 3.4vw calc(58px + env(safe-area-inset-bottom,0px))!important;gap:2vw!important}
  #shell .scene[data-id="13"] .copy{max-height:none!important}
  #shell .scene[data-id="13"] .copy p{font-size:11px!important;line-height:1.58!important}
  #shell .scene[data-id="13"] .visual{height:calc(100dvh - 102px)!important}
  #shell .scene[data-id="13"] .bookmark-nav,
  #shell .scene[data-id="13"] .tower-credit,
  #shell .scene[data-id="13"] .v7-tower-levels,
  #shell .scene[data-id="13"] .v7-tower-insight,
  #shell .scene[data-id="13"] .cinema-prompt{display:none!important}
  #shell .scene[data-id="13"] .tower-mode{top:12px!important;right:12px!important;font-size:10px!important;padding:6px 8px!important}
  #shell .scene[data-id="13"] .tower-topnote{top:14px!important;right:88px!important;font-size:10px!important}
  #shell .scene[data-id="13"] .tower-controls{left:10px!important;right:10px!important;bottom:10px!important;padding:8px 9px!important;gap:6px!important;flex-wrap:nowrap!important}
  #shell .scene[data-id="13"] .tower-controls button{font-size:10px!important;padding:7px 8px!important}
  #shell .scene[data-id="13"] .tower-controls .zoomlabel{font-size:10px!important;min-width:32px!important}

  /* Canal page: stack content cleanly inside the exhibit and hide continuation bookmark card. */
  #shell .scene[data-id="14"]{grid-template-columns:minmax(0,35%) minmax(0,1fr)!important;padding:44px 3.2vw calc(58px + env(safe-area-inset-bottom,0px))!important;gap:2vw!important}
  #shell .scene[data-id="14"] .copy p{font-size:11px!important;line-height:1.55!important}
  #shell .scene[data-id="14"] .visual{height:calc(100dvh - 102px)!important}
  #shell .scene[data-id="14"] .bookmark-nav{display:none!important}
  #shell .scene[data-id="14"] .canal-exhibit{grid-template-rows:minmax(0,1fr) auto!important}
  #shell .scene[data-id="14"] .canal-tag{padding:4px 8px!important;font-size:9px!important}
  #shell .scene[data-id="14"] .canal-control{padding:8px 10px 10px!important}
  #shell .scene[data-id="14"] .canal-current{flex-wrap:wrap!important;align-items:flex-start!important;gap:4px 8px!important;min-height:0!important;margin-bottom:6px!important}
  #shell .scene[data-id="14"] .canal-current .stepno{font-size:9px!important}
  #shell .scene[data-id="14"] .canal-current strong{font-size:12px!important;white-space:normal!important}
  #shell .scene[data-id="14"] .canal-current span:last-child{flex-basis:100%!important;font-size:10px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  #shell .scene[data-id="14"] .canal-level{margin-left:0!important}
  #shell .scene[data-id="14"] .canal-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  #shell .scene[data-id="14"] .canal-step{padding:6px 7px!important;align-items:flex-start!important}
  #shell .scene[data-id="14"] .canal-step i{flex-basis:18px!important;height:18px!important;font-size:9px!important}
  #shell .scene[data-id="14"] .canal-step span{white-space:normal!important;line-height:1.3!important;font-size:10px!important}
  #shell .scene[data-id="14"] .canal-actions{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto!important;gap:6px!important;align-items:center!important}
  #shell .scene[data-id="14"] .canal-actions button{padding:6px 8px!important;font-size:10px!important}
  #shell .scene[data-id="14"] .canal-seek{min-width:0!important}

  /* Immersive model pages such as oil/terrain: keep object and text in two clear lanes. */
  #shell .mx20-immersive{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;grid-template-rows:auto auto auto auto!important;align-content:start!important;gap:8px 14px!important;overflow-x:hidden!important;overflow-y:auto!important;padding:42px 14px calc(18px + env(safe-area-inset-bottom,0px))!important}
  #shell .mx20-immersive .mx20-heading{position:relative!important;grid-column:1/-1!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:none!important}
  #shell .mx20-immersive .mx20-heading h1{font-size:clamp(24px,4vh,36px)!important;line-height:1.14!important;margin:2px 0 5px!important}
  #shell .mx20-immersive .mx20-heading p{font-size:12px!important;line-height:1.46!important;max-width:none!important}
  #shell .mx20-immersive .mx20-model{position:relative!important;grid-column:1!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;height:31vh!important;min-height:118px!important;max-height:205px!important;margin:0!important}
  #shell .mx20-immersive .mx20-notes{position:relative!important;grid-column:2!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;padding:4px 0!important}
  #shell .mx20-immersive .mx20-notes h2{font-size:18px!important;line-height:1.3!important;margin:0 0 4px!important}
  #shell .mx20-immersive .mx20-notes p{font-size:11px!important;line-height:1.45!important}
  #shell .mx20-immersive .mx20-timeline{position:relative!important;grid-column:1/-1!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;display:flex!important;flex-direction:column!important;gap:6px!important;margin:0!important}
  #shell .mx20-immersive .mx20-track{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;padding-top:6px!important}
  #shell .mx20-immersive.ink .mx20-track{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}

@media (max-width: 950px) and (orientation: landscape) and (max-height: 430px){
  #shell .scene{padding-top:40px!important;padding-bottom:calc(46px + env(safe-area-inset-bottom,0px))!important}
  #shell .scene .copy h1{font-size:clamp(23px,5.2vh,34px)!important}
  #shell .scene .copy p{font-size:10px!important;line-height:1.5!important}
  #shell .scene .learning{font-size:9px!important;margin-top:7px!important}
  #shell .scene .visual{height:calc(100dvh - 92px)!important}
  #shell .scene[data-id="13"] .tower-controls button,
  #shell .scene[data-id="14"] .canal-actions button{font-size:9px!important;padding:5px 7px!important}
  #shell .scene[data-id="14"] .canal-current strong{font-size:11px!important}
  #shell .scene[data-id="14"] .canal-step span{font-size:9px!important}
}