@layer screens{.conn-pill{box-sizing:border-box;min-width:120px;height:20px;color:var(--muted);font-size:var(--text-12);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;align-items:center;gap:8px;line-height:20px;display:inline-flex}.conn-pill-label{text-overflow:ellipsis;overflow:hidden}.conn-pill-mark{box-sizing:border-box;background:var(--muted);border-radius:50%;flex:none;width:10px;height:10px}.conn-pill[data-conn=live] .conn-pill-mark{background:var(--gain);box-shadow:0 0 0 0 color-mix(in srgb, var(--gain) 45%, transparent);animation:2s ease-out infinite conn-pill-pulse}.conn-pill[data-detail=off]{color:var(--text-tertiary,var(--muted));font-size:var(--text-12)}.conn-pill[data-conn=delayed] .conn-pill-mark{background:var(--warning);width:6px;height:6px;box-shadow:0 0 0 1.5px color-mix(in srgb, var(--warning) 45%, transparent);margin:2px}.conn-pill[data-conn=reconnecting]{color:var(--warning)}.conn-pill[data-conn=reconnecting] .conn-pill-mark{border:1.5px solid color-mix(in srgb, var(--warning) 28%, transparent);border-top-color:var(--warning);background:0 0;animation:.9s linear infinite conn-pill-spin}@keyframes conn-pill-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--gain) 45%, transparent)}70%,to{box-shadow:0 0 0 6px color-mix(in srgb, var(--gain) 0%, transparent)}}@keyframes conn-pill-spin{to{transform:rotate(360deg)}}[data-motion=reduced] .conn-pill-mark{animation:none!important}@media (prefers-reduced-motion:reduce){.conn-pill-mark{animation:none!important}}}