:root {

  --hs-green:       #2E8857;
  --hs-green-light: #7BC043;
  --hs-blue:        #1E5EA8;
  --hs-blue-light:  #4BA6E6;
  --hs-orange:      #FF8A3D;
  --hs-orange-light:#FFC845;
  --hs-cream:       #FFF3D6;
  --hs-ink:         #263238;
  --hs-sub:         #607D8B;

  --hs-ok:          #10B981;
  --hs-warn:        #F59E0B;

  --hs-earth:       #8D6236;

  --hs-grass:       #7BC043;
  --hs-cream-2:     #FFF3D6;


  --hs-radius:      14px;
  --hs-shadow:      0 2px 10px rgba(38,50,56,.10);

  --hs-font: system-ui, -apple-system, "PingFang TC", "Noto Sans TC",
             "Microsoft JhengHei", "Heiti TC", sans-serif;
}


.hs-mascot { width: auto; height: 92px; max-width: 190px;
             image-rendering: auto; pointer-events: none; user-select: none; }
.hs-mascot-sm { height: 56px; max-width: 120px; }
.hs-mascot-lg { height: 130px; max-width: 190px; }


@keyframes hs-pop {
  0%   { transform: scale(.7) translateY(6px); opacity: 0; }
  60%  { transform: scale(1.06) translateY(0);  opacity: 1; }
  100% { transform: scale(1)    translateY(0);  opacity: 1; }
}
.hs-pop { animation: hs-pop .28s cubic-bezier(.2,.9,.3,1.2) both; }

@media (prefers-reduced-motion: reduce) {

  .hs-pop { animation: none; }
}


.hs-head { display: flex; align-items: center; gap: 12px; justify-content: center;
           margin-bottom: 10px; }
.hs-head img.hs-logo { height: 62px; width: auto; }
.hs-head img.hs-greet { height: 74px; width: auto; }
.hs-title { font-family: var(--hs-font); line-height: 1.25; }
.hs-title b { display: block; font-size: 21px; font-weight: 800; }
.hs-title span { display: block; font-size: 13px; opacity: .72; letter-spacing: .5px; }

@media (max-width: 420px) {

  .hs-head img.hs-greet { display: none; }
  .hs-head img.hs-logo { height: 48px; }
  .hs-title b { font-size: 18px; }
}


.hs-cheer{
  position:fixed; height:108px; width:auto; max-width:96px;
  pointer-events:none; user-select:none; z-index:60;
  opacity:0; transform:scale(.75) translateY(10px);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.25);
  will-change:transform,opacity;
}
.hs-cheer.show{ opacity:1; transform:scale(1) translateY(0); }

@media (prefers-reduced-motion: reduce){
  .hs-cheer{ transition:opacity .12s linear; transform:none; }
  .hs-cheer.show{ transform:none; }
}