:root{font-family:system-ui,sans-serif;color:#292b2a;background:#f6f4ef;font-size:18px}*{box-sizing:border-box}body{margin:0}.top{position:sticky;top:0;background:#fff;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;padding:1rem;z-index:2;gap:1rem}main{max-width:900px;margin:auto;padding:1rem}a{color:#255c53;overflow-wrap:anywhere}p{line-height:1.65;overflow-wrap:anywhere}article{background:#fff;padding:1rem;margin:1rem 0;border-radius:12px}nav{position:absolute;right:1rem;background:white;padding:1rem;box-shadow:0 5px 20px #0003;max-width:calc(100vw - 2rem);max-height:75vh;overflow:auto}nav a{display:block;margin-bottom:1rem}summary,button{cursor:pointer}button,input,textarea,select{font:inherit;max-width:100%;padding:.65rem}label{display:block;margin:1rem 0}label input,label textarea{display:block;width:100%}label input[type=checkbox]{display:inline-block;width:auto}textarea{min-height:8rem}button{min-height:44px;margin:.3rem;border:1px solid #778f87;border-radius:6px;background:#edf5f2}input,textarea{border:1px solid #aaa;border-radius:4px}.parents{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.parents a,.relatives a{padding:.7rem;background:#e8eee7;border-radius:6px;display:block}.relatives{display:flex;gap:.5rem;flex-wrap:wrap}li{margin:1rem 0}:focus-visible{outline:3px solid #366da0;outline-offset:3px}@media(max-width:340px){.parents{grid-template-columns:1fr}.top{padding:.6rem}main{padding:.7rem}}

.portrait{max-width:100%;max-height:500px;object-fit:contain}