/* Scene 4 · The word. Driver's view at pre-dawn, with scene 3's map in a window
   beside the phone: the ride rewinds there to the advice point, one spoken line,
   the car eases off, the dose grows slower and the last minute's level falls, the
   child in the mirror recovers with that level, then the camera pushes through the
   windscreen into scene 5. The window's and the dial's keyframes (gen: blocks) all
   come from site/scenes-src/story.py's one clock, which scene 3 shares.
   Base styles are the poster frame (praise card, MSDV 27.0 Moderate, child smiling, the
   window's ride with the advice and its label). The
   road treadmill reuses site/scenes-src/s4/gen.py's pinhole camera: screen = VP + F·(X, CH)/Z
   with VP (800, 470), F 1208, CH 1.2; --s4-d is the distance driven in metres. */
@property --s4-d {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Dose readout ticks as a registered integer in tenths; whole and tenth parts feed counters. */
@property --s4-dose {
  syntax: '<integer>';
  inherits: false;
  initial-value: 270;
}

@property --s4-dw {
  syntax: '<integer>';
  inherits: false;
  initial-value: 27;
}

@property --s4-df {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

.scene--4 {
  --pin: 360vh;
}

/* Size container: HTML tags and captions pin to art points with cq units. */
.scene--4 > .stage {
  --scene-bg: #13212d;

  container-type: size;
}

/* Its own layer: Chrome dropped near layers on some frames while the scroll
   timeline repainted the art with the page. */
.s4-art {
  will-change: transform;
}

/* --s4-k = px per viewBox unit under preserveAspectRatio slice. */
.s4-captions,
.s4-tags {
  --s4-k: max(100cqw / 1600, 100cqh / 900);
}

/* ---------- Poster frame ---------- */
.s4-dawn {
  opacity: 0.8;
}

.s4-stars {
  opacity: 0.25;
}

.s4-phone {
  transform: translate(1060px, 452px); /* gen:phone-d */
}

/* The window: scene 3's map, lent its dot layer only, in its own svg over the art. That
   maps user units as the art does but runs past it, down to the copy on portrait screens.
   Placed per layout below (gen:place). */
.s4-over {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  will-change: transform;
}

.s4-mini,
.s4-mw-car {
  transform-box: view-box;
  transform-origin: 0 0;
}

.s4-mw-car {
  transform: translate(924px, 640px) rotate(18.8deg); /* gen:mw-car-final */
}

.s4-mw-trail {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

.s4-mw-bend,
.s4-mw-said-glow {
  transform-box: fill-box;
  transform-origin: center;
}

.s4-mw-said,
.s4-mw-said-k {
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* The stop's values: without the advice, with it, and how much less. */
.s4-mw-lab {
  font: 600 15px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.s4-mirror {
  transform: translate(844px, 24px) scale(1.3);
}

.s4-mirror-in,
.s4-head {
  transform-box: fill-box;
  transform-origin: 50% 95%;
}

.s4-kidbody {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.s4-sick,
.s4-calm,
.s4-card-advice {
  opacity: 0;
}

/* Gauge: the dose in MSDV, one arc slot per §7 band (05-Signal-Pipeline.md); below it, how fast it grows. */
/* gen:begin dial-base (written by site/scenes-src/s4/gen.py) */
.s4-ms:not(.s4-ms59) {
  opacity: 0;
}

.s4-tv:not(.s4-tv50) {
  opacity: 0;
}

.s4-gr:not(.s4-gr40) {
  opacity: 0;
}

.s4-turnbar {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.s4-gfill {
  stroke-dasharray: 1 1;
}

.s4-gfill--safe {
  stroke-dashoffset: 0;
}

.s4-gfill--mild {
  stroke-dashoffset: 0;
}

.s4-gfill--moderate {
  stroke-dashoffset: 0.3;
}

.s4-gfill--high {
  stroke-dashoffset: 1;
}

.s4-gfill--severe {
  stroke-dashoffset: 1;
}

.s4-bw--safe {
  opacity: 0;
}

.s4-bw--mild {
  opacity: 0;
}

.s4-bw--high {
  opacity: 0;
}

.s4-bw--severe {
  opacity: 0;
}

.s4-sparkt {
  transform: translateX(-981.36px);
}

.s4-spark--a {
  opacity: 0;
}
.s4-mw-lit--a0 .s4-mw-trail {
  stroke-dashoffset: 1;
}

.s4-mw-lit--b0 .s4-mw-trail {
  stroke-dashoffset: 0;
}

.s4-mw-lit--b1 .s4-mw-trail {
  stroke-dashoffset: 0;
}

.s4-mw-lit--b2 .s4-mw-trail {
  stroke-dashoffset: 0;
}

.s4-mw-bend--a4 {
  opacity: 0;
}

.s4-mw-bend--b4 {
  opacity: 1;
}

.s4-mw-bend--a5 {
  opacity: 0;
}

.s4-mw-bend--b5 {
  opacity: 1;
}

.s4-mw-bend--a6 {
  opacity: 0;
}

.s4-mw-bend--b6 {
  opacity: 1;
}
/* gen:end dial-base */

.s4-bead {
  transform-box: fill-box;
  transform-origin: center;
}

.s4-sp:not(.s4-sp15),
.s4-st--up {
  opacity: 0;
}

.s4-spdarc {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0.75;
}

.s4-arm {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Phone UI type: decorative SVG text, the real lines are the HTML captions. */
.s4-art text {
  font-family: var(--font);
}

.s4-t-stat {
  font-size: 8px;
  font-weight: 600;
  fill: var(--fg-2);
}

.s4-t-bar {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--fg-3);
}

.s4-t-rec {
  font-size: 7px;
  font-weight: 600;
  fill: var(--high-ink);
}

.s4-t-ct {
  font-size: 10px;
  font-weight: 650;
  fill: var(--fg);
}

.s4-t-cs {
  font-size: 7.6px;
  fill: var(--fg-2);
}

.s4-art .s4-t-cs2 {
  font-size: 7px;
}

.s4-t-gain {
  font-size: 7.4px;
  font-weight: 500;
  fill: var(--fg-3);
}

.s4-art .s4-big,
.s4-art .s4-t-gr,
.s4-art .s4-t-msdv,
.s4-art .s4-t-val,
.s4-art .s4-t-rec {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* stylelint-disable-next-line no-descending-specificity -- the shared mono face wins by specificity; each readout keeps its own block */
.s4-big {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.03em;
  fill: var(--fg);
}

/* The dose's band (05-Signal-Pipeline.md §7), under the number, in the band's ink. */
.s4-bw {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* stylelint-disable-next-line no-descending-specificity -- the shared mono face wins by specificity; each readout keeps its own block */
.s4-t-gr {
  font-size: 9px;
  font-weight: 600;
  fill: currentColor;
}

.s4-t-gru {
  font-size: 7px;
  font-weight: 500;
  fill: var(--fg-3);
}

/* stylelint-disable-next-line no-descending-specificity -- the shared mono face wins by specificity; each readout keeps its own block */
.s4-t-msdv {
  font-size: 6.8px;
  font-weight: 500;
  fill: var(--fg-3);
}

.s4-t-lbl,
.s4-t-ax {
  font-size: 5.6px;
  font-weight: 700;
  letter-spacing: 0.12em;
  fill: var(--fg-3);
}

/* stylelint-disable-next-line no-descending-specificity -- the shared mono face wins by specificity; each readout keeps its own block */
.s4-t-val {
  font-size: 6.6px;
  font-weight: 600;
  fill: var(--fg);
}

.s4-art .s4-t-spd,
.s4-art .s4-t-clk {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* stylelint-disable-next-line no-descending-specificity -- the shared mono face wins by specificity; each readout keeps its own block */
.s4-t-spd {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.03em;
  fill: var(--fg);
}

.s4-t-kmh,
.s4-t-cl {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: var(--fg-3);
}

.s4-t-gear {
  font-size: 14px;
  font-weight: 700;
  fill: var(--teal-hi);
}

/* stylelint-disable-next-line no-descending-specificity -- the shared mono face wins by specificity; each readout keeps its own block */
.s4-t-clk {
  font-size: 10px;
  font-weight: 500;
  fill: var(--fg-2);
}

.s4-t-btn {
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--fg);
}

.s4-t-hint {
  font-size: 6.4px;
  font-weight: 500;
  fill: var(--fg-2);
  fill-opacity: 0.72;
}

/* ---------- Spoken captions (film subtitles) ---------- */
/* Still frame (base): only the praise line, low and clear of the copy; the
   advice line and the tags come back in the animated block. */
.scene--4 .s4-tags,
.scene--4 .s4-cap--advice {
  display: none;
}

.s4-captions {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(0.75rem, 16vh - 3.5rem, 9rem);
  translate: -50% 0;
  /* Never wider than the gap left of the phone (x 1060). */
  --s4-capw: min(38rem, calc(2 * (250 * var(--s4-k) - 1.5rem)), calc(100% - 2 * var(--gutter)));

  width: var(--s4-capw);
}

/* Short wide still: the copy runs to the bottom, so the line sits between the
   copy (gutter + 34rem) and the phone. Narrower screens keep the centred slot. */
@media (max-height: 34rem) and (min-width: 75rem) {
  .s4-captions {
    right: calc(50cqw - 250 * var(--s4-k) + 1.5rem);
    left: auto;
    translate: none;
    width: min(24rem, calc(50cqw + 250 * var(--s4-k) - var(--gutter) - 37.5rem));
  }
}

/* Keeps the copy at AA wherever the dawn glow lands behind it. */
.s4-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5rem -12rem -4rem -12rem;
  background: radial-gradient(
    closest-side,
    rgb(11 19 28 / 0.72),
    rgb(11 19 28 / 0.58) 64%,
    rgb(11 19 28 / 0)
  );
}

/* Readouts pinned above the phone (right edge x 1256, top y 448). */
/* stylelint-disable-next-line no-descending-specificity -- the still's hide wins by specificity; the tags' layout follows */
.s4-tags {
  position: absolute;
  z-index: 2;
  right: calc(50cqw - 456 * var(--s4-k));
  bottom: calc(50cqh + 10 * var(--s4-k));
  display: grid;
  justify-items: end;
  gap: 0.4rem;
}

.s4-tag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.4rem 0.75rem 0.4rem 0.8rem;
  border: 1px solid rgb(56 72 91 / 0.85);
  border-radius: 999px;
  background: rgb(8 16 26 / 0.88);
  box-shadow: 0 0.5rem 1.5rem rgb(4 10 16 / 0.4);
  color: var(--fg-2);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}

.s4-tag-k {
  color: var(--fg-3);
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.s4-flap {
  display: grid;
  justify-items: start;
}

.s4-flap > * {
  grid-area: 1 / 1;
}

.s4-dose {
  --s4-dw: calc((var(--s4-dose) - 4.5) / 10);
  --s4-df: calc(var(--s4-dose) - var(--s4-dw) * 10);

  counter-reset: s4-dw var(--s4-dw) s4-df var(--s4-df);
  color: var(--fg);
  font: 600 1rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.s4-dose::before {
  content: counter(s4-dw) var(--decimal) counter(s4-df);
}

.s4-st--up {
  color: #e0b559;
}

.s4-st--hold {
  color: #6bcb95;
}

.s4-captions > * + * {
  margin-top: 0.6rem;
}

.s4-cap {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 0.85rem;
  width: fit-content;
  margin-inline: auto;
  padding: 0.75rem 1.25rem 0.75rem 1rem;
  border: 1px solid rgb(111 207 217 / 0.35);
  border-radius: 1.4rem;
  background: rgb(10 40 47 / 0.82);
  box-shadow: 0 0.75rem 2.5rem rgb(4 10 16 / 0.45);
  color: var(--fg);
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.s4-nw {
  white-space: nowrap;
}

.s4-voice {
  flex: none;
  width: 1.9rem;
  height: 1.4rem;
  color: var(--teal-hi);
}

.s4-vb {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Portrait: art on top, copy below ---------- */
@media (max-aspect-ratio: 4/5) {
  .s4-captions {
    bottom: auto;
    width: calc(100% - 2.5rem);
  }

  .s4-captions > * + * {
    margin-top: 0.4rem;
  }

  .s4-cap {
    gap: 0.6rem;
    padding: 0.5rem 0.85rem 0.5rem 0.7rem;
    border-radius: 1rem;
    font-size: 0.85rem;
  }

  .s4-voice {
    width: 1.5rem;
  }

  /* The copy hangs below the cockpit from the window's top (gen:place), so its type also
     shrinks with the stage's height: what's left below the art is a third of it. */
  .s4-copy h2 {
    font-size: clamp(1.2rem, min(6.4vw, 2.85cqh), 2.2rem);
  }

  .s4-copy .lede {
    font-size: clamp(0.7rem, 1.6cqh, 0.82rem);
    line-height: 1.35;
  }

  .s4-copy .fine {
    margin: 0.4rem 0 0;
    font-size: clamp(0.56rem, 1.3cqh, 0.66rem);
    line-height: 1.4;
  }

  .s4-copy::before {
    display: none;
  }

  .s4-captions,
  .s4-tags {
    --s4-k: max(100cqw / 1600, 68cqh / 900);
  }

  .s4-tag {
    gap: 0.45rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }

  .s4-dose {
    font-size: 0.9rem;
  }
}

/* Tablet portrait (window x ≈ 300–1300): phone right, captions in the gap above the copy. */
@media (max-aspect-ratio: 4/5) and (min-aspect-ratio: 3/5) {
  .s4-phone {
    transform: translate(1112px, 470px) scale(0.8); /* gen:phone-t */
  }

  .s4-mirror {
    transform: translate(850px, 30px) scale(1.25);
  }

  /* Still: under the mirror (bottom y 132), clear of the copy below the art. */
  .s4-captions {
    top: calc(34cqh - 300 * var(--s4-k));
  }

  .s4-tags {
    right: calc(50cqw - 469 * var(--s4-k));
    bottom: calc(66cqh - 12 * var(--s4-k));
  }
}

/* Phone portrait (window x ≈ 495–1105): sign moves to the rail side, clear of the phone. */
@media (max-aspect-ratio: 3/5) {
  .s4-phone {
    transform: translate(905px, 380px) scale(0.86); /* gen:phone-p */
  }

  .s4-mirror {
    transform: translate(640px, 96px) scale(1.45);
  }

  /* Left-hand drive: the wheel sits left of the car's centre, so this narrow window
     slides it and the cluster in, and keeps both hands in frame. */
  .s4-lhd {
    transform: translateX(180px);
  }

  .s4-sign {
    --sx: -6.6;
    --sz0: 34;

    transform: translate(534.2px, 518.3px) scale(40.27);
  }

  /* Captions in the sky under the mirror (bottom y 215); tags left of the phone, clear of the wheel's rim. */
  .s4-captions {
    top: calc(34cqh - 225 * var(--s4-k));
  }

  .s4-tags {
    right: calc(50cqw - 95 * var(--s4-k));
    bottom: calc(66cqh - 150 * var(--s4-k));
  }
}

/* The car and the pin read larger on portrait screens, as scene 3 draws its car. */
@media (max-aspect-ratio: 4/5) {
  .s4-mw-car .s4-mw-carbody,
  .s4-mw-said-k {
    transform: scale(1.7);
  }

  .s4-mw-lab {
    font-size: 19px;
  }
}

/* gen:begin place (written by site/scenes-src/s4/gen.py: the window beside the phone, per layout) */
.stage > .s4-over {
  top: -47.059%;
  height: 194.118%;
}

.s4-mini {
  transform: translate(1276px, 548px) scale(0.7037);
}
@media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 4/5) {
  .stage > .s4-over {
    top: -47.059%;
    height: 194.118%;
  }

  .s4-mini {
    transform: translate(1066px, 140px) scale(0.7185);
  }
}
@media (max-aspect-ratio: 4/5) {
  .stage > .s4-over {
    top: -32%;
    height: 132%;
  }

  .s4-mini {
    transform: translate(883.2px, 904px) scale(0.7085);
  }

  .stage > .s4-copy {
    top: calc(904 * 0.075556cqh);
    bottom: auto;
  }

  .s4-copy::before {
    content: '';
    display: block;
    position: static;
    inset: auto;
    z-index: auto;
    float: right;
    width: calc(50cqw - 83.2 * 0.075556cqh - 1.25rem + 0.75rem);
    height: calc(212.6 * 0.075556cqh);
    background: none;
  }
}
@media (max-aspect-ratio: 4/5) and (min-aspect-ratio: 3/5) {
  .stage > .s4-over {
    top: -32%;
    height: 132%;
  }

  .s4-mini {
    transform: translate(935.7px, 904px) scale(0.8307);
  }

  .stage > .s4-copy {
    top: calc(904 * 0.075556cqh);
    bottom: auto;
  }

  .s4-copy::before {
    content: '';
    display: block;
    position: static;
    inset: auto;
    z-index: auto;
    float: right;
    width: calc(50cqw - 135.7 * 0.075556cqh - 1.25rem + 0.75rem);
    height: calc(249.2 * 0.075556cqh);
    background: none;
  }
}
/* gen:end place */

/* The shortest phones drop the advice kinds from view, where their type would fall under 9 px;
   screen readers keep them. */
@media (max-aspect-ratio: 4/5) and (max-height: 42rem) {
  .s4-copy .fine {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Short screens hide the window with the other overlays: no footprint for the text to wrap round. */
@media not all and (min-height: 30rem) {
  .s4-copy::before {
    display: none;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) and (min-height: 30rem) {
  @supports (animation-timeline: view()) {
    .s4-world,
    .s4-push,
    .s4-dawn,
    .s4-stars,
    .s4-sunglow,
    .s4-clouds,
    .s4-mist1,
    .s4-mist2,
    .s4-mist3,
    .s4-mist4,
    .s4-mist5,
    .s4-streak,
    .s4-scrimr,
    .s4-copy,
    .s4-mirror-in,
    .s4-head,
    .s4-kidbody,
    .s4-sick,
    .s4-fine,
    .s4-calm,
    .s4-smile,
    .s4-card,
    .s4-gfill,
    .s4-bead,
    .s4-turn,
    .s4-turnbar,
    .s4-tv,
    .s4-grow,
    .s4-gr,
    .s4-ms,
    .s4-spark,
    .s4-cap,
    .s4-vb,
    .s4-cabin,
    .s4-out-m,
    .s4-out-p,
    .s4-out-w,
    .s4-far,
    .s4-arm,
    .s4-sp,
    .s4-spdarc,
    .s4-tags,
    .s4-st,
    .s4-dose,
    .s4-sparkt,
    .s4-pc,
    .s4-out-n,
    .s4-mw-car,
    .s4-mw-trail,
    .s4-mw-bend,
    .s4-mw-said,
    .s4-mw-said-glow,
    .s4-mw-after {
      animation: linear both;
      animation-timeline: --s4;
      animation-range: contain 0% contain 100%;
    }

    /* gen:begin hand-over (written by site/scenes-src/s4/gen.py: the stage over scene 3's window) */
    .scene + .scene--4 > .stage {
      animation-name: s4-stage-in;
    }

    @keyframes s4-stage-in {
      0% {
        opacity: 0;
      }
      38% {
        opacity: 0;
      }
      72% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
    /* gen:end hand-over */

    /* Distance driven: one ease-off as the advice is spoken (gen:begin ease-off). */
    .s4-world {
      animation-name: s4-drive;
    }

    .s4-push {
      transform-origin: 800px 470px;
      animation-name: s4-push;
    }

    /* The road, bend, hills and sign approach with the distance driven. */
    .s4-far {
      transform-origin: 800px 470px;
      transform: scale(calc(1 + var(--s4-d) / 200));
    }

    .s4-sign {
      --sx: 3.1;
      --sz0: 21;
      --z: max(calc(var(--sz0) - var(--s4-d)), 0.5);

      opacity: clamp(0, (var(--z) - 11) / 3, 1);
      transform: translate(
          calc(800px + 1208px * var(--sx) / var(--z)),
          calc(470px + 1450px / var(--z))
        )
        scale(calc(1208 / var(--z)));
    }

    @media (max-aspect-ratio: 3/5) {
      .s4-sign {
        --sx: -6.6;
        --sz0: 34;
      }
    }

    .s4-cfar {
      stroke-dashoffset: calc(var(--s4-d) * 0.7px);
    }

    .s4-dawn {
      animation-name: s4-dawn;
    }

    .s4-stars {
      animation-name: s4-stars;
    }

    .s4-sunglow {
      transform-origin: 1120px 470px;
      animation-name: s4-sun;
    }

    .s4-clouds,
    .s4-mist2,
    .s4-mist4 {
      animation-name: s4-drift-l;
    }

    .s4-mist1,
    .s4-mist3,
    .s4-mist5 {
      animation-name: s4-drift-r;
    }

    .s4-streak {
      animation-name: s4-streak;
    }

    /* Hand-out: push through the windscreen. Phone, wheel and mirror slide out
       of frame, the cabin frame scales past the edges; then the road, rails and
       posts fade (78–90 %) so scene 5 lands on the same sky. */
    .s4-cabin {
      transform-origin: 800px 470px;
      animation-name: s4-cab-out;
      animation-range: contain 65% contain 85%;
    }

    .s4-out-p {
      animation-name: s4-slide-p;
      animation-range: contain 65% contain 82%;
    }

    .s4-out-w {
      animation-name: s4-slide-w;
      animation-range: contain 65% contain 82%;
    }

    .s4-out-m {
      animation-name: s4-slide-m;
      animation-range: contain 65% contain 80%;
    }

    /* The window leaves with the phone and fades out on the way: on 4:3 it would still be on
       the stage when the slide stops at full speed. */
    .s4-out-n {
      animation-name: s4-slide-p, s4-out;
      animation-range:
        contain 65% contain 82%,
        contain 65% contain 70%;
    }

    /* stylelint-disable-next-line no-duplicate-selectors -- the exit, apart from the approach with the distance driven */
    .s4-far {
      animation-name: s4-out;
      animation-range: contain 78% contain 90%;
    }

    /* "Then lets you drive": the grip relaxes with the praise. */
    .s4-arm-l {
      animation-name: s4-relax-l;
      animation-range: contain 48% contain 58%;
    }

    .s4-arm-r {
      animation-name: s4-relax-r;
      animation-range: contain 48% contain 58%;
    }

    /* The car's own speedometer: 55 → 40 km/h over the ease-off. */
    /* gen:begin ease-off (written by site/scenes-src/s4/gen.py) */
    .s4-art .s4-sp0 {
      opacity: 1;
      animation: none;
    }
    .s4-sp {
      animation-name: s4-from;
    }
    .s4-sp1 {
      animation-range: contain 7% contain 7.4%;
    }
    .s4-sp2 {
      animation-range: contain 7.64% contain 8.04%;
    }
    .s4-sp3 {
      animation-range: contain 8.29% contain 8.69%;
    }
    .s4-sp4 {
      animation-range: contain 8.93% contain 9.33%;
    }
    .s4-sp5 {
      animation-range: contain 9.57% contain 9.97%;
    }
    .s4-sp6 {
      animation-range: contain 10.21% contain 10.61%;
    }
    .s4-sp7 {
      animation-range: contain 10.86% contain 11.26%;
    }
    .s4-sp8 {
      animation-range: contain 11.5% contain 11.9%;
    }
    .s4-sp9 {
      animation-range: contain 12.14% contain 12.54%;
    }
    .s4-sp10 {
      animation-range: contain 12.79% contain 13.19%;
    }
    .s4-sp11 {
      animation-range: contain 13.43% contain 13.83%;
    }
    .s4-sp12 {
      animation-range: contain 14.07% contain 14.47%;
    }
    .s4-sp13 {
      animation-range: contain 14.71% contain 15.11%;
    }
    .s4-sp14 {
      animation-range: contain 15.36% contain 15.76%;
    }
    .s4-sp15 {
      animation-range: contain 16% contain 16.4%;
    }
    /* gen:end ease-off */

    .s4-spdarc {
      animation-name: s4-spdarc;
    }

    /* Tags: Last 60 s band and the dose, on the sparkline's and MSDV's clocks. */
    .s4-tags {
      animation-name: s4-tags;
      animation-range: contain 20% contain 66%;
    }

    .s4-dose {
      animation-name: s4-dose;
      animation-timing-function: steps(1, end);
    }

    .s4-copy,
    .s4-scrimr {
      animation-name: s4-out;
      animation-range: contain 66% contain 74%;
    }

    /* Phone: the advice card fires once, the praise card replaces it. */
    .s4-card-advice {
      animation-name: s4-card;
      animation-range: contain 6% contain 52%;
    }

    .s4-card-praise {
      animation-name: s4-slide-in;
      animation-range: contain 50% contain 54%;
    }

    .s4-bead {
      animation-name: s4-bead;
    }

    /* Split-flap readouts: each value sits on an opaque plate and covers the
       previous one from its moment on, so no frame shows a gap. MSDV switches
       on the same stops as the dose tag's --s4-dose steps. The boy in the mirror,
       the TURN and growth rows all step with the chart's band. */
    /* gen:begin dial (written by site/scenes-src/s4/gen.py) */
    .s4-ms,
    .s4-tv,
    .s4-gr {
      opacity: 0;
      animation-name: s4-on;
      animation-fill-mode: none;
    }
    .s4-ms0 {
      animation-range: entry 0% entry 87.4%;
    }
    .s4-ms1 {
      animation-range: entry 87.4% entry 90.16%;
    }
    .s4-ms2 {
      animation-range: entry 90.16% entry 93.15%;
    }
    .s4-ms3 {
      animation-range: entry 93.15% entry 95.91%;
    }
    .s4-ms4 {
      animation-range: entry 95.91% entry 98.9%;
    }
    .s4-ms5 {
      animation-range: entry 98.9% contain 0.46%;
    }
    .s4-ms6 {
      animation-range: contain 0.46% contain 1.29%;
    }
    .s4-ms7 {
      animation-range: contain 1.29% contain 2.06%;
    }
    .s4-ms8 {
      animation-range: contain 2.06% contain 2.89%;
    }
    .s4-ms9 {
      animation-range: contain 2.89% contain 3.66%;
    }
    .s4-ms10 {
      animation-range: contain 3.66% contain 7.55%;
    }
    .s4-ms11 {
      animation-range: contain 7.55% contain 7.87%;
    }
    .s4-ms12 {
      animation-range: contain 7.87% contain 8.26%;
    }
    .s4-ms13 {
      animation-range: contain 8.26% contain 8.64%;
    }
    .s4-ms14 {
      animation-range: contain 8.64% contain 9.02%;
    }
    .s4-ms15 {
      animation-range: contain 9.02% contain 9.47%;
    }
    .s4-ms16 {
      animation-range: contain 9.47% contain 9.92%;
    }
    .s4-ms17 {
      animation-range: contain 9.92% contain 10.43%;
    }
    .s4-ms18 {
      animation-range: contain 10.43% contain 10.88%;
    }
    .s4-ms19 {
      animation-range: contain 10.88% contain 11.32%;
    }
    .s4-ms20 {
      animation-range: contain 11.32% contain 11.83%;
    }
    .s4-ms21 {
      animation-range: contain 11.83% contain 12.28%;
    }
    .s4-ms22 {
      animation-range: contain 12.28% contain 12.66%;
    }
    .s4-ms23 {
      animation-range: contain 12.66% contain 13.11%;
    }
    .s4-ms24 {
      animation-range: contain 13.11% contain 13.49%;
    }
    .s4-ms25 {
      animation-range: contain 13.49% contain 13.81%;
    }
    .s4-ms26 {
      animation-range: contain 13.81% contain 14.13%;
    }
    .s4-ms27 {
      animation-range: contain 14.13% contain 14.45%;
    }
    .s4-ms28 {
      animation-range: contain 14.45% contain 17.33%;
    }
    .s4-ms29 {
      animation-range: contain 17.33% contain 17.65%;
    }
    .s4-ms30 {
      animation-range: contain 17.65% contain 17.97%;
    }
    .s4-ms31 {
      animation-range: contain 17.97% contain 18.35%;
    }
    .s4-ms32 {
      animation-range: contain 18.35% contain 18.73%;
    }
    .s4-ms33 {
      animation-range: contain 18.73% contain 19.18%;
    }
    .s4-ms34 {
      animation-range: contain 19.18% contain 19.69%;
    }
    .s4-ms35 {
      animation-range: contain 19.69% contain 20.2%;
    }
    .s4-ms36 {
      animation-range: contain 20.2% contain 20.71%;
    }
    .s4-ms37 {
      animation-range: contain 20.71% contain 21.29%;
    }
    .s4-ms38 {
      animation-range: contain 21.29% contain 21.8%;
    }
    .s4-ms39 {
      animation-range: contain 21.8% contain 22.31%;
    }
    .s4-ms40 {
      animation-range: contain 22.31% contain 22.82%;
    }
    .s4-ms41 {
      animation-range: contain 22.82% contain 23.27%;
    }
    .s4-ms42 {
      animation-range: contain 23.27% contain 23.72%;
    }
    .s4-ms43 {
      animation-range: contain 23.72% contain 24.1%;
    }
    .s4-ms44 {
      animation-range: contain 24.1% contain 26.08%;
    }
    .s4-ms45 {
      animation-range: contain 26.08% contain 26.4%;
    }
    .s4-ms46 {
      animation-range: contain 26.4% contain 26.78%;
    }
    .s4-ms47 {
      animation-range: contain 26.78% contain 27.17%;
    }
    .s4-ms48 {
      animation-range: contain 27.17% contain 27.61%;
    }
    .s4-ms49 {
      animation-range: contain 27.61% contain 28.12%;
    }
    .s4-ms50 {
      animation-range: contain 28.12% contain 28.7%;
    }
    .s4-ms51 {
      animation-range: contain 28.7% contain 29.34%;
    }
    .s4-ms52 {
      animation-range: contain 29.34% contain 30.11%;
    }
    .s4-ms53 {
      animation-range: contain 30.11% contain 30.87%;
    }
    .s4-ms54 {
      animation-range: contain 30.87% contain 31.77%;
    }
    .s4-ms55 {
      animation-range: contain 31.77% contain 32.73%;
    }
    .s4-ms56 {
      animation-range: contain 32.73% contain 33.75%;
    }
    .s4-ms57 {
      animation-range: contain 33.75% contain 34.9%;
    }
    .s4-ms58 {
      animation-range: contain 34.9% contain 36.11%;
    }
    .s4-ms59 {
      animation-range: contain 36.11% contain 100%;
    }
    .s4-tv0 {
      animation-range: entry 0% entry 4.6%;
    }
    .s4-tv1 {
      animation-range: entry 4.6% entry 9.2%;
    }
    .s4-tv2 {
      animation-range: entry 9.2% entry 13.8%;
    }
    .s4-tv3 {
      animation-range: entry 13.8% entry 78.2%;
    }
    .s4-tv4 {
      animation-range: entry 78.2% entry 82.8%;
    }
    .s4-tv5 {
      animation-range: entry 82.8% entry 87.4%;
    }
    .s4-tv6 {
      animation-range: entry 87.4% entry 92%;
    }
    .s4-tv7 {
      animation-range: entry 92% entry 96.6%;
    }
    .s4-tv8 {
      animation-range: entry 96.6% contain 0.33%;
    }
    .s4-tv9 {
      animation-range: contain 0.33% contain 1.61%;
    }
    .s4-tv10 {
      animation-range: contain 1.61% contain 2.89%;
    }
    .s4-tv11 {
      animation-range: contain 2.89% contain 4.17%;
    }
    .s4-tv12 {
      animation-range: contain 4.17% contain 6.72%;
    }
    .s4-tv13 {
      animation-range: contain 6.72% contain 8%;
    }
    .s4-tv14 {
      animation-range: contain 8% contain 9.28%;
    }
    .s4-tv15 {
      animation-range: contain 9.28% contain 10.56%;
    }
    .s4-tv16 {
      animation-range: contain 10.56% contain 11.83%;
    }
    .s4-tv17 {
      animation-range: contain 11.83% contain 13.11%;
    }
    .s4-tv18 {
      animation-range: contain 13.11% contain 13.49%;
    }
    .s4-tv19 {
      animation-range: contain 13.49% contain 14.39%;
    }
    .s4-tv20 {
      animation-range: contain 14.39% contain 15.67%;
    }
    .s4-tv21 {
      animation-range: contain 15.67% contain 16.94%;
    }
    .s4-tv22 {
      animation-range: contain 16.94% contain 18.22%;
    }
    .s4-tv23 {
      animation-range: contain 18.22% contain 19.5%;
    }
    .s4-tv24 {
      animation-range: contain 19.5% contain 20.78%;
    }
    .s4-tv25 {
      animation-range: contain 20.78% contain 24.61%;
    }
    .s4-tv26 {
      animation-range: contain 24.61% contain 25.89%;
    }
    .s4-tv27 {
      animation-range: contain 25.89% contain 27.17%;
    }
    .s4-tv28 {
      animation-range: contain 27.17% contain 28.44%;
    }
    .s4-tv29 {
      animation-range: contain 28.44% contain 29.72%;
    }
    .s4-tv30 {
      animation-range: contain 29.72% contain 31%;
    }
    .s4-tv31 {
      animation-range: contain 31% contain 32.28%;
    }
    .s4-tv32 {
      animation-range: contain 32.28% contain 33.56%;
    }
    .s4-tv33 {
      animation-range: contain 33.56% contain 34.83%;
    }
    .s4-tv34 {
      animation-range: contain 34.83% contain 36.11%;
    }
    .s4-tv35 {
      animation-range: contain 36.11% contain 37.39%;
    }
    .s4-tv36 {
      animation-range: contain 37.39% contain 38.67%;
    }
    .s4-tv37 {
      animation-range: contain 38.67% contain 39.94%;
    }
    .s4-tv38 {
      animation-range: contain 39.94% contain 41.22%;
    }
    .s4-tv39 {
      animation-range: contain 41.22% contain 42.5%;
    }
    .s4-tv40 {
      animation-range: contain 42.5% contain 43.78%;
    }
    .s4-tv41 {
      animation-range: contain 43.78% contain 43.97%;
    }
    .s4-tv42 {
      animation-range: contain 43.97% contain 45.06%;
    }
    .s4-tv43 {
      animation-range: contain 45.06% contain 46.33%;
    }
    .s4-tv44 {
      animation-range: contain 46.33% contain 47.61%;
    }
    .s4-tv45 {
      animation-range: contain 47.61% contain 48.89%;
    }
    .s4-tv46 {
      animation-range: contain 48.89% contain 50.17%;
    }
    .s4-tv47 {
      animation-range: contain 50.17% contain 51.44%;
    }
    .s4-tv48 {
      animation-range: contain 51.44% contain 52.72%;
    }
    .s4-tv49 {
      animation-range: contain 52.72% contain 54%;
    }
    .s4-tv50 {
      animation-range: contain 54% contain 100%;
    }
    .s4-gr0 {
      animation-range: entry 0% entry 4.6%;
    }
    .s4-gr1 {
      animation-range: entry 4.6% entry 9.2%;
    }
    .s4-gr2 {
      animation-range: entry 9.2% entry 13.8%;
    }
    .s4-gr3 {
      animation-range: entry 13.8% entry 78.2%;
    }
    .s4-gr4 {
      animation-range: entry 78.2% entry 82.8%;
    }
    .s4-gr5 {
      animation-range: entry 82.8% entry 87.4%;
    }
    .s4-gr6 {
      animation-range: entry 87.4% entry 92%;
    }
    .s4-gr7 {
      animation-range: entry 92% entry 96.6%;
    }
    .s4-gr8 {
      animation-range: entry 96.6% contain 0.33%;
    }
    .s4-gr9 {
      animation-range: contain 0.33% contain 1.61%;
    }
    .s4-gr10 {
      animation-range: contain 1.61% contain 2.89%;
    }
    .s4-gr11 {
      animation-range: contain 2.89% contain 6.72%;
    }
    .s4-gr12 {
      animation-range: contain 6.72% contain 8%;
    }
    .s4-gr13 {
      animation-range: contain 8% contain 9.28%;
    }
    .s4-gr14 {
      animation-range: contain 9.28% contain 11.83%;
    }
    .s4-gr15 {
      animation-range: contain 11.83% contain 13.11%;
    }
    .s4-gr16 {
      animation-range: contain 13.11% contain 13.49%;
    }
    .s4-gr17 {
      animation-range: contain 13.49% contain 14.39%;
    }
    .s4-gr18 {
      animation-range: contain 14.39% contain 15.67%;
    }
    .s4-gr19 {
      animation-range: contain 15.67% contain 18.22%;
    }
    .s4-gr20 {
      animation-range: contain 18.22% contain 23.33%;
    }
    .s4-gr21 {
      animation-range: contain 23.33% contain 25.89%;
    }
    .s4-gr22 {
      animation-range: contain 25.89% contain 27.17%;
    }
    .s4-gr23 {
      animation-range: contain 27.17% contain 28.44%;
    }
    .s4-gr24 {
      animation-range: contain 28.44% contain 29.72%;
    }
    .s4-gr25 {
      animation-range: contain 29.72% contain 31%;
    }
    .s4-gr26 {
      animation-range: contain 31% contain 32.28%;
    }
    .s4-gr27 {
      animation-range: contain 32.28% contain 33.56%;
    }
    .s4-gr28 {
      animation-range: contain 33.56% contain 34.83%;
    }
    .s4-gr29 {
      animation-range: contain 34.83% contain 36.11%;
    }
    .s4-gr30 {
      animation-range: contain 36.11% contain 37.39%;
    }
    .s4-gr31 {
      animation-range: contain 37.39% contain 38.67%;
    }
    .s4-gr32 {
      animation-range: contain 38.67% contain 39.94%;
    }
    .s4-gr33 {
      animation-range: contain 39.94% contain 41.22%;
    }
    .s4-gr34 {
      animation-range: contain 41.22% contain 42.5%;
    }
    .s4-gr35 {
      animation-range: contain 42.5% contain 43.78%;
    }
    .s4-gr36 {
      animation-range: contain 43.78% contain 43.97%;
    }
    .s4-gr37 {
      animation-range: contain 43.97% contain 45.06%;
    }
    .s4-gr38 {
      animation-range: contain 45.06% contain 46.33%;
    }
    .s4-gr39 {
      animation-range: contain 46.33% contain 47.61%;
    }
    .s4-gr40 {
      animation-range: contain 47.61% contain 100%;
    }
    .s4-gfill,
    .s4-bead,
    .s4-beadc,
    .s4-bw,
    .s4-turn,
    .s4-turnbar,
    .s4-grow,
    .s4-sparkt,
    .s4-spark,
    .s4-head,
    .s4-kidbody,
    .s4-sick,
    .s4-fine,
    .s4-calm,
    .s4-smile,
    .s4-st,
    .s4-dose {
      animation-range: entry 0% contain 100%;
    }
    .s4-gfill--safe {
      animation-name: s4-gfill-safe;
    }
    .s4-gfill--mild {
      animation-name: s4-gfill-mild;
    }
    .s4-gfill--moderate {
      animation-name: s4-gfill-moderate;
    }
    .s4-gfill--high {
      animation-name: s4-gfill-high;
    }
    .s4-gfill--severe {
      animation-name: s4-gfill-severe;
    }
    .s4-bw--safe {
      animation-name: s4-bw-safe;
    }
    .s4-bw--mild {
      animation-name: s4-bw-mild;
    }
    .s4-bw--moderate {
      animation-name: s4-bw-moderate;
    }
    .s4-bw--high {
      animation-name: s4-bw-high;
    }
    .s4-bw--severe {
      animation-name: s4-bw-severe;
    }
    .s4-beadc {
      animation-name: s4-beadc;
    }
    .s4-st--up {
      animation-name: s4-st-up;
    }
    .s4-st--hold {
      animation-name: s4-st-hold;
    }
    .s4-sparkt {
      animation-name: s4-sparkt;
    }
    .s4-spark--a {
      animation-name: s4-spark, s4-spark-a;
    }
    .s4-spark--b {
      animation-name: s4-spark, s4-spark-b;
    }
    .s4-mirror-in {
      animation-name: s4-lean;
      animation-range: contain 5.5% contain 57.64%;
    }
    .s4-head {
      animation-name: s4-head;
    }
    .s4-kidbody {
      animation-name: s4-body;
    }
    .s4-sick {
      animation-name: s4-unwell;
    }
    .s4-fine {
      animation-name: s4-well;
    }
    .s4-calm {
      animation-name: s4-calm;
    }
    .s4-smile {
      animation-name: s4-smile;
    }
    .s4-mw-car,
    .s4-mw-trail,
    .s4-mw-bend,
    .s4-mw-said,
    .s4-mw-after {
      animation-range: entry 0% contain 100%;
    }
    .s4-mw-car {
      animation-name: s4-mw-drive;
    }
    .s4-mw-lit--a0 .s4-mw-trail {
      animation-name: s4-mw-lit-a0;
    }
    .s4-mw-lit--b0 .s4-mw-trail {
      animation-name: s4-mw-lit-b0;
    }
    .s4-mw-lit--b1 .s4-mw-trail {
      animation-name: s4-mw-lit-b1;
    }
    .s4-mw-lit--b2 .s4-mw-trail {
      animation-name: s4-mw-lit-b2;
    }
    .s4-mw-bend--a4 {
      animation-name: s4-mw-ring-a4;
    }
    .s4-mw-bend--b4 {
      animation-name: s4-mw-ring-b4;
    }
    .s4-mw-bend--a5 {
      animation-name: s4-mw-ring-a5;
    }
    .s4-mw-bend--b5 {
      animation-name: s4-mw-ring-b5;
    }
    .s4-mw-bend--a6 {
      animation-name: s4-mw-ring-a6;
    }
    .s4-mw-bend--b6 {
      animation-name: s4-mw-ring-b6;
    }
    .s4-mw-said {
      animation-name: s4-mw-pop;
      animation-range: contain 5.5% contain 7.17%;
    }
    .s4-mw-said-glow {
      animation-name: s4-mw-ping;
      animation-range: contain 5.5% contain 13.83%;
    }
    .s4-mw-after {
      animation-name: s4-mw-in;
      animation-range: contain 40.72% contain 43.28%;
    }
    /* gen:end dial */

    /* Turn row, growth rate and "Last 60 s" sparkline fall from High into Safe. */
    .s4-turn {
      animation-name: s4-band-c;
    }

    .s4-grow {
      animation-name: s4-band-i;
    }

    .s4-turnbar {
      animation-name: s4-turn-w;
    }

    .s4-spark {
      animation-name: s4-spark;
    }

    /* Captions: the advice is spoken once, then silence; the praise replaces it. */
    .s4-cap--advice {
      animation-name: s4-cap-a;
      animation-range: contain 6% contain 25%;
    }

    .s4-cap--praise {
      animation-name: s4-cap-p;
      animation-range: contain 50% contain 75%;
    }

    /* Voice bars move only while the line is spoken. */
    .s4-vb {
      transform: scaleY(0.35);
      animation-name: s4-talk-a;
    }

    .s4-vb2,
    .s4-vb4 {
      animation-name: s4-talk-b;
    }

    .s4-cap--advice .s4-vb {
      animation-range: contain 7% contain 14%;
    }

    .s4-cap--praise .s4-vb {
      animation-range: contain 51% contain 56%;
    }

    .s4-captions > * + * {
      margin-top: 0;
    }

    @media (max-aspect-ratio: 4/5) {
      .s4-cap {
        padding: 0.6rem 0.9rem 0.6rem 0.75rem;
        font-size: 0.95rem;
      }
    }

    /* Restores what the still frame leaves out: the tags, the advice line and
       the desktop/tablet caption slots. */
    .scene--4 .s4-tags {
      display: grid;
    }

    .scene--4 .s4-cap--advice {
      display: flex;
    }

    .s4-captions {
      right: auto;
      bottom: clamp(4.5rem, 16vh, 9rem);
      left: 50%;
      translate: -50% 0;
      width: var(--s4-capw);
    }

    @media (max-aspect-ratio: 4/5) {
      .s4-captions {
        bottom: auto;
        width: calc(100% - 2.5rem);
      }
    }

    @media (max-aspect-ratio: 4/5) and (min-aspect-ratio: 3/5) {
      .s4-captions {
        top: calc(68% + 0.25rem);
      }
    }

    /* Phone portrait: the mirror fades in place instead of sliding off the top. */
    @media (max-aspect-ratio: 3/5) {
      .s4-out-m {
        animation-name: s4-out;
        animation-range: contain 65% contain 72%;
      }
    }

    /* Road treadmill needs mod(): Chrome 115–124 has view timelines without it,
       and keeps the static poster positions. --i slot, --P spacing (m), --X lateral (m). */
    @supports (width: calc(mod(3px, 2px))) {
      .s4-i0 {
        --i: 0;
      }
      .s4-i1 {
        --i: 1;
      }
      .s4-i2 {
        --i: 2;
      }
      .s4-i3 {
        --i: 3;
      }
      .s4-i4 {
        --i: 4;
      }

      .s4-dash {
        --X: -1.9;
        --P: 7.5;
      }

      .s4-rpost {
        --X: 2.4;
        --P: 12.5;
      }

      .s4-lpost {
        --X: -6.3;
        --P: 12.5;
      }

      .s4-m {
        --z: calc(5 + mod(var(--i) * var(--P) - var(--s4-d), 37.5));

        opacity: clamp(0, min((var(--z) - 8) / 3, (42.5 - var(--z)) / 4), 1);
        transform: translate(
            calc(800px + 1208px * var(--X) / var(--z)),
            calc(470px + 1450px / var(--z))
          )
          scale(calc(1208 / var(--z)));
      }

      .s4-dash .s4-m {
        transform: translate(
            calc(800px + 1208px * var(--X) / var(--z)),
            calc(470px + 1450px / var(--z))
          )
          skewX(-57.7deg) scale(calc(1208 / var(--z)), calc(1450 / (var(--z) * (var(--z) + 2.5))));
      }
    }
  }
}

@keyframes s4-push {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.035);
  }
}

@keyframes s4-dawn {
  0%,
  30% {
    opacity: 0.25;
  }

  100% {
    opacity: 1;
  }
}

@keyframes s4-stars {
  0%,
  20% {
    opacity: 1;
  }

  70%,
  100% {
    opacity: 0;
  }
}

@keyframes s4-sun {
  from {
    opacity: 0.6;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes s4-drift-l {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-46px);
  }
}

@keyframes s4-drift-r {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(52px);
  }
}

@keyframes s4-streak {
  from {
    transform: translateX(-30px);
  }

  to {
    transform: translateX(40px);
  }
}

@keyframes s4-cab-out {
  0% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes s4-slide-p {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }

  to {
    transform: translate(240px, 560px);
  }
}

@keyframes s4-slide-w {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }

  to {
    transform: translateY(440px);
  }
}

@keyframes s4-slide-m {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }

  to {
    transform: translateY(-280px);
  }
}

@keyframes s4-relax-l {
  from {
    transform: translate(0, 0) rotate(0deg);
  }

  to {
    transform: translate(-3px, 6px) rotate(-2.5deg);
  }
}

@keyframes s4-relax-r {
  from {
    transform: translate(0, 0) rotate(0deg);
  }

  to {
    transform: translate(3px, 6px) rotate(2.5deg);
  }
}

/* Range contain 20–66 %: in by 24 %, out over 62–66 %. */
@keyframes s4-tags {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  8.7%,
  91.3% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

/* The window's voice pin: it lands, then pulses twice as the advice is spoken. */
@keyframes s4-mw-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  60% {
    opacity: 1;
    transform: scale(1.08);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes s4-mw-ping {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  15% {
    opacity: 1;
    transform: scale(1.25);
  }

  40% {
    opacity: 0.3;
    transform: scale(0.9);
  }

  65% {
    opacity: 1;
    transform: scale(1.25);
  }

  to {
    opacity: 0.7;
    transform: none;
  }
}

@keyframes s4-mw-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes s4-lean {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

@keyframes s4-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes s4-from {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Range contain 6–52 %: in by 10 %, out over 50–52 %. */
@keyframes s4-card {
  0% {
    opacity: 0;
    transform: translateX(26px);
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  8.7%,
  95.7% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes s4-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* gen:begin dial-keyframes (written by site/scenes-src/s4/gen.py: the level series) */
@keyframes s4-on {
  from,
  to {
    opacity: 1;
  }
}

@keyframes s4-gfill-safe {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s4-gfill-mild {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s4-gfill-moderate {
  0% {
    stroke-dashoffset: 0;
  }
  21.1% {
    stroke-dashoffset: 0;
  }
  21.15% {
    stroke-dashoffset: 0.0077;
  }
  21.3% {
    stroke-dashoffset: 0.0569;
  }
  21.6% {
    stroke-dashoffset: 0.1485;
  }
  21.75% {
    stroke-dashoffset: 0.1981;
  }
  21.9% {
    stroke-dashoffset: 0.257;
  }
  22% {
    stroke-dashoffset: 0.307;
  }
  22.05% {
    stroke-dashoffset: 0.3283;
  }
  22.45% {
    stroke-dashoffset: 0.3335;
  }
  22.5% {
    stroke-dashoffset: 0.348;
  }
  22.6% {
    stroke-dashoffset: 0.3935;
  }
  22.7% {
    stroke-dashoffset: 0.4318;
  }
  22.8% {
    stroke-dashoffset: 0.4655;
  }
  22.95% {
    stroke-dashoffset: 0.5107;
  }
  23.25% {
    stroke-dashoffset: 0.5903;
  }
  24% {
    stroke-dashoffset: 0.7759;
  }
  24.05% {
    stroke-dashoffset: 0.7844;
  }
  24.95% {
    stroke-dashoffset: 0.7878;
  }
  27.55% {
    stroke-dashoffset: 0.7873;
  }
  28.85% {
    stroke-dashoffset: 0.7431;
  }
  31.85% {
    stroke-dashoffset: 0.6588;
  }
  32.5% {
    stroke-dashoffset: 0.6364;
  }
  33% {
    stroke-dashoffset: 0.6155;
  }
  35.1% {
    stroke-dashoffset: 0.6128;
  }
  35.7% {
    stroke-dashoffset: 0.5874;
  }
  36.45% {
    stroke-dashoffset: 0.5631;
  }
  39.5% {
    stroke-dashoffset: 0.487;
  }
  40.65% {
    stroke-dashoffset: 0.453;
  }
  41.95% {
    stroke-dashoffset: 0.4511;
  }
  42.6% {
    stroke-dashoffset: 0.4268;
  }
  43.3% {
    stroke-dashoffset: 0.4057;
  }
  45% {
    stroke-dashoffset: 0.3693;
  }
  47.35% {
    stroke-dashoffset: 0.3347;
  }
  50.4% {
    stroke-dashoffset: 0.3009;
  }
  100% {
    stroke-dashoffset: 0.3;
  }
}

@keyframes s4-gfill-high {
  0% {
    stroke-dashoffset: 0.7341;
  }
  18.9% {
    stroke-dashoffset: 0.7343;
  }
  19.15% {
    stroke-dashoffset: 0.7463;
  }
  19.5% {
    stroke-dashoffset: 0.77;
  }
  19.8% {
    stroke-dashoffset: 0.7955;
  }
  20.05% {
    stroke-dashoffset: 0.822;
  }
  20.25% {
    stroke-dashoffset: 0.8483;
  }
  20.45% {
    stroke-dashoffset: 0.8824;
  }
  20.6% {
    stroke-dashoffset: 0.9166;
  }
  20.75% {
    stroke-dashoffset: 0.9615;
  }
  20.95% {
    stroke-dashoffset: 0.9625;
  }
  21% {
    stroke-dashoffset: 0.9672;
  }
  21.1% {
    stroke-dashoffset: 0.9933;
  }
  21.15% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 1;
  }
}

@keyframes s4-gfill-severe {
  0% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 1;
  }
}

@keyframes s4-beadc {
  0% {
    stroke: #c5562a;
  }
  21.08% {
    stroke: #c5562a;
  }
  21.18% {
    stroke: #c58418;
  }
  100% {
    stroke: #c58418;
  }
}

@keyframes s4-bw-safe {
  0% {
    opacity: 0;
  }
  21.08% {
    opacity: 0;
  }
  21.18% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s4-bw-mild {
  0% {
    opacity: 0;
  }
  21.08% {
    opacity: 0;
  }
  21.18% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s4-bw-moderate {
  0% {
    opacity: 0;
  }
  21.08% {
    opacity: 0;
  }
  21.18% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s4-bw-high {
  0% {
    opacity: 1;
  }
  21.08% {
    opacity: 1;
  }
  21.18% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s4-bw-severe {
  0% {
    opacity: 0;
  }
  21.08% {
    opacity: 0;
  }
  21.18% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s4-bead {
  0% {
    transform: rotate(21.67deg);
  }
  16.6% {
    transform: rotate(21.7deg);
  }
  18.55% {
    transform: rotate(21.68deg);
  }
  18.95% {
    transform: rotate(21.65deg);
  }
  19.25% {
    transform: rotate(21.07deg);
  }
  19.5% {
    transform: rotate(20.49deg);
  }
  19.75% {
    transform: rotate(19.8deg);
  }
  19.9% {
    transform: rotate(19.32deg);
  }
  20% {
    transform: rotate(18.97deg);
  }
  20.15% {
    transform: rotate(18.36deg);
  }
  20.25% {
    transform: rotate(17.91deg);
  }
  20.35% {
    transform: rotate(17.38deg);
  }
  20.45% {
    transform: rotate(16.78deg);
  }
  20.55% {
    transform: rotate(16.06deg);
  }
  20.6% {
    transform: rotate(15.65deg);
  }
  20.65% {
    transform: rotate(15.2deg);
  }
  20.75% {
    transform: rotate(14.17deg);
  }
  20.95% {
    transform: rotate(14.14deg);
  }
  21% {
    transform: rotate(13.98deg);
  }
  21.1% {
    transform: rotate(13.12deg);
  }
  21.15% {
    transform: rotate(9.64deg);
  }
  21.2% {
    transform: rotate(9.08deg);
  }
  21.3% {
    transform: rotate(8.02deg);
  }
  21.6% {
    transform: rotate(5deg);
  }
  21.7% {
    transform: rotate(3.93deg);
  }
  21.75% {
    transform: rotate(3.36deg);
  }
  21.8% {
    transform: rotate(2.76deg);
  }
  21.85% {
    transform: rotate(2.12deg);
  }
  21.9% {
    transform: rotate(1.42deg);
  }
  21.95% {
    transform: rotate(0.64deg);
  }
  22% {
    transform: rotate(-0.23deg);
  }
  22.05% {
    transform: rotate(-0.93deg);
  }
  22.45% {
    transform: rotate(-1.11deg);
  }
  22.5% {
    transform: rotate(-1.59deg);
  }
  22.55% {
    transform: rotate(-2.37deg);
  }
  22.6% {
    transform: rotate(-3.08deg);
  }
  22.65% {
    transform: rotate(-3.74deg);
  }
  22.7% {
    transform: rotate(-4.35deg);
  }
  22.8% {
    transform: rotate(-5.46deg);
  }
  22.95% {
    transform: rotate(-6.95deg);
  }
  23.1% {
    transform: rotate(-8.31deg);
  }
  23.3% {
    transform: rotate(-9.99deg);
  }
  23.8% {
    transform: rotate(-14.04deg);
  }
  24% {
    transform: rotate(-15.7deg);
  }
  24.05% {
    transform: rotate(-15.99deg);
  }
  24.95% {
    transform: rotate(-16.1deg);
  }
  25.5% {
    transform: rotate(-16.13deg);
  }
  27.55% {
    transform: rotate(-16.08deg);
  }
  28.2% {
    transform: rotate(-15.3deg);
  }
  28.85% {
    transform: rotate(-14.62deg);
  }
  31.1% {
    transform: rotate(-12.57deg);
  }
  31.85% {
    transform: rotate(-11.84deg);
  }
  32.5% {
    transform: rotate(-11.1deg);
  }
  33% {
    transform: rotate(-10.41deg);
  }
  35.1% {
    transform: rotate(-10.32deg);
  }
  35.45% {
    transform: rotate(-9.81deg);
  }
  35.7% {
    transform: rotate(-9.49deg);
  }
  36.05% {
    transform: rotate(-9.09deg);
  }
  36.45% {
    transform: rotate(-8.68deg);
  }
  37.25% {
    transform: rotate(-7.98deg);
  }
  39.5% {
    transform: rotate(-6.17deg);
  }
  40.1% {
    transform: rotate(-5.62deg);
  }
  40.65% {
    transform: rotate(-5.05deg);
  }
  40.7% {
    transform: rotate(-5.02deg);
  }
  41.95% {
    transform: rotate(-4.99deg);
  }
  42.6% {
    transform: rotate(-4.18deg);
  }
  42.95% {
    transform: rotate(-3.82deg);
  }
  43.3% {
    transform: rotate(-3.49deg);
  }
  44.05% {
    transform: rotate(-2.9deg);
  }
  45% {
    transform: rotate(-2.29deg);
  }
  46.05% {
    transform: rotate(-1.73deg);
  }
  47.35% {
    transform: rotate(-1.14deg);
  }
  48.75% {
    transform: rotate(-0.6deg);
  }
  50.4% {
    transform: rotate(-0.03deg);
  }
  54.65% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes s4-turn-w {
  0% {
    transform: scaleX(0.767);
  }
  0.8% {
    transform: scaleX(0.697);
  }
  1.7% {
    transform: scaleX(0.693);
  }
  2.2% {
    transform: scaleX(0.635);
  }
  16.4% {
    transform: scaleX(0.635);
  }
  17% {
    transform: scaleX(0.651);
  }
  17.55% {
    transform: scaleX(0.694);
  }
  18.2% {
    transform: scaleX(0.695);
  }
  18.9% {
    transform: scaleX(0.811);
  }
  19.45% {
    transform: scaleX(0.866);
  }
  19.75% {
    transform: scaleX(0.915);
  }
  20.15% {
    transform: scaleX(0.866);
  }
  20.45% {
    transform: scaleX(0.895);
  }
  20.75% {
    transform: scaleX(0.874);
  }
  21% {
    transform: scaleX(0.926);
  }
  21.2% {
    transform: scaleX(0.927);
  }
  21.7% {
    transform: scaleX(0.818);
  }
  22.05% {
    transform: scaleX(0.81);
  }
  22.45% {
    transform: scaleX(0.896);
  }
  22.7% {
    transform: scaleX(0.891);
  }
  22.9% {
    transform: scaleX(0.908);
  }
  24.05% {
    transform: scaleX(0.737);
  }
  27.55% {
    transform: scaleX(0.734);
  }
  29.9% {
    transform: scaleX(0.773);
  }
  30.95% {
    transform: scaleX(0.682);
  }
  33% {
    transform: scaleX(0.554);
  }
  33.95% {
    transform: scaleX(0.422);
  }
  35.1% {
    transform: scaleX(0.419);
  }
  36.3% {
    transform: scaleX(0.471);
  }
  40.65% {
    transform: scaleX(0.465);
  }
  41.9% {
    transform: scaleX(0.419);
  }
  43.85% {
    transform: scaleX(0.489);
  }
  49.4% {
    transform: scaleX(0.401);
  }
  50.65% {
    transform: scaleX(0.415);
  }
  52.7% {
    transform: scaleX(0.321);
  }
  57.6% {
    transform: scaleX(0.14);
  }
  58.65% {
    transform: scaleX(0.081);
  }
  59.15% {
    transform: scaleX(0.026);
  }
  63.35% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes s4-band-c {
  0% {
    color: #c5562a;
  }
  32.21% {
    color: #c5562a;
  }
  32.31% {
    color: #c58418;
  }
  50.9% {
    color: #c58418;
  }
  51% {
    color: #9c9430;
  }
  56.06% {
    color: #9c9430;
  }
  56.16% {
    color: #4f7c84;
  }
  100% {
    color: #4f7c84;
  }
}

@keyframes s4-band-i {
  0% {
    color: #ecb498;
  }
  32.21% {
    color: #ecb498;
  }
  32.31% {
    color: #f0cc93;
  }
  50.9% {
    color: #f0cc93;
  }
  51% {
    color: #e0dda7;
  }
  56.06% {
    color: #e0dda7;
  }
  56.16% {
    color: #c7dddf;
  }
  100% {
    color: #c7dddf;
  }
}

@keyframes s4-sparkt {
  0% {
    transform: translateX(-652.77px);
  }
  2.15% {
    transform: translateX(-691.96px);
  }
  2.2% {
    transform: translateX(-692.4px);
  }
  16.25% {
    transform: translateX(-692.39px);
  }
  16.4% {
    transform: translateX(-692.29px);
  }
  16.55% {
    transform: translateX(-692.06px);
  }
  16.7% {
    transform: translateX(-691.62px);
  }
  16.8% {
    transform: translateX(-691.2px);
  }
  16.95% {
    transform: translateX(-690.32px);
  }
  17.05% {
    transform: translateX(-689.55px);
  }
  17.2% {
    transform: translateX(-688.11px);
  }
  17.3% {
    transform: translateX(-686.94px);
  }
  17.45% {
    transform: translateX(-684.84px);
  }
  17.55% {
    transform: translateX(-683.21px);
  }
  17.65% {
    transform: translateX(-681.37px);
  }
  17.7% {
    transform: translateX(-680.38px);
  }
  17.8% {
    transform: translateX(-678.25px);
  }
  17.9% {
    transform: translateX(-675.91px);
  }
  17.95% {
    transform: translateX(-674.66px);
  }
  18.05% {
    transform: translateX(-672.01px);
  }
  18.15% {
    transform: translateX(-669.14px);
  }
  18.25% {
    transform: translateX(-666.06px);
  }
  18.35% {
    transform: translateX(-662.77px);
  }
  18.4% {
    transform: translateX(-661.04px);
  }
  18.5% {
    transform: translateX(-657.43px);
  }
  18.6% {
    transform: translateX(-653.61px);
  }
  18.65% {
    transform: translateX(-651.63px);
  }
  18.75% {
    transform: translateX(-647.5px);
  }
  18.85% {
    transform: translateX(-643.17px);
  }
  19% {
    transform: translateX(-636.3px);
  }
  19.1% {
    transform: translateX(-631.49px);
  }
  19.25% {
    transform: translateX(-623.92px);
  }
  19.35% {
    transform: translateX(-618.66px);
  }
  19.45% {
    transform: translateX(-613.23px);
  }
  19.55% {
    transform: translateX(-607.64px);
  }
  19.7% {
    transform: translateX(-598.97px);
  }
  19.8% {
    transform: translateX(-593.01px);
  }
  19.9% {
    transform: translateX(-586.92px);
  }
  20% {
    transform: translateX(-580.71px);
  }
  20.15% {
    transform: translateX(-571.18px);
  }
  20.35% {
    transform: translateX(-558.14px);
  }
  20.6% {
    transform: translateX(-541.41px);
  }
  20.85% {
    transform: translateX(-524.36px);
  }
  21.4% {
    transform: translateX(-486.57px);
  }
  21.55% {
    transform: translateX(-476.38px);
  }
  21.7% {
    transform: translateX(-466.31px);
  }
  21.85% {
    transform: translateX(-456.4px);
  }
  22% {
    transform: translateX(-446.68px);
  }
  22.15% {
    transform: translateX(-437.18px);
  }
  22.3% {
    transform: translateX(-427.94px);
  }
  22.45% {
    transform: translateX(-419px);
  }
  22.6% {
    transform: translateX(-410.37px);
  }
  22.75% {
    transform: translateX(-402.09px);
  }
  22.9% {
    transform: translateX(-394.18px);
  }
  23.05% {
    transform: translateX(-386.67px);
  }
  23.2% {
    transform: translateX(-379.57px);
  }
  23.35% {
    transform: translateX(-372.91px);
  }
  23.45% {
    transform: translateX(-368.72px);
  }
  23.55% {
    transform: translateX(-364.73px);
  }
  23.6% {
    transform: translateX(-362.82px);
  }
  23.7% {
    transform: translateX(-359.15px);
  }
  23.75% {
    transform: translateX(-357.39px);
  }
  23.85% {
    transform: translateX(-354.03px);
  }
  23.9% {
    transform: translateX(-352.43px);
  }
  23.95% {
    transform: translateX(-350.89px);
  }
  24.05% {
    transform: translateX(-347.95px);
  }
  24.1% {
    transform: translateX(-346.57px);
  }
  24.2% {
    transform: translateX(-343.95px);
  }
  24.25% {
    transform: translateX(-342.73px);
  }
  24.35% {
    transform: translateX(-340.43px);
  }
  24.4% {
    transform: translateX(-339.35px);
  }
  24.5% {
    transform: translateX(-337.36px);
  }
  24.65% {
    transform: translateX(-334.75px);
  }
  24.8% {
    transform: translateX(-332.57px);
  }
  24.95% {
    transform: translateX(-330.79px);
  }
  25.1% {
    transform: translateX(-329.4px);
  }
  25.25% {
    transform: translateX(-328.35px);
  }
  25.4% {
    transform: translateX(-327.61px);
  }
  25.5% {
    transform: translateX(-327.26px);
  }
  25.6% {
    transform: translateX(-327.01px);
  }
  25.85% {
    transform: translateX(-326.74px);
  }
  26% {
    transform: translateX(-326.71px);
  }
  26.05% {
    transform: translateX(-326.83px);
  }
  63.45% {
    transform: translateX(-980.89px);
  }
  63.5% {
    transform: translateX(-981.36px);
  }
  100% {
    transform: translateX(-981.36px);
  }
}

@keyframes s4-spark {
  0% {
    stroke: #c5562a;
  }
  32.21% {
    stroke: #c5562a;
  }
  32.31% {
    stroke: #c58418;
  }
  50.9% {
    stroke: #c58418;
  }
  51% {
    stroke: #9c9430;
  }
  56.06% {
    stroke: #9c9430;
  }
  56.16% {
    stroke: #4f7c84;
  }
  100% {
    stroke: #4f7c84;
  }
}

@keyframes s4-spark-a {
  0% {
    opacity: 1;
  }
  25.99% {
    opacity: 1;
  }
  26.09% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s4-spark-b {
  0% {
    opacity: 0;
  }
  25.99% {
    opacity: 0;
  }
  26.09% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s4-st-up {
  0% {
    opacity: 1;
  }
  58.7% {
    opacity: 1;
  }
  58.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s4-st-hold {
  0% {
    opacity: 0;
  }
  58.7% {
    opacity: 0;
  }
  58.8% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Steps with the phone's MSDV flaps (steps(1, end) holds each value to the next stop). */
@keyframes s4-dose {
  0% {
    --s4-dose: 340;
  }
  19% {
    --s4-dose: 339;
  }
  19.6% {
    --s4-dose: 333;
  }
  20.25% {
    --s4-dose: 323;
  }
  20.85% {
    --s4-dose: 306;
  }
  21.5% {
    --s4-dose: 288;
  }
  22.1% {
    --s4-dose: 267;
  }
  22.75% {
    --s4-dose: 255;
  }
  23.35% {
    --s4-dose: 238;
  }
  24% {
    --s4-dose: 222;
  }
  24.6% {
    --s4-dose: 221;
  }
  27.65% {
    --s4-dose: 222;
  }
  27.9% {
    --s4-dose: 223;
  }
  28.2% {
    --s4-dose: 224;
  }
  28.5% {
    --s4-dose: 225;
  }
  28.8% {
    --s4-dose: 226;
  }
  29.15% {
    --s4-dose: 227;
  }
  29.5% {
    --s4-dose: 228;
  }
  29.9% {
    --s4-dose: 229;
  }
  30.25% {
    --s4-dose: 230;
  }
  30.6% {
    --s4-dose: 231;
  }
  31% {
    --s4-dose: 232;
  }
  31.35% {
    --s4-dose: 233;
  }
  31.65% {
    --s4-dose: 234;
  }
  32% {
    --s4-dose: 235;
  }
  32.3% {
    --s4-dose: 236;
  }
  32.55% {
    --s4-dose: 237;
  }
  32.8% {
    --s4-dose: 238;
  }
  33.05% {
    --s4-dose: 239;
  }
  35.3% {
    --s4-dose: 240;
  }
  35.55% {
    --s4-dose: 241;
  }
  35.8% {
    --s4-dose: 242;
  }
  36.1% {
    --s4-dose: 243;
  }
  36.4% {
    --s4-dose: 244;
  }
  36.75% {
    --s4-dose: 245;
  }
  37.15% {
    --s4-dose: 246;
  }
  37.55% {
    --s4-dose: 247;
  }
  37.95% {
    --s4-dose: 248;
  }
  38.4% {
    --s4-dose: 249;
  }
  38.8% {
    --s4-dose: 250;
  }
  39.2% {
    --s4-dose: 251;
  }
  39.6% {
    --s4-dose: 252;
  }
  39.95% {
    --s4-dose: 253;
  }
  40.3% {
    --s4-dose: 254;
  }
  40.6% {
    --s4-dose: 255;
  }
  42.15% {
    --s4-dose: 256;
  }
  42.4% {
    --s4-dose: 257;
  }
  42.7% {
    --s4-dose: 258;
  }
  43% {
    --s4-dose: 259;
  }
  43.35% {
    --s4-dose: 260;
  }
  43.75% {
    --s4-dose: 261;
  }
  44.2% {
    --s4-dose: 262;
  }
  44.7% {
    --s4-dose: 263;
  }
  45.3% {
    --s4-dose: 264;
  }
  45.9% {
    --s4-dose: 265;
  }
  46.6% {
    --s4-dose: 266;
  }
  47.35% {
    --s4-dose: 267;
  }
  48.15% {
    --s4-dose: 268;
  }
  49.05% {
    --s4-dose: 269;
  }
  50%,
  100% {
    --s4-dose: 270;
  }
}

@keyframes s4-head {
  0% {
    transform: rotate(13deg) translate(3px, 3px);
  }
  22.25% {
    transform: rotate(13deg) translate(3px, 3px);
  }
  23.2% {
    transform: rotate(10.73deg) translate(2.48px, 2.48px);
  }
  23.8% {
    transform: rotate(9.68deg) translate(2.23px, 2.23px);
  }
  24.7% {
    transform: rotate(8.88deg) translate(2.05px, 2.05px);
  }
  25.6% {
    transform: rotate(8.61deg) translate(1.99px, 1.99px);
  }
  26.05% {
    transform: rotate(8.6deg) translate(1.99px, 1.99px);
  }
  30.45% {
    transform: rotate(11.23deg) translate(2.59px, 2.59px);
  }
  32.8% {
    transform: rotate(11.71deg) translate(2.7px, 2.7px);
  }
  42.45% {
    transform: rotate(9.92deg) translate(2.29px, 2.29px);
  }
  50.95% {
    transform: rotate(8.91deg) translate(2.06px, 2.06px);
  }
  53.65% {
    transform: rotate(8.07deg) translate(1.86px, 1.86px);
  }
  56.7% {
    transform: rotate(6.58deg) translate(1.52px, 1.52px);
  }
  62.9% {
    transform: rotate(2.27deg) translate(0.52px, 0.52px);
  }
  66.85% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  100% {
    transform: rotate(0deg) translate(0px, 0px);
  }
}

@keyframes s4-body {
  0% {
    transform: rotate(4deg);
  }
  22.25% {
    transform: rotate(4deg);
  }
  23.8% {
    transform: rotate(2.98deg);
  }
  24.7% {
    transform: rotate(2.73deg);
  }
  25.6% {
    transform: rotate(2.65deg);
  }
  30.45% {
    transform: rotate(3.46deg);
  }
  32.8% {
    transform: rotate(3.6deg);
  }
  42.45% {
    transform: rotate(3.05deg);
  }
  50.95% {
    transform: rotate(2.74deg);
  }
  56.7% {
    transform: rotate(2.03deg);
  }
  62.9% {
    transform: rotate(0.7deg);
  }
  66.85% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes s4-unwell {
  0% {
    opacity: 1;
  }
  22.25% {
    opacity: 1;
  }
  23.2% {
    opacity: 0.825;
  }
  23.8% {
    opacity: 0.745;
  }
  24.7% {
    opacity: 0.683;
  }
  25.6% {
    opacity: 0.662;
  }
  26.05% {
    opacity: 0.662;
  }
  30.45% {
    opacity: 0.864;
  }
  32.8% {
    opacity: 0.901;
  }
  42.45% {
    opacity: 0.763;
  }
  50.95% {
    opacity: 0.685;
  }
  53.65% {
    opacity: 0.62;
  }
  56.7% {
    opacity: 0.506;
  }
  62.9% {
    opacity: 0.174;
  }
  66.85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s4-well {
  0% {
    opacity: 0;
  }
  22.25% {
    opacity: 0;
  }
  23.2% {
    opacity: 0.175;
  }
  23.8% {
    opacity: 0.256;
  }
  24.7% {
    opacity: 0.317;
  }
  25.6% {
    opacity: 0.338;
  }
  26.05% {
    opacity: 0.338;
  }
  30.45% {
    opacity: 0.136;
  }
  32.8% {
    opacity: 0.099;
  }
  42.45% {
    opacity: 0.237;
  }
  50.95% {
    opacity: 0.315;
  }
  53.65% {
    opacity: 0.38;
  }
  56.7% {
    opacity: 0.493;
  }
  62.9% {
    opacity: 0.826;
  }
  66.85% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s4-calm {
  0% {
    opacity: 1;
  }
  66.35% {
    opacity: 1;
  }
  67.35% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s4-smile {
  0% {
    opacity: 0;
  }
  66.35% {
    opacity: 0;
  }
  67.35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s4-mw-drive {
  0% {
    transform: translate(903.4px, 634.4px) rotate(16.2deg);
  }
  0.85% {
    transform: translate(911.6px, 636.4px) rotate(14.7deg);
  }
  2.2% {
    transform: translate(924px, 640px) rotate(18.8deg);
  }
  16.15% {
    transform: translate(924px, 640px) rotate(18.8deg);
  }
  16.7% {
    transform: translate(923.6px, 639.9px) rotate(18.6deg);
  }
  17.05% {
    transform: translate(922.6px, 639.5px) rotate(18.2deg);
  }
  17.4% {
    transform: translate(920.5px, 638.8px) rotate(17.4deg);
  }
  17.75% {
    transform: translate(917.3px, 637.9px) rotate(16.2deg);
  }
  18.05% {
    transform: translate(913.6px, 636.9px) rotate(15.1deg);
  }
  18.4% {
    transform: translate(907.8px, 635.5px) rotate(14.9deg);
  }
  18.7% {
    transform: translate(901.7px, 633.9px) rotate(16.8deg);
  }
  19% {
    transform: translate(894.4px, 631.4px) rotate(19.1deg);
  }
  19.3% {
    transform: translate(885.7px, 628.2px) rotate(22.7deg);
  }
  19.4% {
    transform: translate(882.4px, 626.9px) rotate(25.5deg);
  }
  19.5% {
    transform: translate(879px, 625.3px) rotate(30.8deg);
  }
  19.6% {
    transform: translate(875.6px, 623.3px) rotate(38.2deg);
  }
  19.7% {
    transform: translate(872.4px, 620.4px) rotate(47.4deg);
  }
  19.8% {
    transform: translate(869.8px, 616.7px) rotate(57.8deg);
  }
  19.9% {
    transform: translate(867.6px, 612.2px) rotate(68.7deg);
  }
  20% {
    transform: translate(866.1px, 607.1px) rotate(80.1deg);
  }
  20.1% {
    transform: translate(865.6px, 601.3px) rotate(94.7deg);
  }
  20.15% {
    transform: translate(866px, 598.1px) rotate(103.1deg);
  }
  20.2% {
    transform: translate(867.1px, 595px) rotate(111.7deg);
  }
  20.3% {
    transform: translate(871px, 588.9px) rotate(127.9deg);
  }
  20.4% {
    transform: translate(876.9px, 583.1px) rotate(139.5deg);
  }
  20.5% {
    transform: translate(884.7px, 577.6px) rotate(151.4deg);
  }
  20.55% {
    transform: translate(889.6px, 575.3px) rotate(158deg);
  }
  20.6% {
    transform: translate(895.2px, 573.6px) rotate(164.4deg);
  }
  20.65% {
    transform: translate(901.6px, 572.2px) rotate(168.8deg);
  }
  20.75% {
    transform: translate(916.1px, 570px) rotate(173.3deg);
  }
  20.85% {
    transform: translate(932px, 568.9px) rotate(178.2deg);
  }
  20.95% {
    transform: translate(947.2px, 568.4px) rotate(176.2deg);
  }
  21% {
    transform: translate(954.2px, 567.8px) rotate(175.1deg);
  }
  21.1% {
    transform: translate(966.7px, 566.7px) rotate(172.9deg);
  }
  21.15% {
    transform: translate(972.3px, 565.9px) rotate(168.8deg);
  }
  21.2% {
    transform: translate(977.6px, 564.8px) rotate(161.3deg);
  }
  21.25% {
    transform: translate(982.4px, 562.9px) rotate(152deg);
  }
  21.35% {
    transform: translate(989.9px, 556.8px) rotate(131.8deg);
  }
  21.4% {
    transform: translate(992.8px, 553.1px) rotate(120.8deg);
  }
  21.45% {
    transform: translate(995px, 549px) rotate(105.9deg);
  }
  21.5% {
    transform: translate(996px, 544.5px) rotate(88.7deg);
  }
  21.55% {
    transform: translate(994.9px, 540.1px) rotate(71.6deg);
  }
  21.6% {
    transform: translate(992.4px, 536.1px) rotate(56.8deg);
  }
  21.65% {
    transform: translate(989.2px, 532.5px) rotate(46.8deg);
  }
  21.75% {
    transform: translate(981.5px, 526.1px) rotate(34deg);
  }
  21.8% {
    transform: translate(976.9px, 523.2px) rotate(27.6deg);
  }
  21.9% {
    transform: translate(965.7px, 519.1px) rotate(16.5deg);
  }
  21.95% {
    transform: translate(959.1px, 517.5px) rotate(14.5deg);
  }
  22% {
    transform: translate(951.8px, 515.6px) rotate(15.2deg);
  }
  22.05% {
    transform: translate(943.5px, 513.2px) rotate(16.9deg);
  }
  22.1% {
    transform: translate(933.8px, 510.1px) rotate(17.7deg);
  }
  22.15% {
    transform: translate(922.5px, 506.5px) rotate(17.3deg);
  }
  22.2% {
    transform: translate(909.5px, 502.6px) rotate(15.9deg);
  }
  22.25% {
    transform: translate(895.8px, 498.9px) rotate(13.7deg);
  }
  22.3% {
    transform: translate(883px, 496.1px) rotate(12deg);
  }
  22.35% {
    transform: translate(872.1px, 493.9px) rotate(11.2deg);
  }
  22.4% {
    transform: translate(862.9px, 492.1px) rotate(10.9deg);
  }
  22.45% {
    transform: translate(855.1px, 490.6px) rotate(9.9deg);
  }
  22.5% {
    transform: translate(848.3px, 489.4px) rotate(8deg);
  }
  22.55% {
    transform: translate(842.3px, 488.7px) rotate(6.3deg);
  }
  22.6% {
    transform: translate(836.8px, 488.3px) rotate(6.1deg);
  }
  22.65% {
    transform: translate(831.8px, 487.8px) rotate(8.2deg);
  }
  22.7% {
    transform: translate(827.3px, 487.1px) rotate(12.8deg);
  }
  22.8% {
    transform: translate(819.3px, 484.7px) rotate(26.3deg);
  }
  22.85% {
    transform: translate(816px, 482.7px) rotate(33.5deg);
  }
  22.95% {
    transform: translate(810.6px, 478px) rotate(47deg);
  }
  23% {
    transform: translate(808.4px, 475.5px) rotate(54deg);
  }
  23.1% {
    transform: translate(805.1px, 470px) rotate(72.2deg);
  }
  23.15% {
    transform: translate(804.1px, 467px) rotate(82.5deg);
  }
  23.2% {
    transform: translate(804.1px, 464px) rotate(92.8deg);
  }
  23.3% {
    transform: translate(805.8px, 458.4px) rotate(111.8deg);
  }
  23.35% {
    transform: translate(807.1px, 455.9px) rotate(119.6deg);
  }
  23.45% {
    transform: translate(810.5px, 451.3px) rotate(132.8deg);
  }
  23.55% {
    transform: translate(814.6px, 447.6px) rotate(144.9deg);
  }
  23.7% {
    transform: translate(822px, 444.1px) rotate(160.3deg);
  }
  23.8% {
    transform: translate(827.3px, 442.8px) rotate(167.2deg);
  }
  24.1% {
    transform: translate(843.8px, 440.7px) rotate(177.1deg);
  }
  24.3% {
    transform: translate(855.1px, 440.8px) rotate(182.8deg);
  }
  24.65% {
    transform: translate(874.8px, 442.4px) rotate(185.7deg);
  }
  24.9% {
    transform: translate(887.2px, 443.9px) rotate(187deg);
  }
  25.05% {
    transform: translate(893.3px, 444.7px) rotate(186.8deg);
  }
  25.2% {
    transform: translate(898px, 445.2px) rotate(186.2deg);
  }
  25.35% {
    transform: translate(901.5px, 445.6px) rotate(185.7deg);
  }
  25.55% {
    transform: translate(904.3px, 445.9px) rotate(185.4deg);
  }
  25.8% {
    transform: translate(905.8px, 446px) rotate(185.2deg);
  }
  26% {
    transform: translate(906px, 446px) rotate(185.2deg);
  }
  26.05% {
    transform: translate(905.6px, 446px) rotate(185.2deg);
  }
  26.25% {
    transform: translate(891.5px, 444.4px) rotate(186.9deg);
  }
  26.35% {
    transform: translate(885px, 443.6px) rotate(187deg);
  }
  26.45% {
    transform: translate(879.1px, 442.9px) rotate(186.3deg);
  }
  26.6% {
    transform: translate(871.5px, 442.1px) rotate(185.3deg);
  }
  26.75% {
    transform: translate(865px, 441.6px) rotate(184.6deg);
  }
  26.9% {
    transform: translate(859.3px, 441.1px) rotate(183.9deg);
  }
  27.25% {
    transform: translate(848.3px, 440.6px) rotate(179.6deg);
  }
  27.75% {
    transform: translate(835.6px, 441.5px) rotate(172.7deg);
  }
  28.1% {
    transform: translate(828px, 442.7px) rotate(167.8deg);
  }
  28.3% {
    transform: translate(824px, 443.6px) rotate(163.5deg);
  }
  28.6% {
    transform: translate(818.5px, 445.4px) rotate(153.9deg);
  }
  28.9% {
    transform: translate(813.8px, 448.2px) rotate(142.8deg);
  }
  29.2% {
    transform: translate(810px, 451.9px) rotate(131.3deg);
  }
  29.5% {
    transform: translate(807px, 456px) rotate(119.2deg);
  }
  29.9% {
    transform: translate(804.4px, 462.2px) rotate(99.1deg);
  }
  30.05% {
    transform: translate(804px, 464.6px) rotate(90.7deg);
  }
  30.25% {
    transform: translate(804.3px, 467.9px) rotate(79.4deg);
  }
  30.7% {
    transform: translate(807.8px, 474.6px) rotate(56.5deg);
  }
  31.25% {
    transform: translate(814.4px, 481.4px) rotate(37.4deg);
  }
  31.7% {
    transform: translate(821.5px, 485.7px) rotate(22deg);
  }
  32% {
    transform: translate(827.3px, 487.2px) rotate(12.7deg);
  }
  32.25% {
    transform: translate(832.6px, 487.9px) rotate(7.7deg);
  }
  32.5% {
    transform: translate(838.4px, 488.4px) rotate(5.9deg);
  }
  32.8% {
    transform: translate(846px, 489.1px) rotate(7.3deg);
  }
  33.05% {
    transform: translate(853.2px, 490.2px) rotate(9.4deg);
  }
  33.25% {
    transform: translate(859.6px, 491.5px) rotate(10.7deg);
  }
  33.5% {
    transform: translate(868.9px, 493.2px) rotate(11deg);
  }
  33.75% {
    transform: translate(879.8px, 495.4px) rotate(11.7deg);
  }
  33.95% {
    transform: translate(889.9px, 497.6px) rotate(12.8deg);
  }
  34.45% {
    transform: translate(917.8px, 505.1px) rotate(16.9deg);
  }
  34.6% {
    transform: translate(925.3px, 507.4px) rotate(17.5deg);
  }
  34.75% {
    transform: translate(932.2px, 509.6px) rotate(17.7deg);
  }
  34.9% {
    transform: translate(938.3px, 511.6px) rotate(17.6deg);
  }
  35.1% {
    transform: translate(945.6px, 513.9px) rotate(16.5deg);
  }
  35.3% {
    transform: translate(952.1px, 515.7px) rotate(15.1deg);
  }
  35.55% {
    transform: translate(959.4px, 517.5px) rotate(14.5deg);
  }
  35.9% {
    transform: translate(968.2px, 519.8px) rotate(18.1deg);
  }
  36.3% {
    transform: translate(976.7px, 523.1px) rotate(27.3deg);
  }
  36.7% {
    transform: translate(983.6px, 527.6px) rotate(37.2deg);
  }
  37.15% {
    transform: translate(989.9px, 533.2px) rotate(48.5deg);
  }
  37.3% {
    transform: translate(991.7px, 535.3px) rotate(54deg);
  }
  37.45% {
    transform: translate(993.4px, 537.4px) rotate(61.4deg);
  }
  37.65% {
    transform: translate(995.1px, 540.5px) rotate(73.1deg);
  }
  37.85% {
    transform: translate(996px, 543.8px) rotate(86deg);
  }
  38.1% {
    transform: translate(995.4px, 548.1px) rotate(102.3deg);
  }
  38.3% {
    transform: translate(993.9px, 551.3px) rotate(114.3deg);
  }
  38.5% {
    transform: translate(992.1px, 554.2px) rotate(124.1deg);
  }
  38.85% {
    transform: translate(988px, 558.8px) rotate(137.8deg);
  }
  39.15% {
    transform: translate(983.7px, 562.2px) rotate(149deg);
  }
  39.35% {
    transform: translate(980.4px, 563.9px) rotate(156.1deg);
  }
  39.65% {
    transform: translate(974.8px, 565.5px) rotate(165.7deg);
  }
  39.85% {
    transform: translate(970.8px, 566.2px) rotate(170.3deg);
  }
  40.05% {
    transform: translate(966.6px, 566.7px) rotate(173deg);
  }
  40.5% {
    transform: translate(956.3px, 567.6px) rotate(174.8deg);
  }
  40.9% {
    transform: translate(946.1px, 568.5px) rotate(176.4deg);
  }
  41.25% {
    transform: translate(936.3px, 568.8px) rotate(178.4deg);
  }
  41.5% {
    transform: translate(928.9px, 569px) rotate(177.6deg);
  }
  41.8% {
    transform: translate(920px, 569.5px) rotate(174.5deg);
  }
  42.4% {
    transform: translate(903.4px, 571.9px) rotate(169.6deg);
  }
  42.65% {
    transform: translate(897.3px, 573.1px) rotate(166.1deg);
  }
  42.85% {
    transform: translate(892.8px, 574.3px) rotate(161.8deg);
  }
  43.25% {
    transform: translate(885px, 577.5px) rotate(151.8deg);
  }
  43.75% {
    transform: translate(877.4px, 582.7px) rotate(140.4deg);
  }
  44.3% {
    transform: translate(871.1px, 588.8px) rotate(128.2deg);
  }
  44.8% {
    transform: translate(867.2px, 594.7px) rotate(112.5deg);
  }
  45.25% {
    transform: translate(865.7px, 600.3px) rotate(97.4deg);
  }
  45.7% {
    transform: translate(865.9px, 605.7px) rotate(83.5deg);
  }
  46.1% {
    transform: translate(866.9px, 610px) rotate(73.5deg);
  }
  47.05% {
    transform: translate(871.1px, 618.8px) rotate(52.1deg);
  }
  47.5% {
    transform: translate(874px, 622px) rotate(42.5deg);
  }
  47.95% {
    transform: translate(877.4px, 624.4px) rotate(34.1deg);
  }
  48.6% {
    transform: translate(882.4px, 626.9px) rotate(25.5deg);
  }
  49.45% {
    transform: translate(888.9px, 629.4px) rotate(21.1deg);
  }
  50.85% {
    transform: translate(899px, 633.1px) rotate(17.6deg);
  }
  52.25% {
    transform: translate(908.5px, 635.7px) rotate(14.8deg);
  }
  53.1% {
    transform: translate(914.2px, 637.1px) rotate(15.2deg);
  }
  54.65% {
    transform: translate(924px, 640px) rotate(18.8deg);
  }
  100% {
    transform: translate(924px, 640px) rotate(18.8deg);
  }
}

@keyframes s4-mw-lit-a0 {
  0% {
    stroke-dashoffset: 0.0379;
  }
  2.2% {
    stroke-dashoffset: 0;
  }
  16.55% {
    stroke-dashoffset: 0.0003;
  }
  17.1% {
    stroke-dashoffset: 0.0031;
  }
  17.6% {
    stroke-dashoffset: 0.0096;
  }
  18.1% {
    stroke-dashoffset: 0.0207;
  }
  18.55% {
    stroke-dashoffset: 0.0352;
  }
  19.15% {
    stroke-dashoffset: 0.0626;
  }
  19.45% {
    stroke-dashoffset: 0.0807;
  }
  19.7% {
    stroke-dashoffset: 0.0988;
  }
  19.9% {
    stroke-dashoffset: 0.1158;
  }
  20.1% {
    stroke-dashoffset: 0.1357;
  }
  20.3% {
    stroke-dashoffset: 0.1601;
  }
  20.45% {
    stroke-dashoffset: 0.1829;
  }
  20.55% {
    stroke-dashoffset: 0.2014;
  }
  20.65% {
    stroke-dashoffset: 0.2234;
  }
  20.95% {
    stroke-dashoffset: 0.3048;
  }
  21.1% {
    stroke-dashoffset: 0.3395;
  }
  21.3% {
    stroke-dashoffset: 0.3771;
  }
  21.7% {
    stroke-dashoffset: 0.4443;
  }
  21.9% {
    stroke-dashoffset: 0.4842;
  }
  22% {
    stroke-dashoffset: 0.5098;
  }
  22.1% {
    stroke-dashoffset: 0.5431;
  }
  22.15% {
    stroke-dashoffset: 0.5641;
  }
  22.3% {
    stroke-dashoffset: 0.6367;
  }
  22.35% {
    stroke-dashoffset: 0.6565;
  }
  22.4% {
    stroke-dashoffset: 0.6731;
  }
  22.5% {
    stroke-dashoffset: 0.6994;
  }
  22.6% {
    stroke-dashoffset: 0.72;
  }
  22.7% {
    stroke-dashoffset: 0.7371;
  }
  22.85% {
    stroke-dashoffset: 0.7587;
  }
  23.05% {
    stroke-dashoffset: 0.7832;
  }
  23.35% {
    stroke-dashoffset: 0.8153;
  }
  24.85% {
    stroke-dashoffset: 0.9623;
  }
  25.05% {
    stroke-dashoffset: 0.9773;
  }
  25.25% {
    stroke-dashoffset: 0.988;
  }
  25.45% {
    stroke-dashoffset: 0.9949;
  }
  25.7% {
    stroke-dashoffset: 0.999;
  }
  100% {
    stroke-dashoffset: 1;
  }
}

@keyframes s4-mw-lit-b0 {
  0% {
    stroke-dashoffset: 1;
  }
  26% {
    stroke-dashoffset: 1;
  }
  26.05% {
    stroke-dashoffset: 0.997;
  }
  26.25% {
    stroke-dashoffset: 0.9048;
  }
  26.4% {
    stroke-dashoffset: 0.8427;
  }
  26.55% {
    stroke-dashoffset: 0.7898;
  }
  26.7% {
    stroke-dashoffset: 0.7449;
  }
  26.9% {
    stroke-dashoffset: 0.6945;
  }
  27.1% {
    stroke-dashoffset: 0.6517;
  }
  27.35% {
    stroke-dashoffset: 0.6051;
  }
  27.6% {
    stroke-dashoffset: 0.5634;
  }
  28.1% {
    stroke-dashoffset: 0.4901;
  }
  28.7% {
    stroke-dashoffset: 0.4136;
  }
  29.3% {
    stroke-dashoffset: 0.3444;
  }
  31.15% {
    stroke-dashoffset: 0.141;
  }
  31.75% {
    stroke-dashoffset: 0.0688;
  }
  32.25% {
    stroke-dashoffset: 0.0014;
  }
  32.3% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s4-mw-lit-b1 {
  0% {
    stroke-dashoffset: 1;
  }
  32.25% {
    stroke-dashoffset: 1;
  }
  32.55% {
    stroke-dashoffset: 0.9824;
  }
  32.9% {
    stroke-dashoffset: 0.9583;
  }
  33.2% {
    stroke-dashoffset: 0.9341;
  }
  33.45% {
    stroke-dashoffset: 0.9104;
  }
  33.65% {
    stroke-dashoffset: 0.8883;
  }
  33.85% {
    stroke-dashoffset: 0.863;
  }
  34.45% {
    stroke-dashoffset: 0.7741;
  }
  34.75% {
    stroke-dashoffset: 0.7349;
  }
  35.15% {
    stroke-dashoffset: 0.6936;
  }
  35.6% {
    stroke-dashoffset: 0.6575;
  }
  36.1% {
    stroke-dashoffset: 0.6251;
  }
  36.7% {
    stroke-dashoffset: 0.5923;
  }
  39.2% {
    stroke-dashoffset: 0.4757;
  }
  40.15% {
    stroke-dashoffset: 0.4259;
  }
  40.95% {
    stroke-dashoffset: 0.3745;
  }
  42.4% {
    stroke-dashoffset: 0.2666;
  }
  43.15% {
    stroke-dashoffset: 0.2214;
  }
  43.75% {
    stroke-dashoffset: 0.1923;
  }
  44.45% {
    stroke-dashoffset: 0.1637;
  }
  45.3% {
    stroke-dashoffset: 0.1342;
  }
  46.15% {
    stroke-dashoffset: 0.1086;
  }
  48.25% {
    stroke-dashoffset: 0.0557;
  }
  50.95% {
    stroke-dashoffset: 0.0001;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s4-mw-lit-b2 {
  0% {
    stroke-dashoffset: 1;
  }
  50.95% {
    stroke-dashoffset: 1;
  }
  51.9% {
    stroke-dashoffset: 0.7324;
  }
  52.75% {
    stroke-dashoffset: 0.4998;
  }
  54.6% {
    stroke-dashoffset: 0.0024;
  }
  54.65% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s4-mw-ring-a4 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  22.5% {
    opacity: 0.999;
    transform: scale(1);
  }
  22.55% {
    opacity: 0.978;
    transform: scale(0.999);
  }
  22.6% {
    opacity: 0.928;
    transform: scale(0.996);
  }
  22.65% {
    opacity: 0.851;
    transform: scale(0.991);
  }
  22.9% {
    opacity: 0.352;
    transform: scale(0.961);
  }
  23% {
    opacity: 0.193;
    transform: scale(0.952);
  }
  23.05% {
    opacity: 0.132;
    transform: scale(0.948);
  }
  23.1% {
    opacity: 0.083;
    transform: scale(0.945);
  }
  23.2% {
    opacity: 0.023;
    transform: scale(0.941);
  }
  23.35% {
    opacity: 0;
    transform: scale(0.94);
  }
  100% {
    opacity: 0;
    transform: scale(0.94);
  }
}

@keyframes s4-mw-ring-b4 {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  29.7% {
    opacity: 0.003;
    transform: scale(0.94);
  }
  30.2% {
    opacity: 0.048;
    transform: scale(0.943);
  }
  30.65% {
    opacity: 0.155;
    transform: scale(0.949);
  }
  31.15% {
    opacity: 0.347;
    transform: scale(0.961);
  }
  32% {
    opacity: 0.759;
    transform: scale(0.986);
  }
  32.3% {
    opacity: 0.884;
    transform: scale(0.993);
  }
  32.6% {
    opacity: 0.968;
    transform: scale(0.998);
  }
  32.95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes s4-mw-ring-a5 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  21% {
    opacity: 1;
    transform: scale(1);
  }
  21.05% {
    opacity: 0.982;
    transform: scale(0.999);
  }
  21.1% {
    opacity: 0.926;
    transform: scale(0.996);
  }
  21.15% {
    opacity: 0.832;
    transform: scale(0.99);
  }
  21.35% {
    opacity: 0.309;
    transform: scale(0.959);
  }
  21.4% {
    opacity: 0.197;
    transform: scale(0.952);
  }
  21.45% {
    opacity: 0.109;
    transform: scale(0.947);
  }
  21.5% {
    opacity: 0.048;
    transform: scale(0.943);
  }
  21.55% {
    opacity: 0.014;
    transform: scale(0.941);
  }
  21.65% {
    opacity: 0;
    transform: scale(0.94);
  }
  100% {
    opacity: 0;
    transform: scale(0.94);
  }
}

@keyframes s4-mw-ring-b5 {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  37.4% {
    opacity: 0.002;
    transform: scale(0.94);
  }
  37.85% {
    opacity: 0.041;
    transform: scale(0.942);
  }
  38.25% {
    opacity: 0.137;
    transform: scale(0.948);
  }
  38.7% {
    opacity: 0.311;
    transform: scale(0.959);
  }
  39.55% {
    opacity: 0.733;
    transform: scale(0.984);
  }
  39.85% {
    opacity: 0.862;
    transform: scale(0.992);
  }
  40.2% {
    opacity: 0.964;
    transform: scale(0.998);
  }
  40.6% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes s4-mw-ring-a6 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  19.1% {
    opacity: 0.996;
    transform: scale(1);
  }
  19.3% {
    opacity: 0.959;
    transform: scale(0.998);
  }
  19.4% {
    opacity: 0.915;
    transform: scale(0.995);
  }
  19.5% {
    opacity: 0.848;
    transform: scale(0.991);
  }
  19.6% {
    opacity: 0.757;
    transform: scale(0.985);
  }
  19.7% {
    opacity: 0.641;
    transform: scale(0.978);
  }
  20% {
    opacity: 0.217;
    transform: scale(0.953);
  }
  20.1% {
    opacity: 0.097;
    transform: scale(0.946);
  }
  20.2% {
    opacity: 0.022;
    transform: scale(0.941);
  }
  20.3% {
    opacity: 0;
    transform: scale(0.94);
  }
  100% {
    opacity: 0;
    transform: scale(0.94);
  }
}

@keyframes s4-mw-ring-b6 {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  44.45% {
    opacity: 0.002;
    transform: scale(0.94);
  }
  44.95% {
    opacity: 0.036;
    transform: scale(0.942);
  }
  45.5% {
    opacity: 0.134;
    transform: scale(0.948);
  }
  45.95% {
    opacity: 0.251;
    transform: scale(0.955);
  }
  47.35% {
    opacity: 0.665;
    transform: scale(0.98);
  }
  48.15% {
    opacity: 0.845;
    transform: scale(0.991);
  }
  48.55% {
    opacity: 0.908;
    transform: scale(0.995);
  }
  49% {
    opacity: 0.957;
    transform: scale(0.997);
  }
  49.95% {
    opacity: 0.998;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes s4-drive {
  0% {
    --s4-d: 0;
  }
  6% {
    --s4-d: 2.74;
    animation-timing-function: cubic-bezier(0.3333, 0.3584, 0.6667, 0.6918);
  }
  16% {
    --s4-d: 6.99;
  }
  100% {
    --s4-d: 40;
  }
}

@keyframes s4-spdarc {
  0% {
    stroke-dashoffset: 0.65625;
  }
  6% {
    stroke-dashoffset: 0.65625;
  }
  16% {
    stroke-dashoffset: 0.75;
  }
  100% {
    stroke-dashoffset: 0.75;
  }
}
/* gen:end dial-keyframes */

/* Range contain 6–25 %: in by 10 %, out over 20–25 %. */
@keyframes s4-cap-a {
  0% {
    opacity: 0;
    transform: translateY(14px);
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  21%,
  73.7% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Range contain 50–75 %: in by 55 %, out over 68–75 %. */
@keyframes s4-cap-p {
  0% {
    opacity: 0;
    transform: translateY(14px);
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  20%,
  72% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes s4-talk-a {
  0%,
  100% {
    transform: scaleY(0.35);
  }

  10% {
    transform: scaleY(0.9);
  }

  22% {
    transform: scaleY(0.45);
  }

  34% {
    transform: scaleY(1);
  }

  48% {
    transform: scaleY(0.5);
  }

  62% {
    transform: scaleY(0.85);
  }

  76% {
    transform: scaleY(0.4);
  }

  88% {
    transform: scaleY(0.7);
  }
}

@keyframes s4-talk-b {
  0%,
  100% {
    transform: scaleY(0.35);
  }

  14% {
    transform: scaleY(0.6);
  }

  27% {
    transform: scaleY(1);
  }

  40% {
    transform: scaleY(0.4);
  }

  55% {
    transform: scaleY(0.95);
  }

  70% {
    transform: scaleY(0.5);
  }

  84% {
    transform: scaleY(0.8);
  }
}