.demo-pill-wrap{pointer-events:none;justify-content:center;display:flex}.demo-pill-wrap--floating{inset:max(var(--sp-3), env(safe-area-inset-top,0px)) var(--sp-4) auto;z-index:60;position:fixed}.demo-pill-wrap--bar{top:var(--sp-2);z-index:30;margin-bottom:var(--sp-3);position:sticky}.demo-pill{pointer-events:auto;align-items:center;gap:var(--sp-2);max-width:100%;padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow-2,0 2px 10px #0000001f);font-size:var(--fs-md);font-variant-numeric:tabular-nums;border-radius:999px;font-weight:600;display:inline-flex}.demo-pill__icon{color:var(--signal-strong);flex-shrink:0}.demo-pill__text{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.demo-pill__close{width:2rem;height:2rem;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:999px;flex-shrink:0;place-items:center;display:inline-grid}.demo-pill__close:hover{background:var(--surface-2);color:var(--text)}.demo-pill__close:focus-visible{outline:2px solid var(--focus,var(--signal-strong));outline-offset:1px}.demo-pill--soon{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger)}.demo-pill--soon .demo-pill__icon{color:var(--danger)}@media (max-width:480px){.demo-pill{font-size:var(--fs-sm)}}