*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Fredoka",sans-serif;background:#f3f0ff;color:#2d2a44;min-height:100vh;background-image:radial-gradient(circle at 80% 10%,#ffd6e8,transparent 30%),radial-gradient(circle at 10% 80%,#d6f5ff,transparent 35%)}
.nav{display:flex;justify-content:space-between;padding:1.3rem clamp(1.2rem,4vw,3rem);font-weight:700}
.nav a{color:#2d2a44;text-decoration:none}
.hero{padding:1rem clamp(1.2rem,4vw,3rem) 1.5rem;max-width:700px}
.brand{font-size:clamp(3.5rem,14vw,6.5rem);line-height:.9;color:#ff7ab6;margin-bottom:.8rem;filter:drop-shadow(0 8px 0 #e85a9a)}
.hero h1{font-size:clamp(1.4rem,3.5vw,2.2rem);max-width:14ch}
.shelf{padding:1rem clamp(1.2rem,4vw,3rem) 4rem;max-width:800px}
.shelf > input{position:absolute;opacity:0;pointer-events:none}
.stage{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.5rem;min-height:140px;align-items:center}
.blob{width:110px;height:110px;border-radius:40% 60% 55% 45%/50% 40% 60% 50%;cursor:pointer;transition:transform .2s ease;animation:jiggle 3s ease-in-out infinite;transform-origin:center}
.b1{background:#ff7ab6;box-shadow:inset -10px -10px 0 #e85a9a,0 12px 0 #e85a9a}
.b2{background:#7ab6ff;box-shadow:inset -10px -10px 0 #5a96e8,0 12px 0 #5a96e8;animation-delay:.4s;border-radius:50%}
.b3{background:#ffe07a;box-shadow:inset -10px -10px 0 #e8c45a,0 12px 0 #e8c45a;animation-delay:.8s;border-radius:30% 70% 60% 40%}
.blob:hover{transform:translateY(-8px) scale(1.05)}
.cards p{display:none;background:#fff;padding:1.2rem 1.4rem;border-radius:24px;box-shadow:0 12px 0 #d8d2f0;margin-bottom:1.5rem;max-width:36ch;line-height:1.45}
#t1:checked ~ .cards .c1,#t2:checked ~ .cards .c2,#t3:checked ~ .cards .c3{display:block}
#t1:checked ~ .stage .b1,#t2:checked ~ .stage .b2,#t3:checked ~ .stage .b3{animation:jiggle-selected 3s ease-in-out infinite}
.cta{display:inline-block;text-decoration:none;background:#7ae0c5;color:#2d2a44;font-weight:700;padding:1rem 1.5rem;border-radius:28px;box-shadow:0 12px 0 #4fc4a5,0 18px 30px rgba(45,42,68,.15);transition:transform .15s ease,box-shadow .15s ease}
.cta:hover{transform:translateY(4px);box-shadow:0 8px 0 #4fc4a5,0 12px 20px rgba(45,42,68,.12)}
@keyframes jiggle{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}