@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800;900&family=Outfit:wght@500;600;700;800;900&display=swap');
:root{--green:#177343;--ink:#124d33;--mint:#d7eddb;--pink:#ef7294;--paper:#fbfbf1}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;font-weight:700}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #b42560;outline-offset:6px}button:disabled{cursor:wait}::selection{background:#ffdf65;color:#124d33}.skip-link{position:fixed;left:20px;top:-90px;z-index:1000;background:white;padding:15px}.skip-link:focus{top:12px}
.site-header{position:absolute;z-index:20;top:28px;left:3%;right:3%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:Outfit,sans-serif;font-weight:900;font-size:45px;letter-spacing:-2.4px;line-height:.95}.brand span{display:block;letter-spacing:.05em;font-family:"M PLUS Rounded 1c",sans-serif;font-size:10px;margin-top:10px;font-weight:800}.site-header nav{display:flex;gap:7px;align-items:center}.site-header nav a{background:#fffdfa;padding:19px 26px;border-radius:5px;font-size:13px;transition:transform .2s,background .2s}.site-header nav a:hover{transform:translateY(-3px);background:#fff4b7}.site-header nav .nav-pink{background:var(--pink);color:#452e35}.nav-pink b{margin-left:18px;font-size:20px}
.hero{position:relative;isolation:isolate;height:100svh;min-height:730px;max-height:1150px;overflow:hidden;background:#cce7d8}.stage{position:absolute;inset:0;background:url('assets/shared/felt-stage-v01.png') center center/cover no-repeat;z-index:-2}.hero:after{content:"";position:absolute;z-index:-1;inset:58% 0 0;background:linear-gradient(transparent,rgba(214,239,217,.62))}.hero-character{position:absolute;left:53.5%;top:45.5%;height:66%;width:auto;aspect-ratio:.824;transform:translate(-50%,-50%)}.puppet{height:100%;width:auto;aspect-ratio:1023/1130;position:relative;animation:hello 5s ease-in-out infinite;transform-origin:50% 95%;filter:drop-shadow(0 17px 10px #17362421)}.puppet img{position:absolute;max-width:none;width:143.8905%;height:auto;left:-26.8817%;top:-17.5221%;user-select:none;pointer-events:none}.hello-bubble{position:absolute;top:21%;left:70%;background:#fffaf2;border-radius:50%;padding:26px 29px;line-height:1.4;font-size:21px;transform:rotate(9deg);text-align:center;box-shadow:0 8px 0 #336c4710}.hello-bubble:after{content:"";position:absolute;left:3px;bottom:3px;width:24px;height:28px;background:#fffaf2;clip-path:polygon(0 100%,25% 0,100% 40%)}.hello-bubble strong{font-size:28px}.hello-bubble>span{position:absolute;right:-20px;top:-22px;color:#d74178;font-size:65px;line-height:1}
.hero-copy{position:absolute;bottom:47px;left:3%;right:3%;pointer-events:none}.hero-overline{font-family:Outfit,sans-serif;font-size:13px;letter-spacing:.17em;margin:0 0 10px}.hero h1{font-size:clamp(29px,4.4vw,70px);font-weight:900;letter-spacing:-.045em;margin:0 0 8px;line-height:1.24;text-shadow:0 2px 12px #e2f5e599}.hero h1 span{display:inline}.english-line{font-family:Outfit,sans-serif;font-weight:900;letter-spacing:-.055em;font-size:10.25vw;line-height:.95;margin:0;color:var(--green);white-space:nowrap}.scroll-cue{position:absolute;bottom:15px;left:3%;display:flex;gap:18px;font:600 10px Outfit,sans-serif;letter-spacing:.15em;align-items:center}.scroll-cue span{font-size:22px}.motion-button{position:absolute;bottom:16px;right:3%;border:1px solid #1c69464d;background:#eef8ec99;border-radius:50%;width:32px;height:32px;font-size:13px}.paused .puppet{animation-play-state:paused}.mini-label{font:600 12px Outfit,sans-serif;letter-spacing:.13em}
.cat-selector{padding:55px 4% 40px;background:var(--paper);display:grid;grid-template-columns:1fr 2fr;gap:20px 4%;border-bottom:1px solid #194f3526}.selector-intro h2{font-size:30px;letter-spacing:-.04em;line-height:1.35;margin:15px 0}.selector-intro p{font-size:11px;line-height:1.8;margin:0}.choices{display:grid;grid-template-columns:repeat(5,1fr);align-items:start;gap:10px}.choice{border:2px solid transparent;background:#e9f1e5;border-radius:16px;padding:0 8px 12px;transition:transform .2s,border .2s;position:relative;text-align:center}.choice:hover{transform:translateY(-5px)}.choice[aria-pressed=true]{border-color:var(--green);background:#d2e9cc}.choice[aria-pressed=true]:after{content:"✓";position:absolute;top:6px;right:8px;color:var(--green);font-size:16px}.choice img{width:100%;aspect-ratio:1;object-fit:contain;display:block}.choice .choice-id{font:800 12px Outfit,sans-serif;display:block;letter-spacing:.05em}.choice .choice-title{font-size:11px;display:block;margin-top:5px;white-space:nowrap}.selection-status{grid-column:2;font-size:11px;margin:0;min-height:1.5em}
.about{display:grid;grid-template-columns:40% 60%;min-height:750px;scroll-margin-top:0}.about-copy{padding:100px 9% 80px 10%}.about h2{font-size:clamp(25px,3vw,44px);line-height:1.55;margin:38px 0 32px;letter-spacing:-.05em}.about h2 em{font-style:normal;position:relative;white-space:nowrap}.about h2 em:after{content:"";position:absolute;left:0;bottom:3px;height:9px;width:100%;background:#ffdb50;z-index:-1}.about p{font-size:14px;line-height:2.25;margin:0 0 23px}.text-link{display:inline-flex;gap:25px;align-items:center;font-size:12px;border-bottom:1px solid var(--ink);padding:10px 0;margin-top:10px}.text-link span{font-size:26px}.about-scene{background:#8dc8ed;position:relative;isolation:isolate;overflow:hidden;min-height:650px}.scene-word{position:absolute;font:900 clamp(150px,17vw,270px)/.8 Outfit,sans-serif;letter-spacing:-.075em;top:50px;left:28px;color:#d4edfe}.about-character{position:absolute;height:68%;bottom:4%;left:50%;transform:translateX(-50%);aspect-ratio:.824}.about-character .puppet{animation-delay:-2s;filter:drop-shadow(0 18px 12px #183a5b26)}.scene-sticker{position:absolute;right:7%;top:35%;font-size:17px;text-align:center;line-height:1.8;background:#f8e87a;padding:27px 30px;border-radius:50%;transform:rotate(12deg)}
.ideas{padding:100px 5% 115px;background:#e7ed5c}.ideas-heading{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end}.ideas-heading .mini-label{grid-column:1/-1}.ideas h2{font-size:clamp(34px,4vw,60px);line-height:1.4;margin:0 0 45px;letter-spacing:-.05em}.ideas-heading p{font-size:14px;line-height:2.2;margin:0 0 53px;justify-self:end}.idea-rows{border-top:2px solid var(--ink)}.idea-rows article{display:grid;grid-template-columns:50px 1.1fr 1.3fr 80px;align-items:center;gap:18px;padding:35px 0;border-bottom:1px solid #1c5b3c66}.row-number{font:600 15px Outfit,sans-serif}.idea-rows h3{font-size:25px;letter-spacing:-.04em;margin:0}.idea-rows p{font-size:12px;line-height:1.9}.row-symbol{font:600 65px/.8 Outfit,sans-serif;text-align:right}.outro{padding:95px 5% 65px;background:#ef819e}.outro p{font-size:24px;margin:0 0 15px}.outro-logo{font:900 15vw/.95 Outfit,sans-serif;letter-spacing:-.07em;display:flex;justify-content:space-between;align-items:center}.outro-logo span{font-size:11vw;font-weight:500}footer{padding:28px 5% 100px;display:flex;justify-content:space-between;gap:20px;font-size:10px;background:var(--paper)}footer>span:first-child{font-family:Outfit,sans-serif;letter-spacing:.08em}
.quick-switch{position:fixed;bottom:18px;right:20px;z-index:50;display:flex;align-items:center;background:#fffef7;border:1px solid #1c69443d;border-radius:30px;padding:5px;box-shadow:0 5px 20px #17493216}.quick-switch button{border:0;background:#e2eedc;width:34px;height:34px;border-radius:50%;font-size:18px}.quick-switch a{font-size:11px;padding:0 13px;min-width:132px;text-align:center}
.motion-button{right:252px}
@keyframes hello{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(1.1deg) translateY(-9px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.puppet{animation:none!important}*{transition:none!important}}
@media(min-width:1650px){.english-line{font-size:168px}.hero-copy{bottom:55px}.hero h1{font-size:70px}}
@media(max-width:900px){.site-header nav a{padding:17px 15px;font-size:11px}.brand{font-size:37px}.hero{min-height:670px}.hero-character{left:50%;height:60%;top:46%}.hello-bubble{left:72%;top:25%;font-size:16px;padding:19px}.hello-bubble strong{font-size:22px}.cat-selector{grid-template-columns:1fr}.selector-intro{display:grid;grid-template-columns:1fr 1fr;gap:10px}.selector-intro .mini-label{grid-column:1/-1}.selector-intro h2{margin:0}.selector-intro p{align-self:end}.selection-status{grid-column:1}.about{grid-template-columns:44% 56%}.about-copy{padding:65px 8%}.about-scene{min-height:630px}.scene-sticker{right:5%;top:43%;padding:20px;font-size:14px}.scene-word{font-size:20vw}.about-character{height:55%;bottom:12%}.about p{font-size:12px}.idea-rows article{grid-template-columns:35px 1fr 1fr 45px}.idea-rows h3{font-size:21px}.row-symbol{font-size:48px}}
@media(max-width:600px){html{scroll-padding-top:20px}.site-header{top:23px;left:6%;right:6%;align-items:start}.brand{font-size:33px;letter-spacing:-1.7px}.brand span{font-size:8px;margin-top:8px;letter-spacing:.03em}.site-header nav a{display:none}.site-header nav .nav-pink{display:block;padding:13px 12px;font-size:10px}.nav-pink b{margin-left:3px;font-size:13px}.hero{height:100svh;min-height:670px;max-height:900px}.stage{background-size:auto 100%;background-position:52% center}.hero-character{height:47%;left:47%;top:44%}.hello-bubble{top:18%;left:auto;right:8%;font-size:13px;padding:15px 17px}.hello-bubble strong{font-size:19px}.hello-bubble>span{font-size:40px;right:-12px;top:-14px}.hero-copy{left:6%;right:6%;bottom:60px}.hero-overline{font-size:9px;letter-spacing:.13em;margin-bottom:12px}.hero h1{font-size:35px;line-height:1.3;letter-spacing:-.055em;margin-bottom:14px}.hero h1 span{display:block}.english-line{font-size:9.5vw;letter-spacing:-.058em}.scroll-cue{left:6%;bottom:21px;font-size:8px}.motion-button{right:6%;bottom:21px}.cat-selector{padding:35px 6% 30px;gap:24px}.selector-intro{display:block}.selector-intro h2{font-size:25px;margin:10px 0}.selector-intro h2 br{display:none}.choices{grid-template-columns:repeat(3,1fr);gap:10px}.choice{border-radius:12px}.choice .choice-title{font-size:10px}.selection-status{font-size:10px}.about{display:flex;flex-direction:column}.about-copy{padding:65px 8%}.about h2{font-size:34px;line-height:1.55;margin:26px 0}.about p{font-size:14px}.about-scene{min-height:530px}.scene-word{font-size:160px;top:40px;left:22px}.about-character{height:72%;bottom:3%;left:47%}.scene-sticker{right:5%;top:32%}.ideas{padding:65px 7%}.ideas-heading{display:block}.ideas h2{font-size:34px;margin:25px 0}.ideas-heading p{font-size:12px;margin:0 0 35px}.idea-rows article{grid-template-columns:24px 1fr 36px;gap:12px;padding:24px 0}.idea-rows h3{font-size:21px}.idea-rows p{grid-column:2;grid-row:2;font-size:11px;margin:0}.row-symbol{grid-column:3;grid-row:1/3;font-size:38px}.row-number{font-size:12px}.outro{padding:65px 7% 45px}.outro p{font-size:18px;margin-bottom:22px}.outro-logo{font-size:17vw}footer{flex-wrap:wrap;padding:25px 7% 105px;font-size:9px}.quick-switch{bottom:12px;right:12px}.quick-switch a{font-size:10px;min-width:120px;padding:0 8px}.quick-switch button{width:30px;height:30px}}
.hero .motion-button{right:252px}
@media(max-width:600px){.hero .motion-button{right:23px;top:94px;bottom:auto}}
