/* Dunbar's Number lesson. All rules scoped under .dun-* */
.dun-hero img { width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.dun-sc { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.dun-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dun-band { fill: transparent; transition: fill .6s; }
.dun-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity .6s, stroke .6s; }
.dun-outer .dun-r3 { opacity: 1; stroke: var(--violet-bright); stroke-dasharray: none; stroke-width: 2.5; }
.dun-outer .dun-b3 { fill: rgba(123,92,253,.08); }
.dun-all .dun-ring { opacity: 1; }
.dun-all .dun-r0, .dun-all .dun-r1, .dun-all .dun-r2 { stroke: rgba(169,155,255,.6); stroke-dasharray: none; stroke-width: 1.5; }
.dun-base { stroke: var(--line-strong); stroke-width: 1.5; }
.dun-lab { fill: var(--dim); font: 700 15px var(--sans); text-anchor: middle; opacity: 0; transition: opacity .4s; }
.dun-outer .dun-l3 { opacity: 1; }
.dun-labeled .dun-lab { opacity: 1; }
.dun-time .dun-b0 { fill: rgba(252,192,80,.55); }
.dun-time .dun-b1 { fill: rgba(252,192,80,.22); }
.dun-pct { fill: var(--text); font: 700 17px var(--sans); text-anchor: middle; }
.dun-you circle { fill: var(--gold); }
.dun-folk { display: none; }
.dun-withfolk .dun-folk { display: inline; }
.dun-p circle { stroke: #1A1630; stroke-width: 2; }
.dun-fam circle { fill: var(--mint); }
.dun-fr circle { fill: var(--violet); }
.dun-p text { fill: #fff; font: 700 15px var(--sans); text-anchor: middle; }
.dun-fam text { fill: #10241C; }
.dun-p.dun-called circle { stroke: var(--gold); stroke-width: 4; }
.dun-big { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.dun-big b { font: 700 30px var(--sans); color: var(--gold); }
.dun-big span { font: 500 14px var(--sans); color: var(--dim); }
.dun-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font: 500 13px var(--sans); color: var(--dim); }
.dun-key span { display: flex; align-items: center; gap: 6px; }
.dun-key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dun-kf { background: var(--mint); }
.dun-kr { background: var(--violet); }
.dun-month { text-align: center; font: 500 15px var(--sans); color: var(--dim); }
.dun-month b { color: var(--gold); }
.dun-calls .btn.dun-on { border-color: var(--gold); color: var(--gold); }
.dun-p.dun-quiet circle { opacity: .4; }
.dun-kd { opacity: .4; }