:root{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#c9d9ed;background:#030b17;--blue:#53c4ff;--cyan:#64dfff;--muted:#597490;--line:#56a8e32b}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;background:none;color:inherit;border:0;cursor:pointer}button:focus-visible{outline:2px solid #65dcff;outline-offset:4px}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button:hover{color:#a6edff}button:disabled{opacity:.35;cursor:default}#app{width:100vw;height:100dvh;min-height:480px;position:relative;isolation:isolate}#scene{width:100%;height:100%;display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 42%,#020b19aa 100%);z-index:1}.frame{position:absolute;inset:12px;pointer-events:none;border:1px solid #24527d26;border-left:2px solid #286c9955;z-index:2}.frame:before,.frame:after{content:'';position:absolute;width:20px;height:20px;border-color:#4cb4f688}.frame:before{top:-1px;left:-2px;border-left:2px solid;border-top:2px solid}.frame:after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}header{position:absolute;top:0;left:0;right:0;height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;z-index:5;background:linear-gradient(#030d20c9,transparent);gap:20px;pointer-events:none}.title{display:flex;align-items:center;gap:12px;white-space:nowrap}.title-mark{height:25px;width:3px;background:#6be6ff;box-shadow:0 0 14px #38b9ff}.title h1{font-size:21px;font-weight:550;letter-spacing:1px;margin:0;text-shadow:0 0 20px #2c7fb65e}.title h1 i{font-style:normal;color:#45617c;padding:0 7px;font-weight:300}.title p{font-size:8px;color:#547693;letter-spacing:2.2px;margin:8px 0 0}.title p span{color:#78a3c4;margin-left:11px;border-left:1px solid #36506a;padding-left:12px}nav{display:flex;align-self:flex-start;padding-top:25px;gap:8px;pointer-events:auto}nav button{font-size:13px;letter-spacing:1px;white-space:nowrap;padding:11px 22px;border:1px solid transparent;position:relative;color:#7190ac}nav button.active{color:#d2edff;background:linear-gradient(#1b589d30,#153e8033);border-color:#346da448;box-shadow:inset 0 0 18px #3169c21a}nav button.active:after{content:'';height:2px;position:absolute;bottom:0;left:22%;right:22%;background:#50c6ff;box-shadow:0 0 12px #339dff}.live{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:9px;color:#6185a3}.live>span{height:4px;width:4px;background:#63c8b9;border-radius:50%;box-shadow:0 0 7px #74dacf}time{margin-left:10px;color:#7794b2;letter-spacing:1px;font-variant-numeric:tabular-nums}.line-info{position:absolute;top:107px;left:39px;pointer-events:none;z-index:3}.kicker{font-size:10px;letter-spacing:2px;color:#7093b3}.line-info>div{display:flex;align-items:baseline;gap:7px;margin-top:8px}.line-info b{font-size:25px;font-weight:400;color:#c7eaff}.line-info>div>span{font-size:9px;color:#587894}.line-info strong{font-size:9px;color:#7fabc7;font-weight:400}.line-info i{height:8px;width:1px;background:#3b5579;margin:0 4px}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}.process-label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;padding:12px 19px 11px;min-width:124px;background:linear-gradient(135deg,#071d34ed,#04101ed9);border:1px solid #337caa;box-shadow:inset 0 0 13px #3da3ff0b,0 5px 25px #0006;border-radius:4px;text-align:left;color:#d1e5fa;transition:opacity .2s}.process-label:before{content:'';position:absolute;left:-1px;top:-1px;width:20px;height:11px;border-left:2px solid #60d9ff;border-top:2px solid #60d9ff;filter:drop-shadow(0 0 5px #30c8ff)}.process-label .name{display:block;font-size:16px;font-weight:500;letter-spacing:1px}.process-label .rate{display:block;font-size:23px;font-weight:500;color:#97dd9b;letter-spacing:.7px;margin-top:3px;font-variant-numeric:tabular-nums}.process-label .rate small{font-size:16px}.process-label .sub{font-size:7px;color:#6089a2;letter-spacing:1px;display:none;margin-top:4px}.process-label:hover,.process-label.selected{border-color:#5bd8ff;box-shadow:0 0 16px #14aeff28,inset 0 0 18px #087dab1c}.process-label.package{border-color:#4c8a5a}.process-label.package:before{border-color:#a1da7c;filter:drop-shadow(0 0 4px #61cb78)}.label-wire{position:absolute;width:1px;background:linear-gradient(#418bb2b0,#42caff50);transform-origin:top;pointer-events:none}.label-wire:after{content:'';position:absolute;bottom:-2px;left:-2px;width:5px;height:5px;border:1px solid #6be6ff;background:#123c65;box-shadow:0 0 8px #36b5ee}#toolbar{position:absolute;right:29px;top:50%;transform:translateY(-50%);width:48px;padding:9px 5px;border:1px solid #3d709d4f;background:#031020c7;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:6;box-shadow:inset 0 0 16px #1a50851a,0 10px 30px #0005}#toolbar button{width:36px;height:39px;display:grid;place-items:center;color:#7698b7;border-radius:5px}#toolbar button.selected{color:#649fff;background:#12376844}#toolbar button:hover{background:#14436970;color:#a7eaff}.text-icon{font-size:16px;font-weight:600;letter-spacing:-1px}.tool-divider{height:1px;width:21px;background:#33597c55;margin:3px 0}footer{position:absolute;bottom:39px;left:34px;right:34px;display:flex;align-items:center;justify-content:space-between;z-index:5;pointer-events:none}#legend{display:flex;gap:20px;border:1px solid #2851772b;background:#03102099;padding:15px 18px;pointer-events:auto}#legend button{display:flex;gap:8px;align-items:center;font-size:11px;color:#8ba6bf;padding:0;white-space:nowrap}#legend button.active{color:#d1ecff}#legend button.inactive{opacity:.28}#legend i{height:10px;width:10px;border-radius:50%;display:block}#legend b{font-size:9px;color:#476582;font-weight:400}.running{background:#2c9bff;box-shadow:0 0 9px #2163ff88}.idle{background:#7e9aad}.alarm{background:#ff525d;box-shadow:0 0 9px #ff334344}.stopped{background:#465966}.offline{background:#3c4267}.playback{height:40px;display:flex;align-items:center;gap:10px;background:#03102099;border:1px solid #28517744;padding:0 12px;font-size:9px;color:#6a90b0;pointer-events:auto}.playback button{padding:4px;display:grid;place-items:center}.playback svg{width:15px;height:15px}.playback #speed{width:28px;font-size:11px;color:#96c9ee}.small-divider{height:14px;width:1px;background:#35516b66;margin:0 3px}.hint{position:absolute;left:39px;bottom:19px;font-size:8px;letter-spacing:.3px;color:#365573;z-index:3}.hint span{margin:0 7px;color:#254159}.demo-note{position:absolute;right:37px;bottom:19px;font-size:8px;color:#365573;z-index:3}#detail{position:absolute;right:94px;top:112px;width:286px;max-height:calc(100% - 220px);padding:19px 20px;background:linear-gradient(135deg,#071d31f5,#020d1bf5);border:1px solid #38688e77;box-shadow:0 10px 50px #0005;z-index:7;overflow:auto;backdrop-filter:blur(10px);border-radius:3px}#detail[hidden]{display:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;border-bottom:1px solid #3b5b7833;font-size:9px;color:#6e9abb;letter-spacing:1px}.drawer-head button{display:grid;place-items:center;color:#6b89a2}.drawer-head svg{width:15px;height:15px}#detail h2{font-size:19px;letter-spacing:1px;font-weight:500;margin:18px 0 7px}.device-id{font-size:9px;color:#4a7797;letter-spacing:1.4px}.status-line{display:flex;gap:6px;align-items:center;margin:18px 0;color:#7bbfff;font-size:10px}.status-line i{height:5px;width:5px;border-radius:50%}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 8px;padding:17px 0;border-top:1px solid #3b5b7833;border-bottom:1px solid #3b5b7833}.detail-grid span{font-size:9px;color:#59829f}.detail-grid strong{display:block;font-size:19px;font-weight:400;color:#b8d9ed;margin-top:6px}.detail-grid small{font-size:10px;margin-left:3px;color:#6285a0}.detail-row{display:flex;justify-content:space-between;font-size:10px;margin-top:16px;color:#527d9e}.detail-row b{color:#a2bfda;font-weight:400}.drawer-action{margin-top:19px;width:100%;border:1px solid #357ba24f;background:#10426a3b;padding:10px;color:#8cc8ef;font-size:10px}.alert-note{border-left:2px solid #dd5266;background:#f6405510;padding:10px;font-size:10px;line-height:1.8;color:#d8909b;margin-top:18px}.drawer-note{font-size:8px;line-height:1.8;color:#3d647f;margin-top:16px}#device-list{margin-top:20px;border-top:1px solid #3b5b7833;padding-top:7px}#device-list button{display:flex;width:100%;justify-content:space-between;align-items:center;text-align:left;font-size:10px;padding:11px 5px;border-bottom:1px solid #2c4a622c}#device-list button.active{background:#14426844;color:#a6dcf6}#device-list button small{font-size:8px;color:#466c88}#device-list i{height:5px;width:5px;border-radius:50%}#process-strip{position:absolute;bottom:112px;left:50%;transform:translateX(-50%);width:min(800px,85%);display:flex;gap:1px;border:1px solid #2d638a6b;background:#051426e8;z-index:6;backdrop-filter:blur(10px)}#process-strip[hidden]{display:none}#process-strip button{flex:1;padding:16px 15px;position:relative;text-align:left}#process-strip button+button:before{content:'›';position:absolute;left:-4px;color:#487c9c;top:38%}#process-strip .number{color:#3c6c90;font-size:9px;letter-spacing:2px}#process-strip .name{font-size:12px;display:block;margin-top:5px;color:#abcde5}#process-strip .rate{font-size:12px;color:#8fc994;display:block;margin-top:6px}#process-strip button.active{background:linear-gradient(#166c9d44,transparent)}#toast{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);border:1px solid #36729a99;border-radius:3px;padding:10px 18px;background:#082034ee;opacity:0;pointer-events:none;font-size:11px;z-index:12;transition:opacity .2s}#toast.show{opacity:1}#reference-modal{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#000c;backdrop-filter:blur(10px);z-index:20;padding:35px}#reference-modal[hidden]{display:none}.modal{width:min(1200px,96vw);background:#071728;padding:22px;border:1px solid #3e70914d}.modal>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.modal h2{font-size:15px;font-weight:500;margin:0}.modal img{display:block;width:100%}.modal p{font-size:10px;color:#61839e;line-height:1.8}.modal button{display:grid;place-items:center}#loading{position:absolute;inset:0;background:#030c19;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}#loading span{font-size:13px;letter-spacing:3px;color:#8cc9ef}#loading small{font-size:9px;color:#42637e}.loading-mark{width:42px;height:42px;border:1px solid #225170;border-top-color:#52cfff;transform:rotate(45deg);animation:spin 2s infinite linear;box-shadow:0 0 35px #167ca12b}@keyframes spin{to{transform:rotate(405deg)}}#restore-ui{position:absolute;top:26px;right:30px;z-index:10;border:1px solid #336a91;background:#06192ba0;color:#86bfdc;font-size:10px;padding:9px 16px}#error{position:absolute;inset:40% 20%;z-index:40;background:#142334;color:#f49a9a;padding:30px;font-size:14px;line-height:2}#error[hidden]{display:none}.clean header,.clean footer,.clean #labels,.clean .line-info,.clean .hint,.clean .demo-note,.clean #toolbar,.clean #detail,.clean #process-strip{display:none!important}@media(min-width:1600px){header{padding:0 45px}.title h1{font-size:25px}nav button{padding:12px 30px;font-size:15px}.process-label{padding:14px 23px}.process-label .name{font-size:19px}.process-label .rate{font-size:27px}.line-info{top:120px;left:48px}}@media(max-width:1100px){.live{display:none}header{gap:10px}.title h1{font-size:18px}nav button{padding:10px 14px;font-size:12px}.line-info{top:103px}.process-label{padding:8px 13px;min-width:105px}.process-label .name{font-size:13px}.process-label .rate{font-size:20px}#legend{gap:13px;padding:13px}#legend b{display:none}}@media(max-width:700px){header{padding:20px 24px;height:auto;align-items:flex-start;flex-direction:column;gap:10px}.title h1{font-size:17px}.title p{font-size:7px}nav{padding:0;align-self:auto;gap:3px;margin-left:10px}nav button{font-size:11px;padding:9px 15px}.line-info{top:133px;left:27px}.line-info>div>span:last-child,.line-info i{display:none}.line-info b{font-size:21px}#toolbar{right:20px;width:39px;padding:5px 2px;border-radius:6px}#toolbar button{width:32px;height:34px}#toolbar svg{width:17px;height:17px}.process-label{padding:7px 9px;min-width:87px}.process-label .name{font-size:11px}.process-label .rate{font-size:17px}.process-label .rate small{font-size:12px}footer{left:24px;right:24px;bottom:38px;gap:6px;flex-wrap:wrap}#legend{gap:11px;padding:11px}#legend button{font-size:9px;gap:5px}#legend i{width:7px;height:7px}.playback{position:absolute;bottom:47px;right:0;height:33px}.playback>span:not(.small-divider){display:none}.hint{left:27px;font-size:7px}.demo-note{right:27px;bottom:94px;font-size:7px}#detail{right:66px;top:133px;width:248px;max-height:calc(100% - 230px);padding:15px}.detail-grid strong{font-size:17px}#process-strip{bottom:136px;width:calc(100% - 48px)}#process-strip button{padding:12px 9px}#process-strip .name{font-size:10px}.modal{padding:13px}#reference-modal{padding:12px}}