.bio-interactive {max-width:820px}
.bio-interactive h1 {margin-bottom:18px}
.bio-help {color:#aabcb2;font-size:.875rem;line-height:1.6;margin-bottom:36px;max-width:55ch}
.bio-prose p {text-wrap:pretty}
.bio-reference {color:#dcf1bd;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:#a3c87e;text-decoration-thickness:1.5px;text-underline-offset:.23em;border-radius:3px;transition:color .15s ease,background-color .15s ease}
.bio-reference:hover,.bio-reference:focus-visible {color:#f0ffd7;background:#334736;text-decoration-style:solid;outline:2px solid transparent;outline-offset:4px}
.bio-reference:focus-visible {outline-color:#d5bd8c}
.bio-peek[hidden] {display:none}
.bio-peek {position:fixed;z-index:10020;width:min(340px,calc(100vw - 32px));margin:0;border:1px solid #668269;border-radius:12px;background:#14221c;color:#f4f2e8;box-shadow:0 16px 48px #0008;overflow:hidden;animation:bio-reveal .14s ease-out}
.bio-peek>img {display:block;width:100%;height:190px;object-fit:contain;background:#080e0b}
.bio-peek>div {padding:14px 16px 16px}
.bio-peek strong {display:block;font:600 1.05rem/1.4 "Segoe UI",sans-serif}
.bio-peek span {display:block;margin-top:6px;color:#b4c5b8;font-size:.82rem;line-height:1.5}
.bio-peek small {display:block;margin-top:10px;color:#d5bd8c;font-size:.72rem}
.bio-dialog {position:fixed;inset:0;margin:auto;width:min(940px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid #506855;border-radius:16px;color:#f4f2e8;background:#14221c;overflow:auto;box-shadow:0 24px 100px #0008;overscroll-behavior:contain}
.bio-dialog::backdrop {background:#030906db;backdrop-filter:blur(5px)}
.bio-dialog[open] {animation:bio-reveal .18s ease-out}
.bio-dialog-visual {background:#060b08;min-height:160px}
.bio-dialog-visual img {display:block;width:100%;height:min(45dvh,480px);object-fit:contain}
.bio-close {position:absolute;right:12px;top:12px;z-index:1;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #bbc8bc80;border-radius:50%;font:300 32px/1 "Segoe UI",sans-serif;color:#fff;background:#0b1611ed;cursor:pointer}
.bio-close:hover {background:#334736}
.bio-dialog-body {padding:24px 30px 28px}
.bio-ref-universe {font-size:.72rem;font-weight:600;letter-spacing:.14em;color:#d5bd8c;line-height:1.5}
.bio-dialog h2 {font-family:Georgia,serif;font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;margin:10px 0 12px}
.bio-dialog p {max-width:70ch;font-size:1rem;line-height:1.65;margin:0 0 18px;color:#e0e7db}
.bio-ref-credit {font-size:.72rem;color:#a9bbad;line-height:1.6}
.bio-dialog-actions {display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid #34483a}
.bio-dialog-actions>a {color:#dcf1bd;font-size:.9rem;text-underline-offset:.25em;min-height:44px;display:inline-flex;align-items:center}
.bio-pagination {display:flex;align-items:center;gap:12px}
.bio-pagination button {width:44px;height:44px;border:1px solid #59715d;border-radius:8px;background:#1b3023;color:#f4f2e8;font-size:1.2rem;cursor:pointer}
.bio-pagination button:hover {background:#334736}
.bio-pagination span {font-size:.8rem;color:#b4c5b8;min-width:3.5em;text-align:center}
.bio-dialog :focus-visible {outline:2px solid #d5bd8c;outline-offset:3px}
body.bio-modal-open {overflow:hidden}
@keyframes bio-reveal {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:540px){
 .bio-interactive {padding-top:32px}
 .bio-help {margin-bottom:28px;font-size:.8rem}
 .bio-dialog {width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:12px}
 .bio-dialog-body {padding:20px}
 .bio-dialog-visual img {height:min(36dvh,300px)}
 .bio-dialog-actions {gap:8px}
 .bio-peek {display:none}
}
@media(prefers-reduced-motion:reduce){.bio-reference{transition:none}.bio-peek,.bio-dialog[open]{animation:none}}