.article-page{--animation-preview-distance:240px}.article-page .animation-control-wrap{display:flex;flex-wrap:wrap;gap:var(--cf-space-200);align-items:center}.article-page .animation-control-wrap label{display:inline-flex;align-items:center;gap:var(--cf-space-200);color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300)}.article-page .animation-control-wrap input[type=range]{inline-size:120px}.article-page .animation-loop-lab,.article-page .bezier-lab,.article-page .waapi-lab{align-items:stretch}.article-page .animation-track,.article-page .bezier-preview-track,.article-page .waapi-stage{position:relative;overflow:hidden;min-block-size:76px;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-300);background:var(--cf-color-surface-sunken)}.article-page .animation-track span,.article-page .bezier-preview-track span{position:absolute;inset-block-start:28px;inset-inline-start:var(--cf-space-300);inline-size:22px;block-size:22px;border-radius:var(--cf-radius-full);background:var(--cf-color-primary);box-shadow:var(--cf-shadow-sm);will-change:transform}.article-page .animation-readout{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);margin:var(--cf-space-400) 0 0}.article-page .animation-readout div{display:flex;justify-content:space-between;gap:var(--cf-space-300);padding-block:var(--cf-space-150);-webkit-border-after:1px solid var(--cf-color-border);border-block-end:1px solid var(--cf-color-border)}.article-page .animation-readout dt{color:var(--cf-color-text-muted)}.article-page .animation-readout dd{margin:0;color:var(--cf-color-text);font-family:var(--cf-font-mono)}.article-page .bezier-chart{inline-size:100%;max-inline-size:320px;block-size:auto;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-300);background:var(--cf-color-surface-raised)}.article-page .bezier-chart path{fill:none;stroke:var(--cf-color-border-control);stroke-width:2}.article-page .bezier-chart .bezier-line{stroke:var(--cf-color-primary);stroke-width:4}.article-page .bezier-chart circle{fill:var(--cf-color-secondary)}.article-page .bezier-preview-track{margin-block:var(--cf-space-400)}.article-page .bezier-preview-track span{animation-duration:var(--cf-duration-slower);animation-fill-mode:both;animation-name:none}.article-page .bezier-preview-track span.is-previewing{animation-name:animation-bezier-preview}.article-page .bezier-sliders{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200)}.article-page .bezier-sliders label{display:grid;grid-template-columns:2rem 1fr 3rem;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);align-items:center;color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300)}.article-page .bezier-sliders output{font-family:var(--cf-font-mono);color:var(--cf-color-text)}.article-page .waapi-stage{min-block-size:112px}.article-page .waapi-card{inline-size:92px;margin:var(--cf-space-500);padding:var(--cf-space-300) var(--cf-space-400);border:1px solid var(--cf-color-primary-border);border-radius:var(--cf-radius-300);background:var(--cf-color-primary-subtle);color:var(--cf-color-text);font-weight:var(--cf-font-weight-semibold);text-align:center;will-change:transform,opacity}@keyframes animation-bezier-preview{0%{transform:translateX(0)}to{transform:translateX(var(--animation-preview-distance))}}