/* Plenix master spec · Motion section demos (see motion-lab.js) */
.ds-motion-block{margin-block-end:var(--plx-ref-space-28px);}
.ds-motion-lead,.ds-motion-note{color:var(--plx-sys-content-muted);font-size:var(--plx-ref-font-size-12);margin-block-end:var(--plx-ref-space-12px);margin-block-start:0;max-width:var(--plx-ref-size-720px);}
.ds-motion-note{margin-block-end:0;margin-block-start:var(--plx-ref-space-12px);}
.ds-motion-bar{align-items:center;column-gap:var(--plx-ref-space-12px);display:flex;flex-wrap:wrap;margin-block-end:var(--plx-ref-space-12px);margin-block-start:var(--plx-ref-space-12px);row-gap:var(--plx-ref-space-8px);}
.ds-motion-play{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-color:var(--plx-sys-border-default);border-bottom-left-radius:var(--plx-sys-radius-detail-4px);border-bottom-right-radius:var(--plx-sys-radius-detail-4px);border-bottom-style:var(--plx-ref-border-style-solid);border-bottom-width:var(--plx-ref-border-width-1px);border-left-color:var(--plx-sys-border-default);border-left-style:var(--plx-ref-border-style-solid);border-left-width:var(--plx-ref-border-width-1px);border-right-color:var(--plx-sys-border-default);border-right-style:var(--plx-ref-border-style-solid);border-right-width:var(--plx-ref-border-width-1px);border-top-color:var(--plx-sys-border-default);border-top-left-radius:var(--plx-sys-radius-detail-4px);border-top-right-radius:var(--plx-sys-radius-detail-4px);border-top-style:var(--plx-ref-border-style-solid);border-top-width:var(--plx-ref-border-width-1px);color:var(--plx-sys-content-default);cursor:pointer;font-family:var(--plx-sys-font-label);font-size:var(--plx-ref-font-size-11);font-weight:var(--plx-ref-font-weight-medium-500);margin-inline-start:auto;padding-block-end:var(--plx-ref-space-4px);padding-block-start:var(--plx-ref-space-4px);padding-inline-end:var(--plx-ref-space-12px);padding-inline-start:var(--plx-ref-space-12px);}
.ds-motion-play:hover{background-color:var(--plx-sys-fill-neutral-hover);background-image:none;}
.ds-motion-play:focus-visible,.ds-mk-state:focus-visible,.ds-mk-lift:focus-visible{outline-color:var(--plx-sys-focus-ring-color);outline-offset:var(--plx-sys-focus-ring-offset);outline-style:var(--plx-ref-border-style-solid);outline-width:var(--plx-ref-border-width-2px);}
.ds-motion-lanes,.ds-motion-card{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-color:var(--plx-sys-border-default);border-bottom-left-radius:var(--plx-sys-radius-surface-8px);border-bottom-right-radius:var(--plx-sys-radius-surface-8px);border-bottom-style:var(--plx-ref-border-style-solid);border-bottom-width:var(--plx-ref-border-width-1px);border-left-color:var(--plx-sys-border-default);border-left-style:var(--plx-ref-border-style-solid);border-left-width:var(--plx-ref-border-width-1px);border-right-color:var(--plx-sys-border-default);border-right-style:var(--plx-ref-border-style-solid);border-right-width:var(--plx-ref-border-width-1px);border-top-color:var(--plx-sys-border-default);border-top-left-radius:var(--plx-sys-radius-surface-8px);border-top-right-radius:var(--plx-sys-radius-surface-8px);border-top-style:var(--plx-ref-border-style-solid);border-top-width:var(--plx-ref-border-width-1px);padding-block-end:var(--plx-ref-space-16px);padding-block-start:var(--plx-ref-space-16px);padding-inline-end:var(--plx-ref-space-16px);padding-inline-start:var(--plx-ref-space-16px);}
.ds-motion-lane{padding-block-end:var(--plx-ref-space-12px);padding-block-start:var(--plx-ref-space-12px);}
.ds-motion-lane + .ds-motion-lane{border-top-color:var(--plx-sys-border-subtle);border-top-style:var(--plx-ref-border-style-solid);border-top-width:var(--plx-ref-border-width-1px);}
.ds-motion-lane-head{align-items:center;column-gap:var(--plx-ref-space-12px);display:flex;flex-wrap:wrap;margin-block-end:var(--plx-ref-space-8px);row-gap:var(--plx-ref-space-4px);}
.ds-motion-name{font-family:var(--plx-sys-font-code);font-size:var(--plx-ref-font-size-12);font-weight:var(--plx-ref-font-weight-semibold-600);}
strong.ds-motion-name{font-family:var(--plx-sys-font-label);font-size:var(--plx-ref-font-size-13);}
.ds-motion-value{color:var(--plx-sys-content-muted);font-family:var(--plx-sys-font-data);font-size:var(--plx-ref-font-size-11);}
.ds-motion-used{color:var(--plx-sys-content-subtle);font-size:var(--plx-ref-font-size-11);margin-block-start:var(--plx-ref-space-8px);}
.ds-motion-track{background-color:var(--plx-sys-surface-sunken);background-image:none;border-bottom-left-radius:var(--plx-sys-radius-card-12px);border-bottom-right-radius:var(--plx-sys-radius-card-12px);border-top-left-radius:var(--plx-sys-radius-card-12px);border-top-right-radius:var(--plx-sys-radius-card-12px);height:var(--plx-ref-size-16px);position:relative;}
.ds-motion-dot{background-color:var(--plx-sys-action-primary-background);background-image:none;border-bottom-left-radius:var(--plx-ref-radius-pill);border-bottom-right-radius:var(--plx-ref-radius-pill);border-top-left-radius:var(--plx-ref-radius-pill);border-top-right-radius:var(--plx-ref-radius-pill);height:var(--plx-ref-size-16px);inset-block-start:0;inset-inline-start:0;position:absolute;transition-property:left;width:var(--plx-ref-size-16px);}
.ds-motion-dot.ds-motion-at-end{inset-inline-start:calc(100% - var(--plx-ref-size-16px));}
.ds-motion-dot-raf{background-color:var(--plx-sys-feedback-warning-solid);transition-property:none;}
.ds-motion-grid{column-gap:var(--plx-ref-space-16px);display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--plx-ref-size-280px),1fr));row-gap:var(--plx-ref-space-16px);}
.ds-motion-ref{opacity:var(--plx-ref-opacity-70);}
.ds-motion-curve{display:block;height:auto;margin-block-end:var(--plx-ref-space-12px);max-width:100%;width:100%;}
.ds-motion-anim{color:var(--plx-sys-content-muted);font-family:var(--plx-sys-font-code);font-size:var(--plx-ref-font-size-11);overflow-wrap:anywhere;}
.ds-motion-def{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-left-radius:var(--plx-sys-radius-detail-4px);border-bottom-right-radius:var(--plx-sys-radius-detail-4px);border-top-left-radius:var(--plx-sys-radius-detail-4px);border-top-right-radius:var(--plx-sys-radius-detail-4px);color:var(--plx-sys-content-muted);font-family:var(--plx-sys-font-code);font-size:var(--plx-ref-font-size-11);margin-block-end:0;margin-block-start:0;overflow-wrap:anywhere;padding-block-end:var(--plx-ref-space-8px);padding-block-start:var(--plx-ref-space-8px);padding-inline-end:var(--plx-ref-space-12px);padding-inline-start:var(--plx-ref-space-12px);white-space:pre-wrap;}
/* demo pieces */
.ds-mk-stage{align-items:center;background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-left-radius:var(--plx-sys-radius-card-6px);border-bottom-right-radius:var(--plx-sys-radius-card-6px);border-top-left-radius:var(--plx-sys-radius-card-6px);border-top-right-radius:var(--plx-sys-radius-card-6px);display:flex;height:var(--plx-ref-size-120px);justify-content:center;overflow-x:hidden;overflow-y:hidden;position:relative;}
.ds-mk-card,.ds-mk-toast,.ds-mk-lift{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-left-radius:var(--plx-sys-radius-card-6px);border-bottom-right-radius:var(--plx-sys-radius-card-6px);border-top-left-radius:var(--plx-sys-radius-card-6px);border-top-right-radius:var(--plx-sys-radius-card-6px);box-shadow:var(--plx-sys-shadow-md);font-size:var(--plx-ref-font-size-12);padding-block-end:var(--plx-ref-space-12px);padding-block-start:var(--plx-ref-space-12px);padding-inline-end:var(--plx-ref-space-16px);padding-inline-start:var(--plx-ref-space-16px);}
.ds-mk-spin{animation-name:none;border-bottom-color:var(--plx-sys-border-subtle);border-bottom-left-radius:var(--plx-ref-radius-pill);border-bottom-right-radius:var(--plx-ref-radius-pill);border-bottom-style:var(--plx-ref-border-style-solid);border-bottom-width:var(--plx-ref-border-width-3px);border-left-color:var(--plx-sys-border-subtle);border-left-style:var(--plx-ref-border-style-solid);border-left-width:var(--plx-ref-border-width-3px);border-right-color:var(--plx-sys-border-subtle);border-right-style:var(--plx-ref-border-style-solid);border-right-width:var(--plx-ref-border-width-3px);border-top-color:var(--plx-sys-focus-ring-color);border-top-left-radius:var(--plx-ref-radius-pill);border-top-right-radius:var(--plx-ref-radius-pill);border-top-style:var(--plx-ref-border-style-solid);border-top-width:var(--plx-ref-border-width-3px);height:var(--plx-ref-size-28px);width:var(--plx-ref-size-28px);}
.ds-mk-dots{column-gap:var(--plx-ref-space-8px);display:flex;}
.ds-mk-dots span{background-color:var(--plx-sys-action-primary-background);background-image:none;border-bottom-left-radius:var(--plx-ref-radius-pill);border-bottom-right-radius:var(--plx-ref-radius-pill);border-top-left-radius:var(--plx-ref-radius-pill);border-top-right-radius:var(--plx-ref-radius-pill);display:block;height:var(--plx-ref-glyph-size-10px);width:var(--plx-ref-glyph-size-10px);}
.ds-mk-skel{background-color:var(--plx-sys-surface-sunken);background-image:linear-gradient(90deg,var(--plx-sys-surface-sunken) 25%,var(--plx-sys-fill-neutral-hover) 50%,var(--plx-sys-surface-sunken) 75%);background-size:200% 100%;border-bottom-left-radius:var(--plx-sys-radius-detail-4px);border-bottom-right-radius:var(--plx-sys-radius-detail-4px);border-top-left-radius:var(--plx-sys-radius-detail-4px);border-top-right-radius:var(--plx-sys-radius-detail-4px);height:var(--plx-ref-size-16px);width:80%;}
.ds-mk-clip{align-items:center;display:flex;height:100%;justify-content:flex-end;overflow-x:hidden;overflow-y:hidden;padding-inline-end:var(--plx-ref-space-16px);width:100%;}
.ds-mk-toast{border-left-color:var(--plx-sys-feedback-success-solid);border-left-style:var(--plx-ref-border-style-solid);border-left-width:var(--plx-ref-border-width-3px);}
.ds-mk-state{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-color:var(--plx-sys-border-default);border-bottom-left-radius:var(--plx-sys-radius-detail-4px);border-bottom-right-radius:var(--plx-sys-radius-detail-4px);border-bottom-style:var(--plx-ref-border-style-solid);border-bottom-width:var(--plx-ref-border-width-1px);border-left-color:var(--plx-sys-border-default);border-left-style:var(--plx-ref-border-style-solid);border-left-width:var(--plx-ref-border-width-1px);border-right-color:var(--plx-sys-border-default);border-right-style:var(--plx-ref-border-style-solid);border-right-width:var(--plx-ref-border-width-1px);border-top-color:var(--plx-sys-border-default);border-top-left-radius:var(--plx-sys-radius-detail-4px);border-top-right-radius:var(--plx-sys-radius-detail-4px);border-top-style:var(--plx-ref-border-style-solid);border-top-width:var(--plx-ref-border-width-1px);color:var(--plx-sys-content-default);cursor:pointer;font-family:var(--plx-sys-font-label);font-size:var(--plx-ref-font-size-13);font-weight:var(--plx-ref-font-weight-semibold-600);padding-block-end:var(--plx-ref-space-8px);padding-block-start:var(--plx-ref-space-8px);padding-inline-end:var(--plx-ref-space-16px);padding-inline-start:var(--plx-ref-space-16px);transition-duration:var(--plx-ref-motion-duration-fast);transition-property:background-color,border-color,color;transition-timing-function:var(--plx-ref-motion-ease-standard);}
.ds-mk-state:hover{background-color:var(--plx-sys-action-primary-background);border-bottom-color:var(--plx-sys-focus-ring-color);border-left-color:var(--plx-sys-focus-ring-color);border-right-color:var(--plx-sys-focus-ring-color);border-top-color:var(--plx-sys-focus-ring-color);color:var(--plx-sys-content-inverse);}
.ds-mk-lift{cursor:default;transition-duration:var(--plx-ref-motion-duration-base);transition-property:box-shadow,transform;transition-timing-function:var(--plx-ref-motion-ease-standard);}
.ds-mk-lift:hover,.ds-mk-lift:focus-visible{box-shadow:var(--plx-sys-shadow-lg);transform:translateY(-3px);}
.ds-mk-menuwrap{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-block-start:var(--plx-ref-space-12px);position:relative;}
.ds-mk-menu{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-left-radius:var(--plx-sys-radius-card-6px);border-bottom-right-radius:var(--plx-sys-radius-card-6px);border-top-left-radius:var(--plx-sys-radius-card-6px);border-top-right-radius:var(--plx-sys-radius-card-6px);box-shadow:var(--plx-sys-shadow-menu);font-size:var(--plx-ref-font-size-12);margin-block-start:var(--plx-ref-space-4px);opacity:0;padding-block-end:var(--plx-ref-space-4px);padding-block-start:var(--plx-ref-space-4px);pointer-events:none;transform:translateY(-4px);transition-duration:var(--plx-ref-motion-duration-base);transition-property:opacity,transform;transition-timing-function:var(--plx-ref-motion-ease-standard);width:var(--plx-ref-size-120px);}
.ds-mk-menu div{padding-block-end:var(--plx-ref-space-4px);padding-block-start:var(--plx-ref-space-4px);padding-inline-end:var(--plx-ref-space-12px);padding-inline-start:var(--plx-ref-space-12px);}
.ds-mk-menu.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.ds-mk-list{display:flex;flex-direction:column;row-gap:var(--plx-ref-space-4px);width:60%;}
.ds-mk-list div{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-left-radius:var(--plx-sys-radius-detail-4px);border-bottom-right-radius:var(--plx-sys-radius-detail-4px);border-top-left-radius:var(--plx-sys-radius-detail-4px);border-top-right-radius:var(--plx-sys-radius-detail-4px);box-shadow:var(--plx-sys-shadow-sm);font-size:var(--plx-ref-font-size-11);padding-block-end:var(--plx-sys-space-inset-xs);padding-block-start:var(--plx-sys-space-inset-xs);padding-inline-end:var(--plx-ref-space-8px);padding-inline-start:var(--plx-ref-space-8px);}
:where(:root[data-plx-mode="dark"]) .ds-motion-lanes,:where(:root[data-plx-mode="dark"]) .ds-motion-card,:where(:root[data-plx-mode="dark"]) .ds-motion-play{background-color:var(--plx-sys-surface-default);border-bottom-color:var(--plx-sys-border-default);border-left-color:var(--plx-sys-border-default);border-right-color:var(--plx-sys-border-default);border-top-color:var(--plx-sys-border-default);color:var(--plx-sys-content-default);}
:where(:root[data-plx-mode="dark"]) .ds-motion-lead,:where(:root[data-plx-mode="dark"]) .ds-motion-note,:where(:root[data-plx-mode="dark"]) .ds-motion-value,:where(:root[data-plx-mode="dark"]) .ds-motion-used,:where(:root[data-plx-mode="dark"]) .ds-motion-anim{color:var(--plx-sys-content-muted);}
:where(:root[data-plx-mode="dark"]) .ds-motion-track,:where(:root[data-plx-mode="dark"]) .ds-mk-stage,:where(:root[data-plx-mode="dark"]) .ds-motion-def{background-color:var(--plx-sys-surface-canvas);color:var(--plx-sys-content-muted);}
:where(:root[data-plx-mode="dark"]) .ds-motion-lane + .ds-motion-lane{border-top-color:var(--plx-sys-border-default);}
/* the typing dots follow one another by the stagger delay (formerly style attributes) */
.ds-mk-dots span:nth-child(2){animation-delay:var(--plx-ref-motion-delay-stagger);}
.ds-mk-dots span:nth-child(3){animation-delay:calc(var(--plx-ref-motion-delay-stagger) * 2);}