/* Material lighting belongs to the atoms; the stage stays a flat brand color. */
.family-visual { padding: 30px 24px 24px; gap: 0; }
.family-visual::before { display: none; }
.family-visual > svg { display: block; width: 100%; height: auto; max-height: 430px; overflow: visible; }
.family-tab svg { --family-annotation-display: none; height: clamp(100px,9vw,145px); margin-block: 10px 13px; padding: 0; background: transparent; border-radius: 0; overflow: visible; }
.family-model text { font-family: 'Plus Jakarta Sans', sans-serif; }
.family-model__atom-label { font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.family-model__annotation { display: var(--family-annotation-display, inline); fill: #09695e; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; }
.family-model__formula { display: var(--family-annotation-display, inline); fill: #13213c; font-size: 14px; font-weight: 600; letter-spacing: .3px; }
.family-model__bracket { fill: none; stroke: #2456e8; stroke-width: 1.8; }
.family-model__continuation { stroke: #517c82; stroke-width: 3; stroke-dasharray: 5 6; stroke-linecap: round; }
.family-formula { margin-top: 8px; max-width: 460px; font-size: 11px; line-height: 1.8; }
.family-formula a { color: #09695e; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.family-atom-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 16px; margin-top: 18px; color: #376761; font-size: 9px; line-height: 1.6; }
.family-atom-key span { display: flex; gap: 5px; align-items: center; }
.family-atom-key i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 700; }
.family-atom-key__c { background: #28445f; color: white; }
.family-atom-key__f { background: #9fe3d8; color: #174b41; }
.family-atom-key__o { background: #d87952; color: #13213c; }
.family-atom-key__h { background: #fff; color: #13213c; border: 1px solid #afc5d0; }
@media (max-width: 1339px) and (min-width: 1025px) { .family-visual > svg { height: 350px; max-height: none; max-width: 570px; } }
@media (max-width: 1024px) { .family-visual > svg { height: auto; max-width: none; max-height: 350px; } .family-tab svg { height: 90px; } }
@media (max-width: 640px) { .family-visual { padding: 24px 10px; min-height: 0; } .family-visual > svg { height: auto; width: 100%; max-height: none; } .family-tab svg { height: 70px; } .family-formula { max-width: 310px; font-size: 10px; padding-inline: 12px; } .family-atom-key { gap: 8px 12px; margin-top: 15px; font-size: 8px; } }