.service-motion {--motion-blue:#1685b1;position:relative}
.service-motion__svg {display:block;width:100%;height:auto;aspect-ratio:64/45;overflow:hidden}
.service-motion__caption {font:14px/1.55 var(--font-b)!important;color:#254751!important;text-align:center;min-height:3.1em;margin:0 20px 16px!important}
.service-motion__controls {border-top:1px solid #cddad2;display:flex;align-items:stretch;margin:0 20px;gap:12px}
.service-motion__controls[hidden] {display:none}
.service-motion__steps {display:flex;flex:1;min-width:0;gap:6px}
.service-motion button {appearance:none;border:0;border-radius:0;box-shadow:none;background:transparent;cursor:pointer;font:600 14px/1.4 var(--font-b);color:#3c6067;min-height:54px;padding:11px 6px;position:relative}
.service-motion__steps button {flex:1;text-align:left;display:flex;flex-direction:column;gap:3px}
.service-motion__steps button span {font:12px ui-monospace,monospace;color:#506b67}
.service-motion__steps button[aria-pressed=true] {color:#123c49;box-shadow:inset 0 2px var(--motion-blue)}
.service-motion__play {flex:0 0 68px;text-align:right!important;color:#1c687f!important}
.product-visual:has(.service-motion) .product-visual__heading {font-size:14px}
.service-motion__svg {aspect-ratio:64/38}
.service-motion button:focus-visible {outline:2px solid #1685b1;outline-offset:2px}
.motion-focus {opacity:.6;transition:opacity .24s,translate .3s;translate:0 5px}
[data-phase="0"] .motion-focus-0,[data-phase="1"] .motion-focus-1,[data-phase="2"] .motion-focus-2 {opacity:1;translate:0 -4px}
.motion-pulse {transition:cx .6s;cx:224}
[data-phase="1"] .motion-pulse {cx:370}
[data-phase="2"] .motion-pulse {cx:422}
.motion-route {stroke-dashoffset:0;transition:stroke-dashoffset .7s linear}
[data-phase="1"] .motion-route {stroke-dashoffset:-42}
[data-phase="2"] .motion-route {stroke-dashoffset:-84}
.motion-cap {translate:0 0;transition:translate .45s cubic-bezier(.45,0,.2,1)}
[data-phase="1"] .motion-cap {translate:110px -20px}
[data-phase="2"] .motion-cap {translate:0 56px}
.motion-fill {transform-box:fill-box;transform-origin:center bottom;scale:1 0;opacity:0;transition:scale .65s ease,opacity .24s}
[data-phase="1"] .motion-fill,[data-phase="2"] .motion-fill {scale:1 1;opacity:1}
.motion-powder-top,.motion-grains {opacity:0;transition:opacity .24s}
[data-phase="1"] .motion-powder-top,[data-phase="2"] .motion-powder-top,[data-phase="1"] .motion-grains {opacity:1}
.motion-grains {translate:0 -15px;transition:translate .5s,opacity .24s}
[data-phase="1"] .motion-grains {translate:0 10px}
.motion-finished {opacity:.45;translate:12px 0;transition:opacity .3s,translate .4s}
[data-phase="2"] .motion-finished {opacity:1;translate:0 0}
.motion-flat-label {opacity:1;transition:opacity .3s}
[data-phase="1"] .motion-flat-label {opacity:.35}
[data-phase="2"] .motion-flat-label {opacity:.65}
.motion-label-transfer {transform-origin:31px 131px;transform:translate(0,0) scale(1,1);opacity:0;transition:transform .65s cubic-bezier(.45,0,.2,1),opacity .3s}
[data-phase="1"] .motion-label-transfer {transform:translate(210px,8px) scale(.72,1);opacity:.85}
[data-phase="2"] .motion-label-transfer {transform:translate(395px,33px) scale(.56,.61);opacity:0}
.motion-wrapped-label {opacity:0;transition:opacity .4s .1s}
[data-phase="2"] .motion-wrapped-label {opacity:1}
.motion-wrap-route {opacity:.4;stroke-dashoffset:0;transition:stroke-dashoffset .7s,opacity .3s}
[data-phase="1"] .motion-wrap-route {opacity:1;stroke-dashoffset:-44}
[data-phase="2"] .motion-wrap-route {opacity:0;stroke-dashoffset:-66}
.service-motion:is(.is-paused,.is-suspended) * {animation-play-state:paused!important}
.service-motion:is(.is-manual,.is-instant) * {transition:none!important}

.service-motion:not(.is-ready) :is(.motion-focus,.motion-finished,.motion-fill) {opacity:1;scale:1 1;translate:0 0}
.service-motion:not(.is-ready) .motion-wrapped-label {opacity:1}
@media(max-width:700px) {
 .service-motion__controls {margin:0 14px;gap:0;flex-wrap:wrap}
 .service-motion__steps {flex-basis:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .service-motion button {font-size:14px;padding-inline:4px;min-width:0}
 .service-motion__play {flex-basis:100%;text-align:center!important;min-height:44px;border-top:1px solid #dce5df}
 .service-motion__caption {font-size:14px!important;margin-inline:16px!important}
 .product-visual:has(.service-motion) .product-visual__edition {display:none}
}
@media(prefers-reduced-motion:reduce) {
 .service-motion *, .service-motion *::before {transition:none!important;animation:none!important}
}