/* Fixed header: the name on the left, the narrative step indicator on the right. */

.hud{position:fixed;z-index:20;top:0;left:0;right:0;padding:16px var(--pad);
  display:flex;align-items:center;gap:16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,14,.82),transparent)}
.hud__name{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);pointer-events:auto;text-decoration:none;white-space:nowrap}
.hud__name b{color:var(--ink);font-weight:600}

.hud__steps{margin-left:auto;display:flex;gap:5px;align-items:center}
/* The active chip widens as well as lighting up, so the state reads without colour. */
.hud__step{width:26px;height:3px;border-radius:99px;background:var(--line);transition:background .5s,width .5s}
.hud__step.on{background:var(--live);width:44px}
@media (max-width:640px){.hud__step{width:16px}.hud__step.on{width:28px}}