/* How it works, version B pictures (tools/draw_how_b.py). */
#how .pic{background:var(--ab-panel,#eef3fc)}
/* Only the story (.loop-fade) fades before a replay; the stage and its ambient loops stay put. */
#how .pic.scene.fading .art{opacity:1}
#how .ab .a-comet{opacity:0}
#how .ab .ab-chip{fill:#eef2fb}
#how .ab .ab-ex{fill:rgba(15,35,82,.07)}#how .ab .ab-ex-t{fill:var(--ink-3);font-weight:600}
#how .ab .hb-hair{fill:none;stroke:#e6ebf5;stroke-width:1}
#how .ab .hb-acc{fill:var(--accent)}#how .ab .hb-live{fill:var(--cp-cyan)}
#how .ab .hb-track{fill:#eef2fb}
#how .ab .hb-in{fill:#eef2fb}#how .ab .hb-in-s{fill:#d3dcef}
#how .ab .hb-out{fill:var(--navy)}#how .ab .hb-out-s{fill:#fff;opacity:.36}
#how .ab .hb-ring0{stroke:#d5dcea}
#how .ab .hb-ans{fill:#c3cff0}
#how .ab .hb-gtrack{stroke:#e6ebf5}#how .ab .hb-gseg{stroke:var(--accent)}
#how .ab .hb-busy{fill:#f1f4fa}#how .ab .hb-busy-b{fill:#cdd6ec}
#how .ab .hb-col{fill:rgba(47,75,192,.05)}#how .ab .hb-sel{stroke:var(--accent)}
#how .ab .hb-book{fill:var(--ok-bg);stroke:#bfe3cf}#how .ab .hb-ok-t{fill:var(--ok);font-weight:650}#how .ab .hb-ok-s{fill:#bfe3cf}

.hb-grow{transform-box:fill-box;transform-origin:left center}
.scene.wait .hb-grow{transform:scaleX(0)}
.scene.play .hb-grow{animation:hb-grow .6s var(--ease) var(--d,0s) both}
.scene.wait .hb-draw{stroke-dashoffset:1}
.scene.play .hb-draw{animation:hb-draw .55s var(--ease) var(--d,0s) both}
@keyframes hb-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes hb-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .hb-grow,.hb-draw{animation:none!important}
  .scene.wait .hb-grow{transform:none}.scene.wait .hb-draw{stroke-dashoffset:0}
}