/* issue 236 頁首效果 netskope-core：由示意（cf-mock/kits/hero-fx）轉成播放一次、停在完成構圖；色彩只用站上 token。
   issue 267：只用 Netskope 色票（Blue、Navy、Orange）：原紫線改 Orange、原綠線改 Blue 淡色。 */
.hfx-n1{--hx-bright:color-mix(in srgb,var(--accent) 12%,var(--paper));--hx-hot:var(--arch-coral);--hx-pu:var(--arch-purple);--hx-gr:var(--arch-green);--hx-cy:var(--accent-dark);--hx-or:var(--arch-coral);}
.hfx-n1 *{transform-box:fill-box;transform-origin:center}
.hfx-n1 .n1-orb{fill:none;stroke:var(--hx-cy);stroke-opacity:.4;stroke-width:1.5;stroke-dasharray:2 11;stroke-linecap:round}
.hfx-n1 .n1-orb2{fill:none;stroke:var(--muted-on-dark);stroke-opacity:.35;stroke-width:1.3;stroke-dasharray:14 10}
.hfx-n1 .n1-cap{fill:none;stroke:var(--hx-cy);stroke-opacity:.6;stroke-width:13;stroke-linecap:round}
.hfx-n1 .n1-sp{fill:none;stroke-width:2;stroke-dasharray:6 6;stroke-opacity:.6}
.hfx-n1 .n1-sp.n1-pu,.hfx-n1 .n1-nd.n1-pu,.hfx-n1 .n1-pr.n1-pu,.hfx-n1 .n1-pl.n1-pu{stroke:var(--hx-pu)}
.hfx-n1 .n1-sp.n1-cy,.hfx-n1 .n1-nd.n1-cy,.hfx-n1 .n1-pr.n1-cy,.hfx-n1 .n1-pl.n1-cy{stroke:var(--hx-cy)}
.hfx-n1 .n1-sp.n1-or,.hfx-n1 .n1-nd.n1-or,.hfx-n1 .n1-pr.n1-or,.hfx-n1 .n1-pl.n1-or{stroke:var(--hx-or)}
.hfx-n1 .n1-sp.n1-gr,.hfx-n1 .n1-nd.n1-gr,.hfx-n1 .n1-pr.n1-gr,.hfx-n1 .n1-pl.n1-gr{stroke:var(--hx-gr)}
.hfx-n1 .n1-core{fill:var(--deeper);stroke:var(--hx-cy);stroke-width:3}
.hfx-n1 .n1-core2{fill:color-mix(in srgb,var(--hx-cy) 14%,var(--deeper));stroke:var(--hx-or);stroke-opacity:.55;stroke-width:2}
.hfx-n1 .n1-shield{fill:none;stroke:var(--hx-cy);stroke-width:3.2;stroke-linejoin:round}
.hfx-n1 .n1-chk{fill:none;stroke:var(--hx-cy);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.hfx-n1 .n1-lblbg{fill:color-mix(in srgb,var(--deeper) 88%,transparent);stroke:var(--on-dark-line);stroke-width:1.2}
.hfx-n1 .n1-lbl{font-size:15px;font-weight:700;letter-spacing:.1em;fill:var(--hx-bright)}
.hfx-n1 .n1-nd{fill:var(--deeper);stroke-width:2.4}
.hfx-n1 .n1-ic{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hfx-n1 .n1-ic.n1-pu{stroke:var(--hx-pu)}.hfx-n1 .n1-ic.n1-cy{stroke:var(--hx-cy)}.hfx-n1 .n1-ic.n1-or{stroke:var(--hx-or)}.hfx-n1 .n1-ic.n1-gr{stroke:var(--hx-gr)}
.hfx-n1 .n1-nl{font-size:19px;font-weight:800;letter-spacing:.06em;fill:var(--hx-bright)}
.hfx-n1 .n1-pr,.hfx-n1 .n1-pl{fill:none;stroke-width:3;opacity:0}
.hfx-n1 .n1-dt{fill:none;stroke-linecap:round;stroke-dasharray:.001 3;stroke-width:13;opacity:0}
.hfx-n1 .n1-dt.n1-w{stroke:var(--hx-bright)}.hfx-n1 .n1-dt.n1-gr{stroke:var(--hx-gr)}.hfx-n1 .n1-dt.n1-pu{stroke:var(--hx-pu)}.hfx-n1 .n1-dt.n1-o{stroke:var(--hx-or)}
.hfx-n1 .n1-chip rect{fill:color-mix(in srgb,var(--deeper) 88%,transparent);stroke-width:1.8}
.hfx-n1 .n1-chip text{font-size:16px;font-weight:800;letter-spacing:.06em}
.hfx-n1 .n1-chip.n1-gr rect{stroke:var(--hx-gr)}.hfx-n1 .n1-chip.n1-gr text{fill:var(--hx-gr)}
.hfx-n1 .n1-chip.n1-pu rect{stroke:var(--hx-pu)}.hfx-n1 .n1-chip.n1-pu text{fill:var(--hx-pu)}
.hfx-n1 .n1-chip.n1-or rect{fill:var(--hx-or);stroke:var(--hx-or)}.hfx-n1 .n1-chip.n1-or text{fill:var(--deeper)}
.hfx-n1 .n1-bar rect{fill:var(--hx-or)}
.hfx-n1 .n1-bs{fill:var(--hx-or);opacity:0}
.hfx-n1 .n1-bub rect,.hfx-n1 .n1-bub path{fill:var(--hx-pu)}.hfx-n1 .n1-bub circle{fill:var(--deeper)}

.hfx-n1 #hn1rg{transform:rotate(0)}
.hfx-n1 #hn1cp{transform:rotate(-360deg)}
.hfx-n1 #hn1spE{stroke-dashoffset:-10.6667}
.hfx-n1 #hn1spS{stroke-dashoffset:-10.6667}
.hfx-n1 #hn1spG{stroke-dashoffset:-10.6667}
.hfx-n1 #hn1spD{stroke-dashoffset:-10.6667}
.hfx-n1 #hn1spP{stroke-dashoffset:-10.6667}
.hfx-n1 #hn1a1{stroke-dashoffset:-0.1281;opacity:0}
.hfx-n1 #hn1c1{opacity:0;transform:scale(1.0809)}
.hfx-n1 #hn1b1{stroke-dashoffset:-0.139;opacity:0}
.hfx-n1 #hn1n1{opacity:0;transform:scale(1.1322)}
.hfx-n1 #hn1k1{opacity:1}
.hfx-n1 #hn1a2{stroke-dashoffset:-0.169;opacity:0}
.hfx-n1 #hn1c2{opacity:0;transform:scale(1.1085)}
.hfx-n1 #hn1b2{stroke-dashoffset:-0.1885;opacity:0}
.hfx-n1 #hn1n2{opacity:0;transform:scale(1.1831)}
.hfx-n1 #hn1bb{opacity:1}
.hfx-n1 #hn1k2{opacity:1}
.hfx-n1 #hn1a3{stroke-dashoffset:-0.2483;opacity:0}
.hfx-n1 #hn1c3{opacity:0;transform:scale(1.1649)}
.hfx-n1 #hn1b3{stroke-dashoffset:-0.2707;opacity:0}
.hfx-n1 #hn1br{opacity:1;transform:scaleY(1)}
.hfx-n1 #hn1bs0{opacity:0;transform:translate(0,0)}
.hfx-n1 #hn1bs1{opacity:0;transform:translate(0,0)}
.hfx-n1 #hn1bs2{opacity:0;transform:translate(0,0)}
.hfx-n1 #hn1bs3{opacity:0;transform:translate(0,0)}
.hfx-n1 #hn1bs4{opacity:0;transform:translate(0,0)}
.hfx-n1 #hn1n3{opacity:0;transform:scale(1.2174)}
.hfx-n1 #hn1k3{opacity:1}
.hfx-n1 #hn1a4{stroke-dashoffset:-0.4675;opacity:0}
.hfx-n1 #hn1c4{opacity:0;transform:scale(1.3429)}
.hfx-n1 #hn1b4{stroke-dashoffset:-0.6545;opacity:0}
.hfx-n1 #hn1n4{opacity:0;transform:scale(1.7902)}
.hfx-n1 #hn1k4{opacity:1}
@media (prefers-reduced-motion: no-preference) {
html:not([data-motion="off"]) .hfx-n1 #hn1rg{animation:n1rg-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1cp{animation:n1cp-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1spE{animation:n1spE 1.8s linear 0s 7.889 both}
html:not([data-motion="off"]) .hfx-n1 #hn1spS{animation:n1spS 1.8s linear 0s 7.889 both}
html:not([data-motion="off"]) .hfx-n1 #hn1spG{animation:n1spG 1.8s linear 0s 7.889 both}
html:not([data-motion="off"]) .hfx-n1 #hn1spD{animation:n1spD 1.8s linear 0s 7.889 both}
html:not([data-motion="off"]) .hfx-n1 #hn1spP{animation:n1spP 1.8s linear 0s 7.889 both}
html:not([data-motion="off"]) .hfx-n1 #hn1a1{animation:n1a1-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1c1{animation:n1c1-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1b1{animation:n1b1-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1n1{animation:n1n1-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1k1{animation:n1k1-o 3.35s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1a2{animation:n1a2-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1c2{animation:n1c2-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1b2{animation:n1b2-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1n2{animation:n1n2-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1bb{animation:n1bb-o 7.3s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1k2{animation:n1k2-o 6.75s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1a3{animation:n1a3-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1c3{animation:n1c3-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1b3{animation:n1b3-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1br{animation:n1br-o 11s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1bs0{animation:n1bs0-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1bs1{animation:n1bs1-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1bs2{animation:n1bs2-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1bs3{animation:n1bs3-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1bs4{animation:n1bs4-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1n3{animation:n1n3-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1k3{animation:n1k3-o 9.7s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1a4{animation:n1a4-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1c4{animation:n1c4-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1b4{animation:n1b4-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1n4{animation:n1n4-o 14.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-n1 #hn1k4{animation:n1k4-o 13.55s linear 0s 1 both}
}
@keyframes n1rg-o{0%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes n1cp-o{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}
@keyframes n1spE{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-12}}
@keyframes n1spS{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-12}}
@keyframes n1spG{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-12}}
@keyframes n1spD{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-12}}
@keyframes n1spP{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-12}}
@keyframes n1a1-o{0%{stroke-dashoffset:0;opacity:0}7.042%{stroke-dashoffset:0;opacity:0}7.394%{stroke-dashoffset:0;opacity:1}13.38%{stroke-dashoffset:-1;opacity:1}13.732%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.1281;opacity:0}}
@keyframes n1c1-o{0%{opacity:0;transform:scale(1)}13.38%{opacity:0;transform:scale(1)}13.732%{opacity:.95;transform:scale(1)}18.662%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.0809)}}
@keyframes n1b1-o{0%{stroke-dashoffset:0;opacity:0}15.141%{stroke-dashoffset:0;opacity:0}15.493%{stroke-dashoffset:0;opacity:1}21.127%{stroke-dashoffset:-1;opacity:1}21.479%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.139;opacity:0}}
@keyframes n1n1-o{0%{opacity:0;transform:scale(1)}21.127%{opacity:0;transform:scale(1)}21.479%{opacity:.95;transform:scale(1)}26.408%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.1322)}}
@keyframes n1k1-o{0%{opacity:0}89.552%{opacity:0}100%{opacity:1}}
@keyframes n1a2-o{0%{stroke-dashoffset:0;opacity:0}30.986%{stroke-dashoffset:0;opacity:0}31.338%{stroke-dashoffset:0;opacity:1}37.324%{stroke-dashoffset:-1;opacity:1}37.676%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.169;opacity:0}}
@keyframes n1c2-o{0%{opacity:0;transform:scale(1)}37.324%{opacity:0;transform:scale(1)}37.676%{opacity:.95;transform:scale(1)}42.606%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.1085)}}
@keyframes n1b2-o{0%{stroke-dashoffset:0;opacity:0}39.085%{stroke-dashoffset:0;opacity:0}39.437%{stroke-dashoffset:0;opacity:1}45.07%{stroke-dashoffset:-1;opacity:1}45.423%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.1885;opacity:0}}
@keyframes n1n2-o{0%{opacity:0;transform:scale(1)}45.07%{opacity:0;transform:scale(1)}45.423%{opacity:.95;transform:scale(1)}50.352%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.1831)}}
@keyframes n1bb-o{0%{opacity:0}78.082%{opacity:0}82.192%{opacity:1}100%{opacity:1}}
@keyframes n1k2-o{0%{opacity:0}94.815%{opacity:0}100%{opacity:1}}
@keyframes n1a3-o{0%{stroke-dashoffset:0;opacity:0}54.93%{stroke-dashoffset:0;opacity:0}55.282%{stroke-dashoffset:0;opacity:1}61.268%{stroke-dashoffset:-1;opacity:1}61.62%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.2483;opacity:0}}
@keyframes n1c3-o{0%{opacity:0;transform:scale(1)}61.268%{opacity:0;transform:scale(1)}61.62%{opacity:.95;transform:scale(1)}66.549%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.1649)}}
@keyframes n1b3-o{0%{stroke-dashoffset:0;opacity:0}63.028%{stroke-dashoffset:0;opacity:0}63.38%{stroke-dashoffset:0;opacity:1}65.493%{stroke-dashoffset:-1;opacity:1}65.845%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.2707;opacity:0}}
@keyframes n1br-o{0%{opacity:0;transform:scaleY(.2)}83.636%{opacity:0;transform:scaleY(.2)}85.455%{opacity:1;transform:scaleY(1)}100%{opacity:1;transform:scaleY(1)}}
@keyframes n1bs0-o{0%{opacity:0;transform:translate(0,0)}65.493%{opacity:0;transform:translate(0,0)}65.845%{opacity:1;transform:translate(0,0)}71.127%{opacity:0;transform:translate(-26px,-30px)}100%{opacity:0;transform:translate(0,0)}}
@keyframes n1bs1-o{0%{opacity:0;transform:translate(0,0)}65.493%{opacity:0;transform:translate(0,0)}65.845%{opacity:1;transform:translate(0,0)}71.127%{opacity:0;transform:translate(-36px,2px)}100%{opacity:0;transform:translate(0,0)}}
@keyframes n1bs2-o{0%{opacity:0;transform:translate(0,0)}65.493%{opacity:0;transform:translate(0,0)}65.845%{opacity:1;transform:translate(0,0)}71.127%{opacity:0;transform:translate(-24px,32px)}100%{opacity:0;transform:translate(0,0)}}
@keyframes n1bs3-o{0%{opacity:0;transform:translate(0,0)}65.493%{opacity:0;transform:translate(0,0)}65.845%{opacity:1;transform:translate(0,0)}71.127%{opacity:0;transform:translate(-6px,-44px)}100%{opacity:0;transform:translate(0,0)}}
@keyframes n1bs4-o{0%{opacity:0;transform:translate(0,0)}65.493%{opacity:0;transform:translate(0,0)}65.845%{opacity:1;transform:translate(0,0)}71.127%{opacity:0;transform:translate(-8px,46px)}100%{opacity:0;transform:translate(0,0)}}
@keyframes n1n3-o{0%{opacity:0;transform:scale(1)}54.93%{opacity:0;transform:scale(1)}55.282%{opacity:.95;transform:scale(1)}60.211%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.2174)}}
@keyframes n1k3-o{0%{opacity:0}96.392%{opacity:0}100%{opacity:1}}
@keyframes n1a4-o{0%{stroke-dashoffset:0;opacity:0}78.873%{stroke-dashoffset:0;opacity:0}79.225%{stroke-dashoffset:0;opacity:1}85.211%{stroke-dashoffset:-1;opacity:1}85.563%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.4675;opacity:0}}
@keyframes n1c4-o{0%{opacity:0;transform:scale(1)}85.211%{opacity:0;transform:scale(1)}85.563%{opacity:.95;transform:scale(1)}90.493%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.3429)}}
@keyframes n1b4-o{0%{stroke-dashoffset:0;opacity:0}86.972%{stroke-dashoffset:0;opacity:0}87.324%{stroke-dashoffset:0;opacity:1}92.958%{stroke-dashoffset:-1;opacity:1}93.31%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.6545;opacity:0}}
@keyframes n1n4-o{0%{opacity:0;transform:scale(1)}92.958%{opacity:0;transform:scale(1)}93.31%{opacity:.95;transform:scale(1)}98.239%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.7902)}}
@keyframes n1k4-o{0%{opacity:0}97.417%{opacity:0}100%{opacity:1}}
/* issue 287：窄螢幕（圖寬約 280–570px）圖內文字依 viewBox 縮到 6–8px 讀不到；放大字級（28 單位約 11px 起），標籤晶片加寬加高並避開節點名稱。 */
@media (max-width: 38rem) {
.hfx-n1 .n1-lbl{font-size:28px;letter-spacing:.04em;transform:translateY(4px)}
.hfx-n1 .n1-lblbg{x:200px;y:212px;width:300px;height:40px;rx:20px}
.hfx-n1 .n1-nl{font-size:28px;letter-spacing:.04em;transform:translateY(8px)}
.hfx-n1 .n1-chip rect{height:40px;rx:20px}
.hfx-n1 .n1-chip text{font-size:28px;letter-spacing:.02em}
.hfx-n1 #hn1k1 rect{x:470px;y:192px;width:220px}
.hfx-n1 #hn1k1 text{transform:translate(-5px,12px)}
.hfx-n1 #hn1k2 rect{x:470px;y:410px;width:220px}
.hfx-n1 #hn1k2 text{transform:translate(-40px,15px)}
.hfx-n1 #hn1k3 rect{x:515px;y:553px;width:170px}
.hfx-n1 #hn1k3 text{transform:translate(0,4px)}
.hfx-n1 #hn1k4 rect{x:50px;y:580px;width:190px}
.hfx-n1 #hn1k4 text{transform:translate(0,20px)}
}