/* 25 pipeline */
.pipe{position:absolute;inset:0}
.pipe svg{position:absolute;left:0;top:0;width:1680px;height:420px;overflow:visible}
.pipe .arc{fill:none;stroke:var(--g3);stroke-width:2.5;stroke-dasharray:8 8}
.stg{position:absolute;top:210px;width:240px;text-align:center;cursor:pointer}
.stg .stripe{width:170px;height:120px;margin:0 auto;display:grid;place-items:center;font-family:"Druk";font-size:46px;transition:filter .3s,transform .4s var(--pop)}
.stg:hover .stripe{filter:brightness(1.25);transform:skewX(-22deg) translateY(-10px)}
.stg .nm{margin-top:26px;font-size:25px;line-height:31px;padding:0 10px}
.stg.is-on .stripe{box-shadow:0 0 0 5px #fff}
.gate{position:absolute;top:252px;width:36px;height:36px;margin-left:-18px}
.gate .lock{width:36px;height:36px;transition:stroke .3s,transform .3s var(--pop)}
.gate.open .lock{stroke:#fff;transform:translateY(-6px) rotate(-12deg)}
.chip{position:absolute;top:150px;left:var(--cx,120px);width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#fff;box-shadow:0 0 30px 6px rgba(251,195,165,.7);
  transition:left .8s var(--ease)}
.pipefoot{position:absolute;left:0;right:0;top:470px}
.pipefoot .note{margin-top:14px}

/* 27 spec doc */
.spec-doc{padding:34px 36px;font-size:22px}
.spec-doc .sec{display:flex;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.spec-doc .sec i{font-style:normal;font-family:"Druk";font-size:20px;color:var(--accent);width:32px}
.spec-doc .sec .ln{flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.14)}
.spec-doc .sec b{font-weight:500;width:260px;flex:none}
.ncl{display:flex;align-items:center;gap:16px;margin-top:26px}
.ncl code{padding:8px 16px;border:2px solid var(--accent);border-radius:10px;color:var(--g3);font-size:22px;animation:blink 1.2s steps(2) infinite;transition:opacity .5s}
@keyframes blink{50%{border-color:transparent}}
.ncl .lock{width:40px;height:40px;transition:all .4s var(--pop)}
.spec-doc.ok .ncl code{text-decoration:line-through;opacity:.4;animation:none}
.spec-doc.ok .ncl .lock{stroke:#7bd88f;transform:rotate(-15deg) translateY(-6px)}
.spec-doc .go{color:#7bd88f;font-weight:500;opacity:0;transition:opacity .4s}
.spec-doc.ok .go{opacity:1}
.parts6{list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:16px}
.parts6 li{counter-increment:p;display:flex;gap:20px;font-size:29px;line-height:38px}
.parts6 li::before{content:counter(p);font-family:"Druk";color:var(--accent);width:34px;flex:none}

/* 28 trace */
.trace{position:relative;height:430px}
.trace svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trace .col{position:absolute;top:0;width:520px;display:flex;flex-direction:column;gap:18px}
.trace .it{height:74px;display:flex;align-items:center;padding:0 26px;font-size:24px;justify-content:space-between}
.trace .it code{font-size:21px}
.trace .bad{border-color:#ff6b6b !important;animation:shake .6s 2s}
.trace .tag{font-size:18px;color:#ff8a8a}
.tbars{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px}
.tbar .lbl{display:flex;justify-content:space-between;font-size:24px;margin-bottom:10px}
.tbar .tr{height:22px;border-radius:11px;background:rgba(255,255,255,.12);overflow:hidden}
.tbar .tr b{display:block;height:100%;width:0;background:var(--accent);border-radius:11px;transition:width 1.6s var(--ease)}

/* 29 task graph */
.tg{width:100%;height:560px;overflow:visible}
.tg line,.tg path{stroke:rgba(255,255,255,.35);stroke-width:3;fill:none}
.tg .nd circle{fill:var(--bg);stroke:#fff;stroke-width:3;transition:fill .3s,stroke .3s}
.tg .nd text{fill:#fff;font-family:"Druk";font-size:24px;text-anchor:middle;dominant-baseline:central}
.tg .nd.is-on circle,.tg .nd.is-on rect{fill:var(--accent);stroke:var(--accent)}
.tg .nd rect{fill:var(--bg);stroke:var(--g3);stroke-width:3;transition:fill .3s}
.tg .cap{fill:var(--muted);font-family:"Museo";font-size:20px;text-anchor:middle}