/* A small return of the Klypix character and light, inside the established system.
   Dials: variance 6 / motion 3 / density 3. Native cursor, no ambient loops.
   Each surface owns its decorative -1 layer inside an isolated stacking context. */
.demo-heading{display:flex;align-items:center;gap:18px;min-width:0}
.demo-character{display:block;flex:none;width:84px;height:65.52px;overflow:visible;direction:ltr;pointer-events:none}
.demo-character__eye{transform-box:fill-box;transform-origin:center}
.demo-character__gaze{transform:translate(var(--gaze-x,0px),var(--gaze-y,0px));transition:transform .18s ease-out}
.product-heading{min-height:66px}
[data-surface-light]{position:relative;isolation:isolate;--surface-glow:rgba(255,255,255,.84)}
[data-theme=dark] [data-surface-light]{--surface-glow:rgba(116,223,178,.19)}
/* Cards begin on a lighter tint; keep their small captions above AA contrast. */
[data-theme=dark] .path-card[data-surface-light]{--surface-glow:rgba(116,223,178,.12)}
.surface-light{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1;opacity:0;transition:opacity .24s ease-out}
.surface-light::before{content:"";position:absolute;width:480px;height:480px;left:50%;top:50%;background:radial-gradient(circle,var(--surface-glow) 0,transparent 68%);transform:translate3d(calc(var(--light-x,0px) - 50%),calc(var(--light-y,0px) - 50%),0)}
[data-surface-light]:focus-within>.surface-light{opacity:.7}
.video-started>.surface-light{display:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  [data-surface-light].is-lit>.surface-light{opacity:1}
  .is-lit>.surface-light::before{will-change:transform}
  .demo-character.is-attentive .demo-character__eye{animation:character-blink .2s ease-in-out 1}
}
@keyframes character-blink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.12)}}
@media(max-width:767px){.demo-heading{gap:12px}.demo-character{width:64px;height:49.92px}.product-heading{min-height:50px}.demo-heading h2{font-size:23px;line-height:1.25}}
@media(prefers-reduced-motion:reduce){.surface-light,.demo-character__gaze{transition:none}.demo-character__gaze{transform:none}.demo-character__eye{animation:none!important}}
@media(forced-colors:active){.surface-light{display:none}}
@media print{.surface-light{display:none}}