/* A reserved row keeps controls stable while the scene changes above it. */
body.product-mechanism-page .pa-animation-controls {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 92px;
    margin: 0;
    padding: 0;
    color: #191b2b;
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: normal;
}
body.product-mechanism-page .pa-animation-track { min-width: 0; }
body.product-mechanism-page .pa-animation-seek {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    touch-action: none;
}
body.product-mechanism-page .pa-animation-seek::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right, #a50068 0 var(--pa-progress, 0%), #9a8b94 var(--pa-progress, 0%) 100%);
}
body.product-mechanism-page .pa-animation-seek::-moz-range-track { height: 5px; border-radius: 3px; background: #9a8b94; }
body.product-mechanism-page .pa-animation-seek::-moz-range-progress { height: 5px; background: #a50068; }
body.product-mechanism-page .pa-animation-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5px; border: 2px solid #fffefa; border-radius: 50%; background: #a50068; box-shadow: 0 0 0 1px #a50068; }
body.product-mechanism-page .pa-animation-seek::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fffefa; border-radius: 50%; background: #a50068; box-shadow: 0 0 0 1px #a50068; }
body.product-mechanism-page .pa-animation-actions { position: relative; height: 44px; }
body.product-mechanism-page .pa-animation-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #343142;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}
body.product-mechanism-page .pa-animation-controls button:hover { color: #a50068; background: #f7ecf2; }
body.product-mechanism-page .pa-animation-controls :is(button, input):focus-visible { outline: 2px solid #a50068; outline-offset: 2px; }
body.product-mechanism-page .pa-animation-controls .pa-animation-toggle { position: absolute; z-index: 1; top: 0; left: 0; background: #fffefa; }
body.product-mechanism-page .pa-animation-toggle[aria-pressed="true"] { border-color: #d1b7c6; color: #a50068; background: #fff6fb; }
body.product-mechanism-page .pa-animation-controls .pa-animation-replay { align-self: start; display: flex; flex-direction: column; gap: 4px; padding: 5px 3px; }
body.product-mechanism-page .pa-animation-replay i { font-style: normal; font-size: 20px; line-height: 1; vertical-align: -.07em; }
body.product-mechanism-page .pa-animation-replay small { color: #65606b; font-size: 13px; font-weight: 400; }
body.product-mechanism-page .pa-animation-time { position: absolute; top: 12px; right: 0; font-size: 13px; color: #65606b; }
body.product-mechanism-page .pa-animation-controls:has(.pa-animation-toggle[aria-pressed="true"]) .pa-animation-time { visibility: hidden; }

/* The controller owns time, preserving authored delays and keyframe geometry. */
html body.product-mechanism-page [data-product-animation] *,
html body.product-mechanism-page [data-product-animation] *::before,
html body.product-mechanism-page [data-product-animation] *::after { animation-play-state: paused !important; }
/* Keep the complete timeline reachable while a tall mechanism scrolls. */
body.product-mechanism-page .rm-dialog { scroll-padding-bottom: 108px; }
body.product-mechanism-page .rm-dialog .pa-animation-controls {
    position: sticky;
    z-index: 20;
    bottom: 0;
    margin-top: 12px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid #ded7db;
    background: #fffefa;
    box-shadow: 0 -10px 12px -12px rgba(52, 38, 76, .22);
}
body.product-mechanism-page .em-preview + .pa-animation-controls { margin-top: 8px; }