:root{--sky1:#1e5fa8;--sky2:#7fb8e6;--cloud:#f5f9fc;--pink:#e8a3a8;--cyan:#7fe6ea;--sun:#f2c824;--rope:#6b4a2e;--deep:#0d3366}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Bricolage Grotesque',sans-serif;background:var(--cloud);color:#12304f}
.display{font-family:'Fredoka',sans-serif}
.sky{background:linear-gradient(180deg,#cfe4f5 0%,var(--sky2) 30%,var(--sky1) 75%,var(--deep) 100%)}
.cloud{position:absolute;background:rgba(255,255,255,.7);border-radius:999px;filter:blur(6px);animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.sway{transform-origin:50% 0;animation:sway 4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.bounce:hover,.bounce:active{animation:bnc .6s}
@keyframes bnc{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px) scale(1.05)}70%{transform:translateY(4px)}}
.orb{position:absolute;border-radius:50%;animation:floaty ease-in-out infinite alternate;pointer-events:none}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-40px)}}
.card{transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-8px)}
.reveal{animation:rise .8s both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.reflect{-webkit-box-reflect:below 4px linear-gradient(transparent 60%,rgba(255,255,255,.25))}
.toast{animation:rise .4s both}
.marq{animation:marq 18s linear infinite}
@keyframes marq{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}