:root{--green:#125d37;--ink:#124b30}
.hero{background:#c1e4bb;min-height:740px;max-height:1150px}
.word-atmosphere{position:absolute;inset:0;z-index:-4;background:radial-gradient(ellipse at 8% 15%,#eaffac 0,transparent 46%),radial-gradient(ellipse at 88% 80%,#b6efd9 0,transparent 45%),radial-gradient(ellipse at 85% 18%,#f4d7e4 0,transparent 40%),linear-gradient(135deg,#b8deb2,#82bc9d)}
#word-world{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2;opacity:.96}
.hero:after{z-index:3;inset:68% 0 0;background:linear-gradient(transparent,rgba(213,237,192,.86) 78%,#d5edc0);pointer-events:none}
.hero-character{top:47%;left:51%;height:64%;z-index:2;filter:drop-shadow(0 12px 15px #1c4a352b)}
.hero-character .puppet{animation:hello 7s ease-in-out infinite}
.hero-copy{z-index:5;bottom:49px}
.hero-overline{letter-spacing:.18em;font-size:11px}
.hero h1{text-shadow:0 2px 18px #e8f6d4;font-size:clamp(30px,4vw,66px);letter-spacing:-.05em}
.english-line{font-size:9.8vw;color:#146236}
.site-header{z-index:25}.site-header .brand{filter:drop-shadow(0 2px 6px #edffd966)}
.hero .motion-button{z-index:8;right:3%;top:auto;bottom:14px;width:auto;height:31px;border-radius:30px;padding:0 13px;display:flex;gap:7px;align-items:center;font-size:10px;background:#faffeff0}
.motion-button span{font-size:12px}.scroll-cue{z-index:8}.word-fallback{display:none;position:absolute;inset:20% -20%;font:900 8vw/2 Outfit,sans-serif;color:#17734255;transform:rotate(-12deg);z-index:-1}
.no-webgl .word-fallback{display:block}.no-webgl #word-world{display:none}
.about-scene{background:#c1d568}.scene-word{color:#eff5bd}.scene-sticker{background:#f4bed3}
@media(min-width:1650px){.english-line{font-size:168px}}
@media(max-width:900px){.hero-character{height:60%;top:47%;left:50%}}
@media(max-width:600px){.hero{min-height:680px}.hero-character{height:47%;left:47%;top:43%}.hero-copy{bottom:66px}.hero h1{font-size:35px}.english-line{font-size:9.5vw}.hero:after{inset:57% 0 0;background:linear-gradient(transparent,#d5edc0 78%)}.hero-overline{font-size:9px}.hero .motion-button{right:6%;bottom:18px;top:auto;font-size:9px}.scroll-cue{font-size:8px;bottom:20px}.site-header nav .nav-pink{font-size:9px;padding:13px 10px}}
@media(prefers-reduced-motion:reduce){.hero-character .puppet{animation:none!important}}


.hero-character,.about-character{aspect-ratio:1023/1130}
.paused .hero-character .puppet{animation-play-state:paused}
@media(max-width:600px){.hero-character{left:50%;height:45%}}