/* ===== /tools/ 固有 ===== */
:root{--grad-stage:linear-gradient(158deg,#F5F8FE 0%,#E8EFFA 100%)}
.hb-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,var(--tint));border-bottom:1px solid var(--line);padding:clamp(52px,8vw,110px) var(--gutter) clamp(54px,7vw,92px)}
.hb-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(43,111,214,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(43,111,214,.05) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(120% 90% at 70% 40%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(120% 90% at 70% 40%,#000 25%,transparent 78%)}
.hb-hero__row{position:relative;max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,84px);align-items:center;justify-content:space-between}
.hb-hero__text{flex:1 1 360px;min-width:0;max-width:34em}
.hb-h1{font-family:var(--font-brand);font-size:clamp(24px,3vw,36px);font-weight:900;letter-spacing:-.02em;line-height:1.4;text-wrap:pretty}
.hb-h1 span{display:inline-block}
.hb-lede{margin-top:clamp(16px,2vw,22px);min-height:4.4em}
.hb-lede p{font-size:clamp(14px,1.2vw,16px);line-height:2.1;color:var(--ink2);max-width:30em}
.hb-lede p[hidden]{display:none}
.hb-stage{flex:1 1 440px;min-width:0;max-width:560px}
.hb-stack{display:grid}
.hb-demo{grid-area:1/1;position:relative;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .55s cubic-bezier(.22,.8,.28,1);border:1px solid var(--line);border-radius:var(--r-15);background:#fff;box-shadow:0 10px 30px rgba(20,40,80,.07);overflow:hidden}
.hb-demo[data-on=true]{opacity:1;pointer-events:auto}
.hb-demo__hd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.hb-demo__name{font-family:var(--font-display);font-size:13px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-demo__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.12em;color:var(--blue-d);font-weight:700}
.hb-demo__live i{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:kzh-loop-live 2.2s ease-in-out infinite}
.hb-rows{flex:1;padding:8px 20px 0;font-size:12.5px}
.hb-row{display:flex;align-items:center;gap:14px;padding:13px 0;animation:kzh-row 27s cubic-bezier(.22,.8,.28,1) infinite;animation-fill-mode:backwards}
.hb-row+.hb-row{border-top:1px solid #F1F3F6}
.hb-row__name{flex:1;min-width:0;color:var(--ink2)}
.hb-row__meta{color:var(--mute);font-size:11.5px}
.hb-row:nth-child(1){animation-delay:.4s}
.hb-row:nth-child(2){animation-delay:.9s}
.hb-row:nth-child(3){animation-delay:1.4s}
.hb-row:nth-child(4){animation-delay:1.9s}
.hb-roll{position:relative;flex:1;min-width:0;height:18px;overflow:hidden}
.hb-roll>span{display:block;animation:kzh-roll 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-roll b{display:block;height:18px;line-height:18px;font-family:var(--font-mono);font-size:11.5px;color:#9aa4b2;white-space:nowrap;font-weight:400}
.hb-roll em{display:block;height:18px;line-height:18px;font-size:12.5px;color:var(--ink);font-weight:500;white-space:nowrap;font-style:normal}
.hb-badge{margin:10px 20px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-8);background:var(--tint);font-size:11.5px;color:var(--blue-d);animation:kzh-badge 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-badge b{font-weight:700}
.hb-badge span{color:#6b7886}
.hb-prog{padding:20px}
.hb-prog__track{height:2px;border-radius:2px;background:#EDF1F5;overflow:hidden;position:relative}
.hb-prog__track i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--blue);border-radius:2px;display:block;animation:kzh-bar 27s linear infinite}
.hb-prog__row{margin-top:11px;display:flex;align-items:center;gap:10px;font-size:11.5px;color:#6b7886}
.hb-prog__count{font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-prog__done{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:700;animation:kzh-done 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-pane{flex:1;display:flex;flex-direction:column;justify-content:center;padding:22px 20px}
.hb-cmp{display:flex;gap:16px;align-items:flex-start}
.hb-cmp__col{flex:1;min-width:0}
.hb-cmp__arrow{color:var(--line-strong);font-size:15px;padding-top:50px}
.hb-frame{position:relative;width:100%;height:120px;border-radius:var(--r-6);overflow:hidden;background:var(--grad-stage)}
.hb-frame--out{background:#F5F8FC;box-shadow:0 0 0 1.5px var(--blue)}
.hb-frame__tag{position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--r-pill);background:rgba(29,38,50,.82);color:#fff;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.01em}
.hb-frame__tag--in{background:var(--blue);box-shadow:0 4px 12px rgba(43,111,214,.3);animation:kzh-in 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-cap{margin-top:9px;font-size:11px;color:#6b7886;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-cap--in{color:var(--blue-d);font-weight:700;animation:kzh-in 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none;animation:kzh-ph 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-scan i{position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(43,111,214,0) 0%,rgba(43,111,214,.10) 42%,rgba(43,111,214,.26) 76%,rgba(43,111,214,.44) 100%);border-bottom:2px solid rgba(43,111,214,.85);animation:kzh-scanband 27s linear infinite}
.hb-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#F5F8FC;pointer-events:none;animation:kzh-ph 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-ph span{font-size:10.5px;color:#6b7886}
.hb-ph__bar{position:relative;width:62px;height:3px;border-radius:2px;background:#E2E9F2;overflow:hidden}
.hb-ph__bar i{position:absolute;top:0;bottom:0;width:40%;border-radius:2px;background:var(--blue);animation:kzh-loop-sweep 1.15s ease-in-out infinite}
.hb-meta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:11.5px;color:#6b7886}
.hb-meta__sep{color:var(--line-strong)}
.hb-meta__ok{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--green);animation:kzh-in 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-id__frame{position:relative;width:96px;height:124px;border-radius:var(--r-6);overflow:hidden;background:var(--grad-stage)}
.hb-id__col{flex:none;width:96px}
.hb-crop{position:absolute;top:14px;right:16px;bottom:26px;left:16px;border:1.5px solid var(--blue);border-radius:2px;pointer-events:none;animation:kzh-cropfit 27s cubic-bezier(.22,.8,.28,1) infinite}
.hb-crop i:first-child{position:absolute;left:0;right:0;top:26%;height:1px;background:rgba(43,111,214,.4)}
.hb-crop i:last-child{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(43,111,214,.4)}
.hb-id__facts{flex:1 1 120px;min-width:0;padding-top:2px}
.hb-id__facts dl{display:grid;gap:7px;font-size:11.5px;margin:0}
.hb-id__facts dt{color:var(--mute);display:inline}
.hb-id__facts dd{display:inline;margin:0;color:var(--ink2)}
.hb-id__presets{margin-top:12px;display:flex;flex-wrap:wrap;gap:5px}
.hb-id__presets span{font-size:10.5px;font-weight:500;color:var(--ink2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.hb-id__presets span.is-on{font-weight:700;color:#fff;background:var(--blue);border-color:var(--blue)}
.hb-id__note{margin-top:14px;font-size:11.5px;line-height:1.9;color:#6b7886}
.hb-dots{margin-top:14px;display:flex;align-items:center;gap:14px}
.hb-dots__row{display:flex;gap:8px}
.hb-dot{display:flex;align-items:center;padding:12px 0;border:0;background:none;cursor:pointer}
.hb-dot i{display:block;width:34px;height:4px;border-radius:2px;background:#DCE3EB;transition:background .3s linear}
.hb-dot[aria-selected=true] i{background:var(--blue)}
.hb-dots__label{font-size:11.5px;color:#6b7886}
.hb-entries{padding:clamp(44px,5.6vw,80px) var(--gutter) clamp(56px,8vw,110px)}
.hb-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(14px,1.6vw,20px)}
.hb-tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-15);padding:clamp(26px,2.6vw,34px);transition:border-color .15s,transform .15s,box-shadow .15s}
.hb-tile:hover{border-color:#bcd2f3;transform:translateY(-3px);box-shadow:0 10px 26px rgba(20,40,80,.09)}
.hb-tile--matrix{background:#FCFDFE}
.hb-tile__title{margin-top:22px;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink)}
.hb-tile__desc{margin-top:9px;font-size:13.5px;line-height:2;color:#6b7886}
.hb-tile__badge{margin-top:18px;font-size:11.5px;font-weight:700;color:#6b7886}
.hb-tile__badge--v{color:var(--green)}
.hb-tile__badge--p{color:var(--blue)}
.hb-tile__badge--go{color:#6b7886}
.hb-tile__sum{display:none}
.hb-tile__row{display:contents}
.hb-crumb,.hb-lede-m{display:none}
.hb-notice{max-width:1280px;margin:0 auto clamp(20px,2.4vw,28px)}
.hb-notice .kz-band{margin:0}
.hb-facts{display:none}
@media (max-width:720px){
  .hb-hero{background:0;border-bottom:0;padding:12px var(--gutter) 0;overflow:visible}
  .hb-hero__grid{display:none}
  .hb-hero__row{display:block}
  .hb-hero__text{max-width:none}
  .hb-crumb{display:flex}
  .hb-h1{margin-top:2px;font-size:19px;font-weight:700;line-height:1.65}
  .hb-h1 span{display:inline}
  .hb-lede{display:none}
  .hb-lede-m{display:block;margin-top:8px}
  .hb-stage{display:none}
  .hb-facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:#6b7886}
  .hb-facts__sep{color:var(--mute)}
  .hb-entries{padding:14px var(--gutter) 0}
  .hb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .hb-tile{gap:9px;min-height:122px;border-radius:var(--r-15);padding:13px 11px;transition:border-color .15s,box-shadow .15s}
  .hb-tile:hover{transform:none}
  .hb-tile svg{width:24px;height:24px;flex:none}
  .hb-tile__title{margin-top:0;font-size:12.5px;line-height:1.55;text-wrap:pretty}
  .hb-tile__desc{display:none}
  .hb-tile__badge{margin-top:auto;font-size:11.5px;line-height:1.5}
  .hb-tile--matrix{grid-column:span 2;padding:13px 12px}
  .hb-tile--matrix .hb-tile__row{display:flex;align-items:center;gap:9px}
  .hb-tile--matrix .hb-tile__row .hb-tile__title{margin:0}
  .hb-tile__sum{display:flex;flex-direction:column;font-size:11.5px;margin:0}
  .hb-tile__sum>div{display:flex;gap:8px;padding:5px 0}
  .hb-tile__sum dt{flex:none;font-weight:700}
  .hb-tile__sum dd{margin:0;min-width:0;color:var(--ink2);line-height:1.6}
  .hb-notice{margin:14px var(--gutter) 0}
  .hb-notice .kz-band{padding:13px 14px}
  .hb-none{margin:14px var(--gutter) 0;border:1px solid var(--line);border-radius:var(--r-15);background:#FCFDFE;padding:28px 18px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .kz-doc{margin-top:32px}
}
@keyframes kzh-row{0%,1.5%{opacity:0;transform:translateY(8px)}4%,34%{opacity:1;transform:translateY(0)}36%,100%{opacity:0;transform:translateY(8px)}}
@keyframes kzh-roll{0%,10%{transform:translateY(0)}12%,34%{transform:translateY(-18px)}36%,100%{transform:translateY(0)}}
@keyframes kzh-badge{0%,12%{opacity:0;transform:translateY(-4px)}13.85%,34%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes kzh-bar{0%,2%{width:0}18%,34%{width:100%}36%,100%{width:0}}
@keyframes kzh-done{0%,18%{opacity:0;transform:translateY(6px)}20.5%,34%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(6px)}}
@keyframes kzh-ph{0%,10%{opacity:1}11.3%,34%{opacity:0}36%,100%{opacity:1}}
@keyframes kzh-in{0%,10%{opacity:0;transform:translateY(-4px)}11.85%,34%{opacity:1;transform:translateY(0)}36%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes kzh-scanband{0%{transform:translateY(-45%)}10%{transform:translateY(228%)}10.5%,100%{transform:translateY(-45%)}}
@keyframes kzh-cropfit{0%{top:4px;right:3px;bottom:4px;left:3px;opacity:1}10%,34%{top:14px;right:16px;bottom:26px;left:16px;opacity:1}36%,100%{top:4px;right:3px;bottom:4px;left:3px;opacity:0}}
@keyframes kzh-loop-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(210%)}}
@keyframes kzh-loop-live{0%,100%{opacity:.4}50%{opacity:1}}
.hb-demo--img [data-kzh],.hb-demo--img .hb-ph__bar i,.hb-demo--img .hb-demo__live i{animation-delay:-18s}
.hb-demo--id [data-kzh],.hb-demo--id .hb-ph__bar i,.hb-demo--id .hb-demo__live i{animation-delay:-9s}
@media (prefers-reduced-motion:reduce){
  [data-kzh]{animation:none!important;opacity:1!important;transform:none!important}
  .hb-prog__track i{width:100%}
  .hb-roll>span{transform:translateY(-18px)!important}
  .hb-scan{display:none!important}
}