/* Bumps: one line in mono, the pixels after it are the state. */
.bump { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 500 11px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-70); }
.bump b { font-weight: 500; }
.bump .px { width: 6px; height: 6px; border-radius: 1px; background: var(--bone-45, rgba(255, 250, 248, .45)); flex: none; }
.bump .px.bone { background: var(--bone); box-shadow: 0 0 8px rgba(255, 250, 248, .45); }
.bump .px.g { background: var(--g); box-shadow: 0 0 8px var(--g); }
.bump .px.r { background: var(--r); box-shadow: 0 0 8px var(--r); }
.bump .px.b { background: #2E7BFF; box-shadow: 0 0 8px #2E7BFF; }
/* on the loading plate the bump stands where the tip stood */
#osloading .ld-tip.has-bump { font: inherit; max-width: 760px; }
#osloading .ld-tip.has-bump .bump { color: var(--bone-70); }
/* before the saver: the card, full ink, the line centred, then it lets the slides through */
.sv-bump { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 0 12vw; text-align: center; background: #0E0F12; opacity: 1; transition: opacity .7s ease; }
.sv-bump .bump { justify-content: center; font-size: clamp(13px, 1.5vw, 21px); letter-spacing: .2em; color: var(--bone); }
.sv-bump.off { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sv-bump { transition: none; } }