*{box-sizing:border-box}body{margin:0;background:#fff;color:#263d4a;font:14px/1.65 system-ui,"Microsoft YaHei",sans-serif}main{max-width:1350px;margin:auto;padding:18px}header{display:flex;justify-content:space-between;gap:15px;align-items:start;margin-bottom:15px}h1{font-size:23px;margin:0;line-height:1.4}header p{margin:3px 0 0;color:#71828a}header a{font-size:12px}.views{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}.views section{border:1px solid #d9e3e6;border-radius:6px;overflow:hidden;min-width:0}.view-title{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;background:#f7f9f9;font-size:13px}.view-title span{font-size:11px;color:#70838d}.canvas-host{height:400px;position:relative;background:#eff3f4;touch-action:none}canvas{width:100%;height:100%;display:block}.reticle{position:absolute;inset:44% 44%;border:1px solid #ffffff90;border-radius:2px;pointer-events:none}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:13px 0}button{font:inherit;border:1px solid #c9d7dd;border-radius:4px;background:#fff;color:#294958;padding:6px 12px;cursor:pointer}.primary{background:#256678;color:white;border-color:#256678}.controls label{display:flex;align-items:center;gap:5px;font-size:13px}.timeline{display:grid;grid-template-columns:180px 1fr 35px;gap:12px;align-items:center;font-size:12px;color:#526d79}input[type=range]{width:100%;accent-color:#256678}input[type=checkbox]{accent-color:#256678}button:focus-visible,input:focus-visible{outline:3px solid #d99646;outline-offset:2px}.status{display:flex;gap:28px;align-items:center;border-top:1px solid #dfe6e9;padding-top:12px;margin-top:14px}.status div{display:flex;flex-direction:column}.status b{font-size:20px;line-height:1.2}.status span{font-size:11px;color:#71828c}.status p{font-size:11px;margin-left:auto;color:#687d88}.key{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 3px 0 8px}.blue{background:#247caa}.amber{background:#d99b42}.gray{background:#b9bdc0}details{border-top:1px solid #e3e9ec;margin-top:12px;padding-top:10px;font-size:12px;color:#6b7e86}summary{cursor:pointer}details p{margin:8px 0}a{color:#276a82}#error{color:#a44232}@media(max-width:740px){.views{grid-template-columns:1fr 1fr}.canvas-host{height:310px}.timeline{grid-template-columns:1fr 45px}.timeline span{grid-column:1/-1}.status{gap:16px;flex-wrap:wrap}.status p{margin:0}header a{max-width:90px}}#camera{display:flex;align-items:center;justify-content:center;background:#dce4e6}#camera canvas{flex:none}#camera .reticle{z-index:2}.controls button:active{transform:translateY(1px)}