*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#07111d;color:#eef5fb}
body{background:radial-gradient(circle at 45% 35%,#13283c 0,#081522 38%,#040a11 100%)}
header{height:82px;display:flex;align-items:center;gap:28px;padding:12px 28px;border-bottom:1px solid #263a4d;background:#07111de8}
header a{color:#72c5ff;text-decoration:none}h1{margin:0;font-size:1.65rem;letter-spacing:.06em}header p{margin:4px 0 0;color:#91a4b6}
main{height:calc(100vh - 82px);display:grid;grid-template-columns:minmax(0,1fr) 330px}
.sim{position:relative;min-height:500px}canvas{display:block;width:100%;height:100%}
.legend{position:absolute;left:18px;bottom:16px;display:flex;gap:18px;color:#9eb0c0;font-size:.82rem}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.person{background:#ffcf5b}.path{background:#56c4ff}
.panel{overflow:auto;padding:20px 22px;background:#0a1724e8;border-left:1px solid #263a4d}
.panel h2{font-size:1rem;letter-spacing:.12em;text-transform:uppercase;margin:5px 0 14px;color:#7bc7fb}
label{display:block;margin:13px 0;color:#bac7d2}label output{float:right;color:white;font-weight:bold}input[type=range]{width:100%;margin-top:8px}
.readouts{margin:18px 0;border:1px solid #294158;border-radius:10px;overflow:hidden}.readouts div{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #20364a}.readouts div:last-child{border:0}.readouts span{color:#91a5b7}.readouts strong{color:#fff}
.buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}button{border:1px solid #35516a;background:#102538;color:#e9f4fc;border-radius:8px;padding:10px 6px;cursor:pointer}button:hover{background:#17354e}.primary{width:100%;background:#197cc7;border-color:#43adfa;font-size:1rem;margin-top:6px}
.check{font-size:.9rem}.check input{margin-right:8px}.note{font-size:.82rem;line-height:1.45;color:#8195a7;margin-top:18px}
@media(max-width:800px){header{height:auto;padding:12px 16px}main{height:auto;display:block}.sim{height:58vh;min-height:390px}.panel{border-left:0;border-top:1px solid #263a4d}.buttons{grid-template-columns:repeat(3,1fr)}}

.zoom-controls{position:absolute;right:18px;top:18px;display:flex;align-items:center;gap:6px;background:#07111dcc;border:1px solid #294158;border-radius:10px;padding:6px;backdrop-filter:blur(5px)}
.zoom-controls button{min-width:38px;padding:7px 10px}.zoom-controls #fit{min-width:auto}.zoom-controls span{min-width:48px;text-align:center;color:#dbe9f4;font-size:.9rem}