.g-frog-hop{--fh-water:#9fd6f0;--fh-water-deep:#5cb3dd;--fh-leaf:#4caf50;--fh-leaf-dark:#2e7d32;--fh-leaf-light:#81c784;--fh-frog:#66bb6a;--fh-frog-dark:#2e7d32;--fh-petal:#f48fb1;gap:var(--sp-3)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .g-frog-hop{--fh-water:#1e4b63;--fh-water-deep:#163a4d}}:root[data-theme=dark] .g-frog-hop{--fh-water:#1e4b63;--fh-water-deep:#163a4d}.g-frog-hop :focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}.g-frog-hop .fh-pond{width:min(100%, calc(var(--cols) * 88px));aspect-ratio:var(--cols) / var(--rows);border-radius:var(--r-xl);background:radial-gradient(ellipse at 30% 20%, var(--fh-water) 0 40%, transparent 41%), linear-gradient(180deg, var(--fh-water), var(--fh-water-deep));box-shadow:inset 0 0 0 4px color-mix(in srgb, var(--fh-water-deep) 70%, #000 30%);--cw:calc(100% / var(--cols));--rh:calc(100% / var(--rows));position:relative}.g-frog-hop .fh-pad{width:var(--cw);height:var(--rh);color:var(--fh-leaf-dark);cursor:pointer;background:0 0;border:0;place-items:center;padding:6%;display:grid;position:absolute;inset-block-start:calc(var(--r) * var(--rh));inset-inline-start:calc(var(--c) * var(--cw))}.g-frog-hop .fh-padart{filter:drop-shadow(0 2px 2px #0003);grid-area:1/1;width:100%;height:100%}.g-frog-hop .fh-leaf{fill:var(--fh-leaf);stroke:var(--fh-leaf-dark);stroke-width:3px}.g-frog-hop .fh-vein{fill:none;stroke:var(--fh-leaf-dark);stroke-width:2px;stroke-linecap:round;opacity:.6}.g-frog-hop .fh-flower circle{fill:var(--fh-petal)}.g-frog-hop .fh-flower .fh-flowerheart{fill:#fff176}.g-frog-hop .fh-num{border-radius:var(--r-full);min-width:1.6em;height:1.6em;color:var(--fh-leaf-dark);font-family:var(--font-num);font-size:clamp(.9rem,4.5vw,1.3rem);font-weight:var(--fw-black);background:#fff;grid-area:1/1;place-items:center;line-height:1;display:grid;transform:translate(-22%,22%)}.g-frog-hop .fh-pad.is-home .fh-num{display:none}.g-frog-hop .fh-pad.is-reach .fh-leaf{fill:var(--fh-leaf-light);stroke:#fff;stroke-width:5px}.g-frog-hop .fh-pad.is-reach .fh-num{background:var(--c-accent);color:#1a1a22}.g-frog-hop .fh-pad.is-visited .fh-leaf{opacity:.8}.g-frog-hop .fh-pad.is-hinted .fh-leaf{stroke:var(--c-accent);stroke-width:7px}.g-frog-hop .fh-pad:disabled{cursor:default}.g-frog-hop .fh-frog{width:var(--cw);height:var(--rh);pointer-events:none;padding:18% 14% 26%;position:absolute;inset-block-start:calc(var(--r) * var(--rh));inset-inline-start:calc(var(--c) * var(--cw))}.g-frog-hop .fh-frogart{filter:drop-shadow(0 3px 3px #0000004d);width:100%;height:100%}.g-frog-hop .fh-skin{fill:var(--fh-frog);stroke:var(--fh-frog-dark);stroke-width:3px}.g-frog-hop .fh-eye{fill:#fff}.g-frog-hop .fh-pupil{fill:#1a1a22}.g-frog-hop .fh-smile{fill:none;stroke:var(--fh-frog-dark);stroke-width:3.5px;stroke-linecap:round}.g-frog-hop .fh-belly{fill:#dcedc8;opacity:.85}.g-frog-hop.is-done .fh-pond{box-shadow:inset 0 0 0 4px var(--c-good)}.g-frog-hop .fh-msg{max-width:36ch;min-height:2.6em;color:var(--c-text-dim);font-size:var(--fs-md);font-weight:var(--fw-med);line-height:var(--lh-snug);text-align:center;text-wrap:balance;margin:0}.g-frog-hop .fh-msg.is-good{color:var(--c-good);font-weight:var(--fw-bold)}.g-frog-hop .fh-msg.is-almost{color:var(--c-warn);font-weight:var(--fw-semi)}.g-frog-hop .fh-actions{justify-content:center;display:flex}.g-frog-hop .fh-action{min-height:var(--tap);padding-block:var(--sp-2);padding-inline:var(--sp-5);border:2px solid var(--c-border-strong);border-radius:var(--r-full);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-semi);cursor:pointer}.g-frog-hop .fh-action.is-hinted{outline:3px solid var(--c-accent);outline-offset:3px}.g-frog-hop .fh-action:disabled{opacity:.5;cursor:default}.g-frog-hop.is-done .fh-actions{visibility:hidden}.g-frog-hop .fh-frog,.g-frog-hop .fh-pad{transition:none}@media (prefers-reduced-motion:no-preference){.g-frog-hop.is-motion .fh-frog{transition:inset-block-start var(--dur-slow) var(--ease-bounce), inset-inline-start var(--dur-slow) var(--ease-bounce)}.g-frog-hop.is-motion .fh-leaf,.g-frog-hop.is-motion .fh-num{transition:fill var(--dur) var(--ease), stroke var(--dur) var(--ease), background-color var(--dur) var(--ease)}.g-frog-hop.is-motion .fh-pad:not(:disabled):active{transform:scale(.94)}}