.kgh-scene{
  --kgh-accent:#b6804c;
  --kgh-leaf:#4f7c51;
  --kgh-bloom:#f1d9b7;
  --kgh-height:280px;
  position:relative;
  width:100%;
  max-width:100%;
  height:var(--kgh-height);
  min-height:210px;
  overflow:hidden;
  box-sizing:border-box;
  border-radius:16px;
  isolation:isolate;
  contain:layout paint;
  background:linear-gradient(180deg,#f7fbfd 0%,#eef5f2 68%,#e3eadf 68%,#d8e1d2 100%);
}

.kgh-scene *,
.kgh-scene *::before,
.kgh-scene *::after{box-sizing:border-box}

.kgh-sitewide-wrap{
  width:min(1180px,calc(100% - 32px));
  margin:24px auto;
}

.kgh-sky{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 80% 18%,rgba(255,255,255,.94) 0 24px,rgba(255,255,255,0) 25px);
}

.kgh-ground{
  position:absolute;
  z-index:1;
  left:-5%;
  right:-5%;
  bottom:-28px;
  height:35%;
  border-radius:50% 50% 0 0/22% 22% 0 0;
  background:linear-gradient(180deg,rgba(92,128,78,.18),rgba(75,105,66,.35));
}

.kgh-tree{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:15%;
  width:220px;
  height:72%;
  max-height:215px;
  transform:translateX(-50%);
  transform-origin:50% 100%;
}

.kgh-trunk,
.kgh-branch,
.kgh-crown,
.kgh-bloom{
  position:absolute;
  display:block;
}

.kgh-trunk{
  left:50%;
  bottom:0;
  width:19px;
  height:58%;
  border-radius:12px 12px 7px 7px;
  background:linear-gradient(90deg,#674630,#8b684f 52%,#60412d);
  transform-origin:50% 100%;
}

.kgh-branch{
  left:50%;
  height:8px;
  width:66px;
  border-radius:999px;
  background:#72503a;
  transform-origin:0 50%;
}

.kgh-b1{bottom:38%;--kgh-branch-angle:-28deg}
.kgh-b2{bottom:44%;--kgh-branch-angle:208deg}
.kgh-b3{bottom:50%;width:58px;--kgh-branch-angle:-47deg}
.kgh-b4{bottom:54%;width:56px;--kgh-branch-angle:226deg}

.kgh-crown{
  width:58px;
  height:44px;
  border-radius:55% 45% 58% 42%;
  background:var(--kgh-leaf);
  transform-origin:50% 50%;
}
.kgh-c1{left:34px;top:30px}
.kgh-c2{left:78px;top:7px}
.kgh-c3{left:122px;top:32px}
.kgh-c4{left:68px;top:62px}
.kgh-c5{left:112px;top:64px}

.kgh-bloom{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--kgh-bloom);
  box-shadow:0 0 0 3px rgba(255,255,255,.22);
  transform-origin:center;
}
.kgh-f1{left:58px;top:52px}
.kgh-f2{left:94px;top:28px}
.kgh-f3{left:140px;top:54px}
.kgh-f4{left:83px;top:82px}
.kgh-f5{left:126px;top:87px}
.kgh-f6{left:111px;top:54px}

.kgh-caption{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:5;
  max-width:calc(100% - 24px);
  padding:7px 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid rgba(60,80,70,.14);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(5px);
  color:#2f3b36;
  font:600 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.kgh-decor-layer{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}

.kgh-decor{
  position:absolute;
  display:block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--kgh-accent);
  opacity:.8;
}

.kgh-decor.kgh-heart{width:10px;height:10px;border-radius:2px 7px 2px 7px;transform:rotate(45deg)}
.kgh-decor.kgh-snow{background:#fff;box-shadow:0 0 0 1px rgba(120,150,170,.15)}
.kgh-decor.kgh-star{border-radius:2px;transform:rotate(45deg)}
.kgh-decor.kgh-leaf{width:12px;height:7px;border-radius:90% 10% 90% 10%;background:var(--kgh-accent)}
.kgh-decor.kgh-apple{width:11px;height:11px;background:var(--kgh-bloom);box-shadow:0 -3px 0 -1px #5f7b4a}
.kgh-decor.kgh-moon{width:15px;height:15px;background:transparent;border:4px solid var(--kgh-accent);border-top-color:transparent;border-right-color:transparent}
.kgh-decor.kgh-burst{width:6px;height:6px;box-shadow:0 -8px 0 var(--kgh-accent),0 8px 0 var(--kgh-accent),8px 0 0 var(--kgh-accent),-8px 0 0 var(--kgh-accent)}
.kgh-decor.kgh-ornament{width:12px;height:12px;box-shadow:0 -6px 0 -4px #6b5b4d}
.kgh-decor.kgh-clover{width:8px;height:8px;box-shadow:8px 0 0 var(--kgh-accent),0 8px 0 var(--kgh-accent),8px 8px 0 var(--kgh-accent)}
.kgh-decor.kgh-petal{width:10px;height:6px;border-radius:90% 10% 90% 10%}
.kgh-decor.kgh-egg{width:9px;height:12px;border-radius:50% 50% 46% 46%}
.kgh-decor.kgh-sun{width:14px;height:14px}
.kgh-decor.kgh-spark{width:6px;height:6px;border-radius:1px;transform:rotate(45deg)}

.kgh-season-winter{background:linear-gradient(180deg,#eef4f8 0%,#e6eef2 68%,#dde4df 68%,#d2dcd4 100%)}
.kgh-season-love{background:linear-gradient(180deg,#fff7f8 0%,#f7ecef 68%,#e8e6d8 68%,#d9e0cf 100%)}
.kgh-season-spring{background:linear-gradient(180deg,#f5fbf6 0%,#edf7ef 68%,#e0edd8 68%,#d5e4ce 100%)}
.kgh-season-summer{background:linear-gradient(180deg,#fbf8ec 0%,#f7f2df 68%,#e5ead0 68%,#d9e1c2 100%)}
.kgh-season-fall{background:linear-gradient(180deg,#faf4ea 0%,#f2eadc 68%,#e8dfca 68%,#ded4bb 100%)}

.kgh-plant-pine .kgh-crown{
  border-radius:0;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  height:54px;
}
.kgh-plant-palm .kgh-trunk{width:14px}
.kgh-plant-palm .kgh-crown{width:78px;height:24px;border-radius:90% 10% 90% 10%}
.kgh-plant-willow .kgh-crown{height:64px;border-radius:45% 55% 55% 45%;filter:saturate(.8)}
.kgh-plant-twisted .kgh-crown{width:48px;height:31px;filter:saturate(.55)}
.kgh-plant-sunflower .kgh-trunk{width:11px;background:#5b7d46}
.kgh-plant-sunflower .kgh-branch{background:#5b7d46}
.kgh-plant-sunflower .kgh-crown{width:42px;height:26px}
.kgh-plant-sunflower .kgh-bloom{width:22px;height:22px;background:var(--kgh-bloom);box-shadow:inset 0 0 0 7px #6f5632}

/* Animation is only active while JS adds this class.
   Removing/re-adding it gives us a clean repeat without duplicated elements. */
.kgh-animate .kgh-trunk{
  animation:kgh-grow-trunk 1.05s cubic-bezier(.2,.8,.2,1) .12s both;
}
.kgh-animate .kgh-b1{animation:kgh-grow-b1 .65s ease-out .72s both}
.kgh-animate .kgh-b2{animation:kgh-grow-b2 .65s ease-out .82s both}
.kgh-animate .kgh-b3{animation:kgh-grow-b3 .65s ease-out .92s both}
.kgh-animate .kgh-b4{animation:kgh-grow-b4 .65s ease-out 1.02s both}

.kgh-animate .kgh-crown{animation:kgh-pop .58s cubic-bezier(.15,.85,.25,1.25) both}
.kgh-animate .kgh-c1{animation-delay:1.02s}
.kgh-animate .kgh-c2{animation-delay:1.10s}
.kgh-animate .kgh-c3{animation-delay:1.18s}
.kgh-animate .kgh-c4{animation-delay:1.26s}
.kgh-animate .kgh-c5{animation-delay:1.34s}

.kgh-animate .kgh-bloom{animation:kgh-pop .42s ease-out both}
.kgh-animate .kgh-f1{animation-delay:1.52s}
.kgh-animate .kgh-f2{animation-delay:1.60s}
.kgh-animate .kgh-f3{animation-delay:1.68s}
.kgh-animate .kgh-f4{animation-delay:1.76s}
.kgh-animate .kgh-f5{animation-delay:1.84s}
.kgh-animate .kgh-f6{animation-delay:1.92s}

.kgh-animate .kgh-decor{animation:kgh-decor-in .45s ease-out 1.7s both,kgh-float 4s ease-in-out 2.1s infinite}

@keyframes kgh-grow-trunk{
  from{opacity:0;transform:scaleY(.03)}
  to{opacity:1;transform:scaleY(1)}
}
@keyframes kgh-grow-b1{
  from{opacity:0;transform:rotate(-28deg) scaleX(.03)}
  to{opacity:1;transform:rotate(-28deg) scaleX(1)}
}
@keyframes kgh-grow-b2{
  from{opacity:0;transform:rotate(208deg) scaleX(.03)}
  to{opacity:1;transform:rotate(208deg) scaleX(1)}
}
@keyframes kgh-grow-b3{
  from{opacity:0;transform:rotate(-47deg) scaleX(.03)}
  to{opacity:1;transform:rotate(-47deg) scaleX(1)}
}
@keyframes kgh-grow-b4{
  from{opacity:0;transform:rotate(226deg) scaleX(.03)}
  to{opacity:1;transform:rotate(226deg) scaleX(1)}
}
@keyframes kgh-pop{
  from{opacity:0;transform:scale(.05)}
  to{opacity:1;transform:scale(1)}
}
@keyframes kgh-decor-in{
  from{opacity:0}
  to{opacity:.8}
}
@keyframes kgh-float{
  0%,100%{translate:0 0}
  50%{translate:0 -8px}
}

@media (max-width:600px){
  .kgh-scene{min-height:220px;border-radius:12px}
  .kgh-tree{
    width:200px;
    height:70%;
    transform:translateX(-50%) scale(.88);
    transform-origin:50% 100%;
  }
  .kgh-caption{left:9px;right:9px;max-width:none;text-align:center}
}

@media (max-width:380px){
  .kgh-tree{transform:translateX(-50%) scale(.78)}
}

@media (prefers-reduced-motion:reduce){
  .kgh-animate .kgh-trunk,
  .kgh-animate .kgh-branch,
  .kgh-animate .kgh-crown,
  .kgh-animate .kgh-bloom,
  .kgh-animate .kgh-decor{animation:none!important}

  .kgh-trunk{opacity:1;transform:scaleY(1)}
  .kgh-b1{opacity:1;transform:rotate(-28deg)}
  .kgh-b2{opacity:1;transform:rotate(208deg)}
  .kgh-b3{opacity:1;transform:rotate(-47deg)}
  .kgh-b4{opacity:1;transform:rotate(226deg)}
  .kgh-crown,.kgh-bloom,.kgh-decor{opacity:1;transform:none}
}