.fhx{--f:"Barlow","Segoe UI",Calibri,Arial,sans-serif;--navy:#2D2E5F;--slate:#55587A;--mag:#E91E63;position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:28px;align-items:stretch;padding:26px;border-radius:30px;font-family:var(--f);color:var(--navy);-webkit-font-smoothing:antialiased;
background:radial-gradient(45% 60% at 100% 0%,rgba(233,30,99,.09),transparent 70%),radial-gradient(45% 60% at 0% 100%,rgba(139,79,224,.09),transparent 70%),rgba(255,255,255,.6);
border:1.5px solid rgba(233,30,99,.2);box-shadow:0 30px 70px rgba(45,46,95,.10),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.fhx *{box-sizing:border-box}
/* steps */
.fh-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:8px}
.fhx .fh-steps li{margin:0;padding:0;list-style:none}.fhx .fh-steps li::before,.fhx .fh-steps li::marker{content:none;display:none}
.fh-steps li{position:relative;border-radius:18px;transition:background .5s ease,box-shadow .5s ease}
.fh-steps button{all:unset;box-sizing:border-box;display:flex;gap:14px;width:100%;padding:12px 16px 15px;line-height:1.3;cursor:pointer;border-radius:18px}
.fh-steps button:focus-visible{outline:3px solid var(--mag);outline-offset:2px}
.fh-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--mag);background-color:#FFF0F5;background-image:none;border:1.5px solid rgba(233,30,99,.3);transition:color .2s ease,border-color .2s ease,box-shadow .3s ease}
.fh-tx b{display:block;font-size:19px;line-height:1.25;color:var(--navy);transition:color .5s ease}
.fh-tx span{display:block;margin-top:4px;font-size:16px;line-height:1.45;color:var(--slate);opacity:.6;transition:opacity .5s ease}
.fh-steps li.on{background:rgba(255,255,255,.88);box-shadow:0 14px 34px rgba(45,46,95,.10),inset 0 0 0 1.5px rgba(233,30,99,.25)}
.fh-steps li.on .fh-n{color:#fff;background:linear-gradient(135deg,#E91E63,#FF6B35);border-color:transparent;box-shadow:0 6px 16px rgba(233,30,99,.35)}
.fh-steps li.on .fh-tx b{color:var(--mag)}
.fh-steps li.on .fh-tx span{opacity:1}
.fh-steps li.done .fh-n{color:#fff;background:#2D2E5F;border-color:#2D2E5F}
.fh-pg{position:relative;display:block;height:3px;margin:0 18px 8px 66px;border-radius:3px;background:linear-gradient(90deg,#E91E63,#FF6B35);transform:scaleX(0);transform-origin:left;opacity:0}
.fh-steps li.on .fh-pg{opacity:1;animation:fhFill var(--d,7000ms) linear forwards}
@keyframes fhFill{to{transform:scaleX(1)}}
/* stage */
.fh-art{position:relative;min-width:0;aspect-ratio:820/600;align-self:center;overflow:hidden}
.fh-st{position:absolute;left:0;top:0;width:820px;height:600px;transform-origin:0 0}
.fh-grp{position:absolute;left:20px;top:14px;width:780px;height:190px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.8));border:1.5px solid #fff;box-shadow:0 18px 44px rgba(45,46,95,.12);overflow:hidden;z-index:3;transition:box-shadow .6s ease}
.fh-grp::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#E91E63,#8B4FE0,#FF6B35)}
.fh-gh{position:absolute;left:24px;right:24px;top:20px;display:flex;align-items:center;gap:12px}
.fh-gh>b{font-size:22px}
.fh-live{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#1E7B47;padding:3px 10px;border-radius:999px;background:rgba(47,179,106,.12)}
.fh-live i{width:8px;height:8px;border-radius:50%;background:#2FB36A;animation:fhPing 2s ease-out infinite}
@keyframes fhPing{0%{box-shadow:0 0 0 0 rgba(47,179,106,.6)}100%{box-shadow:0 0 0 9px rgba(47,179,106,0)}}
.fh-cnt{margin-left:auto;font-size:15.5px;color:var(--slate)}
.fh-cnt b{color:var(--mag);font-size:17px}
.fh-alert{position:absolute;right:24px;top:16px;padding:7px 14px;border-radius:12px;font-size:15px;font-weight:700;color:#fff;background:#E0201C;box-shadow:0 10px 24px rgba(224,32,28,.35);opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .5s ease}
.fhx[data-b="2"] .fh-alert{opacity:1;transform:none;transition-delay:1.9s}
.fhx[data-b="2"] .fh-cnt{opacity:0}
.fh-kp{position:absolute;top:70px;width:236px;height:100px;padding:14px 16px;border-radius:16px;background:rgba(246,243,252,.9);border:1px solid rgba(45,46,95,.07);transition:box-shadow .6s ease,background .6s ease}
.fh-kp.k1{left:24px}.fh-kp.k2{left:272px}.fh-kp.k3{left:520px}
.fh-kp small{display:block;font-size:15px;font-weight:600;color:var(--slate)}
.fh-kp>b{display:block;font-size:30px;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums;transition:color .5s ease}
.fh-kp i{display:block;height:6px;border-radius:4px;background:rgba(45,46,95,.08);margin-top:8px;overflow:hidden}
.fh-kp i b{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#FF6B35,#E91E63);transition:width 1.2s ease}
.fhx[data-b="2"] .fh-kp.k3{background:#fff;box-shadow:0 0 0 2px #E0201C,0 10px 26px rgba(224,32,28,.2);transition-delay:2s}
.fhx[data-b="2"] .fh-kp.k3>b{color:#E0201C;transition-delay:2s}
.fhx[data-b="3"] .fh-kp.k2{background:#fff;box-shadow:0 0 0 2px #FF6B35,0 10px 26px rgba(255,107,53,.25)}
/* rail */
.fh-rail{position:absolute;left:20px;top:238px;width:780px;height:58px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-radius:999px;background:rgba(255,255,255,.85);border:1.5px solid rgba(139,79,224,.28);box-shadow:0 10px 26px rgba(45,46,95,.08);z-index:3}
.fh-rl{font-size:16.5px;font-weight:700;color:#6B3FC8}
.fh-rr{font-size:15px;color:var(--slate)}
.fh-gt{font-size:17px;font-weight:700;color:#fff;padding:7px 18px;border-radius:999px;background:linear-gradient(135deg,#E91E63,#FF6B35);box-shadow:0 8px 22px rgba(233,30,99,.35);opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.fhx[data-b="1"] .fh-gt,.fhx[data-b="2"] .fh-gt,.fhx[data-b="3"] .fh-gt,.fhx[data-b="4"] .fh-gt{opacity:1;transform:none}
.fhx[data-b="1"] .fh-gt{transition-delay:2.4s}
/* entities */
.fh-en{position:absolute;top:340px;height:240px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.9);border:1.5px solid #fff;border-top:5px solid var(--c);box-shadow:0 16px 38px rgba(45,46,95,.11);z-index:2;transition:left 1.3s cubic-bezier(.65,0,.35,1),width 1.3s cubic-bezier(.65,0,.35,1),opacity .9s ease,box-shadow .6s ease}
.fhx .en-a{left:20px;width:250px}.fhx .en-b{left:285px;width:250px}.fhx .en-c{left:550px;width:250px}.fhx .en-d{left:830px;width:186px;opacity:0}.fhx[data-b="4"] .en-a{left:20px;width:186px}.fhx[data-b="4"] .en-b{left:218px;width:186px}.fhx[data-b="4"] .en-c{left:416px;width:186px}.fhx[data-b="4"] .en-d{left:614px;width:186px}.fhx[data-b="4"] .en-d{opacity:1;transition-delay:.7s}
.fh-eh{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.fh-eh b{font-size:20px}.fh-eh span{font-size:15px;color:var(--slate)}
.fh-reg{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--slate);padding:3px 10px;border-radius:999px;background:rgba(45,46,95,.06)}
.fh-term{display:block;width:max-content;margin-top:10px;font-size:15px;font-weight:700;padding:5px 12px;border-radius:999px;border:1.5px solid var(--c);background:#fff;transition:box-shadow .5s ease,opacity .5s ease}
.fhx[data-b="1"] .fh-term{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.fh-wf{margin-top:14px}
.fh-wl{display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.fh-wl b{color:var(--c)}
.fh-wf i{display:block;height:7px;border-radius:4px;background:rgba(45,46,95,.08);margin-top:5px;overflow:hidden}
.fh-wf i b{display:block;height:100%;width:var(--p);border-radius:4px;background:var(--c);transform-origin:left}
.fhx[data-b="0"] .fh-wf i b{animation:fhGrow 2.6s cubic-bezier(.45,0,.25,1) both .4s}
.fhx[data-b="0"] .en-b .fh-wf i b{animation-duration:4.2s}.fhx[data-b="0"] .en-c .fh-wf i b{animation-duration:1.7s}
@keyframes fhGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fh-en .fh-stat{position:absolute;left:18px;right:18px;bottom:14px;height:22px;font-size:15.5px;font-weight:700}
.fh-en .fh-stat span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .5s ease}
.fh-ok{color:#1E7B47}.fh-bad{color:#E0201C;opacity:0}
.fhx[data-b="2"] .en-b .fh-ok,.fhx[data-b="3"] .en-b .fh-ok{opacity:0}
.fhx[data-b="2"] .en-b .fh-bad,.fhx[data-b="3"] .en-b .fh-bad{opacity:1;transition-delay:.4s}
.fhx[data-b="2"] .en-b{box-shadow:0 0 0 2.5px #E0201C,0 16px 38px rgba(224,32,28,.22);animation:fhShake .45s ease .4s 2}
.fhx[data-b="3"] .en-b{box-shadow:0 0 0 2.5px #FF6B35,0 16px 38px rgba(255,107,53,.22)}
@keyframes fhShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.fh-trace{position:absolute;left:18px;right:18px;top:118px;display:flex;flex-direction:column;gap:6px;opacity:0;transition:opacity .5s ease}
.fh-trace span{font-size:14.5px;font-weight:700;padding:5px 10px;border-radius:10px;background:#FFF4EE;border:1.5px solid #FF6B35;white-space:nowrap}
.fhx[data-b="3"] .en-b .fh-trace{opacity:1;transition-delay:1.2s}
.fhx[data-b="3"] .en-b .fh-wf,.fhx[data-b="3"] .en-b .fh-term{opacity:0}
.fhx[data-b="3"] .en-b .fh-wf{transition:opacity .4s ease}
/* connectors: from each entity up to the group view */
.fh-ln{position:absolute;left:50%;top:-136px;width:3px;height:136px;margin-left:-1.5px;border-radius:3px;background:linear-gradient(0deg,var(--c),rgba(139,79,224,.25));opacity:.55;z-index:-1}
.fh-sp{position:absolute;left:-5px;top:136px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px var(--c);opacity:0}
@keyframes fhUp{0%{top:136px;opacity:0}15%,85%{opacity:1}100%{top:-8px;opacity:0}}
@keyframes fhDn{0%{top:-8px;opacity:0}15%,85%{opacity:1}100%{top:136px;opacity:0}}
.fhx[data-b="1"] .fh-sp,.fhx[data-b="4"] .fh-sp{animation:fhUp 2s ease-in-out infinite}
.fhx[data-b="1"] .en-b .fh-sp,.fhx[data-b="4"] .en-b .fh-sp{animation-delay:.6s}.fhx[data-b="1"] .en-c .fh-sp,.fhx[data-b="4"] .en-c .fh-sp{animation-delay:1.2s}.fhx[data-b="4"] .en-d .fh-sp{animation-delay:2.4s}
.fhx[data-b="2"] .en-b .fh-sp{box-shadow:0 0 14px 6px #E0201C;animation:fhUp .8s ease-in 1s 3 both}
.fhx[data-b="2"] .en-b .fh-ln{background:#E0201C;opacity:1}
.fhx[data-b="3"] .en-b .fh-ln{background:#FF6B35;opacity:1}
.fhx[data-b="3"] .en-b .fh-sp{box-shadow:0 0 14px 6px #FF6B35;animation:fhDn 1.6s ease-in-out .3s infinite}
/* term chips travel up into the taxonomy rail */
.fh-fly{position:absolute;top:426px;padding:5px 12px;border-radius:999px;font-size:15px;font-weight:700;white-space:nowrap;background:#fff;border:1.5px solid var(--mag);color:var(--mag);box-shadow:0 8px 20px rgba(45,46,95,.14);opacity:0;transform:translate(-50%,0);z-index:4;pointer-events:none}
.fhx[data-b="1"] .fh-fly{animation:fhFly 1.9s cubic-bezier(.6,0,.3,1) both;animation-delay:calc(.5s + var(--i)*.45s)}
@keyframes fhFly{0%{opacity:0;transform:translate(-50%,0)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1;transform:translate(calc(-50% + var(--dx)),-160px) scale(.92)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-160px) scale(.5)}}
/* step to result connection */
.fh-res{display:block;max-height:0;overflow:hidden;margin-top:0;font-style:normal;font-size:15px;font-weight:700;color:#C2185B;opacity:0;transition:max-height .5s ease,opacity .5s ease,margin .5s ease}
.fh-steps li.on .fh-res{max-height:120px;overflow:visible;opacity:1;margin-top:8px}
.fh-steps li.on{box-shadow:0 14px 34px rgba(45,46,95,.10),inset 0 0 0 1.5px rgba(233,30,99,.35)}
html body .fhx .fh-n{color:#8D1748!important;background-color:#FFF0F5!important;background-image:none!important;border-color:rgba(194,24,91,.45)!important}
html body .fhx .fh-steps li.on .fh-n{color:#7F123D!important;background-color:#FFF0F5!important;background-image:none!important;border-color:#C2185B!important}
html body .fhx .fh-steps li.done .fh-n{color:#1E2B5C!important;background-color:#EEF1FF!important;background-image:none!important;border-color:#2D2E5F!important}
.fh-link{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:6}
.fh-lp{fill:none;stroke:url(#fhLg);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
.fh-link.drawn .fh-lp{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1)}
.fh-ld{fill:#fff;stroke:#E91E63;stroke-width:2.5;opacity:0;transition:opacity .4s ease}
.fh-ld.b{stroke:#FF6B35}
.fh-link.drawn .fh-ld{opacity:1}.fh-link.drawn .fh-ld.b{transition-delay:.8s}
.fh-lsp{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px #E91E63;opacity:0;offset-rotate:0deg;pointer-events:none;z-index:7}
.fh-lsp.run{animation:fhLink 2.2s ease-in-out 1s infinite}
@keyframes fhLink{0%{offset-distance:0%;opacity:0}12%,88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.fh-ring{position:absolute;left:0;top:0;width:0;height:0;border-radius:20px;border:2.5px solid #E91E63;box-shadow:0 0 0 6px rgba(233,30,99,.10),0 0 30px rgba(233,30,99,.18);pointer-events:none;z-index:6;opacity:0;transition:left .7s cubic-bezier(.65,0,.35,1),top .7s cubic-bezier(.65,0,.35,1),width .7s cubic-bezier(.65,0,.35,1),height .7s cubic-bezier(.65,0,.35,1),opacity .5s ease;animation:fhRingP 1.8s ease-in-out infinite}
.fh-ring.on{opacity:1}
@keyframes fhRingP{50%{box-shadow:0 0 0 10px rgba(233,30,99,.05),0 0 36px rgba(233,30,99,.28)}}
.fh-ring b{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#E91E63,#FF6B35);box-shadow:0 6px 16px rgba(233,30,99,.4)}
@media (max-width:1000px){.fh-link,.fh-lsp{display:none}}
@media (max-width:1000px){.fhx{grid-template-columns:1fr;padding:16px;gap:16px}.fh-art{order:-1}.fh-tx b{font-size:17.5px}.fh-tx span{font-size:15px}}
@media (prefers-reduced-motion:reduce){.fhx *{animation:none!important;transition:none!important}}