.hz-listen{
  position:relative; display:inline-grid; place-items:center; flex:none;
  width:90px; height:auto;
}
.hz-listen img,.hz-listen .mark{
  position:relative; z-index:1; width:100%; height:auto; display:block;
  filter:drop-shadow(0 16px 30px rgba(108,99,238,.5));
  animation:hz-float 3.8s ease-in-out infinite;
}
.hz-listen::after{ content:""; position:absolute; inset:2px 6px; border-radius:34px; z-index:0;
  background:var(--grad); filter:blur(18px); opacity:.4; animation:hz-halo 3.8s ease-in-out infinite; }
.hz-listen--sm{ width:56px; }
@keyframes hz-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes hz-halo{ 0%,100%{ opacity:.32; } 50%{ opacity:.6; } }
.hz-rating{ display:inline-flex; gap:7px; }
.hz-rating svg{ width:28px; height:28px; fill:#ECEBF3; animation:hz-star 4.5s ease infinite; }
.hz-rating svg:nth-child(1){ animation-delay:.2s; }
.hz-rating svg:nth-child(2){ animation-delay:.4s; }
.hz-rating svg:nth-child(3){ animation-delay:.6s; }
.hz-rating svg:nth-child(4){ animation-delay:.8s; }
.hz-rating svg:nth-child(5){ animation-delay:1s; }
@keyframes hz-star{ 0%,3%{ fill:#ECEBF3; transform:scale(1); } 9%{ transform:scale(1.28); }
  14%,86%{ fill:#6C63EE; transform:scale(1); } 96%,100%{ fill:#ECEBF3; } }
.hz-response{ display:inline-flex; }
.hz-bubble{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:15px 15px 15px 5px; padding:11px 15px; box-shadow:var(--sh-2);
  font-family:var(--font-body); font-size:13.5px; color:var(--ink); font-weight:500;
  animation:hz-land 4.5s ease infinite;
}
.hz-bubble .sent{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--coral); animation:hz-sent 4.5s ease infinite; }
@keyframes hz-land{ 0%{ opacity:0; transform:translateY(16px) scale(.96); } 14%{ opacity:1; transform:none; }
  84%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateY(-10px) scale(.98); } }
@keyframes hz-sent{ 0%,40%{ background:var(--coral); } 55%,100%{ background:var(--ok); } }
.hz-branch{ display:inline-block; width:150px; height:96px; }
.hz-branch .wire{ fill:none; stroke-width:2.5; stroke-linecap:round; opacity:.35; }
.hz-branch .wire-up{ stroke:var(--coral); }
.hz-branch .wire-dn{ stroke:var(--ok); }
.hz-branch .src{ fill:var(--peri); }
.hz-branch .end-up{ fill:var(--coral); }
.hz-branch .end-dn{ fill:var(--ok); }
.hz-branch .p{ r:5; }
.hz-branch .p-up{ fill:var(--coral); offset-path:path("M14 48 C 60 48 66 16 138 16"); offset-rotate:0deg;
  animation:hz-travel 4.4s ease-in-out infinite; }
.hz-branch .p-dn{ fill:var(--ok); offset-path:path("M14 48 C 60 48 66 80 138 80"); offset-rotate:0deg;
  animation:hz-travel 4.4s ease-in-out infinite 2.2s; }
@keyframes hz-travel{ 0%{ offset-distance:0%; opacity:0; } 6%{ opacity:1; }
  44%{ offset-distance:100%; opacity:1; } 50%,100%{ offset-distance:100%; opacity:0; } }
.hz-loop{ position:relative; display:inline-block; width:150px; height:150px; }
.hz-loop svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hz-loop .track{ fill:none; stroke:var(--peri-tint); stroke-width:6; }
.hz-loop .arc{ fill:none; stroke:url(#hzLoop); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:96 320; animation:hz-orbit 4.5s linear infinite; }
.hz-loop .node{ fill:var(--surface); stroke:var(--peri); stroke-width:2.5; }
.hz-loop-lbls{ position:absolute; inset:0; }
.hz-loop-lbls span{ position:absolute; font-size:9.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; transform:translate(-50%,-50%); }
.hz-loop-lbls .t{ left:50%; top:9px; } .hz-loop-lbls .r{ left:calc(100% - 6px); top:50%; }
.hz-loop-lbls .b{ left:50%; top:calc(100% - 9px); } .hz-loop-lbls .l{ left:6px; top:50%; }
.hz-loop-c{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:11px; color:var(--peri-deep); }
@keyframes hz-orbit{ to{ stroke-dashoffset:-416; } }
.hz-stream{ position:relative; width:100%; max-width:320px; height:128px; overflow:hidden; }
.hz-stream .hub{ position:absolute; right:8px; top:50%; width:44px; height:44px; margin-top:-22px;
  border-radius:15px; background:var(--grad); box-shadow:0 8px 20px -6px rgba(108,99,238,.6);
  display:grid; place-items:center; z-index:2; }
.hz-stream .hub::after{ content:""; position:absolute; inset:0; border-radius:15px; border:2px solid var(--peri);
  animation:hz-hub 2s ease-out infinite; }
.hz-stream .hub i{ width:5px;height:5px;border-radius:50%;background:#fff; box-shadow:9px 0 #fff,-9px 0 #fff; }
.hz-stream .chip{ position:absolute; right:64px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:11px; font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap;
  animation:hz-streamin 4s linear infinite; }
.hz-stream .chip i{ width:6px; height:6px; border-radius:50%; }
.hz-stream .chip--peri{ background:var(--peri-tint); color:var(--peri-600); top:12%; animation-delay:0s; } .hz-stream .chip--peri i{ background:var(--peri); }
.hz-stream .chip--azure{ background:var(--azure-tint); color:var(--azure-deep); top:38%; animation-delay:1s; } .hz-stream .chip--azure i{ background:var(--azure); }
.hz-stream .chip--mag{ background:var(--mag-tint); color:var(--mag-deep); top:62%; animation-delay:2s; } .hz-stream .chip--mag i{ background:var(--mag); }
.hz-stream .chip--ok{ background:var(--ok-tint); color:var(--ok-deep); top:84%; animation-delay:2.7s; } .hz-stream .chip--ok i{ background:var(--ok); }
@keyframes hz-streamin{ 0%{ transform:translateX(-260px); opacity:0; } 12%{ opacity:1; } 78%{ opacity:1; }
  100%{ transform:translateX(56px); opacity:0; } }
@keyframes hz-hub{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.7); opacity:0; } }
.hz-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); animation:hz-blinkdot 1.6s infinite; }
@keyframes hz-blinkdot{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.hz-ping{ position:relative; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--coral); }
.hz-ping::before{ content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:hz-pingk 1.8s ease-out infinite; }
@keyframes hz-pingk{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .hz-listen img, .hz-listen::after, .hz-rating svg, .hz-bubble, .hz-bubble .sent,
  .hz-branch .p-up, .hz-branch .p-dn, .hz-loop .arc, .hz-stream .chip, .hz-stream .hub::after,
  .hz-dot, .hz-ping::before{ animation:none !important; }
  .hz-rating svg{ fill:#6C63EE; } .hz-bubble .sent{ background:var(--ok); }
  .hz-branch .wire-up, .hz-branch .wire-dn{ opacity:1; }
  .hz-loop .arc{ stroke-dasharray:96 320; }
}
.hz-pulse{position:relative;display:inline-grid;place-items:center;width:120px;height:120px}
.hz-pulse-ring{position:absolute;width:40%;height:40%;border-radius:50%;border:2.5px solid var(--peri);opacity:0;animation:hz-ripple 3.6s cubic-bezier(.2,.6,.2,1) infinite}
.hz-pulse-ring:nth-child(2){animation-delay:.55s;border-color:var(--mag)}
.hz-pulse-ring:nth-child(3){animation-delay:1.1s;border-color:var(--azure)}
.hz-pulse>img,.hz-pulse-core{position:relative;z-index:2;width:54%;height:auto}
.hz-pulse-halo{position:absolute;width:66%;height:66%;border-radius:34%;background:var(--grad);filter:blur(24px);opacity:.35;z-index:1;animation:hz-halo 3.6s ease-in-out infinite}
@keyframes hz-ripple{0%{transform:scale(1);opacity:0}8%{opacity:.55}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}
.hz-beat{display:inline-flex;gap:.55em;align-items:center;font-size:16px}
.hz-beat i{width:.62em;height:.62em;border-radius:50%;background:var(--peri);animation:hz-beat 1.4s ease-in-out infinite}
.hz-beat i:nth-child(2){background:var(--mag);animation-delay:.18s}
.hz-beat i:nth-child(3){background:var(--azure);animation-delay:.36s}
@keyframes hz-beat{0%,60%,100%{transform:translateY(0) scale(1);opacity:.5}30%{transform:translateY(-.6em) scale(1.12);opacity:1}}
.hz-ribbon{display:block;width:100%;height:auto;pointer-events:none}
.hz-ribbon path{fill:none;stroke:url(#hzRibbon);stroke-width:6;stroke-linecap:round;stroke-dasharray:14 26;animation:hz-ribflow 3.6s linear infinite}
.hz-ribbon--thin path{stroke-width:4;stroke-dasharray:10 20}
.hz-ribbon--rev path{animation-direction:reverse}
.hz-ribbon--slow path{animation-duration:5.5s}
@keyframes hz-ribflow{to{stroke-dashoffset:-80}}
@media (prefers-reduced-motion: reduce){
  .hz-pulse-ring,.hz-pulse-halo,.hz-beat i,.hz-ribbon path{animation:none !important}
  .hz-pulse-ring{opacity:.28;transform:scale(2)}
}
.hz-thinking{display:inline-flex;align-items:center;gap:12px;font-weight:600;color:var(--muted)}
.hz-thinking-dots{display:inline-flex;gap:7px}
.hz-thinking-dots i{width:10px;height:10px;border-radius:50%;background:var(--grad);animation:hz-think 1.4s infinite}
.hz-thinking-dots i:nth-child(2){animation-delay:.2s}.hz-thinking-dots i:nth-child(3){animation-delay:.4s}
@keyframes hz-think{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-9px);opacity:1}}
.hz-spinner{display:inline-block;width:56px;height:56px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--peri) 90%,var(--mag));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  animation:hz-spin 1s linear infinite}
@keyframes hz-spin{to{transform:rotate(360deg)}}
.hz-spark{display:inline-block;width:170px;height:96px}
.hz-spark-area{fill:url(#hzArea);opacity:0;animation:hz-sparkarea 5s ease infinite}
.hz-spark-line{fill:none;stroke:url(#hzBlue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:260;animation:hz-sparkdraw 5s ease infinite}
.hz-spark-dot{fill:var(--mag);opacity:0;animation:hz-sparkdot 5s ease infinite}
@keyframes hz-sparkdraw{0%{stroke-dashoffset:260}40%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:260}}
@keyframes hz-sparkarea{0%,10%{opacity:0}50%,88%{opacity:.5}100%{opacity:0}}
@keyframes hz-sparkdot{0%,36%{opacity:0}44%,88%{opacity:1}100%{opacity:0}}
.hz-progress{display:block;width:100%;height:8px;border-radius:999px;background:rgba(108,99,238,.12);overflow:hidden}
.hz-progress i{display:block;height:100%;border-radius:999px;background:var(--grad);width:40%;animation:hz-prog 4s var(--ease) infinite}
@keyframes hz-prog{0%{width:8%}60%,80%{width:88%}100%{width:8%}}
.hz-link{position:relative;color:var(--peri);font-weight:700;text-decoration:none}
.hz-link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.hz-link:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  .hz-thinking-dots i,.hz-spinner,.hz-spark-area,.hz-spark-line,.hz-spark-dot,.hz-progress i{animation:none !important}
  .hz-spark-line{stroke-dashoffset:0}.hz-spark-area{opacity:.5}.hz-spark-dot{opacity:1}
}
.hz-ring{position:relative;display:inline-block;width:112px;height:112px}
.hz-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.hz-ring-track{stroke:rgba(236,30,149,.14);fill:none}
.hz-ring-fill{stroke:url(#hzMag);fill:none;stroke-linecap:round;stroke-dasharray:100;
  animation:hz-ringfill 4.5s var(--ease) infinite}
.hz-ring-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hz-ring-val b{font-family:var(--font-head);font-weight:700;font-size:26px;color:var(--mag-deep)}
.hz-ring-val small{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@keyframes hz-ringfill{0%,6%{stroke-dashoffset:100}45%,88%{stroke-dashoffset:24}97%,100%{stroke-dashoffset:100}}
@media (prefers-reduced-motion: reduce){.hz-ring-fill{animation:none;stroke-dashoffset:24}}
.hz-magnifier{position:relative;width:100%;height:190px}
.hz-magnifier svg{position:absolute;inset:0;width:100%;height:100%}
.hz-magnifier text{font-family:var(--font-body)}
.hz-mag-tag{position:absolute;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  background:#fff;border:1px solid var(--border);box-shadow:0 8px 20px -8px rgba(24,22,51,.4);border-radius:999px;
  padding:4px 11px;transform:translate(-50%,-360%);transition:opacity .2s ease;opacity:0;z-index:4;white-space:nowrap;pointer-events:none}
.hz-mag-tag i{width:8px;height:8px;border-radius:50%}