.language-toggle { justify-self: end; grid-column: 3; padding: 5px 8px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 10px; letter-spacing: .10em; }
.motion-nav nav { display: flex; align-items: center; gap: 13px; }
.motion-nav .language-toggle { padding: 5px 7px; }
.arrow-icon, .chevron-icon { display: inline-block; flex: none; vertical-align: middle; }
.arrow-icon { position: relative; width: 15px; height: 10px; color: inherit; }
.arrow-icon::before, .arrow-icon::after { content: ''; position: absolute; }
.arrow-icon::before { top: 50%; inset-inline: 0 1px; border-top: 1px solid currentColor; }
.arrow-icon::after { width: 6px; height: 6px; top: 50%; right: 1px; border-top: 1px solid; border-right: 1px solid; transform: translateY(-50%) rotate(45deg); }
.arrow-diagonal { transform: rotate(-45deg); }
.arrow-up { transform: rotate(-90deg); }
.chevron-icon { width: 8px; height: 8px; border-right: 1.5px solid; border-top: 1.5px solid; transform: rotate(45deg); }
.chevron-prev { transform: rotate(225deg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.motion-strip { padding-block: clamp(13px, 2vw, 28px); }
.motion-pin { margin: 0; display: grid; justify-items: center; }
.machine-stage { display: block; position: relative; width: min(100%, 850px); height: clamp(116px, 18vw, 226px); }
.machine-stage img, .machine-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.machine-stage img { object-fit: contain; }
.machine-stage canvas { touch-action: pan-y; cursor: grab; }
.machine-stage canvas[data-grab="part"] { cursor: ew-resize; }
.machine-stage canvas[data-grab="pad"] { cursor: pointer; }
.machine-stage canvas[data-grab="active"] { cursor: grabbing; }
.machine-stage canvas:focus-visible { outline: 1px solid currentColor; outline-offset: -3px; }