/* issue 236 頁首效果 checkmarx-scan：由示意（cf-mock/kits/hero-fx）轉成播放一次、停在完成構圖；色彩只用站上 token。 */
.hfx-k1{--hx-bright:color-mix(in srgb,var(--accent) 12%,var(--paper));--hx-hot:var(--arch-coral);--hx-sand:color-mix(in srgb, var(--arch-orange) 55%, var(--paper));}
.hfx-k1 *{transform-box:fill-box;transform-origin:center}
.hfx-k1 .k1-win{fill:color-mix(in srgb,var(--deeper) 82%,transparent);stroke:var(--on-dark-line);stroke-width:1.5}
.hfx-k1 .k1-wl{stroke:var(--on-dark-line);stroke-width:1.2}
.hfx-k1 .k1-wd{fill:var(--on-dark-line)}
.hfx-k1 .k1-fn{font-size:14px;letter-spacing:.08em;fill:var(--muted-on-dark);opacity:.8}
.hfx-k1 .k1-code,.hfx-k1 .k1-gn{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;font-size:14px}
.hfx-k1 .k1-gn{fill:var(--muted-on-dark);opacity:.6}
.hfx-k1 .k1-code{fill:var(--on-dark-card-body)}
.hfx-k1 .k1-code .k1-kw{fill:var(--accent)}.hfx-k1 .k1-code .k1-st{fill:var(--hx-sand)}.hfx-k1 .k1-code .k1-fn{fill:var(--hx-bright)}
.hfx-k1 .k1-ln{opacity:.8}
.hfx-k1 .k1-hl{fill:var(--hx-hot);fill-opacity:.13;stroke:var(--hx-hot);stroke-opacity:.5;stroke-width:1}
.hfx-k1 .k1-sq{fill:none;stroke:var(--hx-hot);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.hfx-k1 .k1-tag rect{fill:var(--hx-hot)}
.hfx-k1 .k1-tag text{font-size:13px;font-weight:800;letter-spacing:.06em;fill:var(--deeper)}
.hfx-k1 .k1-mk{fill:var(--hx-hot)}
.hfx-k1 .k1-band{opacity:0}
.hfx-k1 .k1-dfb{fill:var(--hx-hot)}
.hfx-k1 .k1-dfp{fill:none;stroke:var(--hx-hot);stroke-width:2;stroke-dasharray:1;stroke-linecap:round}
.hfx-k1 .k1-tag.k1-df rect{fill:none;stroke:var(--hx-hot);stroke-width:1.6}
.hfx-k1 .k1-tag.k1-df text{fill:var(--hx-hot)}
.hfx-k1 .k1-gate rect{fill:var(--hx-hot)}
.hfx-k1 .k1-gate text{font-size:14px;font-weight:800;letter-spacing:.06em;fill:var(--deeper)}
.hfx-k1 .k1-ph{font-size:16px;font-weight:800;letter-spacing:.14em;fill:var(--hx-bright)}
.hfx-k1 .k1-ps{font-size:14px;letter-spacing:.1em;fill:var(--muted-on-dark)}
.hfx-k1 .k1-rl{font-size:14px;letter-spacing:.06em;fill:var(--hx-bright)}
.hfx-k1 .k1-rb{fill:var(--accent);transform-origin:left center;transform-box:fill-box}
.hfx-k1 #hk1r0b{fill:var(--hx-hot)}
.hfx-k1 .k1-row{transform:translateY(var(--dy))}
#hk1r0{--dy:0px}
#hk1r1{--dy:28px}
#hk1r2{--dy:-28px}
.hfx-k1 #hk1h7{opacity:1}
.hfx-k1 #hk1h9{opacity:1}
.hfx-k1 #hk1h13{opacity:1}
.hfx-k1 #hk1L0{opacity:0.8}
.hfx-k1 #hk1L1{opacity:0.8}
.hfx-k1 #hk1L2{opacity:0.8}
.hfx-k1 #hk1L3{opacity:0.8}
.hfx-k1 #hk1L4{opacity:0.8}
.hfx-k1 #hk1L5{opacity:0.8}
.hfx-k1 #hk1L6{opacity:0.8}
.hfx-k1 #hk1L7{opacity:0.8}
.hfx-k1 #hk1L8{opacity:0.8}
.hfx-k1 #hk1L9{opacity:0.8}
.hfx-k1 #hk1L10{opacity:0.8}
.hfx-k1 #hk1L11{opacity:0.8}
.hfx-k1 #hk1L12{opacity:0.8}
.hfx-k1 #hk1L13{opacity:0.8}
.hfx-k1 #hk1w7{stroke-dashoffset:0;opacity:1}
.hfx-k1 #hk1g7{opacity:1;transform:scale(1)}
.hfx-k1 #hk1m7{opacity:1}
.hfx-k1 #hk1w9{stroke-dashoffset:0;opacity:1}
.hfx-k1 #hk1g9{opacity:1;transform:scale(1)}
.hfx-k1 #hk1m9{opacity:1}
.hfx-k1 #hk1w13{stroke-dashoffset:0;opacity:1}
.hfx-k1 #hk1g13{opacity:1;transform:scale(1)}
.hfx-k1 #hk1m13{opacity:1}
.hfx-k1 #hk1df0{opacity:1}
.hfx-k1 #hk1df1{opacity:1}
.hfx-k1 #hk1df2{opacity:1}
.hfx-k1 #hk1dp{stroke-dashoffset:0;opacity:1}
.hfx-k1 #hk1dg{opacity:1;transform:scale(1)}
.hfx-k1 #hk1bd{opacity:0;transform:translateY(0)}
.hfx-k1 #hk1r0b{transform:scaleX(1);opacity:1}
.hfx-k1 #hk1r0{opacity:1;transform:translateY(0px)}
.hfx-k1 #hk1r1b{transform:scaleX(1);opacity:1}
.hfx-k1 #hk1r1{opacity:1;transform:translateY(28px)}
.hfx-k1 #hk1r2b{transform:scaleX(1);opacity:1}
.hfx-k1 #hk1r2{opacity:1;transform:translateY(-28px)}
.hfx-k1 #hk1gt{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion: no-preference) {
html:not([data-motion="off"]) .hfx-k1 #hk1h7{animation:k1h7-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1h9{animation:k1h9-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1h13{animation:k1h13-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L0{animation:k1L0-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L1{animation:k1L1-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L2{animation:k1L2-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L3{animation:k1L3-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L4{animation:k1L4-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L5{animation:k1L5-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L6{animation:k1L6-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L7{animation:k1L7-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L8{animation:k1L8-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L9{animation:k1L9-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L10{animation:k1L10-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L11{animation:k1L11-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L12{animation:k1L12-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1L13{animation:k1L13-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1w7{animation:k1w7-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1g7{animation:k1g7-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1m7{animation:k1m7-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1w9{animation:k1w9-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1g9{animation:k1g9-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1m9{animation:k1m9-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1w13{animation:k1w13-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1g13{animation:k1g13-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1m13{animation:k1m13-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1df0{animation:k1df0-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1df1{animation:k1df1-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1df2{animation:k1df2-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1dp{animation:k1dp-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1dg{animation:k1dg-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1bd{animation:k1bd-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1r0b{animation:k1r0b-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1r0{animation:k1r0-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1r1b{animation:k1r1b-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1r1{animation:k1r1-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1r2b{animation:k1r2b-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1r2{animation:k1r2-o 10.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-k1 #hk1gt{animation:k1gt-o 10.5s linear 0s 1 both}
}
@keyframes k1h7-o{0%{opacity:0}36.19%{opacity:0}38.095%{opacity:1}100%{opacity:1}}
@keyframes k1h9-o{0%{opacity:0}43.81%{opacity:0}45.714%{opacity:1}100%{opacity:1}}
@keyframes k1h13-o{0%{opacity:0}59.048%{opacity:0}60.952%{opacity:1}100%{opacity:1}}
@keyframes k1L0-o{0%{opacity:.4}9.524%{opacity:.4}10.667%{opacity:1}18.095%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L1-o{0%{opacity:.4}13.333%{opacity:.4}14.476%{opacity:1}21.905%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L2-o{0%{opacity:.4}17.143%{opacity:.4}18.286%{opacity:1}25.714%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L3-o{0%{opacity:.4}20.952%{opacity:.4}22.095%{opacity:1}29.524%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L4-o{0%{opacity:.4}24.762%{opacity:.4}25.905%{opacity:1}33.333%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L5-o{0%{opacity:.4}28.571%{opacity:.4}29.714%{opacity:1}37.143%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L6-o{0%{opacity:.4}32.381%{opacity:.4}33.524%{opacity:1}40.952%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L7-o{0%{opacity:.4}36.19%{opacity:.4}37.333%{opacity:1}44.762%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L8-o{0%{opacity:.4}40%{opacity:.4}41.143%{opacity:1}48.571%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L9-o{0%{opacity:.4}43.81%{opacity:.4}44.952%{opacity:1}52.381%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L10-o{0%{opacity:.4}47.619%{opacity:.4}48.762%{opacity:1}56.19%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L11-o{0%{opacity:.4}51.429%{opacity:.4}52.571%{opacity:1}60%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L12-o{0%{opacity:.4}55.238%{opacity:.4}56.381%{opacity:1}63.81%{opacity:.8}100%{opacity:0.8}}
@keyframes k1L13-o{0%{opacity:.4}59.048%{opacity:.4}60.19%{opacity:1}67.619%{opacity:.8}100%{opacity:0.8}}
@keyframes k1w7-o{0%{stroke-dashoffset:1;opacity:0}37.143%{stroke-dashoffset:1;opacity:0}37.619%{stroke-dashoffset:1;opacity:1}41.905%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes k1g7-o{0%{opacity:0;transform:scale(.6)}39.048%{opacity:0;transform:scale(.6)}41.429%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes k1m7-o{0%{opacity:0}37.143%{opacity:0}39.048%{opacity:1}100%{opacity:1}}
@keyframes k1w9-o{0%{stroke-dashoffset:1;opacity:0}44.762%{stroke-dashoffset:1;opacity:0}45.238%{stroke-dashoffset:1;opacity:1}49.524%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes k1g9-o{0%{opacity:0;transform:scale(.6)}46.667%{opacity:0;transform:scale(.6)}49.048%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes k1m9-o{0%{opacity:0}44.762%{opacity:0}46.667%{opacity:1}100%{opacity:1}}
@keyframes k1w13-o{0%{stroke-dashoffset:1;opacity:0}60%{stroke-dashoffset:1;opacity:0}60.476%{stroke-dashoffset:1;opacity:1}64.762%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes k1g13-o{0%{opacity:0;transform:scale(.6)}61.905%{opacity:0;transform:scale(.6)}64.286%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes k1m13-o{0%{opacity:0}60%{opacity:0}61.905%{opacity:1}100%{opacity:1}}
@keyframes k1df0-o{0%{opacity:0}34.762%{opacity:0}36.667%{opacity:1}100%{opacity:1}}
@keyframes k1df1-o{0%{opacity:0}38.571%{opacity:0}40.476%{opacity:1}100%{opacity:1}}
@keyframes k1df2-o{0%{opacity:0}42.381%{opacity:0}44.286%{opacity:1}100%{opacity:1}}
@keyframes k1dp-o{0%{stroke-dashoffset:1;opacity:0}34.762%{stroke-dashoffset:1;opacity:0}35.238%{stroke-dashoffset:1;opacity:1}40%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes k1dg-o{0%{opacity:0;transform:scale(.6)}33.333%{opacity:0;transform:scale(.6)}35.714%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes k1bd-o{0%{opacity:0;transform:translateY(0)}8.571%{opacity:0;transform:translateY(0)}9.524%{opacity:1;transform:translateY(0)}59.048%{opacity:1;transform:translateY(338px)}61.429%{opacity:0;transform:translateY(364px)}100%{opacity:0;transform:translateY(0)}}
@keyframes k1r0b-o{0%{transform:scaleX(0);opacity:0}39.048%{transform:scaleX(0);opacity:0}39.524%{transform:scaleX(0);opacity:1}44.762%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes k1r0-o{0%{opacity:0;transform:translateY(0)}39.048%{opacity:0;transform:translateY(0)}40.952%{opacity:1;transform:translateY(0)}69.524%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.6,0,.2,1)}77.143%{opacity:1;transform:translateY(0px)}100%{opacity:1;transform:translateY(0px)}}
@keyframes k1r1b-o{0%{transform:scaleX(0);opacity:0}46.667%{transform:scaleX(0);opacity:0}47.143%{transform:scaleX(0);opacity:1}52.381%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes k1r1-o{0%{opacity:0;transform:translateY(0)}46.667%{opacity:0;transform:translateY(0)}48.571%{opacity:1;transform:translateY(0)}69.524%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.6,0,.2,1)}77.143%{opacity:1;transform:translateY(28px)}100%{opacity:1;transform:translateY(28px)}}
@keyframes k1r2b-o{0%{transform:scaleX(0);opacity:0}61.905%{transform:scaleX(0);opacity:0}62.381%{transform:scaleX(0);opacity:1}67.619%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes k1r2-o{0%{opacity:0;transform:translateY(0)}61.905%{opacity:0;transform:translateY(0)}63.81%{opacity:1;transform:translateY(0)}69.524%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.6,0,.2,1)}77.143%{opacity:1;transform:translateY(-28px)}100%{opacity:1;transform:translateY(-28px)}}
@keyframes k1gt-o{0%{opacity:0;transform:scale(.7)}76.19%{opacity:0;transform:scale(.7)}80%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
/* issue 287：窄螢幕（圖寬約 280–570px）圖內文字依 viewBox 縮到 5–8px 讀不到；放大標籤字級（28 單位約 11px 起），程式碼本文與資料流細節只是示意，窄螢幕隱藏，只留檔名、三個標記標籤與單一風險視圖。 */
@media (max-width: 38rem) {
.hfx-k1 .k1-code,.hfx-k1 .k1-gn,.hfx-k1 .k1-sq,.hfx-k1 .k1-dfb,.hfx-k1 .k1-dfp,.hfx-k1 .k1-df,.hfx-k1 .k1-ps{display:none}
.hfx-k1 text.k1-fn{font-size:28px;letter-spacing:.02em}
.hfx-k1 .k1-tag text,.hfx-k1 .k1-gate text,.hfx-k1 .k1-ph,.hfx-k1 .k1-rl{font-size:28px;letter-spacing:.02em}
.hfx-k1 .k1-tag rect{height:40px;rx:20px;transform:translateY(-9px)}
.hfx-k1 .k1-tag text{transform:translateY(5px)}
.hfx-k1 #hk1g7 rect,.hfx-k1 #hk1g9 rect{x:508px;width:166px}
.hfx-k1 #hk1g7 text,.hfx-k1 #hk1g9 text{transform:translate(-24px,5px)}
.hfx-k1 #hk1g13 rect{x:450px;width:224px}
.hfx-k1 #hk1g13 text{transform:translate(-16px,5px)}
.hfx-k1 .k1-gate rect{x:380px;y:512px;width:298px;height:40px;rx:20px}
.hfx-k1 .k1-gate text{transform:translate(-40px,5px)}
.hfx-k1 .k1-rb{x:200px}
.hfx-k1 #hk1r0b{width:400px}
.hfx-k1 #hk1r1b{width:272px}
.hfx-k1 #hk1r2b{width:330px}
}