[data-motion^="dly-"] {
  --dly-rubber: #0b1213;
  --dly-bone: #f3eee3;
  --dly-zinc: #aeb9b7;
  --dly-cobalt: #245bff;
  --dly-vermilion: #ec4b2f;
  --dly-petrol: #31bfaf;
  --dly-travel: 32px;
  isolation: isolate;
}

.dly-decor {
  position: absolute;
  z-index: 1;
  width: min(280px, calc(100% - 24px));
  height: 150px;
  overflow: clip;
  contain: layout paint;
  pointer-events: none;
  isolation: isolate;
  box-sizing: border-box;
  color: var(--dly-bone);
  background: rgba(11,18,19,.94);
  border: 1px solid rgba(49,191,175,.38);
  box-shadow: 0 15px 36px rgba(4,9,10,.24);
}

.dly-decor,
.dly-decor * {
  box-sizing: border-box;
  pointer-events: none;
}

[data-motion^="dly-"] > :not(.dly-decor) {
  position: relative;
  z-index: 2;
}

.dly-jack-parallelogram { right: 4vw; bottom: 24px; width: 270px; height: 144px; }
.dly-wheel-v-jaws { left: 4vw; bottom: 22px; width: 260px; height: 140px; }
.dly-roller-phase { right: 4vw; top: 28px; width: 254px; height: 142px; }
.dly-cross-slide { left: 4vw; bottom: 24px; width: 266px; height: 144px; }
.dly-tray-shuttle { right: 4vw; bottom: 22px; width: 274px; height: 140px; }
.dly-feeler-fan { left: 4vw; bottom: 20px; width: 252px; height: 140px; }
.dly-caddy-retract { right: 4vw; bottom: 22px; width: 278px; height: 146px; }
.dly-toggle-bank { left: 4vw; top: 28px; width: 262px; height: 142px; }
.dly-witness-clips { right: 4vw; bottom: 22px; width: 276px; height: 144px; }
.dly-ball-detents { left: 4vw; bottom: 20px; width: 268px; height: 148px; }

.js [data-motion="dly-jack-parallelogram"] .dly-decor .decor-child,
.js [data-motion="dly-wheel-v-jaws"] .dly-decor .decor-child,
.js [data-motion="dly-roller-phase"] .dly-decor .decor-child,
.js [data-motion="dly-cross-slide"] .dly-decor .decor-child,
.js [data-motion="dly-tray-shuttle"] .dly-decor .decor-child,
.js [data-motion="dly-feeler-fan"] .dly-decor .decor-child,
.js [data-motion="dly-caddy-retract"] .dly-decor .decor-child,
.js [data-motion="dly-toggle-bank"] .dly-decor .decor-child,
.js [data-motion="dly-witness-clips"] .dly-decor .decor-child,
.js [data-motion="dly-ball-detents"] .dly-decor .decor-child,
.js [data-motion^="dly-"] .dly-decor * {
  animation-play-state: paused;
}

.js [data-motion="dly-jack-parallelogram"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-wheel-v-jaws"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-roller-phase"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-cross-slide"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-tray-shuttle"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-feeler-fan"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-caddy-retract"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-toggle-bank"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-witness-clips"].is-motion-active .dly-decor .decor-child,
.js [data-motion="dly-ball-detents"].is-motion-active .dly-decor .decor-child,
.js [data-motion^="dly-"].is-motion-active .dly-decor * {
  animation-play-state: running;
}

/* Scene 1: paired links open into two stable four-bar sets. */
.dly-jack-parallelogram {
  perspective: 620px;
  background:
    linear-gradient(90deg, rgba(36,91,255,.12) 1px, transparent 1px) 0 0 / 18px 100%,
    var(--dly-rubber);
}
.dly-jack-parallelogram .dly-jack-base {
  position: absolute;
  z-index: 3;
  right: 8%;
  bottom: 12%;
  left: 8%;
  height: 10%;
  background: linear-gradient(var(--dly-zinc), #687473);
  border: 2px solid var(--dly-bone);
}
.dly-jack-parallelogram .dly-jack-arm {
  position: absolute;
  z-index: 4;
  bottom: 20%;
  width: 7%;
  height: 48%;
  background: linear-gradient(90deg, #667472, var(--dly-zinc), #667472);
  border: 1px solid var(--dly-bone);
  border-radius: 8px;
  transform-origin: center bottom;
}
.dly-jack-parallelogram .arm-a { left: 25%; rotate: -42deg; animation: dly-jack-arm-a-open .82s cubic-bezier(.2,.65,.27,1.15) .08s both paused; }
.dly-jack-parallelogram .arm-b { left: 39%; rotate: 42deg; animation: dly-jack-arm-b-open .9s cubic-bezier(.2,.65,.27,1.15) .16s both paused; }
.dly-jack-parallelogram .arm-c { right: 39%; rotate: -42deg; animation: dly-jack-arm-c-open .98s cubic-bezier(.2,.65,.27,1.15) .24s both paused; }
.dly-jack-parallelogram .arm-d { right: 25%; rotate: 42deg; animation: dly-jack-arm-d-open 1.06s cubic-bezier(.2,.65,.27,1.15) .32s both paused; }
.dly-jack-parallelogram .dly-jack-saddle {
  position: absolute;
  z-index: 7;
  top: 28%;
  left: 23%;
  width: 54%;
  height: 12%;
  background: var(--dly-cobalt);
  border: 2px solid #8aa6ff;
  clip-path: polygon(4% 0,96% 0,100% 100%,0 100%);
  animation: dly-jack-saddle-lift .68s cubic-bezier(.2,.67,.28,1.13) .72s both paused;
}
.dly-jack-parallelogram .dly-jack-stop {
  position: absolute;
  z-index: 8;
  bottom: 10%;
  width: 10%;
  height: 23%;
  background: var(--dly-vermilion);
  border: 2px solid #ffb2a3;
}
.dly-jack-parallelogram .stop-a { left: 7%; animation: dly-jack-stop-a-seat .54s cubic-bezier(.2,.67,.28,1.16) .94s both paused; }
.dly-jack-parallelogram .stop-b { right: 7%; animation: dly-jack-stop-b-seat .6s cubic-bezier(.2,.67,.28,1.16) 1.04s both paused; }
.dly-jack-parallelogram .dly-jack-label {
  position: absolute;
  z-index: 9;
  top: 6%;
  left: 33%;
  width: 34%;
  padding: 4px;
  color: var(--dly-rubber);
  background: var(--dly-bone);
  font: 900 9px/1 system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  animation: dly-jack-label-confirm .48s steps(5,end) 1.25s both paused;
}

@keyframes dly-jack-arm-a-open {
  0% { rotate: -7deg; translate: 13px 5px; scale: .9 .7; opacity: .18; }
  72% { rotate: -46deg; translate: -2px -1px; scale: 1.04 1.06; opacity: 1; }
  100% { rotate: -42deg; translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-jack-arm-b-open {
  0% { rotate: 9deg; translate: -12px 7px; scale: .84 .74; filter: brightness(.52); }
  68% { rotate: 47deg; translate: 3px -2px; scale: 1.07 1.03; filter: brightness(1.2); }
  100% { rotate: 42deg; translate: none; scale: 1; filter: none; }
}
@keyframes dly-jack-arm-c-open {
  0% { rotate: -11deg; translate: 11px 8px; scale: .93 .66; opacity: .14; filter: saturate(.38); }
  74% { rotate: -45deg; translate: -3px -1px; scale: .98 1.08; opacity: 1; filter: saturate(1.2); }
  100% { rotate: -42deg; translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes dly-jack-arm-d-open {
  0% { rotate: 6deg; translate: -14px 6px; scale: .8 .72; opacity: .2; }
  70% { rotate: 49deg; translate: 2px -3px; scale: 1.09 1.02; opacity: 1; }
  100% { rotate: 42deg; translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-jack-saddle-lift {
  0% { translate: 0 4px; scale: .72 .78; opacity: .16; }
  73% { translate: 0 -19px; scale: 1.08 1.1; opacity: 1; }
  100% { translate: 0 -16px; scale: 1; opacity: 1; }
}
@keyframes dly-jack-stop-a-seat {
  0% { translate: -15px 0; scale: .38 1.24; opacity: .14; }
  70% { translate: 2px 0; scale: 1.12 .9; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-jack-stop-b-seat {
  0% { translate: 18px 0; scale: .3 1.34; filter: brightness(.52); }
  67% { translate: -3px 0; scale: 1.15 .86; filter: brightness(1.2); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes dly-jack-label-confirm {
  0% { clip-path: inset(0 50%); opacity: .12; filter: contrast(.5); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}

/* Scene 2: two independent V jaws center a static wheel. */
.dly-wheel-v-jaws {
  background:
    radial-gradient(circle at 50% 45%, rgba(36,91,255,.16), transparent 38%),
    var(--dly-rubber);
}
.dly-wheel-v-jaws .dly-v-wheel {
  position: absolute;
  z-index: 7;
  top: 20%;
  left: 37%;
  width: 26%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #65706f 0 22%, var(--dly-rubber) 23% 55%, var(--dly-zinc) 56% 66%, #121a1b 67%);
  border: 3px solid var(--dly-bone);
  border-radius: 50%;
}
.dly-wheel-v-jaws .dly-v-rail {
  position: absolute;
  z-index: 2;
  bottom: 17%;
  width: 39%;
  height: 10%;
  background: repeating-linear-gradient(90deg, #677270 0 8px, var(--dly-zinc) 8px 14px);
  border: 2px solid var(--dly-bone);
}
.dly-wheel-v-jaws .rail-a { left: 7%; animation: dly-v-rail-a-converge .72s cubic-bezier(.2,.65,.27,1.14) .1s both paused; }
.dly-wheel-v-jaws .rail-b { right: 7%; animation: dly-v-rail-b-converge .8s cubic-bezier(.2,.65,.27,1.14) .2s both paused; }
.dly-wheel-v-jaws .dly-v-jaw {
  position: absolute;
  z-index: 5;
  bottom: 26%;
  width: 31%;
  height: 13%;
  background: var(--dly-cobalt);
  border: 2px solid #9bb0ff;
  transform-origin: center;
}
.dly-wheel-v-jaws .jaw-a { left: 11%; transform: rotate(27deg); animation: dly-v-jaw-a-seat .88s cubic-bezier(.2,.65,.27,1.14) .3s both paused; }
.dly-wheel-v-jaws .jaw-b { right: 11%; transform: rotate(-27deg); animation: dly-v-jaw-b-seat .96s cubic-bezier(.2,.65,.27,1.14) .4s both paused; }
.dly-wheel-v-jaws .dly-v-stop {
  position: absolute;
  z-index: 8;
  bottom: 11%;
  width: 9%;
  height: 22%;
  background: var(--dly-vermilion);
  border: 2px solid #ffb6a8;
}
.dly-wheel-v-jaws .stop-a { left: 6%; animation: dly-v-stop-a-catch .54s cubic-bezier(.2,.67,.27,1.16) .78s both paused; }
.dly-wheel-v-jaws .stop-b { right: 6%; animation: dly-v-stop-b-catch .62s cubic-bezier(.2,.67,.27,1.16) .9s both paused; }

@keyframes dly-v-rail-a-converge {
  0% { translate: -30px 0; scale: .82 1; opacity: .16; }
  72% { translate: 3px 0; scale: 1.05 1; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-v-rail-b-converge {
  0% { translate: 27px 0; scale: .76 .84; filter: brightness(.5); }
  69% { translate: -4px 0; scale: 1.08 1.12; filter: brightness(1.18); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes dly-v-jaw-a-seat {
  0% { translate: -25px 8px; scale: .74 1.18; opacity: .18; }
  68% { translate: 4px -2px; scale: 1.1 .92; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-v-jaw-b-seat {
  0% { translate: 22px 6px; scale: .68 1.26; filter: saturate(.34); }
  73% { translate: -3px -3px; scale: 1.12 .88; filter: saturate(1.22); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes dly-v-stop-a-catch {
  0% { scale: .16 1.4; translate: -8px 0; opacity: .14; }
  67% { scale: 1.14 .84; translate: 2px 0; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes dly-v-stop-b-catch {
  0% { scale: 1.36 .14; translate: 9px 0; opacity: .12; filter: brightness(.56); }
  71% { scale: .86 1.16; translate: -2px 0; opacity: 1; filter: brightness(1.16); }
  100% { scale: 1; translate: none; opacity: 1; filter: none; }
}

/* Scene 3: three marked rollers make finite opposite turns. */
.dly-roller-phase {
  background:
    linear-gradient(150deg, rgba(49,191,175,.13), transparent 48%),
    var(--dly-rubber);
}
.dly-roller-phase .dly-phase-wheel {
  position: absolute;
  z-index: 5;
  top: 9%;
  left: 35%;
  width: 30%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--dly-zinc) 0 20%, #172021 21% 55%, #626e6d 56% 67%, var(--dly-rubber) 68%);
  border: 3px solid var(--dly-bone);
  border-radius: 50%;
}
.dly-roller-phase .dly-phase-support {
  position: absolute;
  z-index: 3;
  bottom: 14%;
  width: 36%;
  height: 29%;
  background: var(--dly-zinc);
  border: 2px solid var(--dly-bone);
  clip-path: polygon(0 100%,18% 8%,82% 8%,100% 100%);
}
.dly-roller-phase .support-a { left: 6%; }
.dly-roller-phase .support-b { right: 6%; }
.dly-roller-phase .dly-phase-roller {
  position: absolute;
  z-index: 7;
  bottom: 10%;
  width: 24%;
  aspect-ratio: 2.5;
  background: radial-gradient(circle at 50% 18%, var(--dly-vermilion) 0 8%, transparent 9%), linear-gradient(90deg, #3b4747, var(--dly-zinc), #3b4747);
  border: 2px solid var(--dly-bone);
  border-radius: 50%;
}
.dly-roller-phase .roller-a { left: 7%; animation: dly-phase-roller-a-turn .9s cubic-bezier(.2,.6,.28,1) .12s both paused; }
.dly-roller-phase .roller-b { left: 38%; animation: dly-phase-roller-b-counter .98s cubic-bezier(.2,.6,.28,1) .24s both paused; }
.dly-roller-phase .roller-c { right: 7%; animation: dly-phase-roller-c-turn 1.06s cubic-bezier(.2,.6,.28,1) .36s both paused; }

@keyframes dly-phase-roller-a-turn {
  0% { rotate: -218deg; scale: .88; filter: brightness(.56); }
  78% { rotate: 14deg; scale: 1.06; filter: brightness(1.18); }
  100% { rotate: 0deg; scale: 1; filter: none; }
}
@keyframes dly-phase-roller-b-counter {
  0% { rotate: 286deg; scale: .8 1.12; opacity: .18; }
  76% { rotate: -19deg; scale: 1.08 .95; opacity: 1; }
  100% { rotate: 0deg; scale: 1; opacity: 1; }
}
@keyframes dly-phase-roller-c-turn {
  0% { rotate: -332deg; scale: .92 .76; filter: saturate(.32); }
  81% { rotate: 23deg; scale: 1.04 1.09; filter: saturate(1.24); }
  100% { rotate: 0deg; scale: 1; filter: none; }
}

/* Scene 4: independent X and Y screws test four boundaries. */
.dly-cross-slide {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(36,91,255,.1) 22px 23px),
    var(--dly-rubber);
}
.dly-cross-slide .dly-slide-frame {
  position: absolute;
  z-index: 2;
  inset: 9%;
  border: 3px solid var(--dly-zinc);
}
.dly-cross-slide .dly-slide-x,
.dly-cross-slide .dly-slide-y {
  position: absolute;
  z-index: 4;
  background: repeating-linear-gradient(90deg, var(--dly-cobalt) 0 8px, #8da7ff 8px 12px);
  border: 2px solid var(--dly-bone);
}
.dly-cross-slide .dly-slide-x {
  top: 46%;
  left: 16%;
  width: 68%;
  height: 11%;
  animation: dly-slide-x-screw .76s cubic-bezier(.2,.63,.27,1.14) .1s both paused;
}
.dly-cross-slide .dly-slide-y {
  top: 15%;
  left: 45%;
  width: 10%;
  height: 70%;
  background: repeating-linear-gradient(0deg, var(--dly-petrol) 0 8px, #a6eee5 8px 12px);
  animation: dly-slide-y-screw .84s cubic-bezier(.2,.63,.27,1.14) .54s both paused;
}
.dly-cross-slide .dly-slide-probe {
  position: absolute;
  z-index: 7;
  width: 13%;
  height: 8%;
  background: var(--dly-vermilion);
  border: 1px solid #ffb5a7;
}
.dly-cross-slide .probe-a { left: 16%; top: 26%; animation: dly-slide-probe-a-test .62s cubic-bezier(.2,.66,.28,1.12) .92s both paused; }
.dly-cross-slide .probe-b { right: 16%; top: 31%; animation: dly-slide-probe-b-test .68s cubic-bezier(.2,.66,.28,1.12) 1.02s both paused; }
.dly-cross-slide .probe-c { left: 27%; bottom: 20%; animation: dly-slide-probe-c-test .74s cubic-bezier(.2,.66,.28,1.12) 1.12s both paused; }
.dly-cross-slide .probe-d { right: 27%; bottom: 16%; animation: dly-slide-probe-d-test .8s cubic-bezier(.2,.66,.28,1.12) 1.22s both paused; }
.dly-cross-slide .dly-slide-limit {
  position: absolute;
  z-index: 8;
  width: 7%;
  aspect-ratio: 1;
  background: var(--dly-bone);
  border: 2px solid var(--dly-cobalt);
  rotate: 45deg;
}
.dly-cross-slide .limit-a { left: 7%; top: 43%; }
.dly-cross-slide .limit-b { right: 7%; bottom: 12%; }

@keyframes dly-slide-x-screw {
  0% { translate: -29px 0; scale: .72 1; opacity: .18; }
  71% { translate: 4px 0; scale: 1.08 .94; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-slide-y-screw {
  0% { translate: 0 -25px; scale: 1 .68; filter: brightness(.52); }
  69% { translate: 0 4px; scale: .93 1.1; filter: brightness(1.19); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes dly-slide-probe-a-test {
  0% { translate: none; scale: .66 1; opacity: .18; }
  52% { translate: -12px 0; scale: 1.18 .86; opacity: 1; }
  100% { translate: -3px 0; scale: 1; opacity: 1; }
}
@keyframes dly-slide-probe-b-test {
  0% { translate: none; scale: .72 .82; filter: saturate(.4); }
  56% { translate: 15px 0; scale: 1.14 1.12; filter: saturate(1.2); }
  100% { translate: 4px 0; scale: 1; filter: none; }
}
@keyframes dly-slide-probe-c-test {
  0% { translate: none; scale: .8 .64; opacity: .16; }
  49% { translate: 0 13px; scale: .9 1.2; opacity: 1; }
  100% { translate: 0 3px; scale: 1; opacity: 1; }
}
@keyframes dly-slide-probe-d-test {
  0% { translate: none; scale: .6 1.08; filter: brightness(.58); }
  58% { translate: 0 16px; scale: 1.2 .9; filter: brightness(1.16); }
  100% { translate: 0 5px; scale: 1; filter: none; }
}

/* Scene 5: one temporary tray makes a bounded loading-zone shuttle. */
.dly-tray-shuttle {
  background:
    linear-gradient(154deg, transparent 0 46%, rgba(36,91,255,.15) 46% 54%, transparent 54%),
    var(--dly-rubber);
}
.dly-tray-shuttle .dly-tray-rail {
  position: absolute;
  z-index: 2;
  left: 10%;
  width: 74%;
  height: 7%;
  background: repeating-linear-gradient(90deg, var(--dly-zinc) 0 12px, #667270 12px 17px);
  border: 1px solid var(--dly-bone);
  transform: skewX(-12deg);
}
.dly-tray-shuttle .rail-a { top: 48%; }
.dly-tray-shuttle .rail-b { top: 67%; }
.dly-tray-shuttle .dly-tray-body {
  position: absolute;
  z-index: 6;
  top: 35%;
  left: 22%;
  width: 43%;
  height: 34%;
  background:
    radial-gradient(circle, var(--dly-rubber) 0 2px, transparent 3px) 0 0 / 14px 12px,
    var(--dly-zinc);
  border: 2px solid var(--dly-bone);
  clip-path: polygon(0 12%,92% 0,100% 88%,8% 100%);
  animation: dly-tray-body-shuttle .9s cubic-bezier(.2,.62,.27,1.1) .12s both paused;
}
.dly-tray-shuttle .dly-tray-wheel {
  position: absolute;
  z-index: 7;
  top: 62%;
  left: 37%;
  width: 12%;
  aspect-ratio: 1;
  background: conic-gradient(var(--dly-vermilion) 0 35deg, #596665 35deg 180deg, var(--dly-bone) 180deg 215deg, #596665 215deg);
  border: 2px solid var(--dly-bone);
  border-radius: 50%;
  animation: dly-tray-wheel-follow .94s cubic-bezier(.2,.62,.27,1.1) .12s both paused;
}
.dly-tray-shuttle .dly-tray-edge {
  position: absolute;
  z-index: 4;
  top: 19%;
  right: 9%;
  width: 10%;
  height: 61%;
  background: var(--dly-cobalt);
  border: 2px solid #95adff;
  clip-path: inset(0);
  animation: dly-tray-edge-register .6s steps(6,end) .72s both paused;
}
.dly-tray-shuttle .dly-tray-stop {
  position: absolute;
  z-index: 8;
  bottom: 13%;
  width: 9%;
  height: 22%;
  background: var(--dly-vermilion);
  border: 2px solid #ffb4a6;
}
.dly-tray-shuttle .stop-a { left: 62%; animation: dly-tray-stop-a-rise .56s cubic-bezier(.2,.67,.28,1.15) .94s both paused; }
.dly-tray-shuttle .stop-b { left: 74%; animation: dly-tray-stop-b-rise .64s cubic-bezier(.2,.67,.28,1.15) 1.04s both paused; }
.dly-tray-shuttle .dly-tray-caption {
  position: absolute;
  z-index: 9;
  top: 7%;
  right: 8%;
  width: 40%;
  padding: 5px 3px;
  color: var(--dly-rubber);
  background: var(--dly-bone);
  font: 900 8px/1 system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  animation: dly-tray-caption-set .5s steps(5,end) 1.32s both paused;
}

@keyframes dly-tray-body-shuttle {
  0% { translate: -31px 0; scale: .9 .92; opacity: .18; filter: brightness(.54); }
  74% { translate: 3px 0; scale: 1.04 1.06; opacity: 1; filter: brightness(1.18); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes dly-tray-wheel-follow {
  0% { translate: -31px 0; rotate: -245deg; scale: .8; opacity: .2; }
  76% { translate: 3px 0; rotate: 18deg; scale: 1.08; opacity: 1; }
  100% { translate: none; rotate: 0deg; scale: 1; opacity: 1; }
}
@keyframes dly-tray-edge-register {
  0% { clip-path: inset(100% 0 0); opacity: .16; filter: saturate(.35); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}
@keyframes dly-tray-stop-a-rise {
  0% { translate: 0 14px; scale: .7 1.3; opacity: .14; }
  68% { translate: 0 -10px; scale: 1.12 .88; opacity: 1; }
  100% { translate: 0 -8px; scale: 1; opacity: 1; }
}
@keyframes dly-tray-stop-b-rise {
  0% { translate: 0 18px; scale: .56 1.42; filter: brightness(.52); }
  72% { translate: 0 -14px; scale: 1.16 .84; filter: brightness(1.2); }
  100% { translate: 0 -11px; scale: 1; filter: none; }
}
@keyframes dly-tray-caption-set {
  0% { clip-path: polygon(0 0,8% 0,8% 100%,0 100%); opacity: .12; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}

/* Scene 6: five feelers fan out, then one remains under the profile. */
.dly-feeler-fan {
  background:
    linear-gradient(0deg, rgba(49,191,175,.16), transparent 48%),
    var(--dly-rubber);
}
.dly-feeler-fan .dly-feeler-profile {
  position: absolute;
  z-index: 7;
  top: 19%;
  right: 8%;
  width: 70%;
  height: 21%;
  background: var(--dly-zinc);
  border: 2px solid var(--dly-bone);
  clip-path: polygon(0 35%,17% 35%,23% 0,76% 0,86% 40%,100% 46%,94% 100%,7% 100%);
}
.dly-feeler-fan .dly-feeler-case {
  position: absolute;
  z-index: 8;
  bottom: 12%;
  left: 7%;
  width: 36%;
  height: 31%;
  background: linear-gradient(135deg, #6d7977, var(--dly-zinc));
  border: 2px solid var(--dly-bone);
  border-radius: 5px 24px 5px 5px;
}
.dly-feeler-fan .dly-feeler-leaf {
  position: absolute;
  z-index: 5;
  bottom: 27%;
  left: 31%;
  width: 49%;
  height: 6%;
  background: linear-gradient(90deg, var(--dly-bone), var(--dly-cobalt));
  border: 1px solid #fff;
  border-radius: 8px;
  transform-origin: left center;
}
.dly-feeler-fan .leaf-a { animation: dly-feeler-leaf-a-sample .9s cubic-bezier(.2,.62,.27,1.12) .08s both paused; }
.dly-feeler-fan .leaf-b { animation: dly-feeler-leaf-b-sample .98s cubic-bezier(.2,.62,.27,1.12) .18s both paused; }
.dly-feeler-fan .leaf-c { animation: dly-feeler-leaf-c-sample 1.06s cubic-bezier(.2,.62,.27,1.12) .28s both paused; }
.dly-feeler-fan .leaf-d { animation: dly-feeler-leaf-d-sample 1.14s cubic-bezier(.2,.62,.27,1.12) .38s both paused; }
.dly-feeler-fan .leaf-e { animation: dly-feeler-leaf-e-hold 1.22s cubic-bezier(.2,.62,.27,1.12) .48s both paused; }
.dly-feeler-fan .dly-feeler-mark {
  position: absolute;
  z-index: 9;
  right: 7%;
  bottom: 18%;
  width: 9%;
  aspect-ratio: 1;
  background: var(--dly-vermilion);
  border: 2px solid #ffb6a8;
  rotate: 45deg;
  animation: dly-feeler-mark-resolve .5s cubic-bezier(.2,.67,.28,1.16) 1.38s both paused;
}

@keyframes dly-feeler-leaf-a-sample {
  0% { rotate: 0deg; scale: .18 1; opacity: .16; }
  52% { rotate: -34deg; scale: 1 .86; opacity: 1; }
  74% { rotate: -29deg; scale: 1.04 1; }
  100% { rotate: 0deg; scale: .18 1; opacity: .55; }
}
@keyframes dly-feeler-leaf-b-sample {
  0% { rotate: 0deg; scale: .16 .72; filter: brightness(.52); }
  49% { rotate: -21deg; scale: 1.02 1.12; filter: brightness(1.2); }
  77% { rotate: -17deg; scale: .96 .94; }
  100% { rotate: 1deg; scale: .2 1; filter: none; }
}
@keyframes dly-feeler-leaf-c-sample {
  0% { rotate: 0deg; scale: .2 1.2; opacity: .12; }
  55% { rotate: -8deg; scale: .98 .82; opacity: 1; }
  79% { rotate: -12deg; scale: 1.06 1.04; }
  100% { rotate: -1deg; scale: .17 1; opacity: .5; }
}
@keyframes dly-feeler-leaf-d-sample {
  0% { rotate: 0deg; scale: .14 .8; filter: saturate(.3); }
  51% { rotate: 9deg; scale: 1.04 1.16; filter: saturate(1.24); }
  75% { rotate: 5deg; scale: .94 .92; }
  100% { rotate: 0deg; scale: .19 1; filter: none; }
}
@keyframes dly-feeler-leaf-e-hold {
  0% { rotate: 0deg; scale: .12 1.28; opacity: .14; }
  54% { rotate: 24deg; scale: 1.08 .84; opacity: 1; }
  78% { rotate: 17deg; scale: .97 1.06; }
  100% { rotate: -12deg; scale: 1; opacity: 1; }
}
@keyframes dly-feeler-mark-resolve {
  0% { scale: .08 1.48; border-radius: 50%; opacity: .1; }
  68% { scale: 1.2 .78; border-radius: 18%; opacity: 1; }
  100% { scale: 1; border-radius: 0; opacity: 1; }
}

/* Scene 7: four temporary caddies retract through separate service windows. */
.dly-caddy-retract {
  background:
    linear-gradient(180deg, rgba(36,91,255,.13), transparent 46%),
    var(--dly-rubber);
}
.dly-caddy-retract .dly-caddy-platform {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 12%;
  left: 5%;
  height: 23%;
  background: linear-gradient(var(--dly-zinc), #616d6c);
  border: 2px solid var(--dly-bone);
}
.dly-caddy-retract .dly-caddy-window {
  position: absolute;
  z-index: 6;
  bottom: 12%;
  width: 14%;
  height: 24%;
  background: var(--dly-rubber);
  border: 2px solid var(--dly-petrol);
  transform-origin: center bottom;
}
.dly-caddy-retract .window-a { left: 11%; animation: dly-caddy-window-a-close .6s steps(6,end) .78s both paused; }
.dly-caddy-retract .window-b { left: 32%; animation: dly-caddy-window-b-close .66s steps(6,end) .92s both paused; }
.dly-caddy-retract .window-c { right: 32%; animation: dly-caddy-window-c-close .72s steps(7,end) 1.06s both paused; }
.dly-caddy-retract .window-d { right: 11%; animation: dly-caddy-window-d-close .78s steps(7,end) 1.2s both paused; }
.dly-caddy-retract .dly-caddy-unit {
  position: absolute;
  z-index: 8;
  top: 28%;
  width: 11%;
  height: 27%;
  background: var(--dly-vermilion);
  border: 2px solid #ffb7aa;
  border-radius: 4px 4px 12px 12px;
}
.dly-caddy-retract .unit-a { left: 12.5%; animation: dly-caddy-unit-a-pocket .86s cubic-bezier(.2,.6,.27,1) .08s both paused; }
.dly-caddy-retract .unit-b { left: 33.5%; animation: dly-caddy-unit-b-pocket .92s cubic-bezier(.2,.6,.27,1) .22s both paused; }
.dly-caddy-retract .unit-c { right: 33.5%; animation: dly-caddy-unit-c-pocket .98s cubic-bezier(.2,.6,.27,1) .36s both paused; }
.dly-caddy-retract .unit-d { right: 12.5%; animation: dly-caddy-unit-d-pocket 1.04s cubic-bezier(.2,.6,.27,1) .5s both paused; }
.dly-caddy-retract .dly-caddy-contact {
  position: absolute;
  z-index: 7;
  top: 20%;
  width: 13%;
  height: 13%;
  background: var(--dly-cobalt);
  border: 2px solid #91aaff;
  border-radius: 12px 12px 3px 3px;
}
.dly-caddy-retract .contact-a { left: 11.5%; animation: dly-caddy-contact-a-show .48s cubic-bezier(.2,.67,.28,1.16) 1.22s both paused; }
.dly-caddy-retract .contact-b { left: 32.5%; animation: dly-caddy-contact-b-show .54s cubic-bezier(.2,.67,.28,1.16) 1.32s both paused; }
.dly-caddy-retract .contact-c { right: 32.5%; animation: dly-caddy-contact-c-show .6s cubic-bezier(.2,.67,.28,1.16) 1.42s both paused; }
.dly-caddy-retract .contact-d { right: 11.5%; animation: dly-caddy-contact-d-show .66s cubic-bezier(.2,.67,.28,1.16) 1.52s both paused; }
.dly-caddy-retract .dly-caddy-label {
  position: absolute;
  z-index: 9;
  top: 5%;
  left: 30%;
  width: 40%;
  padding: 5px 3px;
  color: var(--dly-rubber);
  background: var(--dly-bone);
  font: 900 8px/1 system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  animation: dly-caddy-label-finish .5s steps(5,end) 1.72s both paused;
}

@keyframes dly-caddy-unit-a-pocket {
  0% { translate: 0 -8px; scale: .9 1; opacity: 1; }
  58% { translate: 0 31px; scale: .82 1.12; opacity: 1; }
  100% { translate: -27px 35px; scale: .56 .7; opacity: 0; }
}
@keyframes dly-caddy-unit-b-pocket {
  0% { translate: 0 -5px; scale: 1 .88; filter: brightness(1.12); }
  61% { translate: 0 34px; scale: .76 1.16; filter: brightness(.82); }
  100% { translate: -19px 37px; scale: .5 .64; filter: brightness(.45); opacity: 0; }
}
@keyframes dly-caddy-unit-c-pocket {
  0% { translate: 0 -10px; scale: .84 1.08; opacity: 1; }
  55% { translate: 0 29px; scale: .9 1.2; opacity: 1; }
  100% { translate: 21px 34px; scale: .52 .68; opacity: 0; }
}
@keyframes dly-caddy-unit-d-pocket {
  0% { translate: 0 -6px; scale: .94 .82; filter: saturate(1.15); }
  63% { translate: 0 33px; scale: .72 1.18; filter: saturate(.72); }
  100% { translate: 29px 38px; scale: .46 .62; filter: saturate(.3); opacity: 0; }
}
@keyframes dly-caddy-window-a-close {
  0% { clip-path: inset(0 44%); scale: .76 1; opacity: .4; }
  100% { clip-path: inset(0); scale: 1; opacity: 1; }
}
@keyframes dly-caddy-window-b-close {
  0% { clip-path: inset(78% 0 0); scale: 1 .64; filter: brightness(.5); }
  100% { clip-path: inset(0); scale: 1; filter: none; }
}
@keyframes dly-caddy-window-c-close {
  0% { clip-path: polygon(0 0,18% 0,18% 100%,0 100%); opacity: .22; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}
@keyframes dly-caddy-window-d-close {
  0% { clip-path: polygon(82% 0,100% 0,100% 100%,82% 100%); scale: .82 .7; opacity: .18; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1; opacity: 1; }
}
@keyframes dly-caddy-contact-a-show {
  0% { scale: .12 1.4; opacity: .1; }
  67% { scale: 1.16 .84; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
@keyframes dly-caddy-contact-b-show {
  0% { scale: 1.34 .08; opacity: .12; rotate: -8deg; }
  70% { scale: .88 1.14; opacity: 1; rotate: 2deg; }
  100% { scale: 1; opacity: 1; rotate: 0deg; }
}
@keyframes dly-caddy-contact-c-show {
  0% { scale: .24 .46; opacity: .14; filter: saturate(.32); }
  64% { scale: 1.12 1.08; opacity: 1; filter: saturate(1.22); }
  100% { scale: 1; opacity: 1; filter: none; }
}
@keyframes dly-caddy-contact-d-show {
  0% { scale: .16 1.28; opacity: .08; rotate: 7deg; filter: brightness(.52); }
  73% { scale: 1.18 .87; opacity: 1; rotate: -3deg; filter: brightness(1.18); }
  100% { scale: 1; opacity: 1; rotate: 0deg; filter: none; }
}
@keyframes dly-caddy-label-finish {
  0% { clip-path: inset(0 50%); opacity: .08; filter: contrast(.46); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}

/* Scene 8: six independent toggle levers close on fixed stops. */
.dly-toggle-bank {
  perspective: 560px;
  background:
    linear-gradient(90deg, rgba(49,191,175,.1) 1px, transparent 1px) 0 0 / 16.66% 100%,
    var(--dly-rubber);
}
.dly-toggle-bank .dly-toggle-plate {
  position: absolute;
  z-index: 3;
  top: 29%;
  left: 36%;
  width: 28%;
  height: 45%;
  background: linear-gradient(145deg, #6d7977, var(--dly-zinc));
  border: 2px solid var(--dly-bone);
  box-shadow: inset 0 -8px 0 rgba(11,18,19,.2);
}
.dly-toggle-bank .dly-toggle-lever {
  position: absolute;
  z-index: 6;
  width: 25%;
  height: 8%;
  background: var(--dly-cobalt);
  border: 2px solid #9aafff;
  border-radius: 8px;
  transform-origin: 10% center;
}
.dly-toggle-bank .dly-toggle-lever::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 12px;
  aspect-ratio: 1;
  background: var(--dly-vermilion);
  border: 1px solid #ffb4a6;
  border-radius: 50%;
  translate: 0 -50%;
}
.dly-toggle-bank .lever-a { left: 8%; top: 16%; rotate: 13deg; animation: dly-toggle-lever-a-close .7s cubic-bezier(.2,.64,.27,1.14) .08s both paused; }
.dly-toggle-bank .lever-b { right: 8%; top: 16%; rotate: 167deg; animation: dly-toggle-lever-b-close .76s cubic-bezier(.2,.64,.27,1.14) .18s both paused; }
.dly-toggle-bank .lever-c { left: 7%; top: 46%; rotate: -6deg; animation: dly-toggle-lever-c-close .82s cubic-bezier(.2,.64,.27,1.14) .28s both paused; }
.dly-toggle-bank .lever-d { right: 7%; top: 46%; rotate: 186deg; animation: dly-toggle-lever-d-close .88s cubic-bezier(.2,.64,.27,1.14) .38s both paused; }
.dly-toggle-bank .lever-e { left: 9%; bottom: 14%; rotate: -18deg; animation: dly-toggle-lever-e-close .94s cubic-bezier(.2,.64,.27,1.14) .48s both paused; }
.dly-toggle-bank .lever-f { right: 9%; bottom: 14%; rotate: 198deg; animation: dly-toggle-lever-f-close 1s cubic-bezier(.2,.64,.27,1.14) .58s both paused; }
.dly-toggle-bank .dly-toggle-stop {
  position: absolute;
  z-index: 8;
  width: 7%;
  aspect-ratio: 1;
  background: var(--dly-bone);
  border: 2px solid var(--dly-petrol);
  border-radius: 50%;
}
.dly-toggle-bank .stop-a { left: 30%; top: 18%; }
.dly-toggle-bank .stop-b { right: 30%; top: 18%; }
.dly-toggle-bank .stop-c { left: 30%; top: 47%; }
.dly-toggle-bank .stop-d { right: 30%; top: 47%; }
.dly-toggle-bank .stop-e { left: 30%; bottom: 16%; }
.dly-toggle-bank .stop-f { right: 30%; bottom: 16%; }
.dly-toggle-bank .dly-toggle-result {
  position: absolute;
  z-index: 9;
  top: 43%;
  left: 38%;
  width: 24%;
  padding: 5px 2px;
  color: var(--dly-rubber);
  background: var(--dly-bone);
  font: 900 7px/1.08 system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  animation: dly-toggle-result-confirm .54s steps(5,end) 1.34s both paused;
}

@keyframes dly-toggle-lever-a-close {
  0% { rotate: -47deg; translate: -5px -6px; scale: .86 1; opacity: .18; }
  72% { rotate: 18deg; translate: 2px 1px; scale: 1.08 .9; opacity: 1; }
  100% { rotate: 13deg; translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-toggle-lever-b-close {
  0% { rotate: 232deg; translate: 7px -4px; scale: .78 1.14; filter: brightness(.52); }
  69% { rotate: 161deg; translate: -2px 2px; scale: 1.1 .88; filter: brightness(1.2); }
  100% { rotate: 167deg; translate: none; scale: 1; filter: none; }
}
@keyframes dly-toggle-lever-c-close {
  0% { rotate: 41deg; translate: -8px 3px; scale: .92 .76; opacity: .14; }
  74% { rotate: -11deg; translate: 3px -1px; scale: 1.04 1.12; opacity: 1; }
  100% { rotate: -6deg; translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-toggle-lever-d-close {
  0% { rotate: 139deg; translate: 6px 5px; scale: .72 1.18; filter: saturate(.32); }
  67% { rotate: 192deg; translate: -3px -2px; scale: 1.12 .86; filter: saturate(1.22); }
  100% { rotate: 186deg; translate: none; scale: 1; filter: none; }
}
@keyframes dly-toggle-lever-e-close {
  0% { rotate: 29deg; translate: -6px 7px; scale: .82 .84; opacity: .2; }
  71% { rotate: -24deg; translate: 2px -3px; scale: 1.09 1.1; opacity: 1; }
  100% { rotate: -18deg; translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-toggle-lever-f-close {
  0% { rotate: 146deg; translate: 9px 6px; scale: .68 1.2; filter: brightness(.56); opacity: .16; }
  75% { rotate: 205deg; translate: -3px -2px; scale: 1.14 .84; filter: brightness(1.18); opacity: 1; }
  100% { rotate: 198deg; translate: none; scale: 1; filter: none; opacity: 1; }
}
@keyframes dly-toggle-result-confirm {
  0% { clip-path: inset(46% 0); scale: .72 1.28; opacity: .08; }
  100% { clip-path: inset(0); scale: 1; opacity: 1; }
}

/* Scene 9: four witness flags align beside static straps. */
.dly-witness-clips {
  background:
    linear-gradient(28deg, rgba(49,191,175,.12), transparent 56%),
    var(--dly-rubber);
}
.dly-witness-clips .dly-witness-platform {
  position: absolute;
  z-index: 2;
  inset: 12% 8%;
  background: linear-gradient(145deg, #687573, var(--dly-zinc));
  border: 2px solid var(--dly-bone);
  clip-path: polygon(4% 0,96% 0,100% 14%,100% 86%,96% 100%,4% 100%,0 86%,0 14%);
}
.dly-witness-clips .dly-witness-strap {
  position: absolute;
  z-index: 5;
  width: 5%;
  height: 58%;
  background: var(--dly-cobalt);
  border: 1px solid #9db1ff;
}
.dly-witness-clips .strap-a { left: 22%; top: 20%; }
.dly-witness-clips .strap-b { left: 39%; top: 18%; }
.dly-witness-clips .strap-c { right: 39%; top: 18%; }
.dly-witness-clips .strap-d { right: 22%; top: 20%; }
.dly-witness-clips .dly-witness-flag {
  position: absolute;
  z-index: 8;
  width: 15%;
  height: 11%;
  background: var(--dly-vermilion);
  border: 2px solid #ffb5a7;
  transform-origin: 12% center;
}
.dly-witness-clips .flag-a { left: 17%; top: 23%; animation: dly-witness-flag-a-level .62s cubic-bezier(.2,.65,.27,1.15) .12s both paused; }
.dly-witness-clips .flag-b { left: 34%; top: 61%; animation: dly-witness-flag-b-level .7s cubic-bezier(.2,.65,.27,1.15) .26s both paused; }
.dly-witness-clips .flag-c { right: 34%; top: 25%; animation: dly-witness-flag-c-level .78s cubic-bezier(.2,.65,.27,1.15) .4s both paused; }
.dly-witness-clips .flag-d { right: 17%; top: 60%; animation: dly-witness-flag-d-level .86s cubic-bezier(.2,.65,.27,1.15) .54s both paused; }
.dly-witness-clips .dly-witness-outline {
  position: absolute;
  z-index: 9;
  inset: 7% 4%;
  border: 3px solid var(--dly-petrol);
  clip-path: inset(0);
  animation: dly-witness-platform-confirm .68s steps(7,end) 1.02s both paused;
}

@keyframes dly-witness-flag-a-level {
  0% { rotate: -31deg; scale: .76 1.14; opacity: .16; }
  71% { rotate: 5deg; scale: 1.1 .9; opacity: 1; }
  100% { rotate: 0deg; scale: 1; opacity: 1; }
}
@keyframes dly-witness-flag-b-level {
  0% { rotate: 24deg; scale: .82 .72; filter: brightness(.52); }
  68% { rotate: -6deg; scale: 1.08 1.12; filter: brightness(1.2); }
  100% { rotate: 0deg; scale: 1; filter: none; }
}
@keyframes dly-witness-flag-c-level {
  0% { rotate: -18deg; scale: .68 1.22; opacity: .14; filter: saturate(.34); }
  74% { rotate: 4deg; scale: 1.13 .86; opacity: 1; filter: saturate(1.22); }
  100% { rotate: 0deg; scale: 1; opacity: 1; filter: none; }
}
@keyframes dly-witness-flag-d-level {
  0% { rotate: 37deg; scale: .9 .66; opacity: .12; }
  70% { rotate: -7deg; scale: 1.05 1.16; opacity: 1; }
  100% { rotate: 0deg; scale: 1; opacity: 1; }
}
@keyframes dly-witness-platform-confirm {
  0% { clip-path: polygon(0 0,9% 0,9% 9%,0 9%); opacity: .12; filter: brightness(.54); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; filter: none; }
}

/* Scene 10: six isolated balls settle after six flat springs flex. */
.dly-ball-detents {
  background:
    repeating-linear-gradient(0deg, transparent 0 16.66%, rgba(36,91,255,.1) 16.66% 17.2%),
    var(--dly-rubber);
}
.dly-ball-detents .dly-detent-track {
  position: absolute;
  z-index: 3;
  left: 10%;
  width: 62%;
  height: 9%;
  background: linear-gradient(90deg, #63706f, var(--dly-zinc));
  border: 2px solid var(--dly-bone);
  border-radius: 10px 3px 3px 10px;
}
.dly-ball-detents .track-a { top: 6%; }
.dly-ball-detents .track-b { top: 22%; }
.dly-ball-detents .track-c { top: 38%; }
.dly-ball-detents .track-d { top: 54%; }
.dly-ball-detents .track-e { top: 70%; }
.dly-ball-detents .track-f { top: 86%; }
.dly-ball-detents .dly-detent-ball {
  position: absolute;
  z-index: 7;
  left: 60%;
  width: 9%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, var(--dly-vermilion) 10% 58%, #8d2417 59%);
  border: 2px solid #ffb5a6;
  border-radius: 50%;
  transition: transform .18s ease-out;
}
.dly-ball-detents .ball-a { top: 5%; animation: dly-detent-ball-a-seat .62s cubic-bezier(.2,.65,.27,1.14) .42s both paused; }
.dly-ball-detents .ball-b { top: 21%; animation: dly-detent-ball-b-seat .68s cubic-bezier(.2,.65,.27,1.14) .52s both paused; }
.dly-ball-detents .ball-c { top: 37%; animation: dly-detent-ball-c-seat .74s cubic-bezier(.2,.65,.27,1.14) .62s both paused; }
.dly-ball-detents .ball-d { top: 53%; animation: dly-detent-ball-d-seat .8s cubic-bezier(.2,.65,.27,1.14) .72s both paused; }
.dly-ball-detents .ball-e { top: 69%; animation: dly-detent-ball-e-seat .86s cubic-bezier(.2,.65,.27,1.14) .82s both paused; }
.dly-ball-detents .ball-f { top: 85%; animation: dly-detent-ball-f-seat .92s cubic-bezier(.2,.65,.27,1.14) .92s both paused; }
.dly-ball-detents .dly-detent-spring {
  position: absolute;
  z-index: 5;
  right: 8%;
  width: 23%;
  height: 7%;
  background: repeating-linear-gradient(90deg, var(--dly-petrol) 0 8px, var(--dly-bone) 8px 11px);
  border: 1px solid var(--dly-bone);
  transform-origin: left center;
}
.dly-ball-detents .spring-a { top: 7%; animation: dly-detent-spring-a-flex .54s cubic-bezier(.2,.66,.27,1.15) .08s both paused; }
.dly-ball-detents .spring-b { top: 23%; animation: dly-detent-spring-b-flex .6s cubic-bezier(.2,.66,.27,1.15) .18s both paused; }
.dly-ball-detents .spring-c { top: 39%; animation: dly-detent-spring-c-flex .66s cubic-bezier(.2,.66,.27,1.15) .28s both paused; }
.dly-ball-detents .spring-d { top: 55%; animation: dly-detent-spring-d-flex .72s cubic-bezier(.2,.66,.27,1.15) .38s both paused; }
.dly-ball-detents .spring-e { top: 71%; animation: dly-detent-spring-e-flex .78s cubic-bezier(.2,.66,.27,1.15) .48s both paused; }
.dly-ball-detents .spring-f { top: 87%; animation: dly-detent-spring-f-flex .84s cubic-bezier(.2,.66,.27,1.15) .58s both paused; }

.dol-faq:has(.dol-faq-list details:nth-child(1)[open]) .dly-ball-detents .ball-a,
.dol-faq:has(.dol-faq-list details:nth-child(2)[open]) .dly-ball-detents .ball-b,
.dol-faq:has(.dol-faq-list details:nth-child(3)[open]) .dly-ball-detents .ball-c,
.dol-faq:has(.dol-faq-list details:nth-child(4)[open]) .dly-ball-detents .ball-d,
.dol-faq:has(.dol-faq-list details:nth-child(5)[open]) .dly-ball-detents .ball-e,
.dol-faq:has(.dol-faq-list details:nth-child(6)[open]) .dly-ball-detents .ball-f {
  transform: translateX(2px);
}

@keyframes dly-detent-ball-a-seat {
  0% { translate: -5px 0; scale: .76 1.16; opacity: .18; }
  70% { translate: 2px 0; scale: 1.1 .9; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-detent-ball-b-seat {
  0% { translate: -7px 0; scale: .68 1.24; filter: brightness(.52); }
  67% { translate: 3px 0; scale: 1.14 .86; filter: brightness(1.18); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes dly-detent-ball-c-seat {
  0% { translate: -9px 0; scale: .82 .7; opacity: .14; filter: saturate(.34); }
  73% { translate: 2px 0; scale: 1.08 1.15; opacity: 1; filter: saturate(1.22); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes dly-detent-ball-d-seat {
  0% { translate: -10px 0; scale: .62 1.3; opacity: .12; }
  69% { translate: 4px 0; scale: 1.17 .82; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dly-detent-ball-e-seat {
  0% { translate: -11px 0; scale: .88 .66; filter: contrast(.52); }
  75% { translate: 3px 0; scale: 1.06 1.18; filter: contrast(1.2); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes dly-detent-ball-f-seat {
  0% { translate: -12px 0; scale: .58 1.34; opacity: .1; filter: brightness(.48); }
  72% { translate: 4px 0; scale: 1.2 .8; opacity: 1; filter: brightness(1.22); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes dly-detent-spring-a-flex {
  0% { rotate: 0deg; scale: 1 .72; opacity: .24; }
  58% { rotate: 7deg; scale: .86 1.18; opacity: 1; }
  100% { rotate: 0deg; scale: .94 1; opacity: 1; }
}
@keyframes dly-detent-spring-b-flex {
  0% { rotate: 0deg; scale: .82 1.2; filter: brightness(.56); }
  62% { rotate: -9deg; scale: 1.12 .84; filter: brightness(1.18); }
  100% { rotate: 0deg; scale: .9 1; filter: none; }
}
@keyframes dly-detent-spring-c-flex {
  0% { rotate: 0deg; scale: 1.16 .68; opacity: .18; }
  55% { rotate: 11deg; scale: .8 1.22; opacity: 1; }
  100% { rotate: 0deg; scale: .86 1; opacity: 1; }
}
@keyframes dly-detent-spring-d-flex {
  0% { rotate: 0deg; scale: .74 1.28; filter: saturate(.38); }
  64% { rotate: -6deg; scale: 1.14 .82; filter: saturate(1.2); }
  100% { rotate: 0deg; scale: .92 1; filter: none; }
}
@keyframes dly-detent-spring-e-flex {
  0% { rotate: 0deg; scale: 1.2 .62; opacity: .14; filter: contrast(.58); }
  57% { rotate: 8deg; scale: .78 1.25; opacity: 1; filter: contrast(1.18); }
  100% { rotate: 0deg; scale: .88 1; opacity: 1; filter: none; }
}
@keyframes dly-detent-spring-f-flex {
  0% { rotate: 0deg; scale: .66 1.32; opacity: .1; }
  66% { rotate: -12deg; scale: 1.18 .78; opacity: 1; }
  100% { rotate: 0deg; scale: .84 1; opacity: 1; }
}

@media (max-width: 1080px) {
  [data-motion^="dly-"] { --dly-travel: 27px; }
  .dol-page .dly-decor { width: 238px; height: 128px; }
  .dol-hero .dly-jack-parallelogram { left: 2%; bottom: 20px; }
  .dol-scenarios .dly-wheel-v-jaws { right: 2%; top: 27px; }
  .dol-device .dly-roller-phase { left: 2%; bottom: 22px; }
  .dol-access .dly-cross-slide { right: 2%; top: 24px; }
  .dol-loading .dly-tray-shuttle { left: 2%; bottom: 20px; }
  .dol-clearance .dly-feeler-fan { left: 2%; bottom: 24px; }
  .dol-transition .dly-caddy-retract { right: 2%; top: 23px; }
  .dol-check .dly-toggle-bank { right: 2%; top: 21px; }
  .dol-control .dly-witness-clips { left: 2%; bottom: 20px; }
  .dol-faq .dly-ball-detents { right: 2%; top: 23px; }
}

@media (max-width: 840px) {
  [data-motion^="dly-"] { --dly-travel: 23px; }
  .dol-page .dly-decor {
    position: relative;
    inset: auto;
    width: 220px;
    height: 118px;
    margin: 20px auto 0;
  }
  .dol-hero .dly-jack-parallelogram { margin-top: 24px; }
  .dol-scenarios .dly-wheel-v-jaws { margin-top: 18px; }
  .dol-device .dly-roller-phase { margin-top: 22px; }
  .dol-access .dly-cross-slide { margin-top: 18px; }
  .dol-loading .dly-tray-shuttle { margin-top: 22px; }
  .dol-clearance .dly-feeler-fan { margin-top: 19px; }
  .dol-transition .dly-caddy-retract { margin-top: 23px; }
  .dol-check .dly-toggle-bank { margin-top: 18px; }
  .dol-control .dly-witness-clips { margin-top: 21px; }
  .dol-faq .dly-ball-detents { margin-top: 24px; }
}

@media (max-width: 560px) {
  [data-motion^="dly-"] { --dly-travel: 19px; }
  .dol-page .dly-decor {
    width: 190px;
    height: 104px;
    margin-top: 16px;
    box-shadow: 0 8px 22px rgba(4,9,10,.18);
  }
  .dly-jack-parallelogram .dly-jack-arm { width: 6%; height: 49%; }
  .dly-wheel-v-jaws .dly-v-wheel { width: 28%; left: 36%; }
  .dly-roller-phase .dly-phase-roller { width: 25%; }
  .dly-cross-slide .dly-slide-frame { inset: 7%; }
  .dly-tray-shuttle .dly-tray-body { width: 45%; }
  .dly-feeler-fan .dly-feeler-leaf { width: 51%; }
  .dly-caddy-retract .dly-caddy-window { width: 15%; }
  .dly-toggle-bank .dly-toggle-lever { width: 26%; }
  .dly-witness-clips .dly-witness-outline { inset: 5% 3%; }
  .dly-ball-detents .dly-detent-track { left: 8%; width: 64%; height: 8%; }
  .dly-ball-detents .dly-detent-ball { left: 60%; width: 8%; }
  .dly-ball-detents .track-a { top: 4%; }
  .dly-ball-detents .track-b { top: 20%; }
  .dly-ball-detents .track-c { top: 36%; }
  .dly-ball-detents .track-d { top: 52%; }
  .dly-ball-detents .track-e { top: 68%; }
  .dly-ball-detents .track-f { top: 84%; }
  .dly-ball-detents .ball-a,
  .dly-ball-detents .spring-a { top: 3%; }
  .dly-ball-detents .ball-b,
  .dly-ball-detents .spring-b { top: 19%; }
  .dly-ball-detents .ball-c,
  .dly-ball-detents .spring-c { top: 35%; }
  .dly-ball-detents .ball-d,
  .dly-ball-detents .spring-d { top: 51%; }
  .dly-ball-detents .ball-e,
  .dly-ball-detents .spring-e { top: 67%; }
  .dly-ball-detents .ball-f,
  .dly-ball-detents .spring-f { top: 83%; }
}

@media (max-width: 380px) {
  [data-motion^="dly-"] { --dly-travel: 14px; }
  .dol-page .dly-decor {
    width: min(160px, calc(100% - 8px));
    height: 88px;
    margin-top: 13px;
    border-width: 1px;
    box-shadow: none;
  }
  .dol-page .dly-decor .decor-child { animation-duration: .56s; }
  .dly-jack-parallelogram .dly-jack-base { right: 5%; left: 5%; }
  .dly-jack-parallelogram .dly-jack-label { top: 4%; font-size: 6px; }
  .dly-wheel-v-jaws .dly-v-rail { bottom: 14%; border-width: 1px; }
  .dly-wheel-v-jaws .dly-v-jaw { border-width: 1px; }
  .dly-roller-phase .dly-phase-wheel { top: 7%; width: 28%; left: 36%; border-width: 2px; }
  .dly-cross-slide .dly-slide-probe { width: 14%; border-width: 1px; }
  .dly-tray-shuttle .dly-tray-caption { top: 4%; width: 43%; font-size: 6px; }
  .dly-feeler-fan .dly-feeler-case { left: 5%; border-width: 1px; }
  .dly-feeler-fan .dly-feeler-profile { right: 5%; border-width: 1px; }
  .dly-caddy-retract .dly-caddy-label { top: 3%; font-size: 6px; }
  .dly-toggle-bank .dly-toggle-result { padding: 3px 1px; font-size: 5px; }
  .dly-witness-clips .dly-witness-platform { inset: 9% 5%; border-width: 1px; }
  .dly-witness-clips .dly-witness-flag { border-width: 1px; }
  .dly-ball-detents .dly-detent-track { left: 6%; width: 67%; border-width: 1px; }
  .dly-ball-detents .dly-detent-ball { left: 61%; width: 7.5%; border-width: 1px; }
  .dly-ball-detents .dly-detent-spring { right: 5%; width: 24%; border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .dol-page [data-motion^="dly-"] .dly-decor,
  .dol-page [data-motion^="dly-"] .dly-decor *,
  .dol-page [data-motion^="dly-"] .dly-decor *::before,
  .dol-page [data-motion^="dly-"] .dly-decor *::after {
    animation: none !important;
    transition: none !important;
  }

  .dly-jack-parallelogram .dly-jack-arm,
  .dly-wheel-v-jaws .dly-v-rail,
  .dly-wheel-v-jaws .dly-v-jaw,
  .dly-roller-phase .dly-phase-roller,
  .dly-cross-slide .dly-slide-x,
  .dly-cross-slide .dly-slide-y,
  .dly-tray-shuttle .dly-tray-body,
  .dly-tray-shuttle .dly-tray-wheel,
  .dly-toggle-bank .dly-toggle-lever,
  .dly-witness-clips .dly-witness-flag,
  .dly-ball-detents .dly-detent-ball {
    translate: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .dly-jack-parallelogram .dly-jack-saddle { translate: 0 -16px !important; scale: 1 !important; opacity: 1 !important; }
  .dly-jack-parallelogram .dly-jack-stop,
  .dly-wheel-v-jaws .dly-v-stop,
  .dly-caddy-retract .dly-caddy-contact,
  .dly-toggle-bank .dly-toggle-result {
    translate: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .dly-jack-parallelogram .dly-jack-label,
  .dly-tray-shuttle .dly-tray-edge,
  .dly-tray-shuttle .dly-tray-caption,
  .dly-caddy-retract .dly-caddy-window,
  .dly-caddy-retract .dly-caddy-label,
  .dly-witness-clips .dly-witness-outline {
    clip-path: inset(0) !important;
    scale: 1 !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .dly-cross-slide .probe-a { translate: -3px 0 !important; }
  .dly-cross-slide .probe-b { translate: 4px 0 !important; }
  .dly-cross-slide .probe-c { translate: 0 3px !important; }
  .dly-cross-slide .probe-d { translate: 0 5px !important; }
  .dly-tray-shuttle .stop-a { translate: 0 -8px !important; }
  .dly-tray-shuttle .stop-b { translate: 0 -11px !important; }
  .dly-feeler-fan .leaf-a { rotate: 0deg !important; scale: .18 1 !important; opacity: .55 !important; }
  .dly-feeler-fan .leaf-b { rotate: 1deg !important; scale: .2 1 !important; }
  .dly-feeler-fan .leaf-c { rotate: -1deg !important; scale: .17 1 !important; opacity: .5 !important; }
  .dly-feeler-fan .leaf-d { rotate: 0deg !important; scale: .19 1 !important; }
  .dly-feeler-fan .leaf-e { rotate: -12deg !important; scale: 1 !important; opacity: 1 !important; }
  .dly-feeler-fan .dly-feeler-mark { scale: 1 !important; border-radius: 0 !important; opacity: 1 !important; }
  .dly-caddy-retract .dly-caddy-unit { translate: 0 35px !important; scale: .5 .66 !important; opacity: 0 !important; }
  .dly-caddy-retract .dly-caddy-contact { clip-path: inset(0) !important; }
  .dly-toggle-bank .dly-toggle-result,
  .dly-witness-clips .dly-witness-outline { clip-path: inset(0) !important; }
  .dly-ball-detents .spring-a { rotate: 0deg !important; scale: .94 1 !important; }
  .dly-ball-detents .spring-b { rotate: 0deg !important; scale: .9 1 !important; }
  .dly-ball-detents .spring-c { rotate: 0deg !important; scale: .86 1 !important; }
  .dly-ball-detents .spring-d { rotate: 0deg !important; scale: .92 1 !important; }
  .dly-ball-detents .spring-e { rotate: 0deg !important; scale: .88 1 !important; }
  .dly-ball-detents .spring-f { rotate: 0deg !important; scale: .84 1 !important; }
}