/* Astrolinia Engine — user-supplied celestial cloudscape + zodiac mandala.
   The scene is only decorative. Live computations stay in Engine modules.
   The lower ~third of the working canvas remains open for future panels.
   The circle starts 10px below the top and occupies 2/3 of the work area. */
.ae-app--overview .ae-shell__body,
.ae-app--overview .ae-content{background-color:#fff}
.ae-app--overview .ae-main{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#fff;
  background-image:
    linear-gradient(100deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.19) 47%,rgba(255,255,255,.18) 100%),
    url("../img/engine-user-pastel-clouds.e6136c5ff9b5.webp");
  background-position:center center,center center;
  background-repeat:no-repeat,no-repeat;
  background-size:100% 100%,cover;
}
.ae-app--overview .ae-dash__intro{
  position:relative;
  z-index:3;
  isolation:isolate;
  pointer-events:none;
}
.ae-app--overview .ae-cosmic-stage{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:10px;
  bottom:auto;
  height:61%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  overflow:visible;
  pointer-events:none;
}
.ae-app--overview .ae-cosmic-stage__wheel{
  display:block;
  flex:0 1 auto;
  height:100%;
  width:auto;
  max-height:100%;
  max-width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  /* Optical 20% enlargement keeping the artwork's top edge 10px from the canvas.
     The stage remains 2/3 high; its overflow allows larger artwork while
     the next layout step can position real bottom cards independently. */
  transform:scale(1);
  transform-origin:center top;
  filter:drop-shadow(0 12px 25px rgba(89,31,82,.18));
  user-select:none;
}
@media(max-width:1059px){
  .ae-app--overview .ae-main{
    background-position:center center,center center;
    background-size:100% 100%,cover;
    overflow-y:auto;
  }
  .ae-app--overview .ae-cosmic-stage{
    position:relative;
    top:auto;bottom:auto;left:auto;right:auto;
    width:100%;
    height:min(52dvh,520px);
    max-height:520px;
    margin:clamp(14px,3dvh,27px) auto min(24dvh,180px);
  }
  .ae-app--overview .ae-cosmic-stage__wheel{
    max-width:100%;
    width:auto;
    height:100%;
  }
}
/* Keep the same top offset and height on compact desktop windows,
   including when the browser is docked to half a monitor. */
@media(min-width:701px) and (max-width:1059px){
  .ae-app--overview .ae-main{overflow:hidden}
  .ae-app--overview .ae-cosmic-stage{
    position:absolute;
    top:10px;
    bottom:auto;
    left:0;
    right:0;
    width:100%;
    height:61%;
    max-height:none;
    margin:0;
  }
}
/* Phone screens cannot display a 120%-zoomed circle without clipping.
   Keep the original mobile scale; half-window desktop widths still get 120%. */
@media(max-width:700px){
  .ae-app--overview .ae-cosmic-stage__wheel{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .ae-app--overview .ae-cosmic-stage__wheel{animation:none}
}