.streak-stat-card .stat-note {
  max-width: calc(100% - 58px);
  min-height: 27px;
}

.streak-sapling {
  --tree-scale: .55;
  position: absolute;
  top: 31px;
  right: 10px;
  width: 58px;
  height: 63px;
  display: grid;
  place-items: center;
  color: #397858;
}

.streak-sapling svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: scale(var(--tree-scale));
  transform-origin: center bottom;
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
}

.streak-sapling[data-stage="0"] { --tree-scale: .55; }
.streak-sapling[data-stage="1"] { --tree-scale: .68; }
.streak-sapling[data-stage="2"] { --tree-scale: .8; }
.streak-sapling[data-stage="3"] { --tree-scale: .91; }
.streak-sapling[data-stage="4"] { --tree-scale: 1; }

.sapling-ground { fill: #dcebdc; }
.sapling-seed { fill: #986747; stroke: #795239; stroke-width: 1; }
.sapling-seed-line { fill: none; stroke: #d9b875; stroke-width: 1; stroke-linecap: round; }
.sapling-trunk, .sapling-branch { fill: none; stroke: #8b6547; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sapling-branch { stroke-width: 2.4; }
.sapling-leaf { fill: #67a878; stroke: #43865e; stroke-width: 1; }
.sapling-leaf-top { fill: #83bf81; }
.sapling-canopy { fill: #67a878; stroke: #43865e; stroke-width: 1.5; }
.sapling-canopy-highlight { fill: none; stroke: #a4d295; stroke-width: 2; stroke-linecap: round; opacity: .8; }

.sapling-stage-seed,
.sapling-stage-sprout,
.sapling-stage-young {
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

.streak-sapling[data-stage="0"] .sapling-stage-seed,
.streak-sapling[data-stage="1"] .sapling-stage-sprout,
.streak-sapling[data-stage="2"] .sapling-stage-young,
.streak-sapling[data-stage="3"] .sapling-stage-young,
.streak-sapling[data-stage="4"] .sapling-stage-young {
  opacity: 1;
  transform: scale(1);
}

.streak-tree-caption {
  position: absolute;
  top: 2px;
  right: 3px;
  color: #dfa948;
  font-size: 9px;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s ease, transform .4s ease;
}

.streak-sapling[data-stage="3"] .streak-tree-caption,
.streak-sapling[data-stage="4"] .streak-tree-caption {
  opacity: 1;
  transform: scale(1);
}

html[data-theme="dark"] .sapling-ground { fill: #354838; }
html[data-theme="dark"] .sapling-trunk,
html[data-theme="dark"] .sapling-branch { stroke: #b18b66; }
html[data-theme="dark"] .sapling-seed { fill: #c39a69; stroke: #a77b52; }

@media (max-width: 600px) {
  .streak-stat-card .stat-note { max-width: calc(100% - 34px); min-height: 31px; }
  .streak-sapling { top: 36px; right: 5px; width: 39px; height: 47px; }
  .streak-dots { left: 7px; right: auto; bottom: 10px; gap: 2px; }
  .streak-dots i { width: 9px; height: 9px; font-size: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .streak-sapling svg,
  .sapling-stage-seed,
  .sapling-stage-sprout,
  .sapling-stage-young,
  .streak-tree-caption { transition: none; }
}