/* CultureAI · the living pills (B186; Sign-in by, B232). One stylesheet served from cultureai.com for every site and product we run, so
   every footer and every navigator renders the identical marks. Easiest use: <script src="https://cultureai.com/pills.js"></script>
   then <cai-pill kind="installed"></cai-pill> or <cai-pill kind="navigator"></cai-pill> (the script loads this file itself).
   By hand:
   1. CultureAI INSTALLED, the footer mark of every Culture company site:
      <a class="cai-pill cai-pill-installed" href="https://cultureai.com/#system"><i aria-hidden="true"></i>
        <img src="https://cultureai.com/img/cultureai-logo-original.svg" alt="CultureAI" width="413" height="120"><span>Installed</span></a>
   2. Navigator by CultureAI, on every deployment of the product (beside the answer box, in the app, in a footer's product row):
      <a class="cai-pill" href="https://cultureai.com/#products"><i aria-hidden="true"></i><span>Navigator by</span>
        <img src="https://cultureai.com/img/cultureai-logo-original.svg" alt="CultureAI" width="413" height="120"></a>
   3. Sign-in by CultureAI, under a sign-in that runs on CultureAI accounts (B232): the Navigator markup with <span>Sign-in by</span>.
   One size everywhere (B205): both pills match the INSTALLED footer mark exactly; .cai-pill-lg and .cai-pill-installed are kept as names only. Variants: .cai-pill-violet (Monica's pages), .cai-pill-dark (on ink). The dot pulses twice when the page opens, then rests, and pulses twice again on hover or focus (B219, his call "Pulse twice, then rest": WCAG 2.2.2, nothing moves on its own past five seconds); it is still under prefers-reduced-motion. Nothing else is configurable: the pills are the brand. */
@keyframes cai-pulse{50%{opacity:.35}}
@keyframes cai-pulse-again{50%{opacity:.35}}
.cai-pill{--cai:#1559f5;display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;border-radius:999px;border:1.5px solid var(--cai);background:#fff;color:var(--cai)!important;font:600 11px/1 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;text-decoration:none!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--cai) 8%,transparent);transition:box-shadow .25s;box-sizing:border-box;vertical-align:middle;position:relative}
.cai-pill::after{content:"";position:absolute;inset:-6px 0}
.cai-pill:hover,.cai-pill:focus-visible{box-shadow:0 0 0 5px color-mix(in srgb,var(--cai) 14%,transparent)}
.cai-pill:focus-visible{outline:2px solid var(--cai);outline-offset:3px}
.cai-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;animation:cai-pulse 2.4s ease-in-out 2}
.cai-pill:is(:hover,:focus-visible) i{animation:cai-pulse-again 2.4s ease-in-out 2}
.cai-pill img{display:block;height:14px;width:auto}
.cai-pill-violet{--cai:#6d28d9}
.cai-pill-dark{background:#161514;border-color:#fff;color:#fff!important;box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.cai-pill-dark img{filter:brightness(0) invert(1)}
@media (prefers-reduced-motion:reduce){.cai-pill i,.cai-pill:is(:hover,:focus-visible) i{animation:none}}