/* UI kit styles. Pair with kit.js. Colours come from the host page through these variables:
   --k-pill (segmented highlight), --k-pill-tx (text on it), --k-dim / --k-bright (shimmer), --k-ok (confirm). */
:root{--k-spring:cubic-bezier(.34,1.4,.64,1);--k-smooth:cubic-bezier(.2,.8,.2,1)}

/* press: answer every press with a small scale (Arc: about .97) */
.k-press{transition:transform .28s var(--k-spring)}
.k-press:active{transform:scale(.97)}

/* segmented control */
.k-seg{position:relative;isolation:isolate}
.k-seg-pill{position:absolute;left:0;top:0;z-index:-1;border-radius:inherit;background:var(--k-pill,#0B0A09);will-change:transform,width;pointer-events:none}
.k-seg button{background:transparent!important;transition:color .24s}
.k-seg button[aria-pressed=true]{color:var(--k-pill-tx,#fff)}

/* odometer */
.k-odo{display:inline-flex;font-variant-numeric:tabular-nums;line-height:1}
.k-odo-d{display:inline-block;height:1em;overflow:hidden}
.k-odo-d b{display:block;font-weight:inherit;line-height:1;transition:transform .9s var(--k-smooth)}
.k-odo-s{display:inline-block}

/* thinking shimmer */
.k-think{background:linear-gradient(90deg,var(--k-dim,rgba(11,10,9,.38)) 0%,var(--k-bright,#0B0A09) 50%,var(--k-dim,rgba(11,10,9,.38)) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:k-shim 1.8s linear infinite,k-in .3s var(--k-smooth)}
@keyframes k-shim{from{background-position:200% center}to{background-position:-200% center}}
@keyframes k-in{from{opacity:0;transform:translateY(4px)}}

/* streaming words */
.k-word{display:inline;opacity:0;animation:k-word .42s var(--k-smooth) forwards}
@keyframes k-word{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:none}}

/* pointer spotlight on a glass surface */
.k-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--k-sheen,rgba(255,255,255,.55)),transparent 60%);mix-blend-mode:soft-light}
.k-spot:hover::after{opacity:1}

/* dock */
.k-dock{display:flex;align-items:flex-end;justify-content:center}
.k-dock>*{flex:none;transform-origin:50% 100%;will-change:transform}

/* confirm morph */
.k-confirm{display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;white-space:nowrap;transition:width .42s var(--k-spring),background .3s,color .3s}
.k-confirm svg{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.k-confirm svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--k-smooth) .12s}
.k-confirm.on{background:var(--k-ok,#17703f)!important;color:#fff!important}
.k-confirm.on svg path{stroke-dashoffset:0}

@media(prefers-reduced-motion:reduce){.k-press,.k-odo-d b,.k-confirm,.k-confirm svg path{transition:none}.k-think{animation:none;color:inherit;background:none}.k-word{animation:none;opacity:1}.k-spot::after{display:none}}