@font-face{font-family:'Tasty Gothic';src:url('./assets/fonts/TastyGothic-Demi.ttf') format('truetype');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:'Tasty Gothic';src:url('./assets/fonts/TastyGothic-Heavy.ttf') format('truetype');font-weight:800 900;font-style:normal;font-display:swap}

:root{--green:#264F36;--orange:#EE7203;--red:#FB471F;--white:#fff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Tasty Gothic','Arial Rounded MT Bold',Arial,sans-serif;color:var(--green)}body{overflow-x:hidden;background:#fff}button,a{-webkit-tap-highlight-color:transparent}.page{position:relative;width:100%;min-height:100svh;overflow:hidden;background:#fff}.page-layout{position:relative;z-index:2;width:min(100%,1440px);min-height:100svh;margin:auto}.fade{position:absolute;inset:0;z-index:1;background:#DDFDD9;opacity:.4;pointer-events:none}.hero{position:relative;z-index:0}.visual{position:relative;z-index:0}.pattern{position:absolute;z-index:-2;pointer-events:none;left:50%;top:50%;width:max(150vmax,1970px);aspect-ratio:1;transform:translate(-50%,-50%)}.pattern:after{content:"";position:absolute;inset:0;background:#DDFDD9;opacity:.4;pointer-events:none}.pattern img{width:100%;height:100%;display:block;animation:spin 150s linear infinite}.brand{position:absolute;z-index:3;transition:transform .18s ease}.brand:hover{transform:scale(1.04)}.brand img,.hero-art img{display:block;width:100%;height:100%}.hero-art{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);animation:float 5.5s ease-in-out infinite}.hero-copy{position:relative;z-index:3;text-align:center}h1{font-weight:900;letter-spacing:0;margin:0}.play{border-radius:64px;background:var(--orange);color:#fff;text-decoration:none;font-weight:700;display:flex;align-items:center;justify-content:center;gap:16px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.play:hover{transform:translateY(-3px);filter:brightness(1.035);box-shadow:0 12px 28px #0002}.play:active{transform:translateY(1px) scale(.99)}.play-icon{display:block}
/* Gallery is a proportional component. Its internal geometry scales with its own width. */
.instructions{--iw:553;--ih:756;position:relative;background:var(--green);border-radius:clamp(18px,4.34cqw,24px);overflow:hidden;color:#fff;container-type:inline-size;aspect-ratio:var(--iw)/var(--ih)}.instructions h2{position:absolute;left:0;right:0;top:4.2328%;font-weight:900;text-align:center;margin:0;font-size:5.7866cqw;line-height:1}.instructions h2 span{display:block}.main-image{position:absolute;left:5.7866%;top:15.8730%;width:88.4268%;height:53.9683%;border:0;padding:0;background:none;border-radius:2.8933cqw;overflow:hidden;display:block;cursor:zoom-in;transition:transform .2s ease}.main-image:hover{transform:scale(1.006)}.zoom-badge{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);box-shadow:0 4px 18px rgba(0,0,0,.18);pointer-events:none;transition:transform .18s ease,background .18s ease}.zoom-badge svg{width:23px;height:23px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.main-image:hover .zoom-badge{transform:scale(1.08);background:#fff}.main-image img{width:100%;height:100%;display:block;object-fit:cover;transition:opacity .1s ease}.thumb-viewport{position:absolute;left:0;right:0;top:calc(73.0159% - 4px);height:calc(13.7566% + 4px);padding:4px 32px 0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:none}.thumb-viewport::-webkit-scrollbar{display:none}.thumb-track{display:flex;gap:2.8933cqw;width:max-content;min-width:100%}.thumb-track::after{content:"";flex:0 0 0;width:0}.thumb{flex:0 0 18.8065cqw;width:18.8065cqw;height:18.8065cqw;border:0.7233cqw solid transparent;border-radius:2.8933cqw;padding:0;background:#fff;overflow:hidden;cursor:pointer;transition:transform .18s ease,border-color .18s ease;scroll-snap-align:center}.thumb:hover{transform:translateY(-2px)}.thumb.active{border-color:var(--red)}.thumb img{width:100%;height:100%;display:block;object-fit:cover}.gallery-nav{position:absolute;left:50%;top:91.0053%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:space-between;width:32.9114cqw;height:6.5099cqw}.round{width:6.5099cqw;height:6.5099cqw;border:0;padding:0;background:transparent;cursor:pointer;transition:transform .17s ease}.round img{display:block;width:100%;height:100%}.round:hover,.close:hover,.lb-arrow:hover{transform:scale(1.08)}.round:active{transform:scale(.94)}.gallery-nav strong{font-size:2.8933cqw;line-height:1;font-weight:900;color:#fff}
.lightbox{position:fixed;inset:0;z-index:20;background:#102b20ef;display:flex;align-items:center;justify-content:center;padding:4vh 7vw;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}.lightbox.open{opacity:1;visibility:visible}.lb-stage{position:relative;display:flex;align-items:center;justify-content:center}.lb-viewer{position:relative;display:flex;align-items:center;justify-content:center}.lb-viewer>img{display:block;max-width:min(92vw,1200px);max-height:92vh;border-radius:16px;box-shadow:0 20px 80px #0008;transform:scale(.96);transition:transform .22s ease}.lightbox.open .lb-viewer>img{transform:scale(1)}.zoom-hint{display:none}.close,.lb-arrow{border:0;cursor:pointer;transition:transform .18s}.close{position:absolute;right:24px;top:24px;width:48px;height:48px;background:var(--red);color:#fff;border-radius:50%;font-size:34px;z-index:2}.lb-nav{position:absolute;inset:0;pointer-events:none}.lb-arrow{position:absolute;top:50%;width:52px;height:52px;padding:0;background:transparent;pointer-events:auto}.lb-arrow img{display:block;width:100%;height:100%}.lb-arrow.left{left:-74px}.lb-arrow.right{right:-74px}.round:hover,.close:hover,.lb-arrow:hover{transform:scale(1.08)}
@media(max-width:1000px){.lightbox{padding:16px}.lb-stage{width:100%;height:calc(100svh - 32px);max-width:100%;flex-direction:column;gap:12px}.lb-viewer{width:100%;flex:1;min-height:0;overflow:hidden;border-radius:16px;touch-action:none;cursor:grab}.lb-viewer.dragging{cursor:grabbing}.lb-viewer>img{max-width:100%;max-height:100%;transform-origin:center center;will-change:transform;transition:transform .2s ease;user-select:none;-webkit-user-drag:none}.lightbox.open .lb-viewer>img{transform:translate3d(0,0,0) scale(1)}.lb-viewer.zoomed>img{max-width:none;max-height:none}.zoom-hint{display:block;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:8px 12px;border-radius:20px;background:#102b20cc;color:#fff;font-size:13px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s}.lightbox.open .zoom-hint.show{opacity:1}.lb-nav{position:static;display:flex;justify-content:center;gap:32px;pointer-events:auto;flex:0 0 auto}.lb-arrow{position:static;width:42px;height:42px}.close{right:12px;top:12px}.lb-viewer.zoomed~.lb-nav{opacity:.9}}

@media(min-width:1001px){.page-layout{height:max(720px,100svh);min-height:720px}.hero{position:absolute;left:clamp(48px,10.35vw,149px);top:50%;width:min(38.47vw,calc((100svh - 80px)*.6756),554px);aspect-ratio:554/820;transform:translateY(-50%)}.visual{position:absolute;left:0;top:0;width:100%;height:99.64%}.brand{left:calc(clamp(48px,10.35vw,149px) * -1 + clamp(32px,5.97vw,86px));top:clamp(40px,5vw,72px);width:min(6.67vw,96px);height:min(6.67vw,96px)}.hero-art{left:50%;top:0;width:99.64%;height:auto;aspect-ratio:1;transform:translateX(-50%);animation:floatDesktop 5.5s ease-in-out infinite}.pattern{left:50%;top:49.82%;width:max(210vmax,2900px)}.hero-copy{position:absolute;left:0;top:71.22%;width:100%}h1{font-size:min(5vw,calc(72/554*100cqw),72px);line-height:1;margin-bottom:5.78cqw}.play{width:100%;height:16.61cqw;max-height:92px;font-size:min(7.22cqw,40px);line-height:1.1}.play-icon{width:5.78cqw;height:5.78cqw}.hero{container-type:inline-size}.instructions{--iw:553;--ih:756;position:absolute;right:clamp(24px,2.22vw,32px);top:50%;transform:translateY(-50%);width:min(38.4vw,61.44vh,553px);height:auto}}
/* Tablet: preserve the 520×727 Figma component and scale it as a whole. */
@media(min-width:501px) and (max-width:1000px){.page-layout{min-height:max(100svh,calc(1548px * min(1,100vw/768)))}.hero{width:100%}.visual{height:clamp(400px,61.2vw,470px)}.brand{left:8.333vw;top:5.208vw;width:12.5vw;height:12.5vw;max-width:96px;max-height:96px}.hero-art{width:min(51.302vw,394px);height:min(51.302vw,394px)}.pattern{width:max(325vw,2497px)}.hero-copy{width:min(67.708vw,520px);margin:clamp(18px,2.6vw,20px) auto 0}h1{font-size:min(7.292vw,56px);line-height:1;margin-bottom:24px}.play{width:100%;height:min(11.979vw,92px);font-size:min(5.208vw,40px)}.play-icon{width:min(4.167vw,32px);height:min(4.167vw,32px)}.instructions{--iw:520;--ih:727;width:min(67.708vw,520px);margin:clamp(50px,7.3vw,56px) auto clamp(24px,6vw,48px)}.instructions h2{top:4.4017%;font-size:6.1538cqw}.main-image{left:6.1538%;top:16.5062%;width:87.6923%;height:52.1320%}.thumb-viewport{left:0;right:0;top:calc(71.9395% - 4px);height:calc(14.3054% + 4px)}.thumb-track{gap:3.0769cqw}.thumb{flex-basis:20cqw;width:20cqw;height:20cqw;border-width:.7692cqw;border-radius:3.0769cqw}.gallery-nav{top:93.1224%;width:35cqw;height:6.9231cqw}.round{width:6.9231cqw;height:6.9231cqw}.gallery-nav strong{font-size:3.0769cqw}}
/* Phone: use the 343×519 component as the scaling master. */
@media(max-width:500px){.zoom-badge{right:10px;bottom:10px;width:38px;height:38px}.zoom-badge svg{width:20px;height:20px}.page-layout{min-height:max(100svh,1111px)}.visual{height:369px}.brand{left:clamp(16px,6.667vw,25px);top:24px;width:56px;height:56px}.hero-art{width:min(95.2vw,357px);height:min(95.2vw,357px)}.pattern{width:max(525vw,1970px)}.hero-copy{width:calc(100% - 48px);margin:19px auto 0}h1{font-size:clamp(34px,10.667vw,40px);line-height:1;margin-bottom:24px}.play{width:100%;height:58px;font-size:24px}.play-icon{width:16px;height:16px}.instructions{--iw:343;--ih:519;width:calc(100% - 48px);max-width:343px;margin:64px auto 18px}.instructions h2{top:4.6243%;font-size:6.9971cqw}.main-image{left:4.6647%;top:16.9557%;width:90.6706%;height:49.9037%}.thumb-viewport{left:0;right:0;top:calc(69.9422% - 4px);height:calc(13.8728% + 4px)}.thumb-track{gap:4.6647cqw}.thumb{flex-basis:20.9913cqw;width:20.9913cqw;height:20.9913cqw;border-width:.8073cqw;border-radius:3.229cqw}.gallery-nav{top:91.9075%;width:53.0612cqw;height:10.4956cqw}.round{width:10.4956cqw;height:10.4956cqw}.gallery-nav strong{font-size:4.6647cqw}.close{right:12px;top:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* Motion restored: these keyframes are intentionally kept outside responsive media queries. */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(-.2deg)}50%{transform:translate(-50%,-50%) translateY(-12px) rotate(.25deg)}}
@keyframes floatDesktop{0%,100%{transform:translateX(-50%) translateY(0) rotate(-.2deg)}50%{transform:translateX(-50%) translateY(-12px) rotate(.25deg)}}