*{box-sizing:border-box}html,body{margin:0;height:100%;background:#070b14;color:#dbe7f3;font:13px system-ui,Segoe UI,sans-serif}
#app{display:flex;height:100%}#stage{flex:1;display:flex;flex-direction:column;min-width:0}
#map{flex:1 1 0;height:0;width:100%;min-height:0;display:block;touch-action:none}#plot{flex:0 0 230px;height:230px;min-height:0;max-height:230px;width:100%;display:block;border-top:1px solid #1d2b40}
#side{width:330px;overflow:auto;padding:12px;background:#0c1422;border-left:1px solid #1d2b40}
h1{font-size:15px;margin:0 0 8px;color:#8fdcff}.ro{display:grid;grid-template-columns:1fr auto;gap:3px 8px;margin-bottom:8px}.ro b{color:#a9e6ff;text-align:right}
label{display:block;margin:7px 0;color:#c4d4e6}label i{float:right;font-style:normal;color:#a9e6ff}input[type=range]{width:100%}
.pre{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}button,.btns a{background:#16304c;color:#e4f2ff;border:1px solid #2f6a9a;border-radius:7px;padding:7px 9px;font:inherit;cursor:pointer;text-decoration:none}
button:hover,.btns a:hover{background:#1d4c78}.pre button.on{background:#2d7fb8}.btns{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chk{font-size:12px;color:#9fe0b0;margin-bottom:8px;min-height:2.6em}details{margin-top:6px;color:#a9bdd0;line-height:1.45}summary{cursor:pointer;color:#8fdcff}code{color:#ffd23f}
@media(max-width:760px){html,body{height:auto}#app{flex-direction:column;height:auto}#stage{height:auto;flex:none}#map{flex:none;height:60vh}#plot{flex:none;height:200px}#side{width:100%;border-left:0;overflow:visible}}
body.embed #side h1{display:none}