@property --anim-kg-n{syntax: "<integer>"; initial-value: 6; inherits: false;}@property --anim-kg-r{syntax: "<integer>"; initial-value: 0; inherits: false;}.anim-kg{--akg-bg-muted: #f7f7f5;--akg-fg: #1a1a1a;--akg-fg-muted: #6b6b6b;--akg-fg-subtle: #999999;--akg-border: #e8e8e5;--akg-border-soft: #f0f0ed;--akg-success: #3f8c61;--akg-warning: #b97d2f;--akg-serif: var(--font-display);--akg-ease: cubic-bezier(.4, 0, .2, 1);--akg-ease-out: cubic-bezier(.22, 1, .36, 1);position:relative;display:flex;align-items:center;justify-content:center;background:var(--akg-bg-muted);border:1px solid var(--akg-border);border-radius:24px;padding:clamp(24px,7vw,40px) clamp(16px,5vw,30px);overflow:hidden;color:var(--akg-fg);line-height:1.6;text-align:left}.anim-kg:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,#d8d8d3 1px,transparent 1px);background-size:22px 22px;opacity:.5;-webkit-mask-image:radial-gradient(130% 130% at 50% 42%,#000 35%,transparent 82%);mask-image:radial-gradient(130% 130% at 50% 42%,#000 35%,transparent 82%);pointer-events:none}.anim-kg__panel{container:anim-kg-panel / inline-size;position:relative;width:100%;max-width:600px;background:#fff;border:1px solid var(--akg-border);border-radius:14px;box-shadow:0 12px 32px #10182814,0 2px 6px #1018280a;overflow:hidden;transition:transform .2s var(--akg-ease),box-shadow .2s var(--akg-ease)}.anim-kg:hover .anim-kg__panel{transform:translateY(-2px);box-shadow:0 16px 40px #1018281a,0 3px 8px #1018280d}.anim-kg__bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--akg-border-soft)}.anim-kg__spark{width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:var(--akg-fg);color:#fff;display:flex;align-items:center;justify-content:center}.anim-kg__tt{font-size:12px;color:var(--akg-fg-muted);font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.anim-kg__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--akg-success);font-weight:500;white-space:nowrap}.anim-kg__pip{width:7px;height:7px;border-radius:999px;background:var(--akg-success)}.is-running .anim-kg__pip{animation:anim-kg-pip 2s var(--akg-ease) infinite}@keyframes anim-kg-pip{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}.anim-kg__body{padding:16px}.anim-kg__stage{position:relative;width:100%;aspect-ratio:320 / 200}.anim-kg__lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;overflow:visible}.anim-kg__line{fill:none;stroke:var(--akg-border);stroke-width:1.2;stroke-dasharray:200;stroke-dashoffset:200;opacity:0}.is-running .anim-kg__line{animation:anim-kg-draw 12s var(--akg-ease) infinite}@keyframes anim-kg-draw{0%,2%{stroke-dashoffset:200;opacity:0}12%,93%{stroke-dashoffset:0;opacity:.65}to{stroke-dashoffset:200;opacity:0}}.anim-kg__line--l2{stroke-width:1}.anim-kg__line--feed{stroke:var(--akg-warning);stroke-width:1.3;stroke-dasharray:4 4;stroke-dashoffset:0;opacity:0}.is-running .anim-kg__line--feed{animation:anim-kg-feed 12s var(--akg-ease) infinite,anim-kg-feed-dash 4.5s linear infinite}@keyframes anim-kg-feed{0%,24%{opacity:0}30%,65%{opacity:.7}67%{opacity:1}70%{opacity:.4}73%{opacity:1}76%{opacity:.4}79%{opacity:1}81%,93%{opacity:.7}to{opacity:0}}@keyframes anim-kg-feed-dash{to{stroke-dashoffset:-16}}.anim-kg__node{position:absolute;transform:translate(-50%,-50%) scale(0);opacity:0;display:flex;flex-direction:column;align-items:center;gap:3px}.is-running .anim-kg__node{animation:anim-kg-pop 12s var(--akg-ease-out) infinite}@keyframes anim-kg-pop{0%,1%{transform:translate(-50%,-50%) scale(0);opacity:0}7%,94%{transform:translate(-50%,-50%) scale(1);opacity:1}99%,to{transform:translate(-50%,-50%) scale(1);opacity:0}}.anim-kg__knob{position:relative;width:22px;height:22px;width:clamp(18px,5.5cqi,31px);height:clamp(18px,5.5cqi,31px);border-radius:6px;background:#fff;border:1px solid var(--akg-border);display:flex;align-items:center;justify-content:center;color:var(--akg-fg-muted);box-shadow:0 2px 6px #10182812}.anim-kg__knob svg{width:10px;height:10px;width:clamp(9px,2.5cqi,14px);height:clamp(9px,2.5cqi,14px)}.anim-kg__knob--center{width:28px;height:28px;width:clamp(24px,7cqi,40px);height:clamp(24px,7cqi,40px);background:var(--akg-fg);border-color:var(--akg-fg);color:#fff;box-shadow:0 2px 6px #1018281f}.anim-kg__knob--center svg{width:14px;height:14px;width:clamp(12px,3.5cqi,20px);height:clamp(12px,3.5cqi,20px)}.anim-kg__node--lvl2 .anim-kg__knob{width:12px;height:12px;width:clamp(10px,3cqi,17px);height:clamp(10px,3cqi,17px);border-radius:4px;background:var(--akg-bg-muted);box-shadow:0 1px 3px #1018280f}.anim-kg__klab{font-size:7px;font-size:clamp(6.5px,1.75cqi,10px);line-height:1.4;color:var(--akg-fg-muted);white-space:nowrap}.is-running .anim-kg__node--hit1 .anim-kg__knob{animation:anim-kg-hit1 12s var(--akg-ease) infinite}.is-running .anim-kg__node--hit2 .anim-kg__knob{animation:anim-kg-hit2 12s var(--akg-ease) infinite}.is-running .anim-kg__node--hit3 .anim-kg__knob{animation:anim-kg-hit3 12s var(--akg-ease) infinite}.is-running .anim-kg__node--hit4 .anim-kg__knob{animation:anim-kg-hit4 12s var(--akg-ease) infinite}@keyframes anim-kg-hit1{0%,40%{border-color:var(--akg-border);box-shadow:0 2px 6px #10182812}42%,91%{border-color:var(--akg-success);box-shadow:0 0 0 4px #3f8c6129,0 2px 6px #10182812}96%,to{border-color:var(--akg-border);box-shadow:0 2px 6px #10182812}}@keyframes anim-kg-hit2{0%,45%{border-color:var(--akg-border);box-shadow:0 2px 6px #10182812}47%,91%{border-color:var(--akg-success);box-shadow:0 0 0 4px #3f8c6129,0 2px 6px #10182812}96%,to{border-color:var(--akg-border);box-shadow:0 2px 6px #10182812}}@keyframes anim-kg-hit3{0%,50%{border-color:var(--akg-border);box-shadow:0 2px 6px #10182812}52%,91%{border-color:var(--akg-success);box-shadow:0 0 0 4px #3f8c6129,0 2px 6px #10182812}96%,to{border-color:var(--akg-border);box-shadow:0 2px 6px #10182812}}@keyframes anim-kg-hit4{0%,55%{border-color:var(--akg-border);box-shadow:0 2px 6px #10182812}57%,91%{border-color:var(--akg-success);box-shadow:0 0 0 4px #3f8c6129,0 2px 6px #10182812}96%,to{border-color:var(--akg-border);box-shadow:0 2px 6px #10182812}}.is-running .anim-kg__knob--center{animation:anim-kg-center 12s var(--akg-ease) infinite}@keyframes anim-kg-center{0%,46%{box-shadow:0 2px 6px #1018281f}48%{box-shadow:0 0 0 8px #3f8c614d,0 2px 6px #1018281f}51%{box-shadow:0 0 0 4px #3f8c6129,0 2px 6px #1018281f}53%{box-shadow:0 0 0 8px #3f8c614d,0 2px 6px #1018281f}56%{box-shadow:0 0 0 4px #3f8c6129,0 2px 6px #1018281f}58%{box-shadow:0 0 0 8px #3f8c614d,0 2px 6px #1018281f}61%{box-shadow:0 0 0 4px #3f8c6129,0 2px 6px #1018281f}63%{box-shadow:0 0 0 8px #3f8c614d,0 2px 6px #1018281f}66%,91%{box-shadow:0 0 0 4px #3f8c612e,0 2px 6px #1018281f}96%,to{box-shadow:0 2px 6px #1018281f}}.anim-kg__feedpip{position:absolute;top:-2px;right:-2px;width:6px;height:6px;width:clamp(5px,1.6cqi,9px);height:clamp(5px,1.6cqi,9px);border-radius:999px;background:var(--akg-warning);border:1.5px solid #fff;opacity:0;transform:scale(0)}.is-running .anim-kg__feedpip{animation:anim-kg-feedpip 12s var(--akg-ease) infinite}@keyframes anim-kg-feedpip{0%,29%{opacity:0;transform:scale(0)}33%,65%{opacity:1;transform:scale(1)}67%{transform:scale(1.5)}70%{transform:scale(.9)}73%{transform:scale(1.5)}76%{transform:scale(.9)}79%{transform:scale(1.5)}82%,93%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.anim-kg__pulse{position:absolute;left:var(--akg-x0);top:var(--akg-y0);width:8px;height:8px;width:clamp(7px,2cqi,11px);height:clamp(7px,2cqi,11px);border-radius:999px;background:var(--akg-success);box-shadow:0 0 0 3px #3f8c612e;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.is-running .anim-kg__pulse{animation:anim-kg-pulse 12s var(--akg-ease) infinite}@keyframes anim-kg-pulse{0%{left:var(--akg-x0);top:var(--akg-y0);opacity:0}1%{opacity:1}5.5%{left:50%;top:50%;opacity:1}7%,to{left:50%;top:50%;opacity:0}}.anim-kg__foot{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--akg-border-soft);font-size:11px;font-size:clamp(10px,2.75cqi,14px);color:var(--akg-fg-muted)}.anim-kg__seg{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}.anim-kg__seg+.anim-kg__seg:before{content:"·";color:var(--akg-fg-subtle);margin-right:2px}.anim-kg__num{font-family:var(--akg-serif);font-weight:400;font-size:16px;font-size:clamp(14px,4cqi,21px);color:var(--akg-fg);line-height:1}.anim-kg__count{--anim-kg-n: 6;counter-reset:anim-kg-nodes var(--anim-kg-n)}.anim-kg__count:after{content:counter(anim-kg-nodes)}.is-running .anim-kg__count{animation:anim-kg-count 12s var(--akg-ease) infinite}@keyframes anim-kg-count{0%,8%{--anim-kg-n: 6}36%,93%{--anim-kg-n: 54}to{--anim-kg-n: 6}}.anim-kg__rcount{--anim-kg-r: 0;counter-reset:anim-kg-ret var(--anim-kg-r)}.anim-kg__rcount:after{content:counter(anim-kg-ret)}.is-running .anim-kg__rcount{animation:anim-kg-rcount 12s var(--akg-ease) infinite,anim-kg-ret-num 12s var(--akg-ease) infinite}.is-running .anim-kg__seg--ret{animation:anim-kg-ret-label 12s var(--akg-ease) infinite}@keyframes anim-kg-rcount{0%,45.5%{--anim-kg-r: 0}63%,93%{--anim-kg-r: 4}to{--anim-kg-r: 0}}@keyframes anim-kg-ret-label{0%,46%{color:var(--akg-fg-muted)}50%,92%{color:var(--akg-success)}97%,to{color:var(--akg-fg-muted)}}@keyframes anim-kg-ret-num{0%,46%{color:var(--akg-fg)}50%,92%{color:var(--akg-success)}97%,to{color:var(--akg-fg)}}.anim-static .anim-kg__node{transform:translate(-50%,-50%) scale(1);opacity:1}.anim-static .anim-kg__line{stroke-dashoffset:0;opacity:.65}.anim-static .anim-kg__line--feed{opacity:.7}.anim-static .anim-kg__feedpip{opacity:1;transform:scale(1)}.anim-static .anim-kg__node--hit .anim-kg__knob{border-color:var(--akg-success);box-shadow:0 0 0 4px #3f8c6129,0 2px 6px #10182812}.anim-static .anim-kg__knob--center{box-shadow:0 0 0 4px #3f8c612e,0 2px 6px #1018281f}.anim-static .anim-kg__count{--anim-kg-n: 54}.anim-static .anim-kg__rcount{--anim-kg-r: 4;color:var(--akg-success)}.anim-static .anim-kg__seg--ret{color:var(--akg-success)}.anim-static .anim-kg__panel{transition:none}.anim-static .anim-kg:hover .anim-kg__panel{transform:none}