:root{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:#e6e8e6;background:#181e20;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:82px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;background:#202729;border-bottom:1px solid #384143}.brand{display:flex;align-items:center;gap:14px}.logo{font-size:37px;color:#d8b879}h1{font-size:23px;font-weight:600;letter-spacing:.02em;margin:0}header p{margin:5px 0 0;font-size:12px;color:#a8b7b9}.header-right{display:flex;gap:16px;align-items:center}.header-right span{font-size:12px;color:#a8b7b9}button{font:inherit;cursor:pointer;border:1px solid #4b5658;border-radius:6px;background:#2a3335;color:#e7eeed;padding:9px 13px;transition:background .15s}button:hover{background:#3b484b}button:focus-visible,input:focus-visible{outline:2px solid #e7c68b;outline-offset:3px}button.active{background:#d9bc85;color:#242724;border-color:#d9bc85}main{display:grid;grid-template-columns:minmax(0,1fr) 306px;height:calc(100dvh - 82px)}#stage{position:relative;min-width:0;overflow:hidden;background:#d5d0c5}canvas{display:block;touch-action:none}aside{overflow:auto;background:#202729;border-left:1px solid #384143;padding:5px 20px 30px}aside section{padding:20px 0;border-bottom:1px solid #3b4547}h2{font-size:15px;font-weight:600;margin:0 0 10px}p{font-size:13px;line-height:1.8;margin:7px 0}.muted{color:#a8b7b9;font-size:11px}.cameras{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.cameras button{display:flex;gap:9px;align-items:center;text-align:left;padding:12px 9px}.cameras b{font-size:16px;font-weight:400;color:#dfc28e}.cameras span{font-size:12px}.cameras small{display:block;font-size:11px;color:#a8b7b9;margin-top:6px}.cameras button.active small,.cameras button.active b{color:#38443b}.toggles{display:grid;gap:12px;margin-top:15px}label{font-size:12px;cursor:pointer;display:flex;align-items:center;gap:9px}input[type=checkbox]{accent-color:#d9bc85;width:15px;height:15px;margin:0}.wide{width:100%;margin-top:18px;font-size:12px}.route{font-size:11px;line-height:1.9;color:#ddc99d;padding:12px;background:#293333;border-radius:6px;margin-top:13px}.slider{display:block;margin-top:17px}.slider output{float:right;color:#d9bc85;font-variant-numeric:tabular-nums}.slider input{width:100%;accent-color:#d9bc85;margin:12px 0 0}.note p{font-size:11px;color:#a8b7b9}.viewbar{position:absolute;top:18px;left:18px;display:flex;gap:5px;z-index:2;flex-wrap:wrap;max-width:calc(100% - 36px)}.viewbar button{background:#f6f4ee;color:#354144;border:0;font-size:12px;box-shadow:0 3px 12px #0001}.viewbar button.active{background:#253f3b;color:white}#viewCaption{position:absolute;top:72px;left:22px;font-size:12px;color:#3c4e4e;pointer-events:none}.legend{position:absolute;left:20px;bottom:65px;display:flex;flex-wrap:wrap;gap:13px;padding:10px 13px;background:#202729eb;border-radius:6px;font-size:11px;pointer-events:none}.legend span:before{content:"";display:inline-block;width:15px;height:3px;background:var(--c);vertical-align:middle;margin-right:6px}.stage-foot{position:absolute;bottom:0;left:0;right:0;background:#263133f0;color:#c3d0ce;padding:12px 20px;display:flex;justify-content:space-between;gap:10px;font-size:11px}#loading,#error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#34433f;z-index:5;background:#e0ded5}#error[hidden],#loading[hidden]{display:none}#panelToggle{display:none}::selection{background:#d9bc85;color:#202729}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#4e5b5b;border-radius:6px}@media(max-width:850px){header{height:66px;padding:0 15px}h1{font-size:19px}header p{font-size:11px}.header-right span{display:none}#panelToggle{display:block}.header-right{gap:7px}.header-right button{font-size:11px;padding:8px}main{height:calc(100dvh - 66px);display:block}#stage{height:100%}aside{position:absolute;right:0;top:66px;bottom:0;width:min(306px,85vw);z-index:10;display:none;box-shadow:-12px 0 30px #0003}aside.open{display:block}.viewbar{top:12px;left:12px;gap:4px}.viewbar button{font-size:11px;padding:8px 9px}#viewCaption{top:93px;left:15px;max-width:85%;font-size:11px}.stage-foot{padding:10px 13px;flex-direction:column;gap:5px}.legend{bottom:76px;left:12px;right:12px;gap:9px;font-size:11px}}

.header-right a{color:#e1c48c;font-size:12px;text-decoration:none;white-space:nowrap}@media(max-width:500px){.header-right a{font-size:11px}header h1{font-size:16px}.brand{gap:8px}.logo{width:25px}header .header-right{gap:6px}header #reset{display:none}}