.aav{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:3/4;
     touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;
     user-select:none;-webkit-user-select:none}
.aav.is-drag{cursor:grabbing}
.aav__cv{display:block;width:100%;height:100%}
.aav__bar{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);width:74px;height:2px;
          border-radius:2px;background:rgba(0,0,0,.10);overflow:hidden;transition:opacity .45s ease}
.aav__bar i{display:block;height:100%;width:0%;background:currentColor;opacity:.55;
            transition:width .2s linear}
.aav.is-ready .aav__bar{opacity:0}
.aav__hint{position:absolute;left:50%;bottom:3.5%;transform:translateX(-50%);display:flex;
           align-items:center;gap:7px;white-space:nowrap;opacity:0;pointer-events:none;
           font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:.10em;text-transform:uppercase;
           mix-blend-mode:multiply;transition:opacity .5s ease}
.aav.is-ready .aav__hint{opacity:.38}
.aav.is-touched .aav__hint{opacity:0}

/* ---- placement inside the theme hero (right-hand space) ---- */
.aa-hero{position:relative}
.aa-hero .aa-hero-vial{
  position:absolute;z-index:2;
  right:clamp(24px,5vw,220px);
  top:50%;transform:translateY(-50%);
  width:clamp(260px,26vw,560px);
  margin:0;
}
.aa-hero .aa-hero-vial .aav{max-width:100%!important;margin:0!important}
@media (max-width:900px){
  .aa-hero .aa-hero-vial{
    position:static;transform:none;
    width:min(78vw,400px);margin:36px auto 0;
  }
}