/* Local, reader-controlled emphasis around the original scientific figures. */
.figure-stage{position:relative}
.figure-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.linked-region{opacity:0;transition:opacity 180ms ease-out}
.linked-region.is-active{opacity:1}
.method-overlay .linked-region{color:#557b40}
.method-overlay [data-link-region="search"]{color:#2f7fa3}
.method-overlay [data-link-region="zoom"]{color:#b77525}
.method-overlay rect{fill:currentColor;fill-opacity:.055;stroke:currentColor;stroke-width:1.7;vector-effect:non-scaling-stroke}
.method-step-trigger{padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;line-height:inherit;text-decoration:underline;text-decoration-color:#c3cfb8;text-decoration-thickness:1px;text-underline-offset:4px;transition:color 150ms,text-decoration-color 150ms}
.method-steps article{transition:border-color 180ms}
.method-steps article.is-active{border-top-color:#65834e}
.method-steps article.is-active .method-step-trigger{color:#41682b;text-decoration-color:#65834e}

/* Keep the frame and comparison positions stable while changing examples. */
.example-figure{position:relative}
.example-figure .figure-button{position:relative;aspect-ratio:1800/1066;isolation:isolate;overflow:hidden}
.example-figure .figure-button:disabled{cursor:progress}
.example-figure .figure-button>img{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.example-figure .case-previous{position:absolute;inset:0;pointer-events:none;background:#fff;z-index:1}
.example-loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:inherit;background:rgba(255,255,255,.88);color:#526647;font-size:13px;cursor:progress}
.example-loading[hidden]{display:none}
.example-loading-spinner{width:18px;height:18px;flex-shrink:0;border:2px solid #d4dec9;border-top-color:#5c7b46;border-radius:50%;animation:example-loading-spin .8s linear infinite}
@keyframes example-loading-spin{to{transform:rotate(360deg)}}
.example-controls button{transition:background-color 140ms,border-color 140ms,opacity 140ms}
.example-controls button.is-loading{opacity:1;border-color:#8ba474;border-style:dashed;background:#f3f6ee}
.example-status{font-size:12px;color:#697560;margin:9px 0 0}
.example-status:empty{display:none}
.metric-value{display:inline-block;font-variant-numeric:tabular-nums}
.segmented button{transition:background-color 150ms,color 150ms}

@media(prefers-reduced-motion:reduce){
  .linked-region,.method-step-trigger,.method-steps article,.example-controls button,.segmented button{transition:none}
  .example-loading-spinner{animation:none}
}