#roi .roi-grid{
  isolation:isolate;
}
#roi [data-roi-axis]{
  position:relative;
  overflow:hidden;
  outline:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease,filter .35s ease;
}
#roi [data-roi-axis]::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,#00d4e8,#65e4c4);
  box-shadow:0 0 18px rgba(0,212,232,.42);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
#roi [data-roi-axis].is-roi-pending{
  opacity:.56;
  transform:translateY(10px);
  filter:saturate(.75);
}
#roi [data-roi-axis].is-roi-active{
  opacity:1;
  transform:translateY(-6px);
  filter:none;
  border-color:rgba(0,212,232,.72);
  box-shadow:0 18px 42px rgba(0,10,20,.28),0 0 0 3px rgba(0,212,232,.07),0 0 28px rgba(0,212,232,.13);
}
#roi [data-roi-axis].is-roi-complete{
  opacity:1;
  filter:none;
  border-color:rgba(0,212,232,.38);
}
#roi [data-roi-axis].is-roi-active::before,
#roi [data-roi-axis].is-roi-complete::before{
  transform:scaleX(1);
}
#roi [data-roi-axis] .ic,
#roi [data-roi-axis] .roi-title{
  transition:transform .3s ease,color .3s ease,text-shadow .3s ease;
}
#roi [data-roi-axis].is-roi-active .ic{
  transform:scale(1.12);
}
#roi [data-roi-axis].is-roi-active .roi-title{
  color:#fff;
  text-shadow:0 0 16px rgba(0,212,232,.34);
}
#roi [data-roi-axis]:focus-visible{
  box-shadow:0 0 0 3px rgba(245,158,59,.32),0 18px 42px rgba(0,10,20,.28);
}
#roi [data-roi-outcome]{
  position:relative;
  overflow:hidden;
  opacity:.66;
  transition:opacity .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
#roi [data-roi-outcome]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 16%,rgba(245,158,59,.11) 50%,transparent 84%);
  transform:translateX(-110%);
}
#roi [data-roi-outcome].is-roi-result-active{
  opacity:1;
  transform:translateY(-2px);
  border-color:rgba(245,158,59,.62);
  box-shadow:0 18px 38px rgba(0,10,20,.22),0 0 30px rgba(245,158,59,.11);
}
#roi [data-roi-outcome].is-roi-result-active::after{
  animation:roi-result-sweep .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes roi-result-sweep{
  to{transform:translateX(110%)}
}
@media(max-width:960px){
  #roi [data-roi-axis].is-roi-pending,
  #roi [data-roi-axis].is-roi-active,
  #roi [data-roi-outcome].is-roi-result-active{transform:none}
}
@media(prefers-reduced-motion:reduce){
  #roi [data-roi-axis],
  #roi [data-roi-axis]::before,
  #roi [data-roi-axis] .ic,
  #roi [data-roi-axis] .roi-title,
  #roi [data-roi-outcome]{transition:none!important}
  #roi [data-roi-axis]{opacity:1!important;transform:none!important;filter:none!important}
  #roi [data-roi-outcome]{opacity:1!important;transform:none!important}
  #roi [data-roi-outcome]::after{animation:none!important;display:none}
}