:root{font-family:Segoe UI,Arial,sans-serif;color:#dbe8e8;background:#0a1216;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,footer{padding:22px 4%;display:flex;justify-content:space-between;border-bottom:1px solid #233035;align-items:center}.brand{color:#5ce2bc;font-size:23px}.brand span{font-size:10px;letter-spacing:2px;color:#82979e;margin-left:22px}#connection{font-size:13px;color:#f0c978}main{max-width:1600px;margin:auto;padding:35px 4%}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}small{font-size:10px;letter-spacing:2px;color:#75a99e}h1{font-size:clamp(26px,3vw,43px);letter-spacing:-1.5px;margin:12px 0}p{color:#8b9fa6;font-size:14px}.device{font-size:13px;text-align:right;line-height:2}.device span{color:#789099;font-family:monospace}.layout{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.scene{border:1px solid #25383c;border-radius:15px;overflow:hidden;background:radial-gradient(ellipse at center,#1b343a,#0f1a20)}.scene-top,.scene-bottom{display:flex;justify-content:space-between;padding:16px 20px;color:#8caaa9;font-size:11px;align-items:center}#viewport{height:430px;touch-action:none}canvas{display:block;width:100%;height:100%}.scene-bottom{border-top:1px solid #243a3e}.scene-bottom span{color:#607a81}.card{background:#101d22;border:1px solid #24343a;border-radius:15px;padding:22px}.card-title{display:flex;justify-content:space-between;align-items:center;gap:10px}h2{font-size:18px;font-weight:500;margin:12px 0 18px}button{background:#1a3035;color:#c3d9da;border:1px solid #365158;padding:9px 12px;border-radius:7px;cursor:pointer}button:hover{border-color:#60d9b8}button:disabled{opacity:.35;cursor:not-allowed}.channel{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #223238}.channel.selected{background:#193631}.channel b{font-size:13px}.dot{display:inline-block;width:7px;height:7px;background:#5e6f74;border-radius:50%;margin-right:10px}.on .dot{background:#5ce2bc;box-shadow:0 0 12px #5ce2bc}.channel span{font-size:11px;color:#839ba2}.channel button{padding:5px 12px;margin-left:6px}.hint{font-size:11px;line-height:1.5;margin-bottom:0}.led-card{margin-top:16px}.led-controls{display:flex;gap:10px;margin:15px 0}input{color:#dbe8e8;background:#15262b;border:1px solid #31484f;border-radius:7px;padding:10px}input[type=color]{width:48px;height:37px;padding:3px}#ledstatus,#outfresh{font-size:11px;color:#8ba3a6}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.metric{border-left:2px solid #59d5af;background:#101d22;padding:18px}.metric strong{display:block;font-size:27px;font-weight:500;margin:10px 0}.metric span{color:#829a9f;font-size:12px}.table-wrap{max-height:340px;overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{color:#779399;font-size:10px;letter-spacing:1px;position:sticky;top:0;background:#101d22}th,td{padding:12px;border-bottom:1px solid #223238}td:last-child{color:#73b5a6}#notice{padding:12px 0;min-height:25px}footer{font-size:10px;color:#66848a;border-top:1px solid #24343a}button:focus-visible,input:focus-visible{outline:2px solid #5ce2bc;outline-offset:3px}@media(max-width:1000px){.layout{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.device{display:none}.brand span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}