.motion-page .planet{opacity:.45}
.motion-page .hero{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:24px;align-items:center;padding:30px 0 18px}
.motion-page .hero h1{font-size:clamp(2.75rem,5.3vw,4.85rem)}
.hero-demo{position:relative;display:grid;place-items:center;aspect-ratio:4/3;min-width:0;overflow:hidden;border-radius:18px}
.hero-demo video,.hero-demo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-demo video{object-fit:contain;mask-image:radial-gradient(ellipse at center,#000 50%,transparent 98%)}
#rive-status{z-index:1;padding:12px;color:var(--muted);pointer-events:none}
@media(max-width:720px){.motion-page .hero{grid-template-columns:1fr;gap:10px}.hero-demo{width:min(100%,420px);margin:auto;aspect-ratio:16/10}}
#rive-status.rive-note{position:absolute;bottom:0;background:#080b10db;border-radius:8px;font-size:.75rem;padding:5px 8px}