html body:has(>.motion-demo){background:0 0}.motion-demo{color:var(--riido-foreground-primary);padding:1px;container-type:inline-size}.motion-demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.motion-demo-card{border:1px solid var(--riido-border-subtle);border-radius:var(--riido-primitive-radius-radius-xs);background:var(--riido-surface-1);min-width:0;padding:20px 16px}.motion-demo .motion-demo-card h2{margin:0;font-size:13px;font-weight:600;line-height:20px}.motion-demo-stage{justify-content:center;align-items:center;gap:10px;min-height:96px;display:flex}.motion-demo-stage>span{color:var(--riido-foreground-secondary);font-size:12px}.motion-demo .motion-demo-card p,.motion-demo .motion-demo-controls p{color:var(--riido-foreground-secondary);overflow-wrap:anywhere;margin:0;font-size:12px;line-height:1.6}.motion-demo-card>p{text-align:center}.motion-demo-controls{border-top:1px solid var(--riido-border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:16px;display:flex}.motion-demo-controls>button{flex-shrink:0;margin-inline-start:auto}.motion-demo-status{color:var(--riido-foreground-secondary);flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;line-height:20px;display:flex}.motion-demo-status strong{background:var(--riido-surface-2);color:var(--riido-foreground-primary);border-radius:4px;padding:2px 8px;font-weight:500}.motion-demo-popover{color:var(--riido-foreground-primary);margin:0;font-size:13px;line-height:1.7}.motion-demo-reduced *,.motion-demo-reduced :before,.motion-demo-reduced :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}@container (max-width:420px){.motion-demo-examples .motion-demo-grid{grid-template-columns:minmax(0,1fr)}.motion-demo-card{padding:16px 12px}}