/* Gut microbiome lesson. All rules scoped under .gmb-* */
.gmb-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gmb-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 300px; }
.gmb-hero img { display: block; width: 230px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.gmb-hero.sm img { width: 140px; max-height: 20vh; }

/* ---------- the colon ---------- */
.gmb-colon { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.gmb-in { fill: rgba(252, 192, 80, .08); stroke: rgba(252, 192, 80, .35); stroke-width: 1.2; }
.gmb-bed { fill: rgba(229, 138, 154, .1); stroke: rgba(240, 170, 182, .45); stroke-width: 1.5; }
.gmb-wall { stroke: rgba(63, 214, 154, .55); stroke-width: 1.2; transition: fill .4s; }
.gmb-lab { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.gmb-wlab { fill: var(--text); }
.gmb-hit { fill: transparent; cursor: pointer; }
.gmb-m.a rect { fill: #9C86FF; stroke: #CFC4FF; stroke-width: 1.2; }
.gmb-m.b circle { fill: #FCC050; stroke: #FFE3A3; stroke-width: 1.2; }
.gmb-m.c circle { fill: #FF8FB0; stroke: #FFC9D8; stroke-width: 1.2; }
.gmb-m.d path { fill: none; stroke: #5EC8FF; stroke-width: 3.2; stroke-linecap: round; }
.gmb-m.x circle { fill: #E0484E; stroke: #FF9A9E; stroke-width: 1.2; }
.gmb-m.x path { fill: none; stroke: #FF9A9E; stroke-width: 2; stroke-linecap: round; }
.gmb-m.pop { animation: gmbPop .35s ease-out; }
@keyframes gmbPop { 40% { transform: scale(1.35); } }
.gmb-colon.flash .gmb-bed { fill: rgba(255, 255, 255, .22); }
.gmb-p.sug { fill: #FFFFFF; }
.gmb-p.fib { fill: #7ED957; }
.gmb-p.fa { fill: var(--mint); }
.gmb-p.spo { fill: #E0484E; }

.gmb-key, .gmb-gen { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; color: var(--text); }
.gmb-key span, .gmb-leg { display: inline-flex; align-items: center; gap: 6px; }
.gmb-key svg, .gmb-leg svg { width: 22px; height: 22px; }
.gmb-leg { color: var(--dim); font-weight: 600; font-size: 12.5px; }
.gmb-gen b { color: var(--gold); }

/* ---------- bars and facts ---------- */
.gmb-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 7px; }
.gmb-bt { font-size: 12.5px; color: var(--dim); text-align: center; }
.gmb-br { display: grid; grid-template-columns: 116px 1fr 76px; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.gmb-br i { height: 12px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.gmb-br b { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 6px; transition: width .7s ease-out; }
.gmb-br.bac b { background: var(--mint); }
.gmb-br em { font-style: normal; font-size: 12.5px; color: var(--dim); font-weight: 600; }
.gmb-facts { display: flex; gap: 10px; max-width: 340px; }
.gmb-fact { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-strong); font-size: 12.5px; color: var(--dim); text-align: center; }
.gmb-fact b { font-size: 18px; color: var(--text); }

@media (max-height: 700px) {
  .gmb-colon { max-width: 290px; }
}