.motion_durationGrid__szH2b{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--spacing-p-s);gap:var(--spacing-p-s);width:100%}.motion_easingSample__PoSjW,.motion_recipeSample__3OLvo{position:relative;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--border-neutral-primary);border-radius:var(--shape-md);background:var(--background-neutral-primary);-webkit-user-select:none;-moz-user-select:none;user-select:none}.motion_recipeSample__3OLvo{aspect-ratio:1.35}.motion_recipeBody__vXa0X{margin:0}.motion_recipeBody__vXa0X,.motion_recipeVars__yqo_t{font-size:var(--text-body-xs);line-height:var(--leading-body-xs);color:var(--text-neutral-quaternary)}.motion_recipeVars__yqo_t{margin:2px 0 0;font-weight:var(--font-weight-regular);white-space:pre-line}.motion_surfaceTrigger__j9NDg{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;border:0;background:rgba(0,0,0,0);color:var(--text-neutral-placeholder);font-family:var(--font-family-main);font-size:var(--text-body-lg);line-height:var(--leading-body-lg);font-weight:var(--font-weight-regular);cursor:pointer}.motion_surfaceTrigger__j9NDg:disabled{cursor:default}.motion_surfaceTrigger__j9NDg:focus-visible{outline:2px solid var(--border-focused-primary);outline-offset:4px;border-radius:var(--shape-sm)}.motion_surfacePanel__YwdIh{position:absolute;inset:0;z-index:1;width:min(72%,168px);display:flex;flex-direction:column;gap:-2px;height:-moz-fit-content;height:fit-content;margin:auto;padding:10px 12px;border:1px solid var(--border-neutral-primary);border-radius:var(--shape-md);background:var(--background-neutral-primary);box-shadow:var(--shadow-md);text-align:start;pointer-events:none}.motion_surfacePanelTitle__4z70c{margin:0;font-size:var(--text-body-xs);line-height:var(--leading-body-xs);font-weight:var(--font-weight-semi-bold);color:var(--text-neutral-primary)}.motion_surfacePanelBody__PaX9B{margin:2px 0 0;font-size:var(--text-body-xxs);line-height:var(--leading-body-xxs);color:var(--text-neutral-secondary)}.motion_jumboToggle__picp5{transform:scale(2.2);transform-origin:center}.motion_durationSample__qIYMv{--duration-handle:30px;--duration-inset:4px;position:relative;width:100%;height:calc(var(--duration-handle) + var(--duration-inset)*2 + 2px);box-sizing:border-box;overflow:hidden;border:1px solid var(--border-neutral-primary);border-radius:var(--shape-round);background:var(--background-neutral-primary);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.motion_durationSample__qIYMv:focus-visible{outline:2px solid var(--border-focused-primary);outline-offset:2px}.motion_motionDot__5AhG0{position:absolute;top:var(--duration-inset);left:var(--duration-inset);width:var(--duration-handle);height:var(--duration-handle);border-radius:var(--shape-round);background:var(--background-brand-primary);transition:left var(--demo-duration) var(--easing-standard)}.motion_durationSample__qIYMv:focus-within .motion_motionDot__5AhG0,.motion_durationSample__qIYMv:hover .motion_motionDot__5AhG0{left:calc(100% - var(--duration-handle) - var(--duration-inset))}.motion_springSample__L51gT{--spring-handle:30px;--spring-inset:4px;position:relative;width:100%;height:calc(var(--spring-handle) + var(--spring-inset)*2 + 2px);margin:0;padding:0;box-sizing:border-box;overflow:hidden;border:1px solid var(--border-neutral-primary);border-radius:var(--shape-round);background:var(--background-neutral-primary);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:inherit;color:inherit}.motion_springSample__L51gT:focus-visible{outline:2px solid var(--border-focused-primary);outline-offset:2px}.motion_springThumb__tba5s{position:absolute;top:var(--spring-inset);left:var(--spring-inset);width:var(--spring-handle);height:var(--spring-handle);border-radius:var(--shape-round);background:var(--background-brand-primary)}.motion_springHint__a98AN{position:absolute;inset:0;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;pointer-events:none;color:var(--text-neutral-placeholder);font-family:var(--font-family-main);font-size:var(--text-body-xs);line-height:var(--leading-body-xs);font-weight:var(--font-weight-regular)}.motion_easingSample__PoSjW{height:134px;padding:12px 14px;box-sizing:border-box;cursor:pointer}.motion_easingSample__PoSjW:focus-visible{outline:2px solid var(--border-focused-primary);outline-offset:2px}.motion_easingSvg__v1hV_{width:100%;height:100%;overflow:visible}.motion_easingGuide__QftjZ{stroke:var(--border-neutral-primary);stroke-width:1.25;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.motion_easingCurve__qheWy{fill:none;stroke:var(--border-brand-primary);stroke-width:2.25;stroke-linecap:round;vector-effect:non-scaling-stroke}.motion_easingEndpoint__7Q66v{fill:var(--background-brand-primary)}.motion_easingTraveler__6ND0j{fill:var(--background-neutral-primary-inverse);opacity:0;transition:opacity var(--duration-short) var(--easing-standard)}.motion_easingSample__PoSjW:focus-visible .motion_easingTraveler__6ND0j,.motion_easingSample__PoSjW:hover .motion_easingTraveler__6ND0j{opacity:1}.motion_scaleSample__xEdAU{position:relative;width:100%;height:134px;display:flex;align-items:stretch;justify-content:stretch;box-sizing:border-box;margin:0;padding:20px;overflow:hidden;border:1px solid var(--border-neutral-primary);border-radius:var(--shape-md);background:var(--background-neutral-primary);font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.motion_scaleSample__xEdAU:focus-visible{outline:2px solid var(--border-focused-primary);outline-offset:2px}.motion_scaleStage__bs_U7{position:relative;flex:1 1 auto;min-width:0;min-height:0}.motion_scaleGhost__mtu3E{position:absolute;inset:0;border:.5px dashed var(--border-neutral-secondary);background:var(--background-brand-light);border-radius:9px}.motion_scaleShape__uF9_C{position:relative;width:100%;height:100%;border-radius:var(--shape-md);background:var(--background-brand-primary);transform:scale(1);transition:transform var(--duration-short) var(--easing-out)}.motion_scaleSample__xEdAU:focus-within .motion_scaleShape__uF9_C,.motion_scaleSample__xEdAU:hover .motion_scaleShape__uF9_C{transform:scale(var(--demo-scale))}.motion_primitivePanel__z_8R3{min-height:204px}@media(prefers-reduced-motion:reduce){.motion_motionDot__5AhG0{transition-duration:0s}.motion_scaleShape__uF9_C{transition:none}}@media(max-width:680px){.motion_recipeGrid__Y4yBg{flex-wrap:wrap}.motion_recipeItem__rAHDt{flex:1 1 100%}}