/* ════════════════════════════════════════════════════════════════════════
   zText_demo.css — a ONE-OFF ribbon box (opt in: zBrush [page, leaf, demo.zText_demo]).
   Proof for the Text leaf's "div — a box of your own" lesson: a zText with
   semantic: div + an author _zClass becomes a real styled container — no
   dedicated block event, no HTML written. Deliberately look-at-me (gradient
   pill + glow) so it reads as clearly NOT a paragraph.
   ════════════════════════════════════════════════════════════════════════ */
.demo-ribbon {
    display:        inline-block;
    width:          fit-content;   /* hug the words even in stretching containers */
    align-self:     flex-start;
    padding:        0.65rem 1.5rem;
    border-radius:  999px;
    font-weight:    700;
    letter-spacing: 0.02em;
    color:          #06251b;
    background:     linear-gradient(135deg, #34d399 0%, #a7f3d0 100%);
    box-shadow:     0 8px 24px rgba(52, 211, 153, 0.35);
}