.frog-hero{position:relative;width:100%;aspect-ratio:1;height:100%}.frog-hero-poster{width:100%;height:100%;transition:opacity .35s ease}.frog-hero-canvas{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s ease;border-radius:4px}.frog-hero-canvas canvas{display:block;width:100%;height:100%;touch-action:pan-y}.frog-hero[data-state=ready] .frog-hero-poster{opacity:0}.frog-hero[data-state=ready] .frog-hero-canvas{opacity:1;pointer-events:auto}.frog-hero-controls{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:10px;font-size:12px;color:var(--muted-foreground)}.frog-hero-controls button{padding:8px 14px;border:1px solid var(--border);border-radius:4px;background:var(--background);color:var(--foreground);cursor:pointer}.frog-hero-controls button:disabled{cursor:wait}.frog-hero-canvas:focus-visible,.frog-hero-controls button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}@media(prefers-reduced-motion:reduce){.frog-hero-poster,.frog-hero-canvas{transition:none}}