*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1d2733;background:#e9eef3}
#stage{position:fixed;left:0;top:0;right:380px;bottom:0}#c{width:100%;height:100%;display:block;touch-action:none}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lb{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;font-size:11px;padding:2px 6px;border-radius:9px;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.14);color:#223}
.lb.bto{background:#0f4c6e;color:#fff;border-color:#0f4c6e;font-weight:600}.lb.est{border-style:dashed;color:#665}.lb.road{background:rgba(60,60,60,.78);color:#fff}.lb.unk{background:#fff4d6;border-color:#c9a23a}
#panel{position:fixed;right:0;top:0;bottom:0;width:380px;overflow-y:auto;overflow-x:hidden;background:#fff;border-left:1px solid #d5dde5;padding:16px 18px 40px}
h1{font-size:19px;margin:2px 0}h2{font-size:13px;margin:16px 0 8px;text-transform:uppercase;letter-spacing:.04em;color:#46586a}.sub{margin:0;color:#56687a}
.kicker{font-size:11px;font-weight:700;color:#b04a1a;text-transform:uppercase;letter-spacing:.06em}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.grid button,.seg button{border:1px solid #c7d2dc;background:#f6f8fa;border-radius:8px;padding:6px 3px;cursor:pointer;font:inherit;color:inherit;min-height:42px}
.grid button small{display:block;font-size:10px;color:#667}
.grid button.on,.seg button.on{background:#0f4c6e;color:#fff;border-color:#0f4c6e}.grid button.on small{color:#cfe}
.seg{display:flex;gap:6px}.seg button{flex:1;font-size:13px}
input[type=range]{width:100%}
.small{font-size:12px;color:#5b6b7b}
#result{margin-top:14px;padding:12px;border-radius:10px;background:#f2f7fb;border:1px solid #d6e3ee;overflow-wrap:anywhere}
#result .big{font-size:16px;font-weight:700;margin-bottom:6px}#result ul{margin:6px 0 0;padding-left:18px}#result li{margin:3px 0}
.flag{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;background:#fff1cc;color:#7a5600;border:1px solid #e3c470;margin-left:2px}
details{margin-top:12px;border-top:1px solid #e3e9ef;padding-top:8px}summary{cursor:pointer;font-weight:600}#notes{font-size:12px;color:#445}#notes li{margin:4px 0}
.legend{list-style:none;padding:0;font-size:12px}.legend li{display:flex;gap:8px;align-items:center;margin:5px 0}.legend i{width:18px;height:12px;border-radius:2px;flex:none;border:1px solid #bbb}
.legend i.hatch{background:repeating-linear-gradient(45deg,#fff 0 3px,#d9480f 3px 5px)}
#compass{position:absolute;right:14px;top:14px;width:58px;height:58px}#compass circle{fill:rgba(255,255,255,.92);stroke:#9aabbb}#compass .n{fill:#c0392b}#compass .s{fill:#8a99a8}#compass text{font:700 10px system-ui;fill:#fff}
#modeTag{position:absolute;left:12px;bottom:12px;background:rgba(15,76,110,.92);color:#fff;padding:6px 10px;border-radius:8px;font-size:12px;max-width:calc(100% - 100px)}
@media (max-width:820px){#stage{right:0;bottom:46vh}#panel{top:auto;height:46vh;width:100%;border-left:0;border-top:1px solid #ccd;padding:12px 14px 30px}h1{font-size:17px}#compass{width:46px;height:46px}.lb{font-size:10px}}
.warn{color:#8a2c00}.toggles{margin-top:12px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.lb.unk{background:#d9480f;color:#fff;border-color:#d9480f;font-weight:700}.lb.unkb{background:#5a4a1a;border-color:#5a4a1a}


.lb.vela{background:#16324a;color:#fff;border:1px solid #16324a}
.grid.pr{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}.grid.pr button{font-size:13px;min-height:38px}
.grid button.rentonly{opacity:.55;cursor:default;background:#f4ead9}