/* Keep the approved typography scale. Size the desktop scene continuously from
   BOTH viewport axes: a 1920px-wide desktop has a 450px core and 247.5px branches.
   Divide viewport dimensions by root zoom once; never switch size at 960px high. */
:root{--page-scale:1.5;zoom:var(--page-scale);--core:min(calc(23.4375vw / var(--page-scale)),calc(48svh / var(--page-scale)),400px);--satellite:calc(var(--core) * .55)}
html,body{min-width:0;min-height:calc(100svh / var(--page-scale))}
html{overflow-x:clip}
main{min-height:calc(100svh / var(--page-scale))}
.universe{height:calc(100svh / var(--page-scale));min-height:0}
.worlds{gap:clamp(25px,calc(6.7vw / var(--page-scale)),130px)}
.core-name{font-size:clamp(calc(33px * var(--text-size-factor)),calc(4vw / var(--page-scale) * var(--text-size-factor)),calc(62px * var(--text-size-factor)))}
.world-name{font-size:clamp(13px,calc(1.2vw / var(--page-scale)),19px)}
.pulse-panel{max-height:calc(100svh / var(--page-scale) - 125px)}
@media(min-width:1141px){
  .worlds{grid-template-columns:minmax(0,1fr) var(--core) minmax(0,1fr)}
  .masthead{padding-top:24px}
  footer{bottom:18px}
}
@media(min-width:2400px){.worlds{gap:130px}.core-name{font-size:calc(62px * var(--text-size-factor))}}
@media(max-width:1140px){
  :root{--core:min(250px,calc((100vw / var(--page-scale) - 44px) * .94));--satellite:min(132px,calc((100vw / var(--page-scale) - 84px) / 2))}
  main{min-height:max(844px,calc(100svh / var(--page-scale)))}
  .universe{height:max(844px,calc(100svh / var(--page-scale)));min-height:760px}
  .core-name{font-size:calc(39px * var(--text-size-factor))}
  .world-name{font-size:12px}
  .pulse-panel{width:min(330px,calc(100vw / var(--page-scale) - 24px));max-height:calc(49svh / var(--page-scale))}
}
@media(max-width:540px){
  :root{--core:min(225px,calc((100vw / var(--page-scale) - 44px) * .94));--satellite:min(112px,calc((100vw / var(--page-scale) - 68px) / 2))}
  .worlds{gap:180px 24px}
  .core-name{font-size:calc(35px * var(--text-size-factor))}
}