/* A little more colour and depth, kept inside the progress indicator and garden. */
.progress-panel .progress-copy > strong { margin-bottom: 7px; }
.progress-panel .progress-copy .track {
  height: 14px;
  border: 1px solid #cde5df;
  border-radius: 999px;
  background: linear-gradient(180deg, #ddeae7, #eff7f5);
  box-shadow: inset 0 1px 3px #74a69a12, inset 0 -1px 0 #fff9;
  isolation: isolate;
  overflow: hidden;
}
.progress-panel #progress {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(100deg,
    #73c8b4 0%, #9adccc 34%, #bce8dd 62%, #f0c8a5 80%, #b6d7c7 100%);
  box-shadow: inset 0 -2px 3px #6bab9c25;
  overflow: hidden;
  transition: width 2.2s cubic-bezier(.18,.62,.25,1);
}
.progress-panel #progress::after {
  content: '';
  position: absolute;
  inset: 1px 2px auto;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff9, #fff0);
  pointer-events: none;
}
.progress-panel .meter-sheen,
.progress-panel.pulse .meter-sheen {
  z-index: 1;
  left: -45%;
  width: 38%;
  opacity: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 4%, #fff5ec22 22%, #fffaf5d9 50%, #eafff499 61%, transparent 92%);
  filter: blur(.5px);
  transform: skewX(-15deg);
  animation: rich-progress-light 14s ease-in-out 1.4s infinite;
  pointer-events: none;
}
.progress-panel .progress-tools { margin-top: 4px; }
@keyframes rich-progress-light {
  0%, 3% { left: -45%; opacity: 0; }
  8% { opacity: .7; }
  21% { opacity: .8; }
  30%, 100% { left: 115%; opacity: 0; }
}

/* Sage leaves and blue water give the pink character a small, living garden. */
.progress-garden__stem { stroke: #76917a; }
.progress-garden__first-leaves,
.progress-garden__upper-leaves { fill: #d7e7d8; stroke: #819a82; }
.progress-garden__ground { stroke: #c7baa8; }
.progress-garden__seed { fill: #ead3b0; stroke: #ad9274; }
.progress-garden__can-body { fill: #e3eee5; stroke: #758779; }
.progress-garden__can-spout { fill: #d4e6d9; stroke: #758779; }
.progress-garden__can-handle,
.progress-garden__can-rim { stroke: #758779; }
.progress-garden__can-mark { stroke: #9ab49d; }
.progress-garden__drop { fill: #82b7ca; }
.progress-garden__flower circle { fill: #f2d692; stroke: #c7a16d; }
.progress-garden__glow { fill: #ffebbd; }
.progress-garden__light { stroke: #d6b173; }
.progress-garden__light circle { fill: #d6b173; }
.progress-garden__ribbon { stroke: #fff2cf; }
.answer-flower svg > path,
.finish-flower svg > path { fill: #dbe7d8; stroke: #8d9f85; }
.answer-flower svg > circle,
.finish-flower svg > circle { fill: #f2d692; stroke: #c7a16d; }

.postal-result.found {
  background: #eff6f0;
  border-color: #d5e3d8;
  color: #496c55;
}
@media (max-width: 360px) {
  .progress-panel .progress-copy > strong { margin-bottom: 6px; line-height: 1.5; }
  .progress-panel .progress-tools { margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-panel .meter-sheen,
  .progress-panel.pulse .meter-sheen { display: none; animation: none !important; }
  .progress-panel #progress { transition: none !important; }
}