/* Story: the two-level animation (adder, async FIFO) on the DV page. */
.story{margin-top:44px;border-radius:16px;background:#161d24;color:#c4cfd9;box-shadow:0 30px 60px -34px rgba(20,14,6,.85),0 0 0 1px #0d1216;padding:20px 24px 24px;font-family:var(--mono)}
.sbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ssteps{list-style:none;display:flex;gap:6px;padding:0;margin:0;counter-reset:s}
.ssteps li{counter-increment:s;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6f8191;padding:6px 12px;border:1px solid #2c3843;border-radius:99px;transition:.3s}
.ssteps li::before{content:counter(s) "  "}
.ssteps li.on{color:#161d24;background:#e08a58;border-color:#e08a58}
.sright{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lvls{display:flex;gap:4px;padding:3px;border-radius:99px;background:#0f151a;border:1px solid #2c3843}
.lvls button{font:500 10.5px var(--mono);letter-spacing:.06em;color:#8fa0af;background:none;border:0;padding:5px 11px;border-radius:99px;cursor:pointer}
.lvls button.on{background:#2c3843;color:#eef2f5}
#l2{position:absolute;left:0;top:0;width:83%;height:260px;display:none}
.sstage.l2 #l2{display:block}
.sstage.l2 .st:not(.st-log),.sstage.l2 .swires,.sstage.l2 .tok{display:none}
#l2 .ln2{fill:none;stroke:#3a4652;stroke-width:1.6}
#l2 .b2s{fill:#1d262f;stroke:#33404c}
#l2 .b2d{fill:#232c35;stroke:#4a5866}
#l2 .slot{fill:rgba(255,255,255,.02);stroke:#4a5866;stroke-dasharray:3 3}
#l2 .l2h{font:500 10px var(--mono);letter-spacing:.14em;fill:#8fa0af}
#l2 .l2t{font:400 10.5px var(--mono);fill:#6f8191}
#l2 .l2g{font:600 13px var(--sans);fill:#c4cfd9}
#l2 .l2g.ok{fill:#7fd1a0}
#l2 .l2g.bad{fill:#ff8c7a}
#l2 .sb{fill:#1a2229;stroke:#4a5866;transition:stroke .3s,fill .3s}
#l2 .sb.ok{stroke:#7fd1a0}
#l2 .sb.bad{stroke:#ff8c7a;fill:#2a1e1d}
#l2 .tap{fill:none;stroke:#e08a58;stroke-width:1.3;stroke-dasharray:3 4;opacity:.7}
#l2 .clkw{fill:none;stroke:#8fa0af;stroke-width:1.4;stroke-dasharray:4 2}
#l2 .clkw.fast{animation:flow .5s linear infinite}
#l2 .clkw.slow{animation:flow 1.6s linear infinite}
#l2 #l2flag.full{fill:#e08a58;font-weight:600}
#l2 .pk circle{fill:#e08a58}
#l2 .pk text{font:700 12px var(--sans);fill:#161d24}
#l2 .pk.bad circle{fill:#ff8c7a}
.stitle{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#e08a58}
.snarr{margin:16px 0 18px;font:400 clamp(16px,1.5vw,20px)/1.5 var(--sans);color:#eef2f5;min-height:3em;max-width:70ch}
.sscroll{overflow-x:auto}
.sstage{position:relative;height:260px;min-width:760px}
.swires{position:absolute;inset:0;width:100%;height:100%}
.swires path{fill:none;stroke:#3a4652;stroke-width:1.5;vector-effect:non-scaling-stroke}
.swires .dash{stroke-dasharray:4 4}
.st{position:absolute;border:1px solid #33404c;border-radius:10px;background:#1d262f;padding:12px 14px;transition:border-color .3s,box-shadow .3s,background .3s}
.st .lbl{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8fa0af}
.st .v{font:600 22px var(--sans);color:#f1ebdc;margin:8px 0 4px;transition:color .3s}
.st small{font:400 10.5px var(--mono);color:#6f8191}
.st.hot{border-color:#e08a58;box-shadow:0 0 0 3px rgba(224,138,88,.15)}
.st.good{border-color:#7fd1a0;box-shadow:0 0 0 3px rgba(127,209,160,.15)}
.st.good .v{color:#7fd1a0}
.st.bad{border-color:#ff8c7a;box-shadow:0 0 0 3px rgba(255,140,122,.18);background:#2a1e1d}
.st.bad .v{color:#ff8c7a}
.st-test{left:0;top:80px;width:19%}
.st-chip{left:33%;top:50px;width:23%;height:160px;background:#232c35;border-color:#4a5866}
.st-chip .pins{position:absolute;inset:-9px;border-radius:12px;pointer-events:none;background: repeating-linear-gradient(90deg,transparent 0 14px,#a8481f 14px 17px) top/100% 7px no-repeat, repeating-linear-gradient(90deg,transparent 0 14px,#a8481f 14px 17px) bottom/100% 7px no-repeat;opacity:.8;-webkit-mask:linear-gradient(90deg,transparent 12px,#000 12px calc(100% - 12px),transparent 0);mask:linear-gradient(90deg,transparent 12px,#000 12px calc(100% - 12px),transparent 0)}
.st-chip .v{font-size:18px;color:#c4cfd9}
.st-chip .fix{position:absolute;right:10px;top:10px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#161d24;background:#7fd1a0;padding:3px 8px;border-radius:99px;opacity:0;transition:.3s}
.st-chip .fix.on{opacity:1}
.st-ref{left:66%;top:0;width:16%}
.st-chk{left:66%;top:150px;width:16%}
.st-log{right:0;top:0;width:15.5%;height:260px;overflow:hidden}
.st-log ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.st-log li{font:500 11.5px var(--mono);color:#c4cfd9;animation:lin .35s ease}
.st-log li.ok::after{content:"  ✓";color:#7fd1a0}
.st-log li.no{color:#ff8c7a}
.st-log li.no::after{content:"  ✗ bug"}
@keyframes lin{from{opacity:0;transform:translateX(8px)}}
.tok{position:absolute;left:0;top:0;padding:6px 12px;border-radius:99px;background:#e08a58;color:#161d24;font:700 14px var(--sans);white-space:nowrap;box-shadow:0 6px 16px -6px rgba(224,138,88,.7);transition:left .9s cubic-bezier(.6,0,.3,1),top .9s cubic-bezier(.6,0,.3,1),opacity .3s,background .3s;opacity:0;transform:translate(-50%,-50%);z-index:3}
.tok.bad{background:#ff8c7a}
@media (max-width:900px){
  .story{padding:16px}
}
.snarr{font-size:var(--t-lede)}
.ssteps li,.lvls button,.stitle,.st .lbl,.st small,.st-chip .fix,.st-log li,#l2 .l2h,#l2 .l2t{font-size:var(--t-label)}
@media (max-width:1000px){
  .sscroll{overflow:visible}
  .sstage{height:auto;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .sstage .swires{display:none}
  .sstage .st{position:relative;left:auto;right:auto;top:auto;width:auto;height:auto;min-height:118px}
  .st-log{grid-column:1/-1;min-height:96px}
  .st-log ul{flex-direction:row;flex-wrap:wrap;gap:6px 16px}
  .sstage.l2{display:flex;flex-direction:column;gap:12px}
  .sstage.l2 #l2{position:relative;width:100%;height:auto;order:0}
  .sstage.l2 .st-log{order:1}
}
@media (max-width:640px){
  .sstage{grid-template-columns:1fr 1fr}
  .st-chip{grid-column:1/-1}
  .st .v{font-size:19px}
  .lvls{display:none}
  .snarr{min-height:4.5em}
}
@keyframes flow{to{stroke-dashoffset:-12}}