.plant-simulation {
  overflow: hidden;
  border: 1px solid #b9dfe4;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 12px 32px #0f766e12;
}

.plant-sky {
  height: 320px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #c9efff 0%, #eefcff 78%, #d8f5e3 100%);
}

.plant-sun {
  position: absolute;
  top: 24px;
  left: 9%;
  color: #fbbf24;
  font-size: 4.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 18px #fde047);
  transition: opacity .45s, transform .45s;
}

.plant-rain {
  position: absolute;
  top: 28px;
  right: 11%;
  color: #0ea5e9;
  font-size: 1.1rem;
  line-height: 1.65;
  letter-spacing: .5rem;
  transition: opacity .45s;
}

.plant-specimen {
  --plant-height: 220px;
  position: absolute;
  z-index: 2;
  bottom: -2px;
  left: 50%;
  width: 210px;
  height: var(--plant-height);
  translate: -50% 0;
  transition: height .65s cubic-bezier(.2, .75, .25, 1);
}

.plant-stem {
  position: absolute;
  bottom: 0;
  left: calc(50% - 6px);
  width: 12px;
  height: 88%;
  border-radius: 999px;
  background: var(--stem-color);
  box-shadow: inset -3px 0 #ffffff38;
  transition: background .45s, transform .45s;
}

.plant-leaf {
  position: absolute;
  width: 76px;
  height: 38px;
  scale: var(--leaf-scale);
  background: var(--leaf-color);
  box-shadow: inset 0 -5px #00000012;
  transition: background .45s, rotate .6s, opacity .45s;
}

.leaf-left {
  right: 50%;
  border-radius: 100% 8% 100% 8%;
  transform-origin: right bottom;
  rotate: 10deg;
}

.leaf-right {
  left: 50%;
  border-radius: 8% 100% 8% 100%;
  transform-origin: left bottom;
  rotate: -10deg;
}

.leaf-high { top: 22%; }
.leaf-mid { top: 47%; }
.leaf-low { top: 70%; }

.plant-flower {
  position: absolute;
  z-index: 3;
  top: -25px;
  left: 50%;
  translate: -50% 0;
  color: #f59e0b;
  font-size: 3.6rem;
  line-height: 1;
  text-shadow: 0 2px 0 #fff;
  transition: opacity .45s;
}

.plant-specimen.is-wilted .leaf-left { rotate: -27deg; opacity: .62; }
.plant-specimen.is-wilted .leaf-right { rotate: 27deg; opacity: .62; }
.plant-specimen.is-wilted .plant-stem { transform: skewX(7deg); }
.plant-specimen.is-overwatered .plant-leaf { filter: saturate(.65); opacity: .82; }

.plant-soil {
  height: 86px;
  position: relative;
  overflow: hidden;
  border-top: 5px solid #b9631d;
  background: linear-gradient(#9a4d13, #71320e);
}

.soil-moisture {
  position: absolute;
  inset: auto 0 0;
  background: linear-gradient(#2563eb22, #075985aa);
  transition: height .55s, opacity .55s;
}

.plant-roots {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 66px;
  translate: -50% 0;
  clip-path: polygon(46% 0, 54% 0, 56% 28%, 92% 42%, 90% 48%, 58% 39%, 76% 100%, 68% 100%, 52% 51%, 38% 100%, 30% 100%, 44% 39%, 8% 58%, 6% 50%, 43% 28%);
  background: #d5a04a;
  transition: opacity .45s;
}

.plant-readouts {
  display: grid;
  grid-template-columns: .7fr .9fr 1.7fr;
  gap: 1px;
  background: #cfe7e4;
}

.plant-readouts span {
  display: grid;
  gap: .2rem;
  padding: .75rem;
  background: #f7fffd;
}

.plant-readouts small {
  color: #64748b;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.plant-readouts strong { color: #0f625b; font-size: .72rem; }
.plant-readouts span:last-child strong { font-size: .65rem; font-weight: 750; }

@media (max-width: 700px) {
  .plant-sky { height: 270px; }
  .plant-readouts { grid-template-columns: 1fr; }
  .plant-sun { font-size: 3.5rem; }
  .plant-specimen { width: 175px; }
  .plant-leaf { width: 62px; height: 31px; }
}