:root{font-family:Microsoft YaHei,Segoe UI,sans-serif;color:#e9f0f5;background:#171e27;font-synthesis:none;letter-spacing:0}*{box-sizing:border-box}body{margin:0;height:100vh;min-height:660px;display:flex;flex-direction:column;overflow:hidden}button{font:inherit;cursor:pointer;color:#bfccd7;border:1px solid #3d4853;background:#27323e;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 17px;white-space:nowrap;transition:background .15s}button:hover{background:#3b4b59;color:#fff}button:focus-visible{outline:2px solid #59e2ec;outline-offset:3px}button svg{width:18px;height:18px}header{height:100px;flex-shrink:0;padding:0 32px;border-bottom:1px solid #38434e;display:flex;align-items:center;justify-content:space-between;background:#202a35}.brand{font-size:34px;font-weight:750;display:flex;align-items:center}.brand>span{color:#5ed5df}.divider{height:36px;width:1px;background:#4b5560;margin:0 24px}.title{font-size:24px;font-weight:600}.title>span{display:block;font-size:12px;color:#9bacbb;font-weight:400;margin-top:6px}.header-right{display:flex;align-items:center;gap:22px}.demo{font-size:13px;color:#bac6cf}.live{font-size:13px;color:#71e3c0;display:flex;align-items:center;gap:9px}.live:before{content:"";width:7px;height:7px;background:currentColor;border-radius:50%}.icon-button{padding:10px;background:transparent}main{display:grid;grid-template-columns:minmax(0,1fr) 328px;min-height:0;flex:1}.viewport{position:relative;overflow:hidden;background:#28343f}#scene{position:absolute;inset:0}canvas{width:100%;height:100%;display:block;touch-action:none}.scene-head{position:absolute;top:28px;left:30px;right:30px;z-index:2;display:flex;justify-content:space-between;pointer-events:none}.eyebrow{font-size:11px;color:#8aabba;letter-spacing:2px}h1{font-size:23px;font-weight:500;margin:9px 0}h1 small{color:#65838f;font-size:17px;margin-left:10px}.scene-tag{align-self:flex-start;font-size:12px;color:#9eafb9;border-left:2px solid #47c1cb;padding-left:10px;margin-top:6px}.views{position:absolute;bottom:30px;left:30px;display:flex;gap:6px;z-index:4}.views button{background:#1b2632e8;font-size:13px}.views button.active,button[data-speed].active{background:#294d57;color:#87eff3;border-color:#58bdc7}.legend{position:absolute;right:24px;bottom:36px;display:flex;gap:16px;font-size:11px;color:#bccbd3}.legend span{display:flex;align-items:center;gap:6px}.dot{display:inline-block;flex-shrink:0;width:7px;height:7px;border-radius:50%}.cyan{background:#50dcd6}.amber{background:#efac54}.gray{background:#87949f}.scene-coord{position:absolute;bottom:92px;left:31px;font-size:10px;color:#8399a6;letter-spacing:2px}.scene-coord span{margin:0 9px;color:#53b3c3}aside{border-left:1px solid #42505a;background:#202a35;overflow:auto;display:flex;flex-direction:column}aside section{padding:24px;border-bottom:1px solid #3a4651}.section-title{font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:space-between}.section-title>span{font-size:10px;color:#90a4b3;font-weight:400}.small-tag{border:1px solid #3c5a63;padding:3px 5px;color:#69cdd5!important}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.stats span{font-size:12px;color:#9bafbc}.stats strong{display:block;font-size:38px;margin-top:8px;font-weight:500;font-variant-numeric:tabular-nums}.stats em{font-size:12px;color:#98aab8;font-style:normal;margin-left:6px}.stats .timer{font-size:29px;line-height:46px}.mini-stats{display:flex;justify-content:space-between;font-size:11px;color:#93a9b9;margin:15px 0}.mini-stats b{color:#e0eaf0;font-size:14px;margin-left:6px;font-weight:500}.flow{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #3b4853;padding-top:17px;color:#adbecb;font-size:11px}.flow b{color:#57c7d1}.detail h2{font-size:22px;font-weight:500;margin:19px 0 12px}.device-state{display:flex;align-items:center;gap:8px;font-size:12px;color:#74dddf}.normal{margin-left:auto;color:#869ea8;font-size:10px}.detail p{font-size:12px;color:#9cafba;min-height:32px;line-height:1.7;margin:14px 0}dl{margin:0}dl div{display:flex;justify-content:space-between;padding:7px 0;font-size:12px}dt{color:#93a4b4}dd{margin:0;color:#d9e6ee;font-variant-numeric:tabular-nums}.meter{height:3px;background:#354653;margin-top:15px}.meter div{height:100%;background:#62d9db;width:0}.devices{flex:1;padding-bottom:12px}#device-list{margin-top:14px;display:grid;gap:3px}#device-list button{width:100%;justify-content:flex-start;border:1px solid transparent;background:transparent;padding:10px 8px;font-size:12px}#device-list button.selected{border-color:#3b6974;background:#2b404c}#device-list button>span:last-child{margin-left:auto;font-size:10px;color:#8eabb9}.aside-foot{display:flex;align-items:center;gap:8px;padding:16px 24px;font-size:10px;color:#8fa3b2}.aside-foot>span:last-child{margin-left:auto;font-size:9px}footer{height:86px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 32px;background:#202a35;border-top:1px solid #3b4854}.control-main{display:flex;align-items:center;gap:12px}.primary{background:#54cbd4;color:#112b33;border-color:#54cbd4;min-width:110px}.primary:hover{background:#7ee3e9;color:#112b33}.speed{display:flex;gap:4px;align-items:center;margin-left:22px}.speed>span{font-size:12px;color:#9caeba;margin-right:10px}.speed button{font-size:13px;min-width:55px;padding:10px 12px;background:transparent}.footer-note{font-size:11px;color:#8b9ba8;display:flex;gap:10px;align-items:center}.footer-note>span:first-child{color:#cbd8e2;font-weight:600}.footer-note b{font-size:5px;color:#4bb9c4}#labels{position:absolute;inset:0;pointer-events:none}.label{position:absolute;background:#18252ce6;color:#c6dde5;border-left:2px solid #5ac4d0;padding:5px 8px;font-size:13px;white-space:nowrap;transform:translate(-50%,-100%);box-shadow:0 2px 5px #0003}.label.selected{color:#a1f6ef;border-color:#90fff2;background:#204c54ed}#error{position:absolute;inset:35% 15%;padding:25px;background:#27343e;z-index:10;color:#ffc794}@media(min-height:950px){aside section{padding:28px}#device-list button{padding:13px 8px}.detail p{margin:20px 0}.stats{margin-top:28px}}@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 280px}header{padding:0 20px}.header-right{gap:12px}.demo{font-size:10px}.legend{display:none}aside section{padding:18px}.footer-note,.scene-tag{display:none}}@media(max-width:700px){body{height:auto;min-height:100vh;overflow:auto}header{height:auto;min-height:105px;gap:10px;flex-wrap:wrap;padding:14px 16px}.brand{font-size:25px}.divider{margin:0 12px;height:29px}.title{font-size:18px}.title>span{font-size:10px}.header-right{width:100%;justify-content:space-between}.header-right .icon-button{padding:5px}.demo{font-size:10px}main{display:flex;flex-direction:column}.viewport{height:520px;flex-shrink:0}.scene-head{top:18px;left:16px}h1{font-size:19px}.views{left:12px;right:12px;bottom:18px;gap:5px}.views button{flex:1;padding:10px 7px;font-size:11px;gap:5px}.scene-coord{left:17px;bottom:74px}.label{font-size:9px;padding:4px}.overview .stats{margin-top:15px}aside{overflow:visible;border-left:0}.devices,.aside-foot{display:none}.detail p{min-height:0}.overview,.detail{padding:20px}footer{height:auto;min-height:126px;padding:16px;position:static}.control-main{flex-wrap:wrap;width:100%;gap:10px}.control-main>button{flex:1}.speed{width:100%;margin:0;justify-content:space-between}.speed button{flex:1}.stats strong{font-size:30px}.stats .timer{line-height:37px}.detail h2{margin:12px 0}}body{height:100dvh;min-height:0;overflow:hidden}header{height:58px;padding:0 20px}.brand{font-size:22px}.divider{height:24px;margin:0 14px}.title{font-size:15px}.title>span{display:none}.header-right{gap:12px;padding-right:110px}.demo,.live{font-size:10px}.icon-button{padding:3px 10px;font-size:20px}main{grid-template-columns:minmax(0,1fr) 245px}aside section{padding:15px}.overview .stats{margin-top:13px}.stats strong{font-size:27px;margin-top:4px}.stats .timer{font-size:23px;line-height:34px}.detail h2{font-size:19px;margin-top:12px}.detail p{margin:10px 0}.devices{padding:14px}.aside-foot{display:none}#device-list{margin-top:8px}#device-list button{padding:7px 6px;font-size:11px}footer{height:60px;padding:0 20px}button{padding:9px 12px}.speed{margin-left:12px}.footer-note{display:none}.views{left:20px;bottom:20px}.scene-head{top:20px;left:20px}.scene-coord{left:21px;bottom:74px}h1{font-size:19px}.legend{display:none}.label{font-size:11px}@media(max-width:850px){main{grid-template-columns:minmax(0,1fr) 205px}.demo{display:none}.detail p{font-size:11px}.speed>span{display:none}.scene-tag{display:none}}@media(max-width:600px){body{height:100dvh;overflow:hidden}header{height:50px;min-height:50px;flex-wrap:nowrap;padding:0 12px}.brand{font-size:17px}.divider{margin:0 8px}.title{font-size:12px}.header-right{width:auto;padding-right:100px;margin-left:auto}.live{display:none}.header-right .icon-button{padding:1px 7px}.brand>.divider,.title{display:none}main{display:block;position:relative;min-height:0}.viewport{position:absolute;inset:0;height:auto}aside{display:none}.scene-head{left:15px;top:14px}h1{font-size:17px}.views{left:10px;right:10px;bottom:12px}.views button{padding:9px 5px;font-size:10px}.scene-coord{bottom:63px;left:14px}.label{font-size:9px}footer{height:64px;min-height:64px;padding:10px}.control-main{flex-wrap:nowrap;gap:6px}.control-main>button{flex:0 1 auto;font-size:10px;padding:8px;min-width:48px}.speed{width:auto;margin:0 0 0 auto;gap:3px}.speed button{min-width:35px;padding:8px 5px;font-size:10px}}