/* Vain esimerkki.html käyttää näitä. Omassa tiedostossaan, ei <style>-lohkona,
   jotta CSP pysyy tiukkana ilman 'unsafe-inline'-poikkeusta. */
.demo{
  min-height:100svh;display:grid;place-items:center;
  text-align:center;padding:var(--pad);position:relative;z-index:1;
}
.demo__inner{max-width:640px;display:grid;justify-items:center;gap:clamp(14px,2vw,22px)}
.demo__ball{width:clamp(64px,8vw,96px);filter:drop-shadow(0 12px 14px rgba(20,20,15,.22));animation:demo-bounce 1.6s cubic-bezier(.5,0,.8,1) infinite alternate}
@keyframes demo-bounce{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-26px) rotate(10deg)}}
.demo h1{font-size:clamp(2.2rem,6vw,4.4rem)}
.demo p{color:var(--ink-60);max-width:38ch}
@media (prefers-reduced-motion:reduce){.demo__ball{animation:none}}