.c3pill{display:flex;justify-content:center;padding:14px 16px 0}.c3pill span{background:#fff8e1;border:1px solid #f1d58a;color:#5a4300;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600}.c3pill a{color:#154477}
.c3steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:1100px;counter-reset:c3}
.c3steps li{counter-increment:c3;display:flex}
.c3steps button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;background:#fff;border:1px solid #dce6e9;border-radius:16px;padding:14px 14px 16px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s,box-shadow .2s}
.c3steps button:hover{border-color:#99cf18;box-shadow:0 4px 14px rgba(21,68,119,.10)}
.c3steps button:focus-visible{outline:3px solid #0063c6;outline-offset:2px}
.c3steps button::before{content:counter(c3);width:26px;height:26px;border-radius:50%;background:#99cf18;color:#154477;font-weight:800;font-size:13px;display:grid;place-items:center;margin-bottom:6px}
.c3steps b{color:#154477;font-size:16px}.c3steps span{font-size:13.5px;line-height:1.4;color:#536575}
.cyber-art{position:relative}
.c3labels{position:absolute;inset:15px;pointer-events:none}
.c3lab{position:absolute;transform:translate(-50%,-50%);background:#fff;color:#154477;font:600 12px/16px "DM Sans",Arial,sans-serif;padding:4px 9px;border-radius:999px;box-shadow:0 0 0 1px rgba(21,68,119,.2),0 2px 6px rgba(14,47,83,.12);white-space:nowrap}
.cyber-art .c3{opacity:0;transition:opacity .65s}
.cyber-art .win{transition:opacity .65s}
.c3like{font-weight:700;color:#154477!important;margin:-4px 0 6px}
.c3pic{font-size:15px!important;line-height:1.6!important;background:#f0f6f6;border-radius:12px;padding:10px 14px;margin-top:10px}
.c3pic strong{color:#154477}
.cyber-chapter .button{margin-top:18px}
.c3wave{animation:c3wave 1.6s ease-in-out infinite}@keyframes c3wave{50%{opacity:.25}}
.c3flow{stroke-dasharray:3 12;animation:c3flow 1.4s linear infinite}@keyframes c3flow{to{stroke-dashoffset:-60}}
.c3needle{transform-box:view-box;transform-origin:80px 210px}
#cyber-counter{display:none}
@media(max-width:1000px){.c3steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.c3labels{display:none}}
@media(max-width:560px){.c3steps{grid-template-columns:repeat(2,minmax(0,1fr))}.c3steps button{padding:12px}}
@media(prefers-reduced-motion:reduce){.c3wave,.c3flow{animation:none!important}}
.cyber-art[data-scene="0"] .s0{opacity:1}
.cyber-art[data-scene="1"] .s1{opacity:1}
.cyber-art[data-scene="2"] .s2{opacity:1}
.cyber-art[data-scene="3"] .s3{opacity:1}
.cyber-art[data-scene="4"] .s4{opacity:1}
.cyber-art[data-scene="5"] .s5{opacity:1}
.cyber-art[data-scene="6"] .s6{opacity:1}
.cyber-art[data-scene="7"] .s7{opacity:1}
.cyber-art[data-scene="1"] .win{opacity:0}.cyber-art[data-scene="2"] .win{opacity:0}.cyber-art[data-scene="3"] .win{opacity:0}.cyber-art[data-scene="4"] .win{opacity:0}.cyber-art[data-scene="5"] .win{opacity:0}.cyber-art[data-scene="6"] .win{opacity:0}