.demo-radius-outer{border-radius:var(--radius);padding:var(--space-4);background:var(--surface);border:1px solid var(--line);max-width:11rem;width:100%;margin-inline:auto}.demo-radius-inner{border-radius:2px;background:var(--surface-raised);height:3.5rem;display:flex;align-items:center;justify-content:center}.demo-radius-inner span{font-size:var(--text-label);color:var(--muted-dim);letter-spacing:.04em}.demo-press-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--text-label);font-weight:600;padding:var(--space-fine-70) var(--space-24);cursor:pointer;align-self:center;transition:transform .16s var(--ease-out),background .18s var(--ease),border-color .18s var(--ease)}@media (hover:hover){.demo-press-btn:hover{background:var(--surface-hover);border-color:var(--signal-light)}}.demo-press-btn:active{transform:scale(.96)}.demo-img-outline{width:100%;max-width:11rem;aspect-ratio:16/9;border-radius:2px;outline:1px solid color-mix(in srgb,var(--ink) 10%,transparent);outline-offset:-1px;background:var(--surface);display:flex;align-items:center;justify-content:center}.demo-img-outline span{font-size:var(--text-label);color:var(--muted-dim);letter-spacing:.04em}.demo-img-bad{width:100%;max-width:11rem;aspect-ratio:16/9;border-radius:2px;border:1px solid slategray;background:var(--surface);display:flex;align-items:center;justify-content:center}.demo-img-bad span{font-size:var(--text-label);color:var(--muted-dim)}.demo-img-pair{display:flex;gap:var(--space-12);flex-wrap:wrap;justify-content:center;width:100%}.demo-img-pair>div{flex:1 1 5.5rem;min-width:0}.demo-img-pair .demo-img-bad,.demo-img-pair .demo-img-outline{max-width:none}.demo-img-label{font-size:var(--text-label);color:var(--muted-dim);text-align:center;margin-top:var(--space-fine-40);letter-spacing:.06em;text-transform:uppercase}.demo-hit-area{position:relative;width:44px;height:44px;border:1px dashed var(--line-strong);border-radius:2px;align-self:center;-webkit-margin-after:var(--space-20);margin-block-end:var(--space-20)}.demo-hit-area,.demo-hit-target{display:flex;align-items:center;justify-content:center}.demo-hit-target{width:24px;height:24px;border-radius:var(--radius-sm);background:var(--surface-hover);border:1px solid var(--line)}.demo-hit-area:after,.demo-hit-target{font-size:var(--text-label);color:var(--muted-dim)}.demo-hit-area:after{content:"44px";position:absolute;bottom:-1.25rem;left:50%;transform:translateX(-50%);letter-spacing:.04em;white-space:nowrap}.demo-stagger{display:flex;gap:var(--space-8);align-items:flex-end;height:4rem;align-self:center}.demo-stagger-bar{width:.75rem;border-radius:1px;background:var(--signal-light);opacity:.18;transform:translateY(6px)}.demo-stagger-bar:first-child{height:2rem;animation-delay:0s}.demo-stagger-bar:nth-child(2){height:3rem;animation-delay:.1s}.demo-stagger-bar:nth-child(3){height:2.5rem;animation-delay:.2s}.demo-stagger-bar:nth-child(4){height:3.5rem;animation-delay:.3s}