:root{
  --motion-standard:cubic-bezier(.22,1,.36,1);
  --motion-emphasized:cubic-bezier(.16,1,.3,1);
  --motion-soft:cubic-bezier(.2,.72,.22,1);
  --motion-fast:220ms;
  --motion-medium:420ms;
  --motion-slow:620ms;
}

/* Animate stable containers only. Data marks keep their dedicated motion. */
.view.interface-motion-entering,
.interface-motion-surface{
  transform-origin:50% 18%;
  backface-visibility:hidden;
  will-change:opacity,transform,filter;
}

.risk-chart-overlay{
  opacity:0;
  visibility:hidden;
  transition:opacity var(--motion-medium) var(--motion-standard),visibility var(--motion-medium) step-end;
}
.risk-chart-overlay.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity var(--motion-medium) var(--motion-standard),visibility 0s step-start;
}
.risk-chart-overlay-backdrop{
  background:rgba(43,52,68,0)!important;
  -webkit-backdrop-filter:blur(0)!important;
  backdrop-filter:blur(0)!important;
  transition:background-color 480ms var(--motion-standard),-webkit-backdrop-filter 580ms var(--motion-emphasized),backdrop-filter 580ms var(--motion-emphasized)!important;
  will-change:background-color,backdrop-filter;
}
.risk-chart-overlay.is-open .risk-chart-overlay-backdrop{
  background:rgba(43,52,68,.28)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
}
.risk-chart-overlay-panel{
  opacity:0;
  transform:translateY(22px) scale(.982)!important;
  transition:opacity 360ms var(--motion-standard),transform 580ms var(--motion-emphasized)!important;
  will-change:opacity,transform;
}
.risk-chart-overlay.is-open .risk-chart-overlay-panel{
  opacity:1;
  transform:translateY(0) scale(1)!important;
}
.risk-chart-overlay-head,
.risk-chart-overlay-content{
  opacity:0;
  transform:translateY(9px);
  transition:opacity 360ms var(--motion-soft),transform 520ms var(--motion-emphasized);
}
.risk-chart-overlay.is-open .risk-chart-overlay-head,
.risk-chart-overlay.is-open .risk-chart-overlay-content{
  opacity:1;
  transform:none;
}
.risk-chart-overlay.is-open .risk-chart-overlay-head{transition-delay:110ms}
.risk-chart-overlay.is-open .risk-chart-overlay-content{transition-delay:170ms}

@media(prefers-reduced-motion:reduce){
  :root{--motion-fast:150ms;--motion-medium:240ms;--motion-slow:320ms}
  .risk-chart-overlay-backdrop,
  .risk-chart-overlay-panel,
  .risk-chart-overlay-head,
  .risk-chart-overlay-content{transition-duration:260ms!important}
}

/* Shared outer-edge language: the large surface owns the larger radius and
   its content surfaces step down by the same fixed inset. This only changes
   the chrome around charts; chart geometry and internal layout stay intact. */
:root{
  --page-outer-radius:28px;
  --page-inner-radius:20px;
  --page-radius-inset:8px;
}
.workbench-operation{
  border-radius:var(--page-outer-radius)!important;
  box-shadow:0 18px 46px rgba(38,51,77,.09),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.workbench-operation>.wb-top{
  border-top-left-radius:var(--page-inner-radius);
  border-top-right-radius:var(--page-inner-radius);
}
#chart.visualization-studio{
  border-radius:var(--page-outer-radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.risk-chart-overlay-panel{
  border-radius:var(--page-outer-radius)!important;
}