/* Default Mode Network lesson. All rules scoped under .dmn-* */
.dmn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dmn-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.dmn-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

.dmn-brain { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; }
.dmn-out { fill: rgba(169,155,255,.12); stroke: rgba(169,155,255,.55); stroke-width: 2.5; }
.dmn-stem { fill: none; stroke: rgba(169,155,255,.45); stroke-width: 12; stroke-linecap: round; }
.dmn-link { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 6 5; }
.dmn-hub circle { fill: var(--gold); }
.dmn-hub .dmn-glow { fill: rgba(252,192,80,.28); }
.dmn-hub text, .dmn-att text { fill: var(--dim); font: 600 13px var(--sans); text-anchor: middle; }
.dmn-att ellipse { fill: rgba(63,214,154,.4); stroke: var(--mint); stroke-width: 2; }
.dmn-att { opacity: .25; }

@media (max-height: 700px) {
  .dmn-brain { max-width: 290px; }
  .dmn-hero img { max-height: 26vh; }
}