/* GECKO / garden edition. One continuous illustrated world. */
:root{--ink:#133f27;--deep:#155536;--line:#39692f38;--green:#97ef36}
body{background:#d4f58a;isolation:isolate}
.world-background{position:fixed;inset:0;z-index:-3;background-image:linear-gradient(#f7ffe215,#f7ffe215),url('gecko-world.webp');background-position:center;background-repeat:no-repeat;background-size:cover;pointer-events:none}
body::after{opacity:.018;z-index:90}
.header{border-bottom:0;height:92px}
.brand img{box-shadow:0 3px 10px #25511612}
.header-pump{background:#e0ff9c}
.header .icon-button{background:#f6ffe052}
.hero{padding-top:14px;overflow:clip}
.hero-kicker{opacity:.85}
.hero-word{color:#164e2e;margin-top:21px;line-height:.88;text-shadow:0 3px 0 #f2ffb733}
.hero-letter{display:inline-block;transform-origin:50% 100%;transition:color .3s;will-change:transform}
.hero-letter:hover{color:#2d7b35;animation:letter-wiggle .65s ease-in-out!important}
.js:not(.intro-ready) .hero-letter{opacity:0}
.intro-ready .hero-letter{animation:letter-arrive 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*.085s)}
.intro-finished .hero-letter{animation:none}
.word-star{animation:slow-spin 30s linear infinite}
.hero-bottom{margin-top:-18px;grid-template-columns:37% 63%}
.hero-copy{padding-top:40px;padding-bottom:16px}
.hero-copy h2{font-size:clamp(43px,4.6vw,68px);line-height:1.05}
.hero-copy p{font-size:16px;margin:24px 0;max-width:350px;line-height:1.7}
.underline::after{border-color:#378438}
.hero-scene{min-height:460px;transform:translate3d(0,var(--parallax-y,0px),0);perspective:1000px}
.hero-blob{width:80%;height:62%;left:8%;top:25%;background:radial-gradient(ellipse,#faffb869,transparent 70%);filter:blur(12px);animation:blob-breathe 9s ease-in-out infinite alternate}
.character-button{width:109%;mix-blend-mode:normal;transform:perspective(1000px) rotateX(var(--look-y,0deg)) rotateY(var(--look-x,0deg));transition:transform .1s linear;transform-style:preserve-3d;touch-action:manipulation}
.character-button:hover{transform:perspective(1000px) rotateX(var(--look-y,0deg)) rotateY(var(--look-x,0deg)) scale(1.025)}
.hero-gecko{filter:drop-shadow(0 25px 18px #264d1720);animation:leaf-surf 5.8s cubic-bezier(.45,0,.55,1) infinite;transform-origin:50% 70%;pointer-events:none}
.character-button.booped{animation:leaf-boost .8s cubic-bezier(.16,1,.3,1)}
.hero-scribble{right:12%;top:-4px;font-size:22px;transform:rotate(5deg)}
.hero-scribble svg{width:50px;height:57px;right:-30px;top:18px}
.speech-sticker{right:1%;bottom:21px;background:#ffdf7e;box-shadow:4px 6px 0 #34631d23;animation:sticker-bob 5s ease-in-out infinite;transform-origin:50% 0}
.hero-click{bottom:3px;left:27%;font-size:10px;opacity:.8}
.spark-one{left:6%;top:22%;fill:#f7ffbd;filter:drop-shadow(0 1px 0 #407b37);animation:spark-drift 6s ease-in-out infinite}
.spark-two{fill:#357b36;right:5%;top:35%;animation:spark-drift 7s ease-in-out -3s infinite}
.hero-note{opacity:.7}
.ca-button{border-color:#3866335c;background:#faffdf38;border-radius:12px;padding:10px 13px;border:1px solid #477a3933;backdrop-filter:blur(7px)}
.ca-label{background:#e6ffb48a}
.scroll-cue{margin:24px 0 10px}
.scroll-arrow{border-color:#406a3d88}
.lore{padding-top:70px;padding-bottom:40px}
.section-tag{border-bottom:0;padding-bottom:0}
.section-tag>span:last-child{opacity:.7}
.lore-grid{padding:45px 0 32px;gap:10%}
.lore-story h2{font-size:clamp(44px,4.9vw,73px);margin-bottom:26px}
.lore-story p{font-family:var(--display);font-size:23px;line-height:1.5;font-weight:400}
.outlined-word::after{border-color:#3d9139}
.lore-signature{margin-top:25px;gap:10px}
.lore-signature .handwritten{font-size:19px}
.lore-signature svg{fill:#2e8d39;width:24px;height:24px}
.vibe-stickers{display:flex;align-items:center;gap:14px;margin-top:38px;flex-wrap:wrap}
.vibe-stickers span{border:1px solid var(--ink);box-shadow:2px 3px 0 #17431b30;background:#fbffca;padding:8px 16px;border-radius:10px;transform:rotate(-8deg);font-family:var(--display);font-size:18px;animation:sticker-bob 6s ease-in-out infinite}
.vibe-stickers span:nth-child(2){background:#edffc2;transform:rotate(5deg);animation-delay:-2s;border-radius:50px}
.vibe-stickers span:nth-child(3){background:#ffd7c4;border-radius:50%;font-size:27px;padding:0 13px;transform:rotate(15deg);animation-delay:-4s}
.polaroid{background:#fdffe6;border-color:#d1e4aa;box-shadow:7px 10px 0 #5f8b3d22,0 25px 55px #3f69251a;transform:perspective(1000px) translate3d(0,var(--drift-y,0px),0) rotate(-5deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s}
.polaroid .mood-photo{aspect-ratio:1.24}
.mood-photo img{transition:opacity .2s,transform .45s cubic-bezier(.2,.8,.2,1);transform:scale(1)}
.mood-photo img.switching{opacity:0;transform:translateY(24px) rotate(6deg) scale(.9)}
.mood-button{background:#f6ffce7a;border-color:#3d703b69;font-size:11px;backdrop-filter:blur(5px)}
.mood-button.active{background:#1b5e35;color:#f7ffda}
.mood-note{opacity:.8}
.roadmap{background:transparent;border-radius:0;padding-top:65px;padding-bottom:40px}
.roadmap-heading{padding-top:38px}
.roadmap-heading h2{font-size:clamp(45px,4.8vw,72px)}
.roadmap-heading>p.handwritten{font-family:var(--display);font-size:23px;transform:rotate(-5deg);padding-bottom:20px}
.trail{padding-top:55px;padding-bottom:15px;gap:6%}
.trail-line{stroke:#3e802f6b;height:130px;top:50px}
.trail-progress{stroke:#245c2d;stroke-width:2.5;transition:stroke-dashoffset 2.8s cubic-bezier(.22,.7,.2,1)}
.trail-stop{transform-style:preserve-3d}
.js .trail-stop.in-view{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.step-orb{background:#f4ffbd;box-shadow:4px 5px 0 #4d7f2b3b;transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.trail-stop:hover .step-orb{transform:rotate(9deg) translateY(-9px)}
.step-orb i{animation:orb-bounce 4s ease-in-out infinite;animation-delay:-1s}
.trail-stop:nth-of-type(2) .step-orb i{animation-delay:-2s}
.trail-stop:nth-of-type(3) .step-orb i{animation-delay:-3s}
.trail-stop h3{font-size:33px}
.trail-stop ul{font-size:15px;line-height:1.8}
.trail-stop li{margin-bottom:6px}
.trail-sticker{border-radius:4px;box-shadow:2px 3px 0 #3c622a20}
.roadmap-footnote{opacity:.75;padding-top:24px}
.buy{padding-top:65px;padding-bottom:60px}
.buy-grid{padding-top:38px;gap:10%;align-items:center}
.buy-art h2{font-size:clamp(45px,4.5vw,67px)}
.thinking-frame{max-width:330px;margin-top:24px}
.thinking-frame img{border:10px solid #f5ffca;background:#efffc3;box-shadow:0 18px 50px #366b2721}
.thinking-frame{transform:perspective(1000px) translateY(var(--drift-y,0px)) rotate(-6deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.thinking-note{bottom:0;font-size:19px;background:#efffc1d9;padding:5px 10px;border-radius:8px}
.buy-step{padding:20px 0;border-color:#35683038}
.buy-step h3{font-size:30px;margin-bottom:6px}
.buy-step p{font-size:14px;line-height:1.6;max-width:350px}
.buy-number{background:#f4ffbb;box-shadow:3px 3px 0 #41712926;transition:transform .4s}
.buy-step:hover .buy-number{transform:rotate(-15deg) scale(1.1)}
.launch-note{opacity:.8}
.club{background:transparent;color:var(--ink);padding-top:80px;padding-bottom:80px;border-radius:0}
.club::before{content:"";position:absolute;width:70%;height:90%;left:15%;top:4%;background:radial-gradient(ellipse,#e4ffabbd 5%,#e4ffab69 45%,transparent 70%);pointer-events:none}
.club-stamp{border-color:#356a4070;background:#e8ffb152}
.club h2{font-size:clamp(55px,6.5vw,95px);line-height:1.02;margin:28px 0 30px}
.club h2>span{color:#246d32}
.club-doodle{color:#245c2d}
.club-flower{color:#f4ffab;filter:drop-shadow(0 2px 0 #3c782c);opacity:.8;left:6%;top:100px;font-size:135px}
.flower-right{left:auto;right:6%;top:auto;bottom:65px;font-size:90px;color:#427e35}
.footer{padding-top:22px;padding-bottom:24px;background:#f5ffca29;backdrop-filter:blur(5px)}
.footer-top{padding-bottom:23px;border-color:#39693238}
.footer-bottom p{opacity:.9;font-size:10px}
.footer-top>.handwritten{opacity:.85}
.button{transition:transform .35s cubic-bezier(.2,1.8,.3,1),box-shadow .3s,background .3s}
.button:hover{transform:translateY(-5px) rotate(-2deg) scale(1.035);box-shadow:0 8px 0 var(--ink)}
.button-green{background:#a4f441}
.button-green:hover{background:#c8ff80}
.button-club{background:#b6f66a}
.club .button{box-shadow:0 4px 0 #1c4d26}
.loader{background:#e3fda8;clip-path:circle(150% at 50% 45%);transition:clip-path .9s cubic-bezier(.65,0,.35,1),opacity .9s,visibility .9s}
.loader.hidden{clip-path:circle(0% at 50% 45%);opacity:1;visibility:hidden}
.loader img{border-radius:48%;mix-blend-mode:multiply}
.forest-air{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;contain:strict}
.air-leaf{position:absolute;left:var(--x);top:-80px;width:var(--size);height:calc(var(--size)*.48);border-radius:5% 95% 5% 95%;background:linear-gradient(135deg,#a9e338,#4d9c39);box-shadow:inset 0 -1px 0 #1f6f1b38;opacity:0;animation:falling-leaf var(--duration) linear var(--delay) infinite;will-change:transform}
.air-leaf::after{content:"";width:95%;height:1px;position:absolute;top:50%;left:2%;background:#ebff9470;transform:rotate(25deg)}
.air-dot{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:50%;background:#fffcc2;box-shadow:0 0 9px 2px #fffcc2aa;opacity:0;animation:firefly var(--duration) ease-in-out var(--delay) infinite}
.scroll-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none}
.scroll-progress i{display:block;height:100%;background:#1b6538;transform:scaleX(var(--scroll-progress,0));transform-origin:left;box-shadow:0 0 8px #225d2933}
.boop-particle{position:fixed;pointer-events:none;z-index:80;width:14px;height:9px;border-radius:3% 95% 3% 95%;background:var(--particle-color,#3d912f);animation:leaf-pop .9s cubic-bezier(.1,.6,.3,1) forwards}
.js .reveal{opacity:0;transform:translate3d(0,48px,0) rotate(1.5deg);transition:opacity .9s,transform 1.1s cubic-bezier(.16,1,.3,1)}
.js .reveal.in-view{opacity:1;transform:translate3d(0,0,0) rotate(0)}
.js .mood-area.reveal{transform:translate3d(50px,60px,0) rotate(5deg)}
.js .mood-area.reveal.in-view{transform:translate3d(0,0,0) rotate(0)}
.js .buy-step.reveal{transform:translate3d(40px,15px,0)}
.js .buy-step.reveal.in-view{transform:translate3d(0,0,0)}
@keyframes letter-arrive{0%{opacity:0;transform:translateY(100px) rotate(9deg) scale(.83)}60%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes letter-wiggle{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-6deg) translateY(-14px)}65%{transform:rotate(4deg) translateY(-3px)}}
@keyframes leaf-surf{0%,100%{transform:translate3d(-4px,1px,0) rotate(-3deg)}50%{transform:translate3d(9px,-20px,0) rotate(2deg)}}
@keyframes leaf-boost{0%{transform:translateY(0) rotate(0)}32%{transform:translateY(-42px) rotate(-9deg) scale(1.06)}68%{transform:translateY(8px) rotate(3deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes sticker-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -7px;rotate:4deg}}
@keyframes spark-drift{0%,100%{translate:0 0;rotate:0deg;scale:1}50%{translate:8px -18px;rotate:80deg;scale:.7}}
@keyframes orb-bounce{0%,100%{translate:0 0;rotate:-7deg}50%{translate:0 -6px;rotate:10deg}}
@keyframes falling-leaf{0%{transform:translate3d(0,-50px,0) rotate(0);opacity:0}9%{opacity:.6}88%{opacity:.5}100%{transform:translate3d(var(--sway),calc(100vh + 130px),0) rotate(460deg);opacity:0}}
@keyframes firefly{0%,100%{opacity:0;transform:translate3d(0,0,0) scale(.6)}35%{opacity:.65}60%{opacity:.3;transform:translate3d(27px,-70px,0) scale(1.1)}}
@keyframes leaf-pop{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(.35)}}
@media(min-width:1600px){.hero-scene{min-height:520px}.hero-word{font-size:340px}.hero-copy h2{font-size:71px}}
@media(max-width:1100px){.hero-copy h2{font-size:48px}.hero-copy p{font-size:14px}.hero-scene{min-height:405px}.hero-scribble{top:1px;right:12%;font-size:19px}.hero-bottom{grid-template-columns:41% 59%}.lore-story h2{font-size:54px}.lore-story p{font-size:21px}.lore-signature .handwritten{font-size:17px}.vibe-stickers{gap:10px}.vibe-stickers span{font-size:15px;padding:7px 13px}.trail-stop h3{font-size:29px}.trail-stop ul{font-size:13px}.roadmap-heading>p.handwritten{font-size:20px}.club-flower{left:2%;font-size:100px}.flower-right{left:auto;right:2%;font-size:75px}}
@media(max-width:800px){.header{height:80px}.hero{padding-top:15px}.hero-copy h2{font-size:42px}.hero-copy p{font-size:13px;margin:20px 0}.hero-scene{min-height:350px}.hero-scribble{font-size:17px;top:-2px;right:10%}.hero-scribble svg{width:37px;height:42px;right:-13px}.speech-sticker{bottom:16px;right:0}.hero-click{left:24%;bottom:0;font-size:8px}.lore{padding-top:55px}.lore-grid{gap:7%;padding-top:35px}.lore-story h2{font-size:44px}.lore-story p{font-size:18px}.lore-signature .handwritten{font-size:15px}.vibe-stickers{margin-top:26px;gap:9px}.vibe-stickers span{font-size:13px;padding:6px 10px}.vibe-stickers span:nth-child(3){font-size:20px;padding:0 10px}.mood-button{font-size:9px}.roadmap,.buy{padding-top:45px}.roadmap-heading h2{font-size:46px}.roadmap-heading>p.handwritten{font-size:17px;max-width:210px;padding-left:15px}.trail-stop h3{font-size:25px}.trail-stop ul{font-size:12px}.trail-line{height:100px;top:40px}.buy-grid{gap:8%}.buy-art h2{font-size:45px}.thinking-frame{max-width:270px}.thinking-note{font-size:16px}.buy-step h3{font-size:25px}.buy-step p{font-size:12px}.club{padding-top:65px;padding-bottom:65px}.club h2{font-size:63px}.club-flower{left:-2%;font-size:85px}.flower-right{left:auto;right:-2%;font-size:65px}}
@media(max-width:620px){.world-background{background-position:50% 50%}.header{height:77px}.hero{padding-top:16px}.hero-word{margin-top:25px;font-size:23.4vw;line-height:1.02}.hero-bottom{display:flex;margin-top:0}.hero-scene{margin-top:18px;height:69vw;min-height:0;max-height:335px;align-self:center;touch-action:pan-y}.character-button{width:111%;margin-top:0}.hero-gecko{filter:drop-shadow(0 17px 12px #264d172b);animation-duration:6s}.hero-scribble{top:-13px;right:4%;font-size:17px}.hero-scribble svg{width:31px;height:35px;top:15px;right:-12px}.hero-blob{top:15%;height:70%}.speech-sticker{width:74px;height:74px;right:1%;bottom:3px;font-size:13px}.hero-click{bottom:-11px;left:18%;font-size:8px}.spark-one{left:2%;top:13%}.spark-two{right:0;top:27%}.hero-copy{padding-top:33px;padding-bottom:10px}.hero-copy h2{font-size:45px;margin-top:13px}.hero-copy h2 br{display:block}.hero-copy p{font-size:14px;line-height:1.65;margin:18px auto 21px}.hero-note{font-size:8px}.ca-button{padding:10px 12px;margin-top:16px;max-width:320px}.hero-buttons .button-green{font-size:13px}.scroll-cue{margin:20px 0 0}.lore{padding-top:62px;padding-bottom:20px}.lore-grid{padding:30px 0 24px;gap:42px}.lore-story h2{font-size:51px;margin-bottom:25px}.lore-story h2 br:nth-of-type(2){display:none}.lore-story p{font-size:21px;margin:22px 0}.lore-signature{margin-top:20px}.lore-signature .handwritten{font-size:18px}.vibe-stickers{margin-top:27px;gap:12px}.vibe-stickers span{font-size:16px;padding:7px 13px}.vibe-stickers span:nth-child(3){font-size:25px;padding:0 11px}.mood-area{width:90%;padding-top:3px}.polaroid{padding:11px 11px 8px}.mood-button{font-size:10px;padding:8px 11px}.mood-controls{margin-top:33px}.mood-note{font-size:16px}.roadmap{padding-top:45px;padding-bottom:20px}.roadmap-heading{padding-top:29px}.roadmap-heading h2{font-size:49px}.roadmap-heading>p.handwritten{font-size:19px;padding:0;margin-top:24px;max-width:none;display:block}.trail{padding-top:33px;gap:20px;padding-bottom:0}.trail::before{border-left-color:#397b3470;bottom:55px}.trail-stop,.trail-stop:nth-of-type(2),.trail-stop:nth-of-type(3){min-height:200px;padding-left:80px}.trail-stop h3{font-size:30px;margin-top:7px;margin-bottom:13px}.trail-stop ul{font-size:14px;line-height:1.7}.trail-stop li{margin-bottom:5px}.trail-sticker{font-size:10px;margin-top:17px}.phase-label{font-size:8px}.roadmap-doodle{font-size:19px;margin-top:19px}.roadmap-footnote{font-size:8px;padding-top:6px}.buy{padding-top:45px;padding-bottom:25px}.buy-grid{padding-top:30px;gap:16px}.buy-art{min-height:185px}.buy-art h2{font-size:46px}.thinking-frame{width:41%;max-width:175px;right:-7px;top:0}.thinking-frame img{border-width:5px;opacity:1}.thinking-note{font-size:11px;padding:4px 6px;right:0;bottom:-2px}.buy-step{padding:20px 0;gap:17px}.buy-step h3{font-size:29px}.buy-step p{font-size:13px;max-width:none}.buy-step:first-child{padding-top:7px}.launch-note{font-size:8px;margin-top:17px}.club{padding-top:60px;padding-bottom:60px}.club h2{font-size:53px;margin:25px 0}.club-flower{top:85px;left:-36px;font-size:74px}.flower-right{top:auto;right:-27px;left:auto;bottom:50px;font-size:60px}.club-doodle{font-size:17px}.club .button{padding:12px 15px;font-size:11px}.club::before{width:100%;left:0}.footer{padding-top:22px;padding-bottom:24px}.footer-top{padding-bottom:20px}.nav{background:#f0ffd3f5;backdrop-filter:blur(16px)}.menu-toggle{background:#edffc5}.air-leaf:nth-child(n+5){display:none}.air-dot:nth-of-type(n+13){display:none}.js .mood-area.reveal{transform:translate3d(0,45px,0) rotate(4deg)}.js .buy-step.reveal{transform:translate3d(25px,15px,0)}}
@media(max-width:370px){.hero-copy h2{font-size:41px}.hero-scribble{font-size:15px}.hero-scene{height:70vw}.speech-sticker{width:65px;height:65px;font-size:12px}.hero-click{left:18%;font-size:7px}.lore-story h2{font-size:44px}.lore-story p{font-size:19px}.lore-signature .handwritten{font-size:15px}.vibe-stickers span{font-size:14px;padding:6px 11px}.roadmap-heading h2{font-size:44px}.trail-stop,.trail-stop:nth-of-type(2),.trail-stop:nth-of-type(3){padding-left:72px}.trail-stop h3{font-size:27px}.trail-stop ul{font-size:12px}.buy-art h2{font-size:40px}.buy-art{min-height:165px}.thinking-note{font-size:10px}.club h2{font-size:46px}}
@media(max-width:620px){.vibe-stickers{gap:10px}.vibe-stickers span:nth-child(2){font-size:14px;padding:7px 12px}}
@media(prefers-reduced-motion:reduce){.js:not(.intro-ready) .hero-letter{opacity:1}.hero-letter{animation:none!important;opacity:1!important;transform:none!important}.world-background{transform:none}.forest-air,.boop-particle{display:none}.character-button,.character-button:hover{transform:none!important}.hero-gecko{animation:none!important}.loader{display:none}.loader.hidden{clip-path:none}.js .reveal,.js .mood-area.reveal,.js .buy-step.reveal{opacity:1;transform:none}.js .trail-stop.in-view{transform:none}.scroll-progress{display:none}.speech-sticker,.vibe-stickers span,.scene-spark,.step-orb i{translate:none;rotate:none;scale:none}}