.ap-hero{background:radial-gradient(ellipse at 85% 40%,#174d52,#101c2b 65%);color:#fff}
.ap-scene{margin:auto;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.10);overflow:hidden}.ap-scene svg{width:100%;max-height:440px;display:block}
.ap-number{color:#087f74;font:700 1.2rem monospace}.ap-group{scroll-margin-top:6rem}
.ap-lesson{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid #dee2e6;padding:1rem 0}.ap-lesson a{flex:1;color:inherit;text-decoration:none}.ap-lesson a:hover strong{text-decoration:underline}.ap-lesson a:focus-visible{outline:3px solid #0d9488;outline-offset:5px}
.ap-character{transform-origin:240px 230px;transform:translate(var(--ap-x,0px),var(--ap-y,0px)) rotate(var(--ap-tilt,0deg))}
.ap-pupils{transform:translate(var(--ap-eye-x,0px),var(--ap-eye-y,0px))}
.ap-hand{transform-origin:300px 265px;transform:rotate(var(--ap-hand,0deg))}
.ap-waves,.ap-bars{opacity:var(--ap-wave,.45)}
@media(prefers-reduced-motion:reduce){.ap-character,.ap-pupils,.ap-hand{transform:none!important}.ap-waves,.ap-bars{opacity:.45}}