.frog-lily-pad{--frog-pad-width:32px;width:42px;height:42px;color:var(--clr-primary);cursor:pointer;touch-action:none;isolation:isolate;background:0 0;border:0;flex:0 0 42px;place-items:center;padding:0;display:grid;position:relative}.frog-lily-pad-shape{width:var(--frog-pad-width);border:1px solid color-mix(in srgb, var(--clr-primary) 26%, var(--clr-border));background:color-mix(in srgb, var(--clr-primary) 5%, var(--clr-surface));border-radius:52% 48% 50% 50%;height:12px;transition:background-color .18s,border-color .18s,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .18s;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}.frog-lily-pad-shape:after{content:"";background:var(--clr-surface);clip-path:polygon(100% 0,0 48%,100% 100%);width:9px;height:7px;position:absolute;top:-1px;right:2px}.frog-lily-pad-frog{z-index:2;transform-origin:50% 100%;filter:drop-shadow(0 3px 4px #1a2e2324);display:block;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.frog-lily-pad-ghost{z-index:2;opacity:0;pointer-events:none;filter:grayscale(.15);animation:1.7s cubic-bezier(.22,.85,.32,1) 2 frog-lily-teach;position:absolute;bottom:7px;left:50%}.frog-lily-pad.is-selected .frog-lily-pad-shape{border-color:color-mix(in srgb, var(--clr-primary) 52%, var(--clr-border));background:color-mix(in srgb, var(--clr-primary) 12%, var(--clr-surface));box-shadow:inset 0 1px #fff6}.frog-lily-pad:not(.is-selected):hover .frog-lily-pad-shape,.frog-lily-pad:not(.is-selected):focus-visible .frog-lily-pad-shape,.frog-lily-pad.is-drop-target .frog-lily-pad-shape{border-color:color-mix(in srgb, var(--clr-gold) 54%, var(--clr-border));background:color-mix(in srgb, var(--clr-gold) 10%, var(--clr-surface));box-shadow:0 4px 12px color-mix(in srgb, var(--clr-gold) 15%, transparent);transform:translate(-50%)scale(1.08)}.frog-lily-pad.is-dragging{z-index:30}.frog-lily-pad.is-dragging .frog-lily-pad-frog{transform:translate(calc(-50% + var(--frog-drag-x)), var(--frog-drag-y)) scale(.96, 1.04);filter:drop-shadow(0 10px 8px #1a2e232e)}.frog-lily-pad.is-hopping .frog-lily-pad-frog{animation:.56s cubic-bezier(.22,.85,.32,1.18) frog-lily-hop}.frog-lily-pad:disabled{opacity:.38;cursor:default}@keyframes frog-lily-hop{0%{transform:translate(-50%)scale(1)}20%{transform:translate(-50%)translateY(2px)scale(1.06,.92)}52%{transform:translate(-50%)translateY(-11px)scale(.96,1.04)}78%{transform:translate(-50%)translateY(1px)scale(1.04,.94)}to{transform:translate(-50%)scale(1)}}@keyframes frog-lily-teach{0%{opacity:0;transform:translate(-140%,-4px)scale(.84)}18%{opacity:.42}56%{opacity:.42;transform:translate(-50%,-11px)scale(.94)}76%{opacity:.42;transform:translate(-50%)scale(1.02,.92)}to{opacity:0;transform:translate(-50%)scale(1)}}@media (prefers-reduced-motion:reduce){.frog-lily-pad-shape,.frog-lily-pad-frog,.frog-lily-pad-ghost{transition:none!important;animation:none!important}}