/* Figures 5 and 6 (owner: fig56-loops). Prefix: f56-. */
.f56-bar{display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center;max-width:800px;margin:14px auto 0;padding:0 12px}
.f56-chip{display:inline-flex;align-items:center;gap:6px;font:13px/1.5 var(--sans);color:var(--fg);background:none;border:1px solid var(--line);border-radius:999px;padding:3px 12px;cursor:pointer;touch-action:manipulation}
.f56-chip:hover{border-color:var(--muted)}
.f56-chip.is-on{border-color:var(--fg)}
.f56-chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.f56-chip:focus-visible{outline:2px solid var(--link-color);outline-offset:2px}
.f56-dot{width:9px;height:9px;border-radius:50%;flex:none}
.f56-readout{font:13px/1.5 var(--sans);color:var(--fg);max-width:660px;margin:10px auto 0;padding:0 16px;min-height:4.5em;text-wrap:pretty}
.f56-readout b{font-weight:600}
.f56-hot{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.f56-hot .f56-ring{opacity:0;transition:opacity .2s}
@media (hover:hover){.f56-hot:hover .f56-ring{opacity:.5}}
.f56-hot:focus-visible .f56-ring,.f56-hot.is-active .f56-ring{opacity:1}
.f56-badge{transition:transform .25s ease}
.f56-hot.is-auto .f56-badge,.f56-hot.is-active .f56-badge,.f56-hot:focus-visible .f56-badge{transform:scale(1.18)}
@media (max-width:640px){.f56-readout{min-height:7.5em}.f56-chip{padding:3px 10px}}
@media (prefers-reduced-motion:reduce){.f56-badge,.f56-hot .f56-ring{transition:none}}
.f56-nw{white-space:nowrap}