/* One shared group portrait with four real, keyboard-accessible speech-bubble links. */
.family-guide{margin:0 0 28px}
.family-guide .family-guide-hint{font-size:16px;line-height:1.75;color:#45617c;text-align:center;margin:0 0 18px}
.family-portrait-nav{display:grid;grid-template-columns:minmax(165px,1fr) minmax(0,3.2fr) minmax(165px,1fr);grid-template-rows:1fr 1fr;column-gap:20px;row-gap:22px;align-items:center}
.family-group-photo{grid-column:2;grid-row:1 / 3;min-width:0;overflow:hidden;border-radius:24px;background:#e5f4ff;box-shadow:0 14px 36px #0a46771a}
.family-group-photo img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3 / 2;object-fit:contain}
.family-portrait-nav .family-bubble{--bubble-line:#aed6f4;--bubble-bg:#fff;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:148px;padding:16px 8px;border:2px solid var(--bubble-line);border-radius:26px;background:var(--bubble-bg);color:#123b69;text-align:center;text-decoration:none;box-shadow:0 8px 22px #14486f0d}
.family-bubble::after{content:"";position:absolute;width:17px;height:17px;top:50%;background:var(--bubble-bg);border:2px solid var(--bubble-line);border-left:0;border-bottom:0;pointer-events:none}
.family-bubble-agen{grid-column:1;grid-row:1}
.family-bubble-aimy{grid-column:3;grid-row:1}
.family-bubble-philia{grid-column:1;grid-row:2}
.family-bubble-nyan{grid-column:3;grid-row:2}
.family-portrait-nav .family-bubble-aimy{--bubble-line:#edc4d5}
.family-portrait-nav .family-bubble-philia{--bubble-line:#edcf97}
.family-portrait-nav .family-bubble-nyan{--bubble-line:#a9dccc}
.family-bubble-agen::after,.family-bubble-philia::after{right:-10px;transform:translateY(-50%) rotate(45deg)}
.family-bubble-aimy::after,.family-bubble-nyan::after{left:-10px;transform:translateY(-50%) rotate(-135deg)}
.family-portrait-nav .family-bubble-role{display:block;font-size:15px;line-height:1.5;font-weight:600;color:#49647d}
.family-portrait-nav .family-bubble strong{display:block;font-size:23px;line-height:1.35;font-weight:800;letter-spacing:0}
.family-portrait-nav .family-bubble-reading{display:block;font-size:17px;line-height:1.6;font-weight:700;white-space:nowrap}
.family-portrait-nav .family-bubble-action{display:inline-flex;align-items:center;gap:6px;margin-top:4px;color:#0863b6;font-size:16px;line-height:1.6;font-weight:700}
.family-portrait-nav .family-bubble:hover{--bubble-bg:#f2f9ff;box-shadow:0 10px 25px #14486f21}
.family-portrait-nav .family-bubble:focus-visible{outline:4px solid #ed8d21;outline-offset:5px}
@media(max-width:900px){
 .family-portrait-nav{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;gap:20px 14px}
 .family-group-photo{grid-column:1 / 3;grid-row:2;border-radius:20px}
 .family-bubble-agen{grid-column:1;grid-row:1}.family-bubble-aimy{grid-column:2;grid-row:1}
 .family-bubble-philia{grid-column:1;grid-row:3}.family-bubble-nyan{grid-column:2;grid-row:3}
 .family-portrait-nav .family-bubble{min-height:130px;padding:13px 8px;border-radius:22px}
 .family-bubble-agen::after,.family-bubble-aimy::after{top:auto;bottom:-10px;left:calc(50% - 9px);right:auto;transform:rotate(135deg)}
 .family-bubble-philia::after,.family-bubble-nyan::after{top:-10px;left:calc(50% - 9px);right:auto;transform:rotate(-45deg)}
}
@media(max-width:480px){
 .family-guide .family-guide-hint{font-size:16px;text-align:left;margin-bottom:16px}
 .family-portrait-nav{gap:18px 10px}
 .family-portrait-nav .family-bubble{min-height:124px;padding:12px 5px}
 .family-portrait-nav .family-bubble strong{font-size:21px}
 .family-portrait-nav .family-bubble-reading{font-size:16px}
 .family-portrait-nav .family-bubble-role{font-size:14px}
 .family-portrait-nav .family-bubble-action{font-size:16px}
}