.ab-hero{background:linear-gradient(180deg,#06110d,#0b2a1f);color:#fff;padding-block:64px 72px}
.ab-hero .wrap{display:flex;flex-direction:column;align-items:center}
.ab-hero h1{margin-top:22px}
.ab-hero .lede{color:#b9cfc4;margin-top:12px;max-width:44ch;font-size:1.1rem}
.ab-hero .btn{background:#fff;color:#06110d;border-color:#fff}
.ab-hero .btn.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ab-hero .btn.light:hover{background:rgba(255,255,255,.12)}
.avatar{margin:0;width:min(220px,56vw);filter:drop-shadow(0 14px 34px rgba(31,195,168,.35))}
.avatar svg{width:100%;height:auto;display:block}
.av-hand{transform-box:view-box;transform-origin:58px 214px;animation:avwave 3.2s ease-in-out infinite}
@keyframes avwave{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}
.av-eyes{transform-box:fill-box;transform-origin:center;animation:avblink 5s infinite}
@keyframes avblink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.av-bub{animation:avbub 5s ease-in-out infinite alternate}
.av-bub.b2{animation-delay:1.2s}.av-bub.b3{animation-delay:2.4s}
@keyframes avbub{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.ab-story .wrap,.ab-end .wrap{max-width:680px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ab-story p,.ab-end p{color:var(--muted);font-size:1.08rem}
.ab-how .wrap{display:flex;flex-direction:column;align-items:center}
.ab-end .actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.nav nav a[aria-current="page"]{opacity:1;font-weight:600}
@media (prefers-reduced-motion:reduce){.avatar *{animation:none!important}}
@media (max-width:560px){.nav .wrap{flex-wrap:wrap;justify-content:center;row-gap:6px}}