.rn-figure { --rn-ink:#233d4b; --rn-blue:#357a9a; --rn-line:#b9d2df; --rn-soft:#edf6fa; --rn-warn:#9b3f53; --rn-ok:#3e8c6c; border:0; border-radius:0; padding:1rem 0; background:transparent; }
.rn-figure code, .rn-figure b, .rn-figure span { overflow-wrap:anywhere; }
.rn-flow { display:flex; align-items:stretch; gap:.45rem; margin:.75rem 0; }
.rn-card { flex:1 1 0; min-width:0; padding:.72rem; border:1px solid var(--rn-line); border-top:4px solid var(--rn-blue); border-radius:.5rem; background:var(--rn-soft); }
.rn-card b, .rn-card span, .rn-card > code { display:block; }
.rn-card b { color:var(--rn-ink); margin-bottom:.35rem; }
.rn-card span { font-size:.87rem; line-height:1.5; }
.rn-card--warn { border-top-color:var(--rn-warn); background:#fcf0f2; }
.rn-card--ok { border-top-color:var(--rn-ok); background:#eef9f3; }
.rn-card--violet { border-top-color:#657cad; background:#f0f3fc; }
.rn-arrow { flex:0 0 1rem; align-self:center; color:var(--rn-blue); text-align:center; font-weight:700; }
.rn-lanes, .rn-grid, .rn-timeline { display:grid; gap:.6rem; margin:.75rem 0; }
.rn-lanes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rn-timeline { grid-template-columns:repeat(4,minmax(0,1fr)); }
.rn-lane { min-width:0; padding:.6rem 0; border-top:1px solid var(--rn-line); }
.rn-lane > b { display:block; margin:.1rem .1rem .55rem; color:var(--rn-ink); }
.rn-lane .rn-flow { margin:0; }
.rn-aside { padding:.72rem .85rem; border:1px solid var(--rn-line); border-left:4px solid #657cad; border-radius:.45rem; background:#f0f3fc; font-size:.9rem; line-height:1.5; }
.rn-aside--warn { border-left-color:var(--rn-warn); background:#fcf0f2; }
.rn-key { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.55rem 0; color:var(--rn-ink); font-size:.83rem; }
.rn-key span::before { content:""; display:inline-block; width:.65rem; height:.65rem; margin-right:.35rem; border-radius:50%; background:var(--rn-blue); }
.rn-key .rn-key--warn::before { background:var(--rn-warn); }
.rn-key .rn-key--ok::before { background:var(--rn-ok); }
.rn-key .rn-key--violet::before { background:#657cad; }
@media (max-width:850px) { .rn-lanes { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) { .rn-flow { flex-direction:column; } .rn-arrow { transform:rotate(90deg); align-self:center; } .rn-grid, .rn-timeline { grid-template-columns:minmax(0,1fr); } }

article p code, article li code, article td code { white-space:normal; overflow-wrap:anywhere; }
.rn-figure .rn-card { box-sizing:border-box; }