/* chirp mark animation: live = the sweep redraws left to right and the head pulses. Idle = static. */
.chirp { display:inline-block; vertical-align:middle; overflow:visible }
.chirp-live .chirp-sweep { stroke-dasharray:100; animation:chirp-sweep 1.1s var(--ease, ease-out) infinite }
.chirp-live .chirp-head { animation:chirp-head 1.1s ease-in-out infinite; transform-box:fill-box; transform-origin:center }
@keyframes chirp-sweep { 0% { stroke-dashoffset:100 } 70%,100% { stroke-dashoffset:0 } }
@keyframes chirp-head { 0%,60% { opacity:.35; transform:scale(.7) } 75% { opacity:1; transform:scale(1.35) } 100% { opacity:1; transform:scale(1) } }
@media (prefers-reduced-motion: reduce) { .chirp-live .chirp-sweep, .chirp-live .chirp-head { animation:none } }
/* Brand kit v1: logo + morphing scrubber */
.chirp-logo { display:inline-block; vertical-align:middle; overflow:visible }
.chirp-scrubber { display:block; width:100%; height:24px; overflow:visible; cursor:pointer; touch-action:none }
.chirp-scrubber .cs-track { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.45 }
.chirp-scrubber .cs-done { fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.chirp-scrubber .cs-head { fill:currentColor }
.chirp-scrubber[data-state=idle] .cs-track { opacity:.9 }
.chirp-scrubber:focus-visible { outline:3px solid var(--focus, currentColor); outline-offset:4px; border-radius:6px }