@media (max-width: 640px){
  .topbar{
    justify-content:center !important;
    padding:8px 0 6px !important;
  }
  .topbar #newChartBtn,
  .topbar #historyBtn{
    display:none !important;
  }
  .topbar .top-left{
    width:100%;
    justify-content:center !important;
    gap:0 !important;
  }
  .topbar .top-left .title{
    width:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
  }
  .topbar .brand-logo{
    height:32px !important;
    max-width:190px !important;
  }

  #natalWheelCard .wheel-shell,
  #rightWheelCard .wheel-shell,
  #biWheelCard .wheel-shell,
  #compositeWheelCard .wheel-shell{
    width:100dvw !important;
    min-width:100dvw !important;
    max-width:100dvw !important;
    overflow:visible !important;
  }

  #natalWheelCard .wheel-stage,
  #rightWheelCard .wheel-stage,
  #biWheelCard .wheel-stage,
  #compositeWheelCard .wheel-stage{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    position:relative;
    touch-action:pan-y;
    overscroll-behavior:contain;
    -webkit-user-select:none;
    user-select:none;
  }

  #natalWheelCard .wheel-stage .astro-wheel,
  #rightWheelCard .wheel-stage .astro-wheel,
  #biWheelCard .wheel-stage .astro-wheel,
  #compositeWheelCard .wheel-stage .astro-wheel{
    transform-origin:center center;
    will-change:transform;
    transition:transform .18s ease-out;
  }

  #natalWheelCard .wheel-stage.wheel-panzoom-active .astro-wheel,
  #rightWheelCard .wheel-stage.wheel-panzoom-active .astro-wheel,
  #biWheelCard .wheel-stage.wheel-panzoom-active .astro-wheel,
  #compositeWheelCard .wheel-stage.wheel-panzoom-active .astro-wheel{
    transition:none !important;
  }

  #natalWheelCard .astro-wheel > svg,
  #rightWheelCard .astro-wheel > svg,
  #biWheelCard .astro-wheel > svg,
  #compositeWheelCard .astro-wheel > svg{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
  }
}