.snapseg .seglabel{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snapseg.cur .seglabel{color:var(--gold)}
.snapseg.on .seglabel{color:var(--ink-2)}
.snapintro{font-size:14px;color:var(--ink-2);margin:0;max-width:68ch;line-height:1.6}
.snapnav .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:760px){
  .snapseg .seglabel{display:none}
  .snapnav .spread{flex-direction:column;align-items:stretch;gap:12px}
}

/* ---------- the sign-in gate: reset and set-password ---------- */
.gatelink{display:block;width:100%;margin:16px 0 0;background:none;border:0;padding:0;
  font:inherit;font-size:12.5px;color:rgba(234,240,236,.42);text-align:center;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.gatelink:hover{color:rgba(234,240,236,.72)}
.gatenote{margin:0 0 4px;font-size:13px;line-height:1.55;color:rgba(234,240,236,.52);text-align:center}
.gateok{margin:12px 0 0;font-size:13px;line-height:1.55;color:#C7B189;text-align:center}


/* The card you have just been moved to, briefly. */
.onbstep.justnow{box-shadow:0 0 0 2px var(--gold-300,#C9A227),0 10px 30px rgba(0,0,0,.08)}

/* Confetti sits above everything and ignores the mouse. */
canvas.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}

/* The whole lesson row is the target, not just the play icon.
   Negative margins keep the text aligned while the hover state
   reads as a card rather than a full-bleed stripe. */
.lesson{cursor:pointer;margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:12px;transition:background .15s ease}
.lesson:hover{background:var(--green-50,#EDF2EF)}
.lesson:hover .play{transform:scale(1.06)}
.lesson .play{transition:transform .15s ease}