:root{--game-viewport-height: 100dvh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#123024;background:#f5e6c9;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}button{appearance:none;font:inherit;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.frog-game{position:fixed;inset:0;width:100vw;height:var(--game-viewport-height);overflow:hidden;background:radial-gradient(circle at 14% 18%,rgb(255 255 255 / 38%) 0 128px,transparent 130px),radial-gradient(circle at 78% 12%,rgb(120 213 108 / 18%) 0 170px,transparent 172px),linear-gradient(90deg,rgb(133 92 51 / 7%) 1px,transparent 1px),linear-gradient(180deg,#f8e9cc,#efd5a7);background-size:auto,auto,92px 100%,auto;touch-action:none;-webkit-user-select:none;user-select:none}.frog-game:before,.frog-game:after{position:absolute;inset:0;pointer-events:none;content:""}.frog-game:before{background:repeating-linear-gradient(8deg,rgb(104 68 36 / 7%) 0 2px,transparent 2px 28px),repeating-linear-gradient(96deg,rgb(255 255 255 / 14%) 0 1px,transparent 1px 36px);opacity:.48}.frog-game:after{background:radial-gradient(ellipse at 18% 82%,rgb(103 161 80 / 14%) 0 82px,transparent 84px),radial-gradient(ellipse at 88% 76%,rgb(255 191 34 / 16%) 0 112px,transparent 114px)}.frog-stage{position:absolute;inset:0;z-index:1}.frog-fly{--fly-x: -80px;--fly-y: -80px;--fly-angle: 0deg;--fly-scale: 1;position:absolute;top:var(--fly-y);left:var(--fly-x);z-index:4;display:block;width:clamp(30px,4.6vw,54px);height:auto;filter:drop-shadow(0 8px 8px rgb(76 51 28 / 16%));opacity:var(--fly-opacity, 1);pointer-events:none;transform:translate3d(-50%,-50%,0) rotate(var(--fly-angle)) scale(var(--fly-scale));transform-origin:50% 50%;will-change:transform,opacity}.frog-tongue{--tongue-x: 0px;--tongue-y: 0px;--tongue-length: 0px;--tongue-angle: 0deg;position:absolute;top:var(--tongue-y);left:var(--tongue-x);z-index:5;width:var(--tongue-length);height:10px;border-radius:999px;background:radial-gradient(circle at 100% 50%,#ff5f9f 0 9px,transparent 10px),linear-gradient(90deg,#ff9ac2,#ff5f9f);box-shadow:0 4px 10px #81204629;opacity:0;pointer-events:none;transform:rotate(var(--tongue-angle)) scaleX(var(--tongue-scale, 0));transform-origin:0 50%;transition:opacity 70ms linear;will-change:transform,opacity}.frog-tongue.is-active{opacity:1}.frog-button{--frog-x: 50vw;--frog-y: 50dvh;--frog-angle: 0deg;--frog-lift: 0px;--frog-charge-offset: 0px;--frog-tilt: 0deg;--frog-press-angle: 0deg;--frog-shadow-y: 12px;--frog-shadow-alpha: .24;position:absolute;top:var(--frog-y);left:var(--frog-x);width:clamp(118px,20vw,280px);aspect-ratio:1117 / 878;padding:0;border:0;outline:none;background:transparent;cursor:pointer;touch-action:none;transform:translate3d(-50%,-50%,0);transform-origin:50% 50%;will-change:transform}.frog-button:focus{outline:none}.frog-button:focus-visible{outline:8px solid #ffffff;outline-offset:10px}.frog-body{position:absolute;inset:0;display:block;filter:saturate(var(--frog-saturation, 1)) brightness(var(--frog-brightness, 1)) drop-shadow(0 var(--frog-shadow-y) 10px rgb(76 51 28 / var(--frog-shadow-alpha)));transform:translateY(calc(var(--frog-lift) * -1)) rotate(var(--frog-angle)) translateY(calc(var(--frog-charge-offset) * -1)) perspective(720px) rotateX(var(--frog-press-angle)) rotate(var(--frog-tilt));transform-origin:50% 78%;transition:filter .12s ease;will-change:transform}.frog-button.is-charging .frog-body{--frog-brightness: 1.025;--frog-saturation: 1.045}.frog-image{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none}.frog-eyelid{position:absolute;z-index:2;width:12.5%;aspect-ratio:1;border-radius:999px;background:radial-gradient(circle at 42% 16%,rgb(182 240 149 / 72%) 0 12%,transparent 13%),linear-gradient(160deg,#79dc38,#50ba22);opacity:0;transform:scaleY(0);transform-origin:50% 46%;transition:opacity 48ms linear,transform 78ms ease-in}.frog-eyelid--left{top:61.4%;left:31.2%}.frog-eyelid--right{top:61.4%;left:56.6%}.frog-button.is-blinking .frog-eyelid{opacity:1;transform:scaleY(1)}.perf-low .frog-game:before{opacity:.24}.perf-low .frog-body{filter:drop-shadow(0 8px 7px rgb(76 51 28 / 18%))}@media(max-width:620px){.frog-button{width:clamp(138px,33vw,196px)}}@media(orientation:landscape)and (max-height:520px){.frog-button{width:clamp(124px,21vw,172px)}}.frog-folding-section{gap:18px}.frog-folding-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.frog-folding-step{display:grid;grid-template-rows:150px 1fr;gap:10px;min-width:0;padding:12px;border:2px solid rgb(69 143 37 / 14%);border-radius:8px;background:#ffffffad}.frog-folding-step svg{display:block;width:100%;height:150px}.frog-folding-step p{margin:0;color:#53607f;font-size:16px;line-height:1.42}.frog-folding-step strong{color:#19813a;font-weight:1000}.fold-paper{fill:#72d833;stroke:#238d32;stroke-linejoin:round;stroke-width:4}.fold-paper-dark{fill:#29a328}.fold-line{fill:none;stroke:#fff;stroke-dasharray:8 7;stroke-linecap:round;stroke-linejoin:round;stroke-width:4}.fold-arrow,.fold-arrow-head{fill:none;stroke:#245bcf;stroke-linecap:round;stroke-linejoin:round;stroke-width:5}.fold-shadow{fill:#78501f;opacity:.17}.fold-eye{fill:#101927;stroke:#fff;stroke-width:6}.fold-mouth{fill:none;stroke:#101927;stroke-linecap:round;stroke-width:5}@media(max-width:920px){.frog-folding-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.frog-folding-steps{grid-template-columns:1fr}.frog-folding-step{grid-template-rows:132px 1fr}.frog-folding-step svg{height:132px}}