.mbb-visual{
  margin:18px 0 22px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg,#fbfdff,#f4f8fe);
  box-shadow:0 5px 16px rgba(15,23,42,.055);
  overflow:hidden;
}
.mbb-visual-title{
  color:var(--primary-dark);
  font-weight:900;
  font-size:16px;
  margin:0 0 8px;
}
.mbb-visual-caption{
  margin:8px auto 0!important;
  max-width:760px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
  text-align:center;
}
.mbb-visual-caption.standalone{
  margin:8px 0 20px!important;
  text-align:left;
}
.mbb-svg{
  display:block;
  width:100%;
  max-width:820px;
  height:auto;
  margin:0 auto;
  overflow:visible;
}
.diagram-panel,.diagram-grid-bg{
  fill:#fff;
  stroke:#d9e4f2;
  stroke-width:1.5;
}
.diagram-grid{stroke:#e5edf7;stroke-width:1}
.diagram-axis{stroke:#718198;stroke-width:2.25;fill:none;stroke-linecap:round}
.diagram-axis.strong{stroke-width:3}
.diagram-line{stroke:var(--primary);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.diagram-line.thin,.diagram-alt.thin{stroke-width:3.5}
.diagram-alt{stroke:#db7918;stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.diagram-point{fill:var(--primary);stroke:#fff;stroke-width:2}
.diagram-point-alt{fill:#db7918;stroke:#fff;stroke-width:2}
.diagram-dash{stroke:#7c8da5;stroke-width:2;stroke-dasharray:7 6;fill:none}
.diagram-heading{fill:#173d72;font-size:15px;font-weight:800;font-family:"Segoe UI",Arial,sans-serif}
.diagram-small{fill:#5f6f85;font-size:13px;font-weight:700;font-family:"Segoe UI",Arial,sans-serif}
.diagram-label rect{fill:#fff;stroke:#d5e0ef;stroke-width:1.2}
.diagram-label text{fill:#314156;font-size:12.5px;font-weight:700;font-family:"Segoe UI",Arial,sans-serif}
.diagram-label .diagram-heading{fill:#173d72;font-size:15px;font-weight:900}
.theta-label{font-family:Cambria,"Times New Roman",serif!important;font-size:20px!important;font-weight:700!important}
.diagram-ramp-fill{fill:#dfeeff;opacity:.72}
.diagram-special-fill{fill:#fff0dc;opacity:.72}
.diagram-angle{stroke:var(--primary);stroke-width:3;fill:none;stroke-linecap:round}
.diagram-angle.alt{stroke:#db7918}
.diagram-right-angle{stroke:#718198;stroke-width:2.5;fill:none}
.diagram-vertical{stroke:#6f42c1;stroke-width:5;stroke-linecap:round}
.diagram-shape{fill:#dbeafe;stroke:var(--primary);stroke-width:3}
.diagram-shape.is-alt{fill:#e8f5e9;stroke:#16805f}
.diagram-shape-text{fill:#173d72;font-size:17px;font-weight:900;font-family:"Segoe UI",Arial,sans-serif}
.diagram-measure{stroke:#718198;stroke-width:2}
.diagram-arrow{stroke:#718198;stroke-width:3;fill:none;marker-end:none}
.diagram-tile{fill:#dbeafe;stroke:#fff;stroke-width:4}
.diagram-tile.alt{fill:#e8f5e9}
.diagram-tile.alt2{fill:#fff0dc}
.diagram-tile.alt3{fill:#f1e8ff}
.diagram-center{fill:#173d72;stroke:#fff;stroke-width:2}
.percent-cell{fill:#fff;stroke:#cad7e7;stroke-width:1}
.percent-cell.active{fill:var(--primary);stroke:var(--primary)}
.bar{fill:var(--primary);opacity:.9}
.bar.alt{fill:#6f42c1;opacity:.82}

.mbb-flow{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  margin:18px 0 22px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg,#fbfdff,#f4f8fe);
}
.mbb-flow-node{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:14px;
  border:1px solid #d6e2f1;
  border-radius:12px;
  background:#fff;
  text-align:center;
}
.mbb-flow-node.is-rule{background:var(--primary-soft);border-color:#bfd5f5}
.mbb-flow-node span,.ratio-block span,.sequence-node span{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.mbb-flow-node strong{color:var(--primary-dark);font-size:16px}
.mbb-flow-node small{color:var(--muted);font-size:12px}
.mbb-flow-arrow,.ratio-symbol{
  align-self:center;
  color:var(--primary);
  font-size:26px;
  font-weight:900;
}

.mbb-sequence{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow-x:auto;
  padding:20px 8px 10px;
  margin-top:10px;
}
.sequence-node{
  flex:0 0 76px;
  display:grid;
  place-items:center;
  gap:3px;
  min-height:76px;
  border:1px solid #c9daf0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.sequence-node strong{font-size:19px;color:var(--primary-dark)}
.sequence-step{
  flex:0 0 auto;
  color:#db7918;
  font-weight:900;
  font-size:14px;
}

.mbb-ratio-visual{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.25fr);
  align-items:stretch;
  gap:10px;
  margin:18px 0 8px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg,#fbfdff,#f4f8fe);
}
.ratio-block{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  padding:16px 10px;
  border:1px solid #d6e2f1;
  border-radius:12px;
  background:#fff;
  text-align:center;
}
.ratio-block.result{background:var(--primary-soft);border-color:#bfd5f5}
.ratio-block strong{font-size:18px;color:var(--primary-dark)}

.graph-text{font-size:13px;font-weight:700}
.visual-box .math-graph{background:#fff;border:1px solid #e0e8f3;border-radius:12px;padding:8px}

@media(max-width:720px){
  .mbb-visual{padding:12px;margin:14px 0 18px;overflow-x:auto}
  .mbb-visual-title{font-size:15px}
  .mbb-visual-caption{font-size:12.5px}
  .mbb-flow{display:grid;grid-template-columns:1fr;padding:12px}
  .mbb-flow-arrow{transform:rotate(90deg);justify-self:center}
  .mbb-ratio-visual{grid-template-columns:1fr;padding:12px}
  .ratio-symbol{text-align:center}
  .mbb-svg{min-width:520px}
}