/* One viewport, one scroll area. Keep the terminal chrome outside content scrolling. */
html.reactor-document{
  --rx-viewport-height:100vh;
  width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;
}
@supports(height:100dvh){html.reactor-document{--rx-viewport-height:100dvh}}
html.reactor-document body.reactor-body{
  position:fixed!important;inset:auto 0 auto 0!important;
  left:0!important;right:0!important;bottom:auto!important;
  top:var(--rx-viewport-top,0px)!important;
  width:100%!important;height:100%!important;height:100dvh!important;
  height:var(--rx-viewport-height,100%)!important;
  min-height:0!important;max-height:none!important;margin:0!important;
  overflow:hidden!important;overscroll-behavior:none;box-sizing:border-box;
}
body.reactor-body>.terminal-shell{
  min-height:0!important;max-height:100%;flex-shrink:1;
}
body.reactor-body .terminal-shell>#reactorContent{
  flex:1 1 0%!important;min-height:0!important;min-width:0;
  overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  touch-action:auto;scroll-behavior:auto;
}
body.reactor-body .terminal-shell>.terminal-header,
body.reactor-body .terminal-shell>.terminal-footer{flex-shrink:0!important}

@media(max-width:800px), (hover:none) and (pointer:coarse){
  html.reactor-document body.reactor-body{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;justify-content:flex-start!important;
    padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;
    background-attachment:scroll!important;
  }
  body.reactor-body>.terminal-shell{
    flex:1 1 0%!important;width:100%!important;max-width:none!important;
    height:auto!important;min-height:0!important;max-height:100%!important;
    margin:0!important;
  }
  /* Avoid continuous rerasterization of full-screen filtered layers on phones. */
  .reactor-body:before{position:absolute!important}
  .reactor-body .rx-hero>img{animation:none!important;filter:brightness(1.18) saturate(1.2)!important}
  .reactor-body .rx-rail-current{animation:none!important}
  .reactor-body .rx-brand-core{animation:none!important}
  html.rx-content-scrolling :is(.rx-core-light,.rx-energy-orbit,.rx-particles i,.rx-hero-lightning,.rx-bolt-core use,.rx-hero-conduit i,.rx-wave-spark,.rx-plasma-orb,.rx-orb-filament,.rx-plan-portrait img,.rx-stat-led,.rx-rail-electric,.rx-header-electric,.rx-start-core,.rx-start-electric,.rx-brand-text,.rx-nav-cassette.is-active,.rx-nav-led){
    animation-play-state:paused!important;
  }
  html.rx-content-scrolling .rx-plan-portrait:before,
  html.rx-content-scrolling .rx-deploy:after,
  html.rx-content-scrolling .rx-nav-cassette:after{animation-play-state:paused!important}
}