:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#e6f0f6;background:#081b2b;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
#viewport{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 8% 8%,rgba(4,25,44,.08),rgba(4,25,44,.65) 28%,rgba(4,25,44,.83) 74%),url('marine-background.png') left top/cover no-repeat}
#canvas{position:absolute;width:3000px;height:2020px;transform-origin:top left}
#lines{position:absolute;inset:0;width:3000px;height:2020px;pointer-events:none}
#lines path{fill:none;stroke:#b4cfdf;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#nodes{position:absolute;inset:0}
.node{position:absolute;background:#e7eff5;color:#14374f;border:1.5px solid #abc0cf;border-radius:10px;box-shadow:0 5px 15px #01121e3b;padding:12px 16px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-size:23px;text-align:center;overflow:hidden}
.node strong{font-size:25px;font-weight:700;line-height:1.16;overflow-wrap:anywhere;max-width:100%}
.node span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15}
.node.group{background:#294d65;color:#eef7fc;border-color:#7797ad;box-shadow:0 4px 12px #01121e3b}
.node.unassigned{background:#e7eff5}
.node.person .role-title{position:absolute;left:12px;right:12px;top:10px;line-height:1.2}
.node.person .fields{position:absolute;left:68px;bottom:11px;width:390px;display:grid;grid-template-columns:135px minmax(0,1fr);row-gap:10px;align-items:baseline;text-align:left;font-size:23px;line-height:1.3}
.node.person.troop .fields{left:28px;bottom:15px}
.node.person .field-label{font-weight:700;line-height:1.3;overflow:visible;white-space:nowrap}
.node.person .field-value{min-width:0;font-weight:400;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#initial{position:absolute;inset:0;display:grid;place-items:center;padding:25px;background:#0d2a40;color:#bed1dd;text-align:center}
#status{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;padding:10px 15px;background:#102c40ed;border:1px solid #7a6849;border-radius:5px;color:#ffd093;font-size:13px;line-height:1.4;text-align:center}
[hidden]{display:none!important}