/* issue 236 頁首效果 checkpoint-gate：由示意（cf-mock/kits/hero-fx）轉成播放一次、停在完成構圖；色彩只用站上 token。 */
.hfx-c1{--hx-bright:color-mix(in srgb,var(--accent) 12%,var(--paper));--hx-hot:var(--accent);}
.hfx-c1 *{transform-box:fill-box;transform-origin:center}
.hfx-c1 .c1-lane{stroke:var(--accent);stroke-opacity:.2;stroke-width:1.3;stroke-dasharray:3 8;stroke-linecap:round}
.hfx-c1 .c1-cap{font-size:16px;letter-spacing:.12em;fill:var(--muted-on-dark)}
.hfx-c1 .c1-cap.c1-mid{font-size:14px;fill:var(--accent);opacity:.8}
.hfx-c1 .c1-gate{fill:color-mix(in srgb,var(--accent) 4%,transparent);stroke:var(--accent);stroke-opacity:.6;stroke-width:1.8}
.hfx-c1 use{fill:none;stroke:var(--muted-on-dark);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hfx-c1 .c1-nm{opacity:.5;transform:translateX(var(--sx))}
.hfx-c1 .c1-bad{opacity:0}
.hfx-c1 .c1-bad use,.hfx-c1 .c1-bad2 use{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 18%,transparent)}
.hfx-c1 .c1-flash{fill:none;stroke:var(--accent);stroke-width:3;opacity:0}
.hfx-c1 .c1-badge circle{fill:var(--deeper);stroke:var(--accent);stroke-width:2.4}
.hfx-c1 .c1-badge .c1-lkb{fill:var(--accent);stroke:none}
.hfx-c1 .c1-badge .c1-lks{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.hfx-c1 #hc1b2{opacity:0}
.hfx-c1 .c1-inbox{fill:none;stroke:var(--muted-on-dark);stroke-opacity:.55;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hfx-c1 .c1-inbox .c1-mini{stroke-opacity:.8}
.hfx-c1 .c1-pos{transform:translateX(626px)}
.hfx-c1 .c1-ok2{opacity:0}
.hfx-c1 .c1-bad2 .c1-al{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 5}
.hfx-c1 .c1-bad2 text{font-size:20px;font-weight:800;fill:var(--accent)}
.hfx-c1 .c1-pull{stroke:var(--accent);stroke-width:2.4;stroke-dasharray:1 .0;opacity:0}
.hfx-c1 .c1-file3{opacity:0}
.hfx-c1 .c1-dup use{stroke:var(--accent);stroke-dasharray:4 4;fill:color-mix(in srgb,var(--accent) 10%,transparent)}
.hfx-c1 .c1-dup .c1-xx{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round}
.hfx-c1 .c1-chip rect{fill:none;stroke:var(--accent);stroke-opacity:.35;stroke-width:1.5}
.hfx-c1 .c1-chip text{font-size:16px;font-weight:700;letter-spacing:.1em;fill:var(--muted-on-dark)}
.hfx-c1 .c1-chipon rect{fill:var(--accent);stroke:none}
.hfx-c1 .c1-chipon text{font-size:16px;font-weight:700;letter-spacing:.1em;fill:var(--accent-on)}
#hc1n00{--sx:90px}
#hc1n01{--sx:530px}
#hc1n10{--sx:115px}
#hc1n11{--sx:555px}
#hc1n20{--sx:140px}
#hc1n21{--sx:580px}
.hfx-c1 #hc1sc{transform:translateY(0)}
.hfx-c1 #hc1n00{opacity:.5;transform:translateX(var(--sx))}
.hfx-c1 #hc1n01{opacity:.5;transform:translateX(var(--sx))}
.hfx-c1 #hc1n10{opacity:.5;transform:translateX(var(--sx))}
.hfx-c1 #hc1n11{opacity:.5;transform:translateX(var(--sx))}
.hfx-c1 #hc1n20{opacity:.5;transform:translateX(var(--sx))}
.hfx-c1 #hc1n21{opacity:.5;transform:translateX(var(--sx))}
.hfx-c1 #hc1e1{opacity:0;transform:translateX(76.1053px) scale(0.7937)}
.hfx-c1 #hc1f1{opacity:0;transform:scale(1.3231)}
.hfx-c1 #hc1b1{opacity:1;transform:scale(1)}
.hfx-c1 #hc1e2{opacity:0;transform:translateX(171.6px) scale(0.608)}
.hfx-c1 #hc1e2n{opacity:0}
.hfx-c1 #hc1e2b{opacity:0;transform:scale(1)}
.hfx-c1 #hc1pl{stroke-dashoffset:-0.12;opacity:0}
.hfx-c1 #hc1b2{opacity:1;transform:scale(1)}
.hfx-c1 #hc1e3{opacity:0;transform:translateX(186.0941px) scale(0.8353)}
.hfx-c1 #hc1dp{opacity:0;transform:scale(0.6196)}
.hfx-c1 #hc1c0{opacity:1}
.hfx-c1 #hc1c1{opacity:1}
.hfx-c1 #hc1c2{opacity:1}
@media (prefers-reduced-motion: no-preference) {
html:not([data-motion="off"]) .hfx-c1 #hc1sc{animation:c1sc 3.5s ease-in-out 0s 3.2 both}
html:not([data-motion="off"]) .hfx-c1 #hc1n00{animation:c1nm-o 6.5s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1n01{animation:c1nm-o 6.5s linear 3.5s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1n10{animation:c1nm-o 6.5s linear 1.4s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1n11{animation:c1nm-o 6.5s linear 4.9s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1n20{animation:c1nm-o 6.5s linear 2.6s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1n21{animation:c1nm-o 6.5s linear 6.1s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1e1{animation:c1e1-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1f1{animation:c1f1-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1b1{animation:c1b1-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1e2{animation:c1e2-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1e2n{animation:c1e2n-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1e2b{animation:c1e2b-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1pl{animation:c1pl-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1b2{animation:c1b2-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1e3{animation:c1e3-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1dp{animation:c1dp-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1c0{animation:c1c0-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1c1{animation:c1c1-o 11.2s linear 0s 1 both}
html:not([data-motion="off"]) .hfx-c1 #hc1c2{animation:c1c2-o 11.2s linear 0s 1 both}
}
@keyframes c1sc{0%{transform:translateY(0)}50%{transform:translateY(430px)}100%{transform:translateY(0)}}
@keyframes c1nm-o{0%{opacity:0;transform:translateX(-40px)}6.154%{opacity:.5;transform:translateX(-40px)}100%{opacity:.5;transform:translateX(var(--sx))}}
@keyframes c1e1-o{0%{opacity:0;transform:translateX(-30px) scale(1)}12.5%{opacity:0;transform:translateX(-30px) scale(1)}14.286%{opacity:1;transform:translateX(-30px) scale(1)}35.714%{opacity:1;transform:translateX(296px) scale(1)}40.179%{opacity:0;transform:translateX(330px) scale(.3)}100%{opacity:0;transform:translateX(76.1053px) scale(0.7937)}}
@keyframes c1f1-o{0%{opacity:0;transform:scale(.4)}35.268%{opacity:0;transform:scale(.4)}35.714%{opacity:.9;transform:scale(.4)}43.75%{opacity:0;transform:scale(3.4)}100%{opacity:0;transform:scale(1.3231)}}
@keyframes c1b1-o{0%{opacity:0;transform:scale(.3)}39.286%{opacity:0;transform:scale(.3)}42.411%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes c1e2-o{0%{opacity:0;transform:translateX(-30px) scale(1)}16.071%{opacity:0;transform:translateX(-30px) scale(1)}17.857%{opacity:1;transform:translateX(-30px) scale(1);animation-timing-function:linear}48.214%{opacity:1;transform:translateX(626px) scale(1)}59.821%{opacity:1;transform:translateX(626px) scale(1);animation-timing-function:cubic-bezier(.5,0,.3,1)}75.893%{opacity:1;transform:translateX(346px) scale(1)}80.357%{opacity:0;transform:translateX(330px) scale(.3)}100%{opacity:0;transform:translateX(171.6px) scale(0.608)}}
@keyframes c1e2n-o{0%{opacity:1}52.679%{opacity:1}54.464%{opacity:0}100%{opacity:0}}
@keyframes c1e2b-o{0%{opacity:0;transform:scale(1)}52.679%{opacity:0;transform:scale(1)}54.464%{opacity:1;transform:scale(1.35)}57.143%{opacity:1;transform:scale(1)}76.786%{opacity:1;transform:scale(1)}80.357%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes c1pl-o{0%{stroke-dashoffset:1;opacity:0}58.929%{stroke-dashoffset:1;opacity:0}59.821%{stroke-dashoffset:0;opacity:1}75.893%{stroke-dashoffset:-1;opacity:1}80.357%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-0.12;opacity:0}}
@keyframes c1b2-o{0%{opacity:0;transform:scale(.3)}79.464%{opacity:0;transform:scale(.3)}82.589%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes c1e3-o{0%{opacity:0;transform:translateX(-30px) scale(1)}20.536%{opacity:0;transform:translateX(-30px) scale(1)}22.321%{opacity:1;transform:translateX(-30px) scale(1)}44.643%{opacity:1;transform:translateX(600px) scale(1)}49.107%{opacity:0;transform:translateX(626px) scale(.5)}100%{opacity:0;transform:translateX(186.0941px) scale(0.8353)}}
@keyframes c1dp-o{0%{opacity:0;transform:scale(.4)}60.714%{opacity:0;transform:scale(.4)}63.393%{opacity:1;transform:scale(1.15)}66.071%{opacity:1;transform:scale(1)}73.214%{opacity:1;transform:scale(1)}79.464%{opacity:0;transform:scale(.8)}100%{opacity:0;transform:scale(0.6196)}}
@keyframes c1c0-o{0%{opacity:0}42.857%{opacity:0}45.982%{opacity:1}100%{opacity:1}}
@keyframes c1c1-o{0%{opacity:0}83.036%{opacity:0}86.161%{opacity:1}100%{opacity:1}}
@keyframes c1c2-o{0%{opacity:0}84.821%{opacity:0}87.946%{opacity:1}100%{opacity:1}}
/* issue 287：窄螢幕（圖寬約 280–570px）圖內標籤依 viewBox 縮到 5–8px 讀不到；改放大字級（28 單位約 11px 起），標籤晶片同步加寬加高。只動排版，不動播放與完成構圖。 */
@media (max-width: 38rem) {
.hfx-c1 .c1-cap,.hfx-c1 .c1-cap.c1-mid{font-size:28px;letter-spacing:.04em}
.hfx-c1 .c1-bad2 text{font-size:28px}
.hfx-c1 .c1-chip rect,.hfx-c1 .c1-chipon rect{height:40px;rx:20px;transform:translateY(-5px)}
.hfx-c1 .c1-chip text,.hfx-c1 .c1-chipon text{font-size:28px;letter-spacing:0;transform:translateY(4px)}
.hfx-c1 .c1-wide rect{x:455px;width:215px}
}