/* The garden is decorative: the adjacent text remains the progress indicator. */
.progress-garden {
  display: block;
  position: relative;
  width: 140px;
  height: 66px;
  pointer-events: none;
  isolation: isolate;
}
.progress-garden__mascot {
  position: absolute;
  left: -10px;
  top: -12px;
  width: 92px;
  height: 92px;
}
.progress-garden__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.progress-garden__scene path,
.progress-garden__scene circle { stroke-linecap: round; stroke-linejoin: round; }
.progress-garden__ground { stroke: #b6dfd5; stroke-width: 1.1; }
.progress-garden__stem { stroke: #739c92; stroke-width: 1.45; stroke-dasharray: 38; stroke-dashoffset: 38; transition: stroke-dashoffset 1.6s ease; }
.progress-garden__first-leaves,
.progress-garden__upper-leaves { fill: #def4ee; stroke: #75a599; stroke-width: 1.1; }
.progress-garden__first-leaves { transform-origin: 114px 51px; }
.progress-garden__upper-leaves { transform-origin: 115px 40px; }
.progress-garden__bud { fill: #b0e3d7; stroke: #70a99b; stroke-width: 1; transform-origin: 116px 29px; }
.progress-garden__flower { fill: #c7ebe2; stroke: #74b5a5; stroke-width: 1.05; transform-origin: 116px 25px; }
.progress-garden__flower circle { fill: #fff4db; stroke: #87bcaf; stroke-width: .75; }
.progress-garden__first-leaves,
.progress-garden__upper-leaves,
.progress-garden__bud,
.progress-garden__flower { opacity: 0; transform: scale(.15); transition: opacity 1.2s ease, transform 1.8s cubic-bezier(.2,.7,.2,1); }
.progress-garden__seed { fill: #dff4ef; stroke: #7cb1a4; stroke-width: 1.1; transition: opacity 1s ease; }
.progress-garden[data-stage="1"] .progress-garden__stem { stroke-dashoffset: 26; }
.progress-garden[data-stage="2"] .progress-garden__stem { stroke-dashoffset: 8; }
.progress-garden[data-stage="3"] .progress-garden__stem,
.progress-garden[data-stage="4"] .progress-garden__stem { stroke-dashoffset: 0; }
.progress-garden:not([data-stage="0"]) .progress-garden__first-leaves,
.progress-garden[data-stage="2"] .progress-garden__upper-leaves,
.progress-garden[data-stage="3"] .progress-garden__upper-leaves,
.progress-garden[data-stage="4"] .progress-garden__upper-leaves,
.progress-garden[data-stage="3"] .progress-garden__bud,
.progress-garden[data-stage="4"] .progress-garden__flower { opacity: 1; transform: scale(1); }
.progress-garden:not([data-stage="0"]) .progress-garden__seed { opacity: 0; }
.progress-garden__can { transform-origin: 70px 34px; }
.progress-garden__can-handle,
.progress-garden__can-rim,
.progress-garden__can-mark { stroke: #6c807b; stroke-width: 1.25; }
.progress-garden__can-body { fill: #fff; stroke: #6c807b; stroke-width: 1.35; }
.progress-garden__can-spout { fill: #e4f5f1; stroke: #6c807b; stroke-width: 1.25; }
.progress-garden__can-mark { stroke: #9ad4c6; stroke-width: 1.2; }
.progress-garden__drop { fill: #8ed5c4; opacity: 0; }
.progress-garden__light { stroke: #9bd4c6; stroke-width: 1.35; opacity: 0; }
.progress-garden__light circle { fill: #9bd4c6; stroke: none; }
.progress-garden__glow { fill: #ffe9b6; opacity: 0; }
.progress-garden__ribbon { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 24 88; stroke-dashoffset: 24; opacity: 0; }
.progress-garden__plant { transform-origin: 114px 59px; }
/* The global greeting can still animate the other mascots. This one holds its can. */
.progress-garden .hiyoppo[data-mood] .hiyoppo__bird,
.progress-garden .hiyoppo[data-mood] .hiyoppo__wing { animation: none; }
.progress-garden .hiyoppo__shoulder { opacity: 0; }
.progress-garden.is-watering .hiyoppo .hiyoppo__bird { animation: garden-bird-water 4.3s ease-in-out both; }
.progress-garden.is-watering .progress-garden__can { animation: garden-can-water 4.3s ease-in-out both; }
.progress-garden.is-watering .progress-garden__drop { animation: garden-drop 1s ease-in .8s 2 both; }
.progress-garden.is-watering .progress-garden__drop--two { animation-delay: 1.02s; }
.progress-garden.is-watering .progress-garden__drop--three { animation-delay: 1.24s; }
.progress-garden.is-watering .progress-garden__plant { animation: garden-plant-drink 4.3s ease-in-out both; }
.progress-garden.is-watering .progress-garden__glow { animation: garden-glow 4.3s ease-in-out both; }
.progress-garden.is-watering .progress-garden__light { animation: garden-light 4.3s ease-in-out both; }
.progress-garden.is-watering .progress-garden__ribbon { animation: garden-ribbon 4.3s ease-in-out both; }
@keyframes garden-can-water {
  0%, 100% { transform: rotate(0deg); }
  21%, 59% { transform: rotate(18deg); }
  73% { transform: rotate(9deg); }
}
@keyframes garden-bird-water {
  0%, 100% { transform: rotate(0deg); }
  22%, 60% { transform: rotate(3deg) translateY(1px); }
  80% { transform: rotate(-1deg); }
}
@keyframes garden-drop {
  0% { opacity: 0; transform: translate(-1px,-2px) scale(.8); }
  15% { opacity: .9; }
  74% { opacity: .7; }
  100% { opacity: 0; transform: translate(11px,13px) scale(.6); }
}
@keyframes garden-plant-drink {
  0%, 34%, 100% { transform: rotate(0deg); }
  49% { transform: rotate(3deg); }
  67% { transform: rotate(-2.5deg); }
  85% { transform: rotate(1deg); }
}
@keyframes garden-glow {
  0%, 22%, 100% { opacity: 0; }
  56%, 72% { opacity: .55; }
}
@keyframes garden-light {
  0%, 35%, 100% { opacity: 0; transform: translateY(2px); }
  62%, 77% { opacity: .8; transform: translateY(-1px); }
}
@keyframes garden-ribbon {
  0%, 35% { opacity: 0; stroke-dashoffset: 25; }
  46% { opacity: .9; }
  82% { opacity: .7; stroke-dashoffset: -80; }
  100% { opacity: 0; stroke-dashoffset: -90; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-garden *, .progress-garden *::before, .progress-garden *::after {
    animation: none !important;
    transition: none !important;
  }
  .progress-garden__water, .progress-garden__glow,
  .progress-garden__light, .progress-garden__ribbon { display: none; }
}
/* Blend the original white paper into the pink progress panel. */
.progress-garden{isolation:auto}.progress-garden__mascot{mix-blend-mode:multiply}
@media(max-width:360px){#progress-garden{height:58px}.progress-garden{transform:scale(.87);transform-origin:left center}}
.progress-garden{mix-blend-mode:multiply}