:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#d9eaf1;background:#091722;font-synthesis:none}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;height:100%}body{overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.topbar{height:88px;display:flex;gap:19px;align-items:center;padding:12px 29px;border-bottom:1px solid #254354;background:#0b1c29}.brandmark{width:46px;height:46px;border:1px solid #56c5c8;display:grid;place-items:center;border-radius:10px;font-weight:900;color:#eefcff;letter-spacing:-6px;padding-right:6px;font-size:23px;background:linear-gradient(150deg,#1b5962,#102a3c)}.brandmark span{color:#5fe6e8}.overline,.section-label,.eyebrow{font-size:10px;color:#5d9db0;letter-spacing:.17em;font-weight:800}.brandcopy h1{font-size:23px;letter-spacing:.08em;margin:3px 0 0}.brandcopy h1 span{color:#7fb9c3;font-weight:500}.headline{margin-left:auto;font-size:19px;color:#78e2e7;font-weight:800;display:flex;flex-direction:column;align-items:end;gap:3px}.headline small{color:#a6b9c4;font-size:10px;font-weight:600;letter-spacing:.12em}.status{border-radius:5px;padding:9px 11px;font-weight:900;letter-spacing:.08em;font-size:10px;min-width:119px;text-align:center}.status.online{background:#103c38;color:#72ebc3;border:1px solid #238773}.status.warning{background:#3a2a13;color:#f1b46f;border:1px solid #956734}.status.offline{background:#362027;color:#f3a7a2;border:1px solid #95505a}.workspace{height:calc(100vh - 88px);display:grid;grid-template-columns:minmax(0,1fr) 362px;min-height:450px}.stage{display:flex;position:relative;min-width:0;flex-direction:column;background:radial-gradient(circle at 40% 30%,#17354a,#0b1825 65%)}.viewport{position:absolute;inset:0 0 112px;overflow:hidden;touch-action:none}.viewport canvas{width:100%;height:100%;display:block;outline:0}.viewport-overlay{position:absolute;pointer-events:none;left:28px;z-index:1}.overtop{top:23px}.subtle{color:#839fad;font-size:11px;margin-top:5px}.corner-bottom{bottom:132px;display:flex;gap:11px;flex-wrap:wrap;font-size:10px;color:#b3cdd7;letter-spacing:.08em}.corner-bottom b{color:#54bcc2}.telemetry{position:absolute;bottom:0;height:112px;display:grid;grid-template-columns:repeat(4,1fr);width:100%;background:#0a1b28;border-top:1px solid #30566a}.metric{padding:24px 23px;border-right:1px solid #233b4a}.metric small{display:block;color:#7c9dac;font-size:10px;letter-spacing:.1em;font-weight:700}.metric strong{display:block;font-size:24px;white-space:nowrap;margin-top:9px;color:#e0f6fc}.metric em{font-style:normal;color:#6fcdd6;font-size:12px}.sidebar{overflow-y:auto;border-left:1px solid #2c4e60;background:#0c1e2b;scrollbar-width:thin;scrollbar-color:#345365 #091722}.panel{padding:19px 20px 18px;border-bottom:1px solid #254051}.panel h2{font-size:22px;margin:7px 0 7px}.panel p{color:#99afbd;font-size:12px;line-height:1.65;margin:0 0 11px}.intro{background:linear-gradient(125deg,#123044,#0c1e2b)}button{border-radius:5px;padding:10px 12px;color:#d9eff1;background:#1b374a;border:1px solid #3f6678;font-size:11px;font-weight:800;letter-spacing:.03em}button:hover{background:#295269}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #6df5ef;outline-offset:3px}button.danger{color:#fbc2bd;border-color:#93505a;background:#3a242d}button.teal{background:#15565e;border-color:#3a9fa6}button.ghost{background:#102738;border-color:#2b5466}.button-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.button-row button{flex:1}.control{margin-top:16px}.control label{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:12px;gap:8px}.control output{font-weight:700;color:#79dbe0;font-size:12px}.control input[type=range]{width:100%;height:19px;accent-color:#62d5d6;margin:9px 0 0}.control select{width:100%;margin-top:8px;color:#d6eef4;background:#173549;padding:10px;border:1px solid #396075;border-radius:5px;font-size:12px}.toggles{display:flex;flex-direction:column;gap:11px;margin-top:18px}.toggles.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 5px}.toggles label{font-size:11px;display:flex;align-items:center;gap:7px;color:#bed6e0}.toggles input{accent-color:#4ccfd2;width:15px;height:15px}.infostrip{border-radius:4px;margin-top:20px;padding:12px;background:#122f40;font-size:10px;color:#8ca9b8;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.infostrip b{color:#ccebf0}.bar{height:5px;border-radius:3px;background:#204051;overflow:hidden;margin-top:12px}.bar span{display:block;height:100%;width:92%;background:linear-gradient(90deg,#3b94b8,#59e4cd)}.alert{background:#422d23;padding:10px;border:1px solid #a17642;margin-top:12px;color:#ffcc8f;font-size:11px;line-height:1.5}.hotspots{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.hotspot{font-size:10px;text-align:left;padding:9px;min-height:43px}.hotspot.active{background:#205963;border-color:#68cad0;color:#e7feff}.inspector{border-left:3px solid #50ccd5;padding:12px;margin-top:14px;background:#112d3d}.inspector strong{font-size:12px}.inspector p{margin:6px 0 0;font-size:11px}.export .button-row button{font-size:9px;min-width:90px}footer{padding:20px;color:#87b0bf;font-size:10px;line-height:1.8}footer span{color:#688b99}.error{position:absolute;top:80px;left:24px;right:24px;padding:18px;background:#55242e;color:#ffe5dc;z-index:10;line-height:1.5;border:1px solid #c75f57}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 322px}.metric{padding:18px 12px}.metric strong{font-size:20px}.headline{display:none}}@media(max-width:740px){html,body,#app{min-height:100%;height:auto}body{overflow:auto}.topbar{height:74px;padding:10px 14px;gap:10px}.brandcopy h1{font-size:16px}.overline{font-size:8px}.status{font-size:9px;min-width:auto;padding:8px}.workspace{display:flex;flex-direction:column;height:auto;min-height:0}.stage{height:510px;flex:none}.viewport{inset:0 0 96px}.telemetry{height:96px}.metric{padding:18px 8px}.metric small{font-size:8px;letter-spacing:0}.metric strong{font-size:16px}.metric em{font-size:9px}.corner-bottom{bottom:111px;left:12px;font-size:8px}.viewport-overlay.overtop{left:14px}.sidebar{overflow:visible;border-left:0}.headline{display:none}}