*{box-sizing:border-box}body{margin:0;background:#faf8f3;color:#263e35;font:15px/1.5 system-ui}header{padding:24px 32px 8px}small{letter-spacing:2px;font-size:10px}h1{font:34px Georgia;margin:10px 0}h2{font:26px Georgia}nav{display:flex;gap:10px;padding:12px 30px;align-items:center;flex-wrap:wrap}button,input,select{padding:10px 14px;border:1px solid #d4dacf;border-radius:7px;font:inherit;background:#fffefb;color:#263e35}button{cursor:pointer}button:hover{background:#e8eee7}#logout{margin-left:auto}#viewport{height:calc(100vh - 230px);min-height:360px;overflow:auto;padding:10px 20px;cursor:grab}#drawing svg{display:block}#drawing [data-person]{cursor:pointer}#drawing [data-person]:hover rect{stroke:#294d3e}footer{padding:12px 30px;display:flex;flex-wrap:wrap;gap:20px;font-size:12px;border-top:1px solid #dedfd6}.sand{color:#a1814b}.green{color:#5c7865}.blue{color:#5a7e95}#generations{position:fixed;left:0;pointer-events:none;overflow:hidden}#generations span{position:absolute;left:0;font-size:11px;white-space:nowrap;background:#faf8f3ed;padding:2px 5px}dialog{max-width:560px;width:92%;border:1px solid #d4dacf;border-radius:12px;background:#fffef9;padding:25px;overflow-wrap:anywhere}dialog::backdrop{background:#263e3566}#close{float:right}#details p{white-space:pre-wrap}a{color:#396c53}.login{max-width:450px;margin:12vh auto;padding:30px}.login label{display:block;margin:20px 0}.login input{display:block;width:100%;margin-top:5px}#error{color:#8d332b}@media(max-width:650px){header{padding:16px}nav{padding:10px}h1{font-size:28px}#viewport{height:65vh}footer{padding:10px}select{max-width:240px}}