.animated-figure{background:white;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0;text-align:left}
.animated-figure .animation-scene,.animated-figure .animation-copy,.animated-figure .animation-controls,.animated-figure .animation-note{display:none}
.animated-figure.animation-ready .animation-fallback{display:none}
.animated-figure.animation-ready .animation-scene,.animated-figure.animation-ready .animation-copy,.animated-figure.animation-ready .animation-note{display:block}
.animated-figure.animation-ready .animation-controls{display:flex}
.animation-scene{width:100%;height:auto;max-height:510px;padding:18px 22px 0}
.animation-scene text{font-family:'GSBR Paper Math',math}

.animation-copy{padding:15px 28px 18px;min-height:111px;border-top:1px solid #efede8}
.animation-title{font:600 19px/1.4 var(--display);margin:0 0 7px;letter-spacing:-.35px}
.animation-description{font:400 13px/1.7 var(--sans);color:var(--muted);margin:0;max-width:940px}
.animation-controls{gap:10px;align-items:center;flex-wrap:wrap;padding:15px 22px;background:#faf9f6;border-top:1px solid var(--line)}
.animation-controls button{border:1px solid #d9d3cb;background:#fff;color:#55534e;font:500 11px var(--sans);border-radius:4px;cursor:pointer;padding:8px 11px;min-height:35px}
.animation-controls button:hover{border-color:var(--wine);color:var(--wine)}
.animation-controls button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.animation-controls button[data-play]{background:var(--wine);color:white;border-color:var(--wine);min-width:63px}
.animation-stages{display:flex;gap:5px;flex:1;justify-content:flex-end;flex-wrap:wrap}
.animation-stages button{background:transparent;border-color:transparent;padding-inline:9px}
.animation-stages button.is-current{background:#f1e8d5;color:var(--wine);border-color:#d7c397}
.animation-progress{height:2px;background:#eee9e2;width:100%;overflow:hidden}.animation-progress span{display:block;height:100%;background:var(--wine);width:0}
.animation-note{font:400 10px/1.6 var(--sans);color:#79736c;padding:9px 22px 12px;margin:0}
.animation-fallback{width:94%;margin:24px auto}
.hero .animated-figure{box-shadow:0 6px 22px #332c2110}
@media(max-width:640px){.animation-scene{padding:10px 2px 0;min-width:560px}.animation-viewport{overflow-x:auto}.animation-copy{padding:15px 17px;min-height:145px}.animation-title{font-size:16px}.animation-description{font-size:12px}.animation-controls{padding:12px;gap:7px}.animation-stages{flex-basis:100%;justify-content:flex-start}.animation-stages button{font-size:10px;padding:7px}.animation-note{padding:8px 14px 12px;font-size:9px}}

.animation-viewport:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
@media(max-width:640px){.animation-ready .animation-viewport::after{content:'Swipe to see the full figure →';display:block;position:sticky;left:0;width:100%;padding:6px 14px;font:10px var(--sans);color:var(--muted);background:#fff}}
/* Compact, faster explanations with no fine print. */
.animation-description,.animation-note{display:none!important}
.animation-copy{min-height:0;padding:18px 26px}
.animation-title{margin:0;font-size:20px}
.animation-controls button{font-size:12px}
[data-figure="1"] .animation-scene{max-height:none}
@media(max-width:640px){.animation-copy{min-height:0;padding:15px 17px}.animation-title{font-size:17px}[data-figure="1"] .animation-scene{min-width:850px}.animation-ready .animation-viewport::after{display:none}}

/* Keep the support diagram centered; the radius chart appears as a compact thought bubble. */
[data-figure="2"] .animation-scene{max-width:900px;max-height:none;margin-inline:auto}
@media(max-width:640px){[data-figure="2"] .animation-scene{min-width:600px}}

/* Explain the nearest-neighbor and quantile stages while the diagram holds. */
.method-animation-copy{min-height:170px;padding:20px 26px}
.method-animation-copy .animation-title{font-size:19px;margin:0 0 9px}
.method-animation-copy .animation-description{display:block!important;color:var(--ink);font-size:15px;line-height:1.7;max-width:940px}
.spacing-equation{font:21px/1.5 'GSBR Paper Math','GSBR Paper',serif;color:var(--wine);margin:10px 0 0;min-height:32px}
@media(max-width:640px){.method-animation-copy{min-height:235px;padding:17px}.method-animation-copy .animation-description{font-size:14px}.spacing-equation{font-size:19px}}

.spacing-equation math{font:20px/1.5 'GSBR Paper Math',math;math-style:compact}

@media(min-width:1000px) and (min-height:650px) and (max-height:950px){
 [data-figure="1"] .animation-scene{height:clamp(240px,calc(100svh - 420px),390px);width:100%;padding:10px 12px 0}
 [data-figure="1"] .animation-controls{padding:10px 16px;gap:7px}
 [data-figure="1"] .animation-controls button{min-height:30px;padding:6px 9px;font-size:11px}
}

/* Keep the explanation beside its visual target, with a text alternative for readers. */
[data-figure="2"] .method-callout text,[data-figure="2"] .method-callout-title{font-family:var(--sans)}
[data-figure="2"] .method-callout-title{font-weight:600}
[data-figure="2"] .method-animation-copy{position:absolute!important;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* All live mathematical labels use the same paper math font and size. */
[data-figure="2"] .method-math math{font-family:'GSBR Paper Math',math;font-size:18px;font-weight:400;math-style:compact}

[data-figure="2"] .variable-label math{font-size:22px;font-weight:700}